2 replies [Last post]
Plusbits
Plusbits's picture
Offline
newbie
Birmingham, UK
Last seen: 8 years 17 weeks ago
Birmingham, UK
Timezone: GMT+1
Joined: 2011-08-10
Posts: 2
Points: 3

Hey all! Smile

I'm new to these forums and fairly new to the world of HTML and CSS too. Basically, I've started to create a portfolio website using the 1140px CSS Grid system which allows for fluid pages. Everything is going ok so far, however I'm having a bit of trouble with my nav bar. I've included two screenshots below. As you can see, the first image is fine but when I resize the browser window the images get cut off rather than moving around as they should. Any help would be greatly appreciated as I really can't seem to figure out why it's happening!

Screen shot 2011-08-10 at 23.22.07.png

Screen shot 2011-08-10 at 23.22.31.png

And here's the code:

            <div class="container newnav">
            	<div class="row">
                  	<div class="twelvecol last">
            <ul id="newnav">
            <li class="first"></li>
            <li><a href="#" class="navabout"></a></li> 
			<li><a href="#" class="navfolio" title="folio"></a></li> 
			<li><a href="#" class="navwords" title="words"></a></li> 
            <li><a href="#" class="navideas" title="ideas"></a></li>
            <li class="last"></li>
            </ul>
            </div>
            </div>
            </div>

#newnav {
	margin: 0 auto;
	padding: 0;
	width: 920px;
}
 
a.navabout, a.navabout_a {
	display: block;
	float: left;
	width: 230px;
	height: 50px;
	background: url("images/aboutnav.png");
}
 
a.navabout:hover {
	background: url("images/aboutnav.png") 0 50px;
}
 
a.navabout_a {
	background: url("images/aboutnav.png") 0 50px;
}
 
a.navfolio, a.navfolio_a {
	display: block;
	float: left;
	width: 230px;
	height: 50px;
	background: url("images/folionav.png");
}
 
a.navfolio:hover {
	background: url("images/folionav.png") 0 50px;
}
 
a.navfolio_a {
	background: url("images/folionav.png") 0 50px;
}
 
a.navwords, a.navwords_a {
	display: block;
	float: left;
	width: 230px;
	height: 50px;
	background: url("images/wordsnav.png");
}
 
a.navwords:hover {
	background: url("images/wordsnav.png") 0 50px;
}
 
a.navwords_a {
	background: url("images/wordsnav.png") 0 50px;
}
 
a.navideas, a.navideas_a {
	display: block;
	float: left;
	width: 230px;
	height: 50px;
	background: url("images/ideasnav.png");
}
 
a.navideas:hover {
	background: url("images/ideasnav.png") 0 50px;
}
 
a.navideas_a {
	background: url("images/ideasnav.png") 0 50px;
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 7 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi Plusbits, If you remove

Hi Plusbits,
If you remove the width from #newnav it may all fall into place.
Basically #newnav is a div so by default it is a block element so without a width it will fill all available horizontal space.

Plusbits
Plusbits's picture
Offline
newbie
Birmingham, UK
Last seen: 8 years 17 weeks ago
Birmingham, UK
Timezone: GMT+1
Joined: 2011-08-10
Posts: 2
Points: 3

Thanks Tony! I tried that and

Thanks Tony! I tried that and it worked like a charm! Smile Thank you!

My only question now is how do I center the nav bar? Is it just a case of playing with the padding until it looks right? I've set it so the max width of the site is 960px, and the bar itself is 920px, so just add padding of 20px either side?

Also, I'm using CSS sprites for the nav bar and there should be a grey underline when the page is active, i.e. there should be a slightly different image in place of 'about' where it has a grey underline, but that doesn't seemed to have worked. Any ideas why that is?

Thanks again! Smile