1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS navigation help

Discussion in 'CSS' started by kinebuddy, Feb 6, 2006.

0
  1. #1
    I am having trouble with my navigation. Whenever I preview it the navigation looks fine, Link with border under and a left border that changes with rollover. But if I refresh or click one of the links the navigation gets all screwy. It goes back to the basic looking link with no border. Here is my css and html. Can someone please help!!!!


    //------CSS----------
    a:link {color: #706e3e;
    text-decoration: none;
    }

    a:hover {color: #000000;
    text-decoration: none;}
    #nav ul li {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    }

    #nav ul {
    margin: 5px;
    padding: 0px;
    }

    #nav ul li a:link, #navbar ul li a:visited {
    display: block;
    text-decoration: none;
    border-bottom: 1px #606547 solid;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    border-left: 3px #5e8e6a solid;
    margin-top: -1em;}

    #nav ul li a:hover {
    display: block;
    text-decoration: none;
    border-bottom: solid #606547 1px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    border-left: 3px #706e3e solid;
    margin-top: -1em;}

    //-----HTML-------

    <div id="nav" align="left">
    </br>
    <ul>
    <li><a href="#">Home</a></li><br />
    <li><a href="#">Director</a></li><br />
    <li><a href="#">Statement</a></li><br />
    <li><a href="#">Synopsis</a></li><br />
    <li><a href="#">Cast</a></li><br />
    <li><a href="#">The Making</a></li><br />
    <li><a href="#">Screenings</a></li><br />
    <li><a href="#">Contact</a></li><br />
    </ul>
    <br />
    </div>
     
    kinebuddy, Feb 6, 2006 IP
  2. tresman

    tresman Well-Known Member

    Messages:
    235
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    138
    #2
    Well, that's easy:

    You see it?

    Now, you should improve your code. I'll try it:

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  <head>
    <title>DP FORUMS TEST
    </title>
    
<style type="text/css">

#nav {margin-top:10px;}

#nav ul {
margin: 0px;
padding: 0px;
text-indent:0;
}

#nav ul li    {
list-style-type: none;
margin: 0px;
padding: 0px;
display:inline;
               }

#nav ul li a:link, #nav ul li a:visited, #nav ul li a:hover  {
display: block;
text-decoration: none;
border-bottom: 1px #606547 solid;
padding-left: 10px;
border-left: 3px #5e8e6a solid;
                                 }
                                 
#nav ul li a:hover {
border-left: 3px #706e3e solid;
}

</style>    
    
</head>
  
<body>
  <div id="nav">
      <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Director</a></li>
          <li><a href="#">Statement</a></li>
          <li><a href="#">Synopsis</a></li>
          <li><a href="#">Cast</a></li>
          <li><a href="#">The Making</a></li>
          <li><a href="#">Screenings</a></li>
          <li><a href="#">Contact</a></li>
      </ul>

  </div>
</body>
  


</html>
    Code (markup):
    Ahhhh... actually, doesn't this look better? Clean, easy to understand and no extra markup (well, we can take the div out and pass the id to the ul, but fine for now).

    Also, this works ok in both IE and FF. Or at least pretty the same, you won't to have work to much. ;)

    Minor edits: spellchecks
     
    tresman, Feb 6, 2006 IP
  3. kinebuddy

    kinebuddy Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Just a dam typo. Thanks for the help.
     
    kinebuddy, Feb 7, 2006 IP