CSS Forum

**jamest** · 08-27-2007, 03:16 AM

How do I get this code to work?

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>

**mackaltman** · 08-27-2007, 10:21 AM

Wow, to tell you the truth this coding is completely backwards. I'll get back to you in about 10 minutes, let me work with it.

**mackaltman** · 08-27-2007, 10:40 AM

Alright, here's what I came up with. I also added a 2px padding around the links which you can remove after seeing how it looks by going to ".topnavbar a" and changing "padding:" 2px; to "padding: 0;". I hope this helped.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.topnavbar{
padding-bottom:4px;
background:#25587e;
border-bottom: 5px solid #4070ae;
}
.topnavbar ul{
padding-left: 0;
margin-left: 40px;
list-style-type: none;
}
.topnavbar li{
margin:0;
padding: 0;
text-transform: uppercase;
display:inline;
}
.topnavbar a{
float: left;
margin: 2px 2px 2px 0;
padding: 2px;
text-decoration:none;
display: block;
color: #fff;
text-decoration: none;
font-weight:bold;
font-size: 105%;
background-color: #41627E;
}
.topnavbar a:hover{
background-color:#736F6E
}
</style>
</head>

<body>
<div class="topnavbar">
    <ul>
        <li><a href="#">Link one</a></li>
        <li><a href="#">Link two</a></li>
        <li><a href="#">Link three</a></li>
        <li><a href="#">Link four</a></li>
    </ul>
</div>
</body>
</html>

**jamest** · 12:11 PM

When I test your code in internet explorer it has the same problem that the links don't show up inside of the div.

Edit:

I want my links to look like the first three links in this picture:

But when I add the class to my last link this happens

Here is the code I used to get these(to get the first one I took the class off of the last link)

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:2px 2px 2px 0;
padding:2px;
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>

**jamest** · 08-27-2007, 03:59 PM

I got it to work by adding a width to the ul css but thanks for the help everyone.