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
Related
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>
I'm trying to make this template have a fixed navbar: here
I'm a beginner at CSS, so sorry about the silly question. When I try to make .masthead have position:fixed, the "Home About Contact" part disappears.
Thanks in advance!
The problem:
When you set position:fixed, the width of the masthead becomes the size of the elements inside by default. Usually you would be able to declare width:100% on the masthead so it stretches the entire width of the parent div, but in this case, setting percentage width on the fixed element makes it calculate based on the width of the viewport: see here for more details:
Percentage width for fixed elements?
Since the rest of the content has a max-width of 700px, we can set the width of the masthead to also be 700px but the issue is when you shrink the viewport, the rest of the page will shrink but the masthead won't. Setting max-width on the masthead doesn't work because its original width is less than 700px.
.masthead {
position: fixed;
width: 700px;
top: 0;
background-color: white;
border-bottom: 2px solid rgb(220,220,220);
}
Note that we set the background to white otherwise the bar will by default have a transparent background and the elements underneath will just intersect -- very ugly. We set the top property to 0 so it is now attached to the top of the page and doesn't leave a gap when we scroll.
(The border I added was just for looks, you can remove that if you'd like.)
Since we set the masthead to fixed positioning, it is now removed from the page flow, so everything else in the page acts like the masthead wasn't there. That leads to an issue: everything in the page shifts up, and one of the <hr />s on the top becomes hidden. To solve this, we add a margin-top: 50px; to the top <hr />, and everything is shifted downwards.
Due to the default margin styling (margin-bottom: 20px;
margin-left: 0;) on .navs in bootstrap the "Home About Contact" section ends up looking a bit awkward. We fix this by setting the margins to something more appropriate: margin: 14px 0;
Quick Note: I applied all these styles as inline in the chrome web inspector, so that they would override any other properties
Edit: Actually, it works nicely too if you just delete the HR from the document with the web inspector
First, you need to add some CSS to the header so it can be used as a fixed header. It needs a background color, and a given width:
.masthead {
width: 700px;
background: white;
}
Then, because the header is not aligned with the top of the page, you'll need some javascript to make it stick to the top:
<script>
$(document).ready(function() {
var div = $('.masthead');
var start = $(div).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(div).css('position',((p)>start) ? 'fixed' : 'static');
$(div).css('top',((p)>start) ? '0px' : '');
});
});
</script>
Look at the boostrap navbar docs
Here is an example of a fixed navbar using bootstrap:
<div class="navbar navbar-fixed-top" style="position: absolute;">
<div class="navbar-inner">
<div class="container" style="width: auto; padding: 0 20px;">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</div>
This is a navbar that works with position: fixed:
<div class='container'>
<div class='navbar'>
<div align='right'> <a class='menu1 menu-item'>Home</a>
<a class='menu2 menu-item'>About</a>
<a class='menu3 menu-item'>Contact</a>
</div>
</div>
</div>
http://jsfiddle.net/H9mMk/3/
I have tried using CSS to set the position of the background and the objects to all possible types (fixed, relative, absolute). I have also adjusted the width, min-width of the background image.
The Test Page
CSS:
Background:
/* BG Image Style */
.bg {
position: relative;
width: 100%;
height: 100%
}
Player
/* Player Style */
#player {
position: absolute;
width: 680px;
top: 60px;
left: 380px;
border: outset 5px white;
}
Menu
/* Nav Menu */
ul#menu {
position: absolute;
top: 175px;
left: 68px;
padding: 0;
list-style: none;
clear: both;
}
HTML:
<html>
<head>
<title>BKK Testing Zone</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<img class="bg" src="http://thebkk.net/Images/BVF-Template-Complete.png"/>
<div id="player">
<script type='text/javascript' src='http://thebkk.net/Scripts/jwplayer/jwplayer.js'>
</script>
<div id='mediaspace'></div>
<script type='text/javascript'>
jwplayer('mediaspace').setup({
'flashplayer': 'http://thebkk.net/Scripts/jwplayer/player.swf',
'playlistfile': 'http://www.thebkk.net/test/playlist.xml',
'backcolor': '000000',
'frontcolor': '00FFFF',
'lightcolor': '33FF33',
'playlist': 'right',
'controlbar': 'bottom',
'width': '680',
'height': '360',
});
</script>
</div>
<ul id="menu">
<li class="home"></li>
<li class="rules"></li>
<li class="forums"></li>
<li class="links"></li>
</ul>
</body>
</html>
Thanks! I searched around, and there were parts of what I wanted to do, but can't seem to find exactly what it is I want.
You might want to read up on "Responsive Web". There's a lot of ideas in there in terms of making fluid grids that might help in what you're doing.
Regardless, I don't know if you're going to get what you're looking to do to work perfectly with CSS alone. You'll probably have to work with some JavaScript as well.
I would start over and try doing something like this for basic HTML:
<body>
<div class="container">
<div class="media"></div>
<div class="menu"></div>
<img src="background.png" />
</div>
</body>
I would put things in a container div just because I don't like working directly off the body element for CSS. It's a little more self contained modules.
As for CSS, you will make your background image like you have.
Your menu will then need to images put into the list items (LI) with the IMG tag. Those IMG will need a width:100% style.
Right now, you're using the menu images as backgrounds, which won't be fluid very well, so just like you did with the main background image, you need to do with your menu.
You then need to set the menu container width to be a % of the larger container (ie. the background image).
To get this % you need to divide the width of the area you want the menu to fit in by the total container width.
Your background image looks like it's 1280px. The total width of the "window" is like 214px.
This would mean the width of the menu should be:
214px / 1280px = 0.1671875 * 100% = 16.71875%
You then need to place the menu container properly using the same CSS as you where using but use % instead of pixels because this will allow the positioning to move with the browser size.
The upper left corner of that background "window" looks like it starts 20px in from the left and 263px down from the top.
20px / 1280px = 0.015625 * 100% = 1.5625%
left: 1.5625%
263px / 960px = 0.27395833333333333 * 100% = 27.39583333333%
top: 27.39583333333%;
Now, the menu container should have a proportional width compared to the background image (which is what you're trying to line the menu up with), meaning it should sort of expand or contract with the background image.
And remember the menu HTML needs to be like this:
<ul>
<li><img src="..." alt="" /></li>
[...]
</ul>
with CSS:
#menu li img{
width:100%;
}
I'm not really sure this will work but it might get you going in the right direction. Regardless, I don't see the result of this being very good.
This might be a case where you're better off making a full Flash website (as much as I don't like using Flash).
I hope that helps!
Cheers!
-- UPDATE --
I put together a little proof-of-concept. I only tested it in Chrome and the latest FF. As I expected, you can get it to work but you're going to run into support issues.
Anyway, here's a background image I made with basically 2 target areas (boxes). It's similar to original one.
background image (1000x750. I started with 1024x768 or iPad dimensions and made it 1000px wide for easy percentages)
http://tinypic.com/r/11r9edw/5
menu image 1
http://tinypic.com/r/2s7ucmg/5
menu image 4 (i'll skip uploading all the menu images for sake of brevity)
http://tinypic.com/r/2nlv42x/5
The CSS (percentages are sloppy, but it's only a proof-of-concept)
body{
margin:0;
padding:0;
}
.container{
position: relative;
width: 100%;
height: 100%;
background-color:#F0F;
}
.bg-img{
display:block;
position: relative;
width: 100%;
height: 100%;
z-index:1;
}
.menu{
position:absolute;
width:15%;
height:33%;
top:33%;
left:10%;
border:1px dashed red;
z-index:10;
}
.menu ul{
height:100%;
margin:0;
padding:0;
}
.menu li img{
width:100%;
height:100%;
margin:0;
padding:0;
}
.menu li{
position:relative;
height:24.5%;
}
.media{
position:absolute;
width:43%;
height:15%;
top:16%;
left:31%;
background:#9CC;
z-index:10;
}
The HTML
<div class="container">
<img class="bg-img" src="bg.png" alt="" />
<div class="menu">
<ul>
<li><img src="menu1.png" alt="Menu 1" /></li>
<li><img src="menu1.png" alt="Menu 2" /></li>
<li><img src="menu4.png" alt="Menu 3" /></li>
<li><img src="menu4.png" alt="Menu 4" /></li>
</ul>
</div>
<div class="media"></div>
</div>
I more or less just used position:absolute to "float" everything as a ratio/percentage of the background image, which is stretched to 100% width/height of the browser.
Defined heights/widths are necessary (and setting margins/padding to zero to reset browser defaults).
Chrome seemed to work well. FF seemed to have an issue with height:100%. It's possible it could be cleaned up some more, but that should be a start to get what you're looking to do with CSS.
But like I said, this kind of thing isn't well handled in CSS, even with CSS3 this kind of design will cause a lot of headaches for backwards compatibility.
HTML 5 is here and that's not going to be a magic bullet either. This design concept is very vector based and Flash is perfect for that kind of thing.
Hope this helps! =)
You cannot combine a relatively sized background with elements that are of fixed size and with fixed margins, and expect the fixed elements to "follow" the background when you resize the window.
My suggestion would be that you use a fixed size background as well, that is the only way to get the other elements (menu etc.) to end up at its expected spot.
Also, when creating a background, you should really use the CSS background property, instead of using an image like you do.
This:
<img class="bg" src="http://thebkk.net/Images/BVF-Template-Complete.png">
Should probably be this:
body { background: url('http://thebkk.net/Images/BVF-Template-Complete.png') no-repeat; }
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.
I am creating a website that has a jquery image slideshow as the background, and on top of the slideshow is a navigation bar, a blank area in the middle of the page so that the image shows through, and at the bottom underneath the slideshow is some content and a footer. Similar to Need Supply's current website (http://needsupply.com/).
My main difficulty, is that I'd like to have the images in the slideshow clickable but since the slideshow is behind all of the divs (z-index: -1), it cannot catch any clicks since it's being covered by my main content divs (page, header, footer).
I tried replacing the slideshow with a simple linked image but it still cannot be clicked, so I know it is not anything to do with the slideshow code.
Here is the basic structure of my site:
<body>
<div id="slideshow">
....
</div>
<div id="page">
<div id="header">My Header</div>
<div id="content">Some Content</div>
<div id="footer">My Footer</div>
</div>
</body>
css:
#slideshow{
width:100%;
height: 620px;
position: absolute;
top:0;
left:0;
z-index:0;
}
#page{
width: 980px;
margin: 0 auto 2px auto;
}
Any help would be greatly appreciated. Let me know if you need any more information on my end.
You just need to remove the #page wrapper and position #content and #footer absolutely at the bottom. That way there would be no div covering the main area of the images (#slideshow) and so you would be able to click it. The #page, #content and #footer divs would remain unclickable.