I'm trying to create a new template for my portfolio using a list on the left side to orient the viewer and provide an easy way to access sections. I am using Scrollspy in Bootstrap 5.2.3 and things are looking ok except the side list seems to have some built in padding which is wasting space on the page and creating too much distance between the list and content on large pages. Any ideas on how to fix this? Please see my Pen for code reference. (the large grey box on top is a placeholder for an image.
Thanks much.
https://codepen.io/rachelmax/pen/MWBQzMd
.nav-link {
line-height: 3;
color: #737373;
margin: 0;
border: 0;
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
border-bottom-right-radius: 10;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
color: #DF00F5;
background-color: #ebebeb;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Testing Code 5</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="pt-5" style="height:500px; background:grey;">
</div>
<div class="container-12">
<div class="row">
<div class="col-3">
<nav id="navbar-example3" class="h-100 pe-5">
<nav class="nav nav-pills flex-column sticky-top">
<a class="nav-link" href="#item-1">Problem</a>
<a class="nav-link" href="#item-2">Team & Role</a>
<a class="nav-link" href="#item-3">Research</a>
<a class="nav-link" href="#item-4">Iterations</a>
<a class="nav-link" href="#item-5">Results</a>
</nav>
</nav>
</div>
<div class="col-8 mt-4">
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
<div id="item-1">
<h5>Item 1</h5>
<p>....</p>
</div>
<div id="item-2">
<h4>Item 2</h4>
<p>....</p>
</div>
<div id="item-3">
<h4>Item 3</h4>
<p>....</p>
</div>
<div id="item-4">
<h4>Item 4</h4>
<p>....</p>
</div>
<div id="item-5">
<h4>Item 5</h4>
<p>....</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
Bootstrap’s grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follows:
Extra small (xs)
Small (sm)
Medium (md)
Large (lg)
Extra large (xl)
Extra extra large (XXL)
Grid system · Bootstrap v5.3
Each of these breakpoints has its own container, unique class prefix, and modifiers. So in your case, you will have to adjust your column sizing for xl.
You also have pe-5 which indicates padding-right: 3rem !important; which is also adding to the gap.
A Pen for Rachel
.nav-link {
line-height: 3;
color: #737373;
margin: 0;
border: 0;
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
border-bottom-right-radius: 10;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
color: #DF00F5;
background-color: #ebebeb;
}
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Testing Code 5</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<div class="pt-5" style="height:500px; background:grey;">
</div>
<div class="container-12">
<div class="row">
<div class="col-xl-1 col-3">
<nav id="navbar-example3" class="h-100">
<nav class="nav nav-pills flex-column sticky-top">
<a class="nav-link" href="#item-1">Problem</a>
<a class="nav-link" href="#item-2">Team & Role</a>
<a class="nav-link" href="#item-3">Research</a>
<a class="nav-link" href="#item-4">Iterations</a>
<a class="nav-link" href="#item-5">Results</a>
</nav>
</nav>
</div>
<div class="col-xl-11 col-9 mt-4">
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
<div id="item-1">
<h5>Framing the Problem</h5>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize
the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content
for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.<br><br> This is some placeholder content for the scrollspy
page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in
mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page. Note that as
you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript
plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
</p>
</div>
<div id="item-2">
<h4>Team & Role</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize
the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content
for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.<br><br> This is some placeholder content for the scrollspy
page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in
mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page. Note that as
you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript
plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
</div>
<div id="item-3">
<h4>Research</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize
the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content
for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.<br><br> This is some placeholder content for the scrollspy
page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in
mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page. Note that as
you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript
plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
</div>
<div id="item-4">
<h4>Iterations</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize
the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content
for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.<br><br> This is some placeholder content for the scrollspy
page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in
mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page. Note that as
you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript
plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
</div>
<div id="item-5">
<h4>Results</h4>
<p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize
the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content
for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.<br><br> This is some placeholder content for the scrollspy
page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in
mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page. Note that as
you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript
plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
Related
I am new to HTML. In my HTML code I have different sections. In my projects section I have 3 child sections but somehow my resume section header which is underneath my projects section and a separate section display as part of the projects section.
link to my repository: https://jobarkhuizen.github.io/FreeCodeCampPersonalPage/
I run my code through W3C validator and included the source, outline and clean up html in the run. Validator run return no error and the outline shows that Projects and Resume sections are both children of the Body tag and Columns Tribute page, Landing page and Technical page are children of Projects section
<section id="projects">
<h2><a id="portfolio">Projects</a></h2>
<section id="col1"><h3 style="text-align: center;">Tribute Page</h3>
<a href="https://jobarkhuizen.github.io/FCC_Tribute_Page/" target="_blank">
<img class="project-tile" src="tributepage.jpg" alt="Tribute Page Picture"></a>
<p>The following guidelines was provided for the tribute page. It should have a div element with a corresponding id="img-div". Within the img-div element, there should be an img element with a
corresponding id="image". Within the img-div element, there should be an element with a corresponding id="img-caption" that contains textual
content describing the image shown in img-div. There should be an element with a corresponding id="tribute-info", which contains textual content
describing the subject of the tribute page. Ther should be an a element with a corresponding id="tribute-link", which links to an outside site
that contains additional information about the subject of the tribute page, this link must open in a new tab. The img element should responsively
resize, relative to the width of its parent element, without exceeding its original size and should be centered within its parent element.
</p>
</section>
<section id="col2"><h3 style="text-align: center;">Landing Page</h3>
<a href="https://jobarkhuizen.github.io/LandingPage/" target="_blank">
<img class="project-tile" src="Landingp.jpg" alt="Landing Page Picture"></a>
<p>The following guidelines was provided for the product landing page. The page should have a header element with a corresponding id="header".
An image within the header element with a corresponding id="header-img".
Within the #header element a nav element with a corresponding id="nav-bar".
At least three clickable elements inside the nav element, each with the class nav-link.
When you click the nav-link button in the nav element, it goes to the corresponding section of the landing page.
Embed a watch-able video with id="video".
A form element with a corresponding id="form". Within the form, there is an input field with id="email" where you can enter an email address.
The #email input field should have placeholder text to let the user know what the field is for and uses HTML5 validation to confirm text is correct.
Within the form, there is a submit input with a corresponding id="submit".</p>
</section>
<section id="col3"><h3 style="text-align: center;">Technical Page</h3>
<a href="https://jobarkhuizen.github.io/FCC-Technical-Page/" target="_blank">
<img class="project-tile" src="technicalp.jpg" alt="Technical Page Picture"></a>
<p>The following guidelines was provided for the technical page. Should have a main element with a corresponding id="main-doc", which contains the page's main content.
Within the #main-doc element, you should have several section elements, each with a class of main-section.
The first element within each .main-section should be a header element which contains text that describes the topic of that section.
Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it.
Any spaces should be replaced with underscores (id="Javascript_and_Java").
The .main-section elements should contain at least 10 p elements in total.
The .main-section elements should contain at least 5 code elements in total.
The .main-section elements should contain at least 5 li items in total. A nav element with a corresponding id="navbar".</p>
</section>
</section>
<section>
<h2><a id="resume">Resume</a></h2>
<p>Studying Responsive Web Design through FreeCodeCamp. My next project is studying and completing JavaScript and SQL.</p>
<p>I have done automated testing on Winrunner and QTP and managed projects through TestDirector.</p>
<p>Did testing in both waterfall and agile development environments. </p>
<p>This portfolio page is for Freecodecamp certification. I have loaded a personal portfolio page on my Github account which I will update as soon as possible.</p>
</section>
The headings should have a brown background only and be center aligned, but my whole Projects section has a brown background and the Resume heading is on the right side of the page within the projects section
When you use css float property as left, then the content flows to the right of that element. This is unlike the normal flow of block elements which is vertically stacking one below another.
There are many ways to get around this, one way suggested in the spec is to use clear as both:
both: Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that
resulted from elements earlier in the source document.
So make your resume section as
<section class="resume">
</section>
and add its css as:
.resume {
clear: both;
}
For the complete story refer Visual Formatting Model
Also, note that CSS has introduced a number of new features that we dont have to use floats for a column layout. We have grid and flex layouts for the same.
Please use the below code
CSS
<pre>
<style>
.clear{clear:both;}
</style>
<section id="projects">
...
</section>
<div class="clear"></div>
</pre>
I have a sidebar which contains the main navigation for the app. It also contains a button which triggers the open/close of the sidebar. In terms of semantics, how should the markup look like?
Should i wrap the sidebar in aside and then have a nav around only
the main navigation, excluding the open/close trigger.
Or wrap the whole sidebar in a nav including the open/close trigger
Or wrap the sidebar in a section, which contains a nav excluding the
open/close trigger?
Or not have any section or aside, but only have a nav excluding the trigger, in which case am I still following the below best practice. Should the trigger be treated as content? or something that should be part of the outline of the web page?
The [W3][1] suggests:
It is a best practice to include ALL content on the page in landmarks,
so that screen reader users who rely on them to navigate from section
to section do not lose track of content.
The current structure resembles this:
sidebar
main nav
nav item 1
nav item 2
trigger to open/close the sidebar
The <aside> element is used for tangentially related content to main content of the page and are often represented visually as sidebars. Using it for navigation would not be completely confusing to a screen-reader, but you must, in this case, add a role of either complementary or region to it.
I would expect this <aside> to group at least several different <nav> elements, so for your use-case of having a single menu, I would definitely just go with having the sidebar menu area be a <nav>. Remember to give it a nice aria-label by the way. Something like aria-label=“Primary” will suffice for your primary navigation.
Consider hiding the toggle button for screen-readers with aria-hidden=“true”, if toggling does not do them any good. In that case the <nav> must never be hidden with display: none as it would render it invisible and un-toggleable to screen-readers.
<nav aria-label="Primary”>
<button aria-hidden="true">Toggle menu</button>
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
</ul>
</nav>
I'm taking over website maintenance for a utility company. The previous developer used far more <div>s than I would. Most make sense to me, but I'm puzzling over this one:
<html>
<head></head>
<body>
<div id="wrapper">
<!-- All of the page content - header, footer, whatever -->
</div>
</body>
</html>
Everything in the <body> tag is surrounded by an additional named <div>. There's nothing before it or after it.
Is there a benefit to having a <div> there? My understanding is that all styling could be applied directly to <body> with the same effect. Even JavaScript could do identical things if I just declared <body id="wrapper">, couldn't it?
It's usually used for the sake of styling, e.g.,
body{
background-color: #FFF;
}
#wrapper{
background-color: #000;
width: 80%;
margin: 0 auto;
}
The above is for a simple ~10% left and right white border on the page.
Although slightly OT, there is no HTML5 element for this. I have seen <main> used in its place, however, quoting from the MDN article for <main>:
The main content area consists of content that is directly related to,
or expands upon the central topic of a document or the central
functionality of an application. This content should be unique to the
document, excluding any content that is repeated across a set of
documents such as sidebars, navigation links, copyright information,
site logos
Is it possible to do this layout and how would you do it?
The container has a border, just not on top where the tabs are. Here only the selected tab has a top border. The text of the tabs should center, left align would be okay too. But the text of the first tab must not start before the image (there should be the same space on the left).
Currently the html looks like this but can be changed if needed:
<section class="grid-100 grid-parent tabs">
<header>
<ul>
<li class="selected">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</header>
<article class="tab visible">content</article>
<article class="tab">content</article>
<article class="tab">content</article>
</article>
</section>
This layout is possible, but as mentioned you'll need to post your CSS.
Have a look at Twitter Bootstrap which allows you to placed tabbed content within a responsive framework.
You'll need to add a bit of JS to get this running, you can either do this by adding "bootstrap.min.js" or just add the tab script by itself. Here's a direct link to the tab JS documentation http://getbootstrap.com/2.3.2/javascript.html#tabs
Your structure can be used for any tabbed interface or an accordion. Please provide your css for your tabs. You can use bootstrap tabs as mention in this post. There some other tabbed solution like foundation tabs and jQuery ui tabs. If your looking for a premium responsive tabbed solution, have a look zozo tabs, which has a lot of examples.
http://zozoui.com/tabs
cheers
FariDesign
I'm trying to optimize my pages via CSS for printing from the browser. The problem I'm having is setting up the page breaks properly. I have it preventing page-breaks in the middle of images and blocks of text that shouldn't be separated exactly how I want. However, the problem I'm having is that sometimes there's a horizontal rule separating a new section and then just the title of the next section (and potentially a description of that section), with the rest of the actual section displayed on the next page. This is confusing and poor formatting, as normally if the title of the section is that close to the bottom of the page, you'd just throw in a page break before it to bump the whole thing to the next page and not worry about the tiny amount of space on the previous page you're sacrificing.
The HTML here is very simplistic. It's not wrapped in a million things, just a horizontal rule, header, paragraph with a description, then the content of the section. What I tried to do is wrap the header and description in a division together and make it so it can't page-break inside or after, like so:
<a id="section_1"></a>
<div class="no-page-break">
<h2>Section 1</h2>
<p>Section 1 Description</p>
</div>
<div>
<!-- all the content for this section -->
</div>
<hr />
<a id="section_2"></a>
<div class="no-page-break">
<h2>Section 2</h2>
<p>Section 2 Description</p>
</div>
<div>
<!-- all the content for this section -->
</div>
<!-- and so on -->
.no-page-break { page-break-after: avoid; page-break-inside: avoid }
I was hoping it would see the entire block as un-breakable and bump the whole thing down to the next page, but it didn't do anything. Maybe I've just been staring at this problem for too long. Does anyone know how I could prevent each section of my page from breaking up in this manner?
Note: I don't want it to always break before each section, as that could potentially waste a lot of page space if there's only a little bit leftover from the previous one.
Bonus: If anyone knows how you'd be able to hide the horizontal rule if it broke at that point, that'd be helpful too. But that's just a minor annoyance that I'm not really worried about.
The only way I can think of is to move the horizontal rule into the bottom of the last section and before you want the page break. Then wrap all the next section in a node and add no-page-break to that. There are too many factors when printing that the browser just cannot detect so if you can cleverly group things it will help a lot.