CSS Navigation Help

Discussion in 'CSS' started by rizzy, Jun 24, 2006.

  1. #1
    ** woops i just saw that there was a sub-forum for css, sorry **

    Could someone plese look at this navigation menu built with css lists:
    http://www.d-rok.com/testnav.htm

    I am trying to get the little space between each item to go away. I have tried everything and I just can't figure out how to do it.

    Also I can not get the color change to work on a hover. It is just highliting the text and not the whole box.

    Any help with this would be greatly appreciated.
     
    rizzy, Jun 24, 2006 IP
  2. sgtsloth

    sgtsloth Peon

    Messages:
    205
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #2
    This should fix it, although I'm sure it can be cleaned up a bit.

    I took all the markup for your li and put it in the li a. Also, added a float:left to get rid of the space in between buttons.

    Hope it helps!
    ian :)

    
    #navcontainer ul li {
    	display: inline;
    float:left;
    
    }
    
    #navcontainer ul li a {
    
    	padding-left: 35px;
    	padding-right: 35px;
    	padding-bottom: 10px;
    	/* matches link padding except for left and right */
    	padding-top: 10px;
    	background: url("./images/navBarBgHover.gif") repeat-x 30px;
    	font: 10px/20px "Lucida Grande", verdana, sans-serif;
    	border-right: 1px solid #A8B090;
    	border-top: 1px solid #A8B090;
    	border-bottom: 1px solid #A8B090;
    	padding-bottom: 10px;
    	padding-top: 10px;
    	color: #000;
    	text-decoration: none;	
    }
    
    
    Code (markup):
     
    sgtsloth, Jun 24, 2006 IP
  3. rizzy

    rizzy Peon

    Messages:
    81
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for your response.

    I have been messing around with this a lot more and here is where I am at:
    1.) I can not get this navbar to center itself in the table
    2.) I can not get this navbar to line up at the top of table so it is right under the logo

    I outlined the tables so it is easier to see what is going on. Thanks with any help.

    http://www.d-rok.com/testnav.htm
     
    rizzy, Jun 24, 2006 IP
  4. Daniel Malone

    Daniel Malone Peon

    Messages:
    75
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You can put all the links in this:

    <div align="center">
    LINKS HERE
    </div>
     
    Daniel Malone, Jun 24, 2006 IP