/    Sign up×
Community /Pin to ProfileBookmark

Nav help/complications

Copy linkTweet thisAlerts:
Jan 28.2008

I posted this in the HTML forum but I thought I’d also post it here because it does have to do with CSS considerably.

So I’m trying to spice up my navigation on my website but I am having some difficulties with a:hover and the padding attribute. Basically I want my nav to have 10px of padding all the way around and when hovered over the background color to change, but when I hover over the nav link the extra padding kicks in and extends the width of nav link by the padding and moves my nav links to the right. I do not want this to happen. If you take a look at my beta site, you’ll be able to see this clearly. Any ideas on how to fix this??

[URL=”http://www.chrisdire.com/index_beta.htm”]http://www.chrisdire.com/index_beta.htm[/URL]

[code=html]<ul id=”nav”>
<li class=”pagenav_current”><a title=”about me” href=”http://www.chrisdire.com/en/about.php”>about me</a></li>
<li class=”pagenav”><a title=”blog” href= “http://www.chrisdire.com/blog/”>blog</a></li>
<li class=”pagenav”><a title=”tech center” href=”http://www.chrisdire.com/en/techcenter.php”>tech center</a></li>
<li class=”pagenav”><a title=”gallery” href=”http://www.chrisdire.com/en/gallery.php”>gallery</a></li>
<li class=”pagenav”><a title=”contact” href=”http://www.chrisdire.com/en/contact.php”>contact</a></li>
</ul>[/code]

[CODE]#nav {
font-size: 13px;
font-weight: bold;
color: white;
text-decoration: none;
text-align: left;
width:435px;
height:28px;
margin-top: 21px;
margin-bottom: 19px;
padding-left: 35px;
float: left;
}

#nav li {
list-style-type: none;
float: left;
margin-right: 5px;
padding: 10px;
}

#nav li a {
display: inline;
text-decoration: none;
color: white;
font-weight: bold;
}

.pagenav {
background-color: #464646;
border: 1px solid black;

text-align: center;
}

.pagenav a:hover {
color: red;
margin: 0px;
background-color: #7D7D7D;
padding: 10px;
text-align: center;
}

.pagenav_current {
color: black;
background-color: red;
border: 1px solid black;
text-align: center;
}

.pagenav_current a:hover {
color: white;
padding: 10px;
background-color: #464646;
text-align: center;
}[/CODE]

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriJan 28.2008 — If you apply the padding to the <a> elements (and float them so they determine <li> height), and remove the padding from the <li>s and :hover states, then things settle down. Some styles are not being applied due to specificacy, and using the id name in front of all menu css rules overcomes that :[CODE]#nav {
font-size: 13px;
font-weight: bold;
color: white;
text-align: left;
width:455px;
height:37px;
margin-top: 21px;
margin-bottom: 19px;
padding-left: 35px;
float: left;
}

#nav li {
list-style-type: none;
float: left;
margin-right: 5px;

}

#nav li a {
[COLOR="Red"]float: left;[/COLOR]
text-decoration: none;
color: white;
font-weight: bold;
[COLOR="Red"]padding: 10px;[/COLOR]
}

#nav .pagenav {
background-color: #464646;
border: 1px solid black;
text-align: center;
}

#nav .pagenav a:hover {
color: red;
background-color: #7D7D7D;
}

#nav .pagenav_current {
color: black;
background-color: red;
border: 1px solid black;
text-align: center;
}

#nav .pagenav_current a:hover {
color: white;[/CODE]The hover states only need to contain any rules that are to [B]change[/B].
Copy linkTweet thisAlerts:
@WarbladeauthorJan 28.2008 — Centauri,

Thanks! It works quite well. Now I just need to go in and keep editing. So thanks! I'll post a link to the final product when I'm done.
Copy linkTweet thisAlerts:
@WarbladeauthorFeb 02.2008 — Alright so I've got the nav working (actually I finished it on Tuesday...but haven't had a lot of time this week) but for some reason IE doesn't want to position the nav properly. Instead of being positioned to the right, it's positioned under the logo. I've played around with the width, float, padding in my <!--[if IE]> "hack" but to no avail. Does anyone have any suggestions?

http://www.chrisdire.com
Copy linkTweet thisAlerts:
@yamaharussFeb 02.2008 — I would wrap your logo div and nav div, then use the float:right on the nav div
Copy linkTweet thisAlerts:
@CentauriFeb 03.2008 — This is due to the default margins and paddings browsers use on list elements, which different browsers implement in different ways. ALWAYS specify ALL margins and paddings on <ul> or <ol> elements :[CODE]#nav {
font-size: 13px;
font-weight: bold;
color: white;
text-align: left;
width:445px;
height:37px;
[COLOR="Red"]margin: 16px 0 15px;
padding: 0 0 0 55px;[/COLOR]
float: left;
}[/CODE]

Also, if you use an IE only css, ONLY put any DIFFERENCE in that file - IE will still read the main css file, so the only thing needed in the second file it reads (the IE only one) is anything that should be overwritten.
Copy linkTweet thisAlerts:
@WarbladeauthorFeb 03.2008 — Centauri you are a god ?

Thanks! All is swell now. Muchos.
×

Success!

Help @Warblade spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.21,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...