Css Nav Bar

**squewheet** · 06-22-2008 12:35 AM

I am working on making another layout for my site and I have a better nav bar design on this layout than my other one. Ok here is what I am trying to do: I made 3 seperate images for each button. And what I want is when you just go to the site the nav buttons show up normal with out hovering or being clicked it shows up just normal but when you hover over it switches to the hover image. And then when you click on the button it switched to the activated image. What code do i need to use. Cause I am confused and everything I try doesn't seem to work out.

Thanks,

Squewheet

**Centauri** · 06-22-2008 01:13 AM

You would be better off combining the 3 states into one image, and just shifting the background on hover or active, as per this article.

**squewheet** · 06-22-2008 06:00 PM

Well i didn't figure out how to get that to work but i got a nav bar to work but i still can't figure out how to get everything lined up right. As you can see on the new layout it looks like crap:

Code:

www.jonesdesignz.com

**Centauri** · 06-22-2008 08:26 PM

You have a number of issues here with incorrect nesting of elements - you have the footer within the right column, which is within the left column, which is all inside the header along with the navigation..... The combining of the menu images (as per the article I previously linked) will get rid of all that messy javascript, and the menu should be marked up as an unordered list of links, with no table being needed. You also won't get the wrapper to centre with auto side margins if you float it.

Writing the html to semantically describe the content first, followed by logical dividing of content areas, followed by the styling to get the desired look will result in much cleaner code. The html for this page could then be :

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Jones Designz</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body id="pghome">
<div id="wrapper">
	<h1>Jones Designz - Home page</h1>
	<div id="navbar">
		<ul>
			<li><a href="http://www.jonesdesignz.com" class="navhome">Home</a></li>
			<li><a href="#" class="navforum">Forums</a></li>
			<li><a href="#" class="navgallery">Gallery</a></li>
			<li><a href="mailto: kyleann1930@hotmail.com" class="navcontact">Contact</a></li>
			<li><a href="http://www.myspace.com/squewheet" class="navmyspace">Myspace</a></li>
		</ul>
	</div>
	<div id="sidebar">
		<p>Left column</p>
	</div>
	<div id="content">
		<p>Content area</p>
	</div>
	<div id="footerpush"></div>
</div>
<div id="footer">
	<p>&copy; Copyright 2008 Jones Designz</p>
</div> 
</body>
</html>

Note that even though various items will have graphical text, the actual text should be present in the html for non-visual browsers (search engines, screen readers etc). The combined images for the rollovers I have attached to this post - 8bit png graphics actually came down slightly smaller than gifs.

The css for all this I will describe next post.

**Centauri** · 06-22-2008 08:38 PM

The css file I used for this is :

Code:

* {
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;
}
body {
	background-color: #666666;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
p {
	margin-bottom: 1em;
}
#wrapper {
	width: 800px;
	margin: 0 auto;
	background-color: #A9A9A9;
	min-height: 100%;
}
* html #wrapper {
	height: 100%;
}
h1 {
	height: 176px;
	background-image: url(images/Banner.gif);
	font-size: 1px;
	color: #ECF4DD;
}
#navbar {
	height: 37px;
	background-image: url(images/left-top.gif);
	background-repeat: no-repeat;
}
#navbar ul {
	float: right;
}
#navbar li {
	list-style: none;
	float: left;
}
#navbar a {
	float: left;
	height: 37px;
	text-decoration: none;
	font-size: 1px;
	color: #AAAAAA;
}
#navbar .navhome {
	background-image: url(images/Home.png);
	width: 126px;
	background-position: left top;
	color: #3D3D3D;
}
#navbar .navforum {
	background-image: url(images/Forums.png);
	width: 115px;
}
#navbar .navgallery {
	background-image: url(images/Gallery.png);
	width: 104px;
}
#navbar .navcontact {
	background-image: url(images/Contact.png);
	width: 115px;
}
#navbar .navmyspace {
	background-image: url(images/Myspace.png);
	width: 131px;
}
#navbar a:hover {
	background-position: left center;
}
#navbar a:active {
	background-position: left bottom;
}

#pghome .navhome, #pghome .navhome:hover,
#pgforum .navforum, #pgforum .navforum:hover,
#pggallery .navgallery, #pggallery .navgallery:hover {
	background-position: left bottom;
	color: #7ABC07;
}
#sidebar {
	width: 199px;
	padding: 70px 0 0 10px;
	float: left;
	background-image: url(images/Left-Col.gif);
	background-repeat: no-repeat;
	min-height: 264px;
}
* html #sidebar {
	height: 264px;
}
#content {
	padding: 20px 20px 0;
	background-image: url(images/Right-Col.gif);
	background-repeat: no-repeat;
	width: 551px;
	float: right;
	min-height: 334px;
}
* html #content {
	height: 334px;
}
#footerpush {
	clear: both;
	height: 33px;
}

#footer {
	width: 800px;
	height: 33px;
	margin: -33px auto 0;
	position: relative;
	background-image: url(images/Copyright.gif);
}
#footer p {
	margin: 0;
	font-size: 1px;
	color: #A9A9A9;
}

and assumes all graphics are directly within the "images" folder.

This is a standard minimum 100% height type layout where the footer will be at the bottom of the screen unless content pushes it down - acheived by making the wrapper 100% minimum height and pulling the footer back up into view with a negative top margin. A #footerpush div serves to clear the floated columns and prevent content from being hidden behind the footer.

The <h1> heading displays the header graphic while tha actrual text is made very small and coloured to hide it. The #navbar div gets the left-top graphic as a background, and the navigation <ul> is floated to the right.

The navigation links and <li>s are floated left and each link is given a size and the background graphic via its class name. On hover, the background is simply shifted to display the centre part of the graphic, whilst active displays the lower part. By matching the id of the page body (different depending on what page you are on) and the menu class, the menu item corresponding to the current page also displays the lower part of the background image.

The columns are simply sized (taking into account padding) and floated left and right, and given a minimum height to ensure the background graphics are displayed.

Have a play around with that.

**squewheet** · 06-22-2008 11:40 PM

thanks alot man. i wish i could be able to fix my own coding but like i said i am a newbie. I been using dreamweaver cs3 but i guess that it's not going to work even if i use that. But anyways I can't figure out why the home button stays in the activated position and doesn't change.

So what do you think it might be.

Thanks

Squewheet

**Centauri** · 06-23-2008 12:32 AM

The rule

Code:

#pghome .navhome, #pghome .navhome:hover,
#pgforum .navforum, #pgforum .navforum:hover,
#pggallery .navgallery, #pggallery .navgallery:hover {
	background-position: left bottom;
	color: #7ABC07;
}

does that - it is to indicate that this is the current page. If each page has its own id, the respective menu item will show active.

**Centauri** · 06-23-2008 12:34 AM

Originally Posted by squewheet

I been using dreamweaver cs3 but i guess that it's not going to work even if i use that.

The code I wrote above was done with Dreamweaver 8 - the trick with Dreamweaver is to use it in code view as a glorified text editor, and don't let it write code for you.

**Centauri** · 06-23-2008 02:41 AM

Just had a look at the site - lookin' good. To align the background image properly, add the highlighted to your body css :

Code:

body {
	background-color: #666666;
        background-image: url(http://www.jonesdesignz.com/images/Background2.png);
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-position: center top;
	background-repeat: repeat-y;
}

Thread: Css Nav Bar

Thread Tools

Display

Css Nav Bar

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions