...

View Full Version : 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
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).

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

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

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
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.

<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>

#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
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.php?p=605564&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
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum