...

View Full Version : dividing lines of navigation acting wierd



lmorales
05-29-2012, 09:36 PM
I have a right border of 1 px. white, in my nav items, Id like the last item to have no line, but it does sofar, and when i hover, the lines get longer, at first I kinda liked the way it looked, but im sure itll cause problems and its not intended so Id like to know whats causing it so i might fix it...



#navigation_wrapper{
background: #363B28 url(../images/nav_bg.gif) 0 0 repeat-x;
height: 50px;
width:600px;
margin: 10px auto 20px auto;
z-index:100;
position:relative;
top: 80px;
left: 100px;
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
#navigation{
float: left;
padding-left:7px;
height: 50px;
background: url(../images/navigation_left.gif) left top no-repeat;
z-index:100;
position:absolute;
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
#navigation li{
float: left;
border-right: 1px solid #FFF ;


}

#navigation li last {
border-right:none;
}


#navigation li a{


padding: 9px 20px 0 10px;
height: 30px;
float: left;
font-family: BankGothicMdBTMedium;
text-align:center;
font-size:1.52em;
font-weight: bold;
letter-spacing:-0.05em;
line-height:normal;
color: #FFF;


}

#navigation li a:hover{
color: #609;
background: none;
height:42px;
}
#navigation ul {
position:absolute;
width:12em;
top:1.5em;
display:none;
background-color:#000;
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */

}
#navigation li ul a{
width:12em;
float:left;
}



<div id="navigation_wrapper">
<!-- Top Navigation -->
<ul id="navigation">
<li><a href="index.html" title="Home">Home</a></li>
<li><a href="hair.html" title="Hair">Hair</a></li>
<li><a href="nailsl.html" title="Nails">Nails</a></li>

<li><a href="teeth.html" title="DaVinci Teeth Whitening">DaVinci Teeth<br/>Whitening</a></li>
<li><a href="packages.html" title="Exclusive Packages">Exclusive<br/>Packages</a></li>
<li><a href="spa.html" title="Spa Services">Spa Services</a></li>
<li class="last"><a href="staff.htm' title=Staff">Staff</a></li>
</ul>

I apologize for posting so much, im trying to get this first page working perfectly so i can just knock out the rest real quicky.

abduraooft
05-30-2012, 01:00 PM
#navigation li last {
border-right:none;
}

That must be

#navigation li.last {
border-right:none;
}

lmorales
05-30-2012, 07:07 PM
Thanks! Wow that was a silly error on my part. I still dont know know whats making the lines move on mouseover though..

abduraooft
05-31-2012, 08:51 AM
Can we have a link to your page?

lmorales
05-31-2012, 03:55 PM
http://www.trendstudiosorlando.com/test3/index.html


not sure its the updated version as I havent reuploaded a new test, however it still shows the slight wierdness with the menu

abduraooft
05-31-2012, 05:56 PM
So, do you want to keep that vertical borders the same when you hover OR extend the border to the bottom in the normal state too?

lmorales
05-31-2012, 07:22 PM
I would like to keep them the same, the extending past the border is a bug.

SeattleMicah
06-01-2012, 08:25 AM
this might get you closer to something.

save your stuff.

new code.



#navigation_wrapper {
background: url("../images/nav_bg.gif") repeat-x scroll 0 0 #363B28;
height: 50px;
margin: 10px auto 20px;
opacity: 0.7;
position: relative;
top: 75px;
width: 850px;
z-index: 100;
}

#navigation li a {
color: #FFFFFF;
float: left;
font-family: verdana;
font-size: 1.22em;
font-weight: bold;
height: 40px;
letter-spacing: -0.05em;
padding: 6px 35px 6px 35px;
text-align: center;
}


I would take the opacity off your navigation_wrapper too, I like the darker purple better.

with the opacity gone and the darker purple I might change your hover color to a more subtle transtition though.



#navigation li a:hover {
background: none repeat scroll 0 0 transparent;
color: #E0E0E0;
height: 42px;
}

lmorales
06-01-2012, 08:22 PM
yeah...that just completely screws up my nav formatting and the lines still move, lol.

SeattleMicah
06-01-2012, 08:36 PM
I just inserted that code into firebug turned out how I planned last night? firebug LIES!!!!!!!... I dont know sorry about that, wish I could have helped ya out.

SB65
06-01-2012, 08:37 PM
Isn't this the problem:


#navigation li a:hover {
background: none repeat scroll 0 0 transparent;
color: #660099;
height: 42px;
}

Remove that and the border doesn't extend, because the height doesn't change.

lmorales
06-01-2012, 08:59 PM
winner winner chicken dinner! thanks! I thought putting that property there would extend the lines to the end, buttttt it didnt. lol thanks! anddd now i get what i was doing wrong, the li height had to be changed to the height of the background! Thanks guys!

SB65
06-01-2012, 09:02 PM
winner winner chicken dinner!

Just had one, actually, but thanks...:D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum