I've followed various tutorials over the last few days and am having difficulties with the (sticky) header overlapping the content below it when my page is scrolled vertically.
It's on all pages of this test site.
HTML >
<header>
<div id="nav">
<ul>
<li>Home</li>
<li>Collection</li>
<li>Shop</li>
<li>FAQ/Policies</li>
<li>Contact</li>
</ul>
</li>
</ul>
<br class="clearboth"/>
</div>
</header>
<br>
<div class="table">
CSS >
header {
margin-left: auto;
margin-right: auto;
text-align: center;
position: fixed;
z-index: 10;
}
.table {
margin-left: 75px;
text-decoration: none;
margin-top:300px;
}
Actually you were almost there with your code as it was. You simply need to give the header a background colour, as that is transparent by default, and also give a width of 100%. Then the scrolling content will disappear up behind it.
Also best to tidy it up by setting the body margin and padding to zero. So add this to your CSS:
body{
margin: 0;
padding: 0;
}
header {
background: white;
width: 100%;
}
That will achieve what you want initially. Now, however, comes the interesting bit that most people omit. I'm not quite sure why you have given the table div a margin of 300px, as that is much larger than you need. But do not set this in pixels at all! Because using fixed measurement means that as soon as a partially sighted user running with text-only zoom (a lot depends on their browser) sees the page, the header will overlap the content, hiding it, so undoing all your hard work! Use em units.
The menu in your example has 5 lines, plus there is a blank line above and two or three more below, so allow 9em in all for the header (you choose the value according to how high your final header actually is), and do this:
.table {
margin-top: 9em; /* instead of 300px */
}
Now, whatever text zoom the user is using, your content's top margin will grow accordingly, and the content will always start just below the header.
Add below css into your top header class:
z-index: 99;
As:
<header style="z-index:99">
<div id="nav">
<ul>
<li>Home</li>
<li>Collection</li>
<li>Shop</li>
<li>FAQ/Policies</li>
<li>Contact</li>
</ul>
</li>
</ul>
<br class="clearboth"/>
</div>
</header>
Related
I have a header for my website that looks good fullscreen on a 1080p resolution, but if I shrink the website or move it to a larger resolution like 1440p, the elements move out of position or overlap. Example below of how it should look
This is how it looks when I change resolutions:
Or if I cut the screen in half:
Is there a way to fix this? My header :
header {
background-color: #032541;
position: relative;
top: 0;
left: 0;
right: 0;
height: 70px;
display: flex;
align-items: center;
max-width: 100%;}
I used this format for my html, my code just has different contents than the example below, but it is a ul with many li a elements inside. I got the example from https://codetheweb.blog/style-a-navigation-bar-css/
<header>
<img src="https://codetheweb.blog/assets/img/icon2.png">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Pricing</li>
<li>Terms of use</li>
<li>Contact</li>
</ul>
</nav>
</header>
I was using padding-left to move each item to the position I wanted it, is there a better way? Im not sure how to create a header/nav bar where the elements are split up with space between. Thank you.
I am working on a sample website for a possible client and I have gotten this to work before but can't replicate it. Basically, I have the title div which is the blue box, I have the header/menu bar which should be right under it. And finally, I have the large image resembling the rest of the website that is below the header. I want the menu bar/header to (when the site loads) begin positioned just below the Title div. And as you scroll down to browse the website it moves up until it reaches the top of the site and then it works as a fixed position, preferably I'd like to accomplish this using the CSS position: sticky;
What I have in the following script in the CSS seems to make the header act as a fixed position rather than anything else. Even if I offset it using top: 90px; I have tried having a div surround the entire page except for the title and placing the header inside to use as a sort of container, didn't work. I've tried not using an encompassing div at all. Nada...
CSS:
#sticky {
position: sticky;
background: orange;
top:90px;
z-index: 50;
width: 100%;
height:50px;
}
HTML:
<body>
<div id="title">
</div>
<div id="sticky">
<ul id="ulHeader">
<li>Home</li>
<li>Menu</li>
<li>Find Us</li>
<li>Contact Us</li>
</ul>
</div>
<div id="image">
<img src="images/tacos.jpeg">
</div>
I don't receive any error messages and I expect, using this code, for the header/menu bar to begin 90px from the top of the page and as you scroll for it to get stuck at the top once you scroll far enough. Unfortunately what ends up happening is the header simply stays 90px from the top consistently like a fixed element.
Update the top to be 0px so that it sticks at top of the page
#sticky {
position: sticky;
background: orange;
top:0px;
z-index: 50;
width: 100%;
height:50px;
}
You can also have a look at this example
I'm working on a single page web design, i want to use hrefs with # to link different places in the same archive, the desired functionality is to move to the link location when clicking, this works BUT, only if i float left A,B divs,
i dont understand this, A and B divs are containing other stuff already, but if i dont put the float: left in the css, links dont work. Why is that?
#A,
#B {
float: left;
}
.cont1 {
width: 100%;
height: 1500px;
background-color: #2077a5;
float: left;
}
<div id="nav">
<ul>
<li>About
</li>
<li>Portfolio
</li>
</ul>
</div>
<div id="A">
<div id="about" class="cont1">
About page content goes here.
</div>
</div>
<div id="B">
<div id="portfolio" class="cont1">
Portfolio page content goes here.
</div>
</div>
EDIT: Wow, that are some fast answers, thanks a lot, i think im not being understood, my question is WHY if i dont set any style for A and B divs links dont work, dont they expand a locate automatically by being containers of style defined divs?
If you insist on using the float:left; for #A and #B, add clear:both; to that first rule to have them NOT begin at the same line(in which case the local anchors wouldn't make any sense):
#A,
#B {
float: left;
clear: both;
}
http://codepen.io/anon/pen/NRRxGy
ADDITION AFTER COMMENT AND EDIT OF QUESTION:
To try and see, delete the float for A and B (http://codepen.io/anon/pen/bwwEAr) and have a look at it in the developer tools: Both #A and 'B will have a size of 1406 x 0 (!) and will be at the very same position.
That's because DIVs that only contain floated elements will have no "official" height (i.e. they won't wrap their actual contents) - search for questions about floating to get examples. So vertically the "unfloated" #A and #B are at the same height, which is why the links lead to the same scroll position. Strange stuff, but it all has to do with floated elements and how floating elements affects the height of their containers.
problem is you set .cont1 class for both section and make them float left with a height of 1500px. try with this css
#A, #B {
min-width: 100%;
}
.cont1 {
height: 100vh;
background-color: #2077a5;
}
you can use the id="about" and id="portfolio" for link so you don't need the extra div #A , B
<div id="nav">
<ul>
<li>About</li>
<li>Portfolio</li>
</ul>
</div>
<div id="about" class="cont1">
About page content goes here.
</div>
<div id="portfolio" class="cont1">
Portfolio page content goes here.
</div>
.cont1 {
width: 100%;
height: 1500px;
background-color: #2077a5;
float: left;
}
I have a task that I initially thought would be easy, but turned out to be quite difficult. I want to be able to detect the height of the current visible window, center some text in that section of visible window, and place a navigation bar at just the end of the window, so a graphic of what it would look the following:
I have tried various ways of doing this, including setting the height of a div to a certain vh level and centering text inside that dif, though that was quite problematic, as vh is not supported in ie 8 and in order to center the text inside the div, many sources told me to do position: absolute, which tended to shift the text to a corner, which I did not want.
Is there a way in which I can create such a display? If I worded anything incorrectly or posted in the wrong place, please let me know. Thanks in advance for any help.
edit: here is the code I am using: http://pastelink.me/dl/b3cb50
Also some snippets of code for clarification:
what I do is I have a div with height of 100vh and width of 100% and an h1 with an id of myTitle (the css for id myTitle just sets the text-align to center)
<div style="height: 100vh; width: 100%"><h1 id="myTitle"> This is a large title!</h1></div>
and a nav bar directly below it, using foundation's nav bar code:
<nav class="top-bar" id="myNav" data-topbar>
<ul class="title-area">
<li class="name"><h1>My Site</h1></li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section"> <!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
EDIT: Many answers were said regarding setting the position of the nav bar to the bottom, and I thank you for that, though I forgot to clarify one thing. I would like for the nav bar to only be at the bottom initially, and when someone scrolls down it moves up, and does not stay fixed to the bottom.
find
<div class="navbar navbar-fixed-top">
...
</div>
and change it to
<div class="navbar navbar-fixed-bottom">
...
</div>
bootstrap has a fixed top and bottom selectors :)
JSBIN
Is this what you need? A table is the most supported method for vertical align in CSS.
.table {
display: table;
min-height: 100vh; width: 100%;
}
.table div {
display: table-row;
}
.header {
height: 90px;
background: #ddd;
}
.header h1 {
text-align: center;
}
.content p {
padding: 0 1em;
display: table-cell;
vertical-align: middle;
}
.footer {
height: 220px;
background: #ddd;
}
Here is a preview of what I have so far:
The red area is part of the design and should always scroll down with the design. So when the content expands, the footer, and that red bar go with it. This should be at the very bottom of the window.
I tried positioning it absolute and it worked perfectly, except when I re-sized my browser and made it smaller, it would stay at the very bottom but would only work when the browser is in full screen.
What I am doing right now is just positioning it relative with top:-120px; and then as you can see, it gives me the extra whitespace that I want to get rid of.
footer { height:185px; background:url(../images/footer_bg.png) repeat-x; position:relative; z-index: 0; top:-115px; width:100%; }
Not sure what else code to paste, I think that's all everyone needs. The rest is self explanatory. Does anyone have any suggestions on how to approach this?
My goal is to get it just like the image above except without the whitespace, pushed down at the bottom at all times, even when the browser is re-sized.
we use a sticky footer as well - here's the basics:
<div id="container">
<div id="header">Header</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
<div id="content">Content Here.</div>
<div class="clearfooter"></div>
</div>
<div id="footer">Footer Here.</div>
Note the clearfooter before the end of the container. Then with CSS you need something like this:
html, body {
height: 100%;
}
#container {
min-height: 100%;
margin-bottom: -330px;
position: relative;
}
.clearfooter {
height: 330px;
clear: both;
}
#footer {
height: 330px;
position: relative;
}
The only downside is that this is a fixed height footer. Don't forget, too if you add any padding to your footer that increases the height and your height on the footer, clearfooter and negative margin on the container need to be adjusted accordingly.
If you happen to need it to work in IE6 you'll need to target the container however you'd like and use:
#container {
height: 100%;
}
Hope that helps!
Sticky footers can be tricky and adding an over lapping background can be even more tircky. What you might want to try is creating a Sticky footer and applying the background image to the body or container background repeating-x and position bottom.
Are you able to create a jsfiddle and I can show you the technique I mean.
When you are offsetting something with position: relative, the element still "reserves" the space it would have occupied otherwise - in your case, the bottom area where you get the whitespace. Set margin-bottom: -115px on your footer to tell it not to do that.