CSS Horizontal Menu Help

SteveDD · 05-11-2009, 12:15 PM

I am trying to make a horizontal menu and have a couple of problems:

1) When home is selected I want it to highlight it the same color i.e: #b2b2b2
however at the minute I cannot figure out how to do this. I also want it to do the same for the about us page etc (but havent added this to the code at the minute).

2) I want the menu to be horizontal at the minute it keeps going on top of each other and the spacing is really tight.

I want it like:

Home | About | Products | Contact Us | Special Offers

My code:

<div id="main-nav"><div id="altnavhead">

<a href="index.php?page=home">Home</a><a href="index.php?page=aboutus">About</a> <a href="index.php?page=contactus">Contact Us</a> <a href="index.php?page=retailproducts">Retail Products</a> <a href="index.php?page=specialoffers">Special Offers</a>

</div>

</div>

#main-nav {

	height: 50px;

	background-color: #ebecf0;

	margin-left: 160px;

	}

	

#main-nav a {

	color: #ff75ba;

	weight: bold;

	text-decoration: none;

}



#main-nav a:hover {

	color: #b2b2b2;

}



#main-nav #altnavhead {

	padding-top: 20px;

	padding-left: 30px;

}



body.home main-nav#home,

body.home main-nav#home a,

body.home main-nav#home a:hover,

		color: #b2b2b2;

		}

I do set in my include page the page class: <body class="home">

abduraooft · 05-11-2009, 12:36 PM

Quote:

1) When home is selected I want it to highlight it the same color i.e: #b2b2b2
however at the minute I cannot figure out how to do this. I also want it to do the same for the about us page etc (but havent added this to the code at the minute).

Quote:

I do set in my include page the page class: <body class="home">

Code:

.home #main-nav a{
 color: #b2b2b2;
}

Quote:

2) I want the menu to be horizontal at the minute it keeps going on top of each other and the spacing is really tight.

By default, anchors are inline elements, so they should sit in line with other. You may have some other CSS rule than the above which might be affecting them.

You may override it by adding either display:inline; or float:left; to your #main-nav a (though there will some difference in the behavior of the items for these two)

SteveDD · 05-11-2009, 12:46 PM

I have added:

.home #main-nav a{

 color: #b2b2b2;

}

into my code but that just turns my whole menu, b2b2b2 and nothing happens on selection or hover?

I used your code to replace:

body.home main-nav#home,

body.home main-nav#home a,

body.home main-nav#home a:hover,

color: #b2b2b2;

}

which I know is wrong.

abduraooft · 05-11-2009, 12:58 PM

Quote:

I have added:
.home #main-nav a{
color: #b2b2b2;
} into my code but that just turns my whole menu, b2b2b2 and nothing happens on selection or hover?

I missed one point.

Code:

<body id="home">
.....
<div id="main-nav"><div id="altnavhead">
<a href="index.php?page=home" class="home">Home</a><a href="index.php?page=aboutus">About</a> <a href="index.php?page=contactus">Contact Us</a> <a href="index.php?page=retailproducts">Retail Products</a> <a href="index.php?page=specialoffers">Special Offers</a>
</div>

Code:

#home #main-nav a.home{
 color: #b2b2b2;
}

should do it.

SteveDD · 05-11-2009, 01:10 PM

added this but the only problem is home is always highlighted now? When I click about home still stays highlighted?

I want to go through and repeat it with about, contact us etc... so when they are selected they are in the font #b2b2b2 but as I say above home is always highlighted.

Thanks for your help so far its been great..

abduraooft · 05-11-2009, 01:13 PM

Quote:

When I click about home still stays highlighted?

In the about page, your body tag should have a different id, say id="about"
Refer http://www.codingforums.com/showpost...64&postcount=3

SteveDD · 05-11-2009, 01:45 PM

nope when I add in the id for about they both stay highlighted home and about.

SteveDD · 05-11-2009, 01:52 PM

Just so you know where I am at:#.css code

#main-nav {

	height: 50px;

	background-color: #ebecf0;

	margin-left: 160px;

	font-family:Verdana, Arial, Helvetica, sans-serif;

	font-weight: bold;

	font-size: 11px;

	}

	

#main-nav a {

	color: #ff75ba;

	text-decoration: none;

}



#main-nav a:hover {

	color: #b2b2b2;

}



#main-nav #altnavhead {

	padding-top: 20px;

	padding-left: 30px;

}



#main-nav a.home{

 color: #b2b2b2;

}

#main-nav a.about{

 color: #b2b2b2;

}

and my menu code:

<div id="main-nav"><div id="altnavhead">

<a href="index.php?page=home" class="home">Home</a><b>|</b><a href="index.php?page=aboutus" class="about">About</a><b>|</b><a href="index.php?page=contactus">Contact Us</a><b>|</b><a href="index.php?page=retailproducts">Retail Products</a><b>|</b><a href="index.php?page=specialoffers">Special Offers</a>

</div>

</div>

SteveDD · 05-13-2009, 02:54 PM

Can anyone see why the home and now about buttons are remaining highlighted even when not on that page.

I am using the body tag <body class="home"> to indicate what page it is.

abduraooft · 05-13-2009, 03:02 PM

Quote:

Can anyone see why the home and now about buttons are remaining highlighted even when not on that page.

I'm pretty sure about the working of the method explained in the above given link. Have you followed it correctly?

codedpsd · 05-13-2009, 06:13 PM

Apply styles to a:visited as well.