46 users online (0 members and 46 guests)  


  Results 1 to 5 of 5

Related

  1. Replies: 3
  2. What is wrong with this code?    Forum: HTML Forum
    Replies: 1
  3. What is wrong with this code??    Forum: Javascript Forum
    Replies: 11
  4. What is wrong with this code??    Forum: HTML Forum
    Replies: 0
  5. What's wrong with this?    Forum: HTML Forum
    Replies: 5
  1. #1
    jamest's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2007
    Posts
    9

    What is wrong with this code

    What is wrong wit this CSS Code
    I was trying to make a horizontal Navigation Bar
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <style>
    div.topNavBar{
    padding-bottom:4px;
    background:#25587E;
    border-bottom:medium solid #4070AE;
    }
    ul.topNavBarul{
    padding:0;
    margin:0;
    margin-left: 40px;
    list-style-type:none;
    }
    li.topNavBarli{
    margin:0;
    padding: 0;
    text-transform:uppercase;
    display:inline
    }
    a.topNavBara{
    float:left;
    margin-top:2px;
    margin-bottom:2px;
    text-decoration:none;
    display: block;
    color:white;
    text-decoration: none;
    font-weight:bold;
    font-size:105%;
    background-color:#41627E;
    padding:0;
    }
    a:hover.topNavBara{
    background-color:#736F6E
    }
    </style>
    </head>
    <body>
    <div class="topNavBar">
    <ul class="topNavBarul">
    <li class="topNavBarli"><a class="topNavBara" href="#">Link one</a></li>
    <li class="topNavBarli"><a class="topNavBara" href="#">Link two</a></li>
    <li class="topNavBarli"><a class="topNavBara" href="#">Link three</a></li>
    <li class="topNavBarli"><a class="topNavBara" href="#">Link four</a></li>
    </ul>
    </div>
    </body>
    </html>

  2. #2
    vinyl-junkie's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    721

    Re: What is wrong with this code

    I'm not sure exactly how you want this to look, but change this:

    Code:
    ul.topNavBarul{
    padding:0;
    margin:0;
    margin-left: 40px;
    list-style-type:none;
    }
    li.topNavBarli{
    margin:0;
    padding: 0;
    text-transform:uppercase;
    display:inline
    }
    to this:

    Code:
    ul.topNavBarul{
    padding:0;
    margin:0;
    margin-left: 40px;
    list-style: none;
    }
    li.topNavBarli{
    text-transform: uppercase;
    width: 25%;
    display: inline;
    }
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more

  3. #3
    jamest's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2007
    Posts
    9

    Re: What is wrong with this code

    Here I will be more specific in how I want it to look.
    I want my links to look like the first three links in this.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <style>
    div.topNavBar{
    padding-bottom:4px;
    background:#25587E;
    border-bottom:medium solid #4070AE;
    }
    ul.topNavBarul{
    padding:0;
    margin:0;
    margin-left: 40px;
    list-style-type:none;
    }
    li.topNavBarli{
    margin:0;
    padding: 0;
    text-transform:uppercase;
    display:inline
    }
    a.topNavBara{
    float:left;
    margin-top:2px;
    margin-bottom:2px;
    margin-right:2px;
    text-decoration:none;
    display: block;
    color:white;
    text-decoration: none;
    font-weight:bold;
    font-size:105%;
    background-color:#41627E;
    padding:0;
    }
    a:hover.topNavBara{
    background-color:#736F6E
    }
    </style>
    </head>
    <body>
    <div class="topNavBar">
    <ul class="topNavBarul">
    <li class="topNavBarli"><a class="topNavBara" href="#">Link one</a></li>
    <li class="topNavBarli"><a class="topNavBara" href="#">Link two</a></li>
    <li class="topNavBarli"><a class="topNavBara" href="#">Link three</a></li>
    <li class="topNavBarli"><a href="#">Link four</a></li>
    </ul>
    </div>
    </body>
    </html>
    but as soon as a add the class to the fourth link this happens.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <style>
    div.topNavBar{
    padding-bottom:4px;
    background:#25587E;
    border-bottom:medium solid #4070AE;
    }
    ul.topNavBarul{
    padding:0;
    margin:0;
    margin-left: 40px;
    list-style-type:none;
    }
    li.topNavBarli{
    margin:0;
    padding: 0;
    text-transform:uppercase;
    display:inline
    }
    a.topNavBara{
    float:left;
    margin-top:2px;
    margin-bottom:2px;
    margin-right:2px;
    text-decoration:none;
    display: block;
    color:white;
    text-decoration: none;
    font-weight:bold;
    font-size:105%;
    background-color:#41627E;
    padding:0;
    }
    a:hover.topNavBara{
    background-color:#736F6E
    }
    </style>
    </head>
    <body>
    <div class="topNavBar">
    <ul class="topNavBarul">
    <li class="topNavBarli"><a class="topNavBara" href="#">Link one</a></li>
    <li class="topNavBarli"><a class="topNavBara" href="#">Link two</a></li>
    <li class="topNavBarli"><a class="topNavBara" href="#">Link three</a></li>
    <li class="topNavBarli"><a class="topNavBara" href="#">Link four</a></li>
    </ul>
    </div>
    </body>
    </html>

  4. #4
    vinyl-junkie's Avatar
    Moderator

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    721

    Re: What is wrong with this code

    Add a width attribute to your ul class:

    Code:
    ul.topNavBarul{
    padding:0;
    margin:0;
    margin-left: 40px;
    list-style-type:none;
    width: 100%;
    }
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more

  5. #5
    jamest's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2007
    Posts
    9

    Re: What is wrong with this code

    Thank You that worked.



Tags for this Thread