Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Mar 2011
    Posts
    215
    Thanks
    10
    Thanked 1 Time in 1 Post

    dividing lines of navigation acting wierd

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


    Code:
    #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;
    }

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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    #navigation li last {
    border-right:none;
    }
    That must be
    Code:
    #navigation li.last {
    border-right:none;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    lmorales (05-30-2012)

  • #3
    Regular Coder
    Join Date
    Mar 2011
    Posts
    215
    Thanks
    10
    Thanked 1 Time in 1 Post
    Thanks! Wow that was a silly error on my part. I still dont know know whats making the lines move on mouseover though..

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Mar 2011
    Posts
    215
    Thanks
    10
    Thanked 1 Time in 1 Post
    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

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Regular Coder
    Join Date
    Mar 2011
    Posts
    215
    Thanks
    10
    Thanked 1 Time in 1 Post
    I would like to keep them the same, the extending past the border is a bug.

  • #8
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    this might get you closer to something.

    save your stuff.

    new code.

    PHP Code:
    #navigation_wrapper {
        
    backgroundurl("../images/nav_bg.gif"repeat-x scroll 0 0 #363B28;
        
    height50px;
        
    margin10px auto 20px;
        
    opacity0.7;
        
    positionrelative;
        
    top75px;
        
    width850px;
        
    z-index100;
    }

    #navigation li a {
        
    color#FFFFFF;
        
    floatleft;
        
    font-familyverdana;
        
    font-size1.22em;
        
    font-weightbold;
        
    height40px;
        
    letter-spacing: -0.05em;
        
    padding6px 35px 6px 35px;
        
    text-aligncenter;

    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.

    PHP Code:
    #navigation li a:hover {
        
    backgroundnone repeat scroll 0 0 transparent;
        
    color#E0E0E0;
        
    height42px;

    Last edited by SeattleMicah; 06-01-2012 at 07:38 AM.

  • #9
    Regular Coder
    Join Date
    Mar 2011
    Posts
    215
    Thanks
    10
    Thanked 1 Time in 1 Post
    yeah...that just completely screws up my nav formatting and the lines still move, lol.

  • #10
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    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.

  • #11
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Isn't this the problem:

    Code:
    #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.

  • Users who have thanked SB65 for this post:

    lmorales (06-01-2012)

  • #12
    Regular Coder
    Join Date
    Mar 2011
    Posts
    215
    Thanks
    10
    Thanked 1 Time in 1 Post
    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!
    Last edited by lmorales; 06-01-2012 at 08:02 PM.

  • #13
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    winner winner chicken dinner!
    Just had one, actually, but thanks...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •