Question

I’ve been teaching myself CSS, and decided to try and make a site with the knowledge I have thus far. So I decided to make a fixed navigation bar that follows the position of the web browser, and I ran into an issue. For whatever reason, one of the links I added isn’t staying inside the nav bar when I change the browser window size. Can someone look at my code? Please ignore sloppiness, as I’m just trying this for the first time.

Here’s my HTML. The “secondnavlinks” div id is the one that won’t stay within the nav bar:

<div id="nav">

<div id="secondnavlinks">
<ul>
<li><a href="#">Ambient Bookmarklet</a></li>
</ul>
</div>


<div id="class1">
<ul>
<li><a href="#">Saved</a></li>
<li><a href="#">Folders</a></li>
</ul>
</div>

<div id="header">
<img src="ambientfollowhead.gif" alt="ambientfollow" width="160" height="35" />
</div>



</div>

And here’s the CSS:

#nav {
position: fixed;
border: 1px solid #DDDDDD;
top:-1px;
left:109px;
width:85%;
height: 46px;
background-color: white;
z-index: !important 99;
}

(Skipped over the “class1” div)

#secondnavlinks ul {
position: absolute;
display: inline;
list-style-type: none;
}



#secondnavlinks ul li {
display: inline;
text-align: center;
float: left;
font-family: klavika-light;
list-style-type: none;
position: absolute;
left: 950px;
white-space: nowrap;
}

#secondnavlinks ul li > a {
text-decoration: none;
color: inherit;
}

Answer 1

At first this seemed like it may be the positioning inside of the fixed element. After looking into this a little bit, I think I’ve found the culprit… It seems like your problem is the ‘left: 950px;’ – This value won’t be browser independant and will vary the results / pop out the element with certain widths.

Like Libin mentioned, you want to be looking into Fluid Layout design using relational values instead of fixed values. So when you rescale your browser everything is set correctly.

Start looking into Media Queries & the use of relational values such as % and Ems.

Here’s a useful resource for converting px values to ems etc: http://pxtoem.com/

Also if you want to go through tutorials / courses on the subject, I’ve included a couple of links below that have helped me in the past:

• http://www.codeschool.com/courses/journey-into-mobile ( Check out the free first lesson )
• http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-a-crash-course-in-css-media-queries/
• http://www.css-tricks.com/css-media-queries/

Also, – Here’s the proof that using absolute & relative won’t pop normally inside the fixed nav bar: http://jsfiddle.net/JQT7u/2/

Good Luck!