Forum Moderators: not2easy
HTML
<div id="headernav">
<a href="index.html">Home</a>
<a href="animation.html">Animations</a>
<a href="illustration.html">Illustrations</a>
<a href="clients.html">Web Sites</a>
<a href="form.html">Contact</a></div>
CSS
#headernav {
position:absolute;
left:338px;
top:85px;
width:406px;
height:23px;
z-index:0;
font-size: 14px;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 0px 4px 4px 4px;
margin: 2px 4px;
text-align: right;
}
#headernav ul {
padding: 2px 0 4px 0;
margin: 0;
}
#headernav p {
padding: 40px;
margin: 10;
color: #FFFFFF;
background-color: #FFCB05;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
#headernav ul li {
padding: 4px;/*2px 4px 2px 2px;
margin: 0;
display: inline;
}
#headernav a {
color: #fff;
text-decoration: none;
}
#headernav a:hover, #footer a:focus {
text-decoration: none;
color: #FFD34B;
}
One problem with the code you gave, was either not enough HTML (unlikely), or too much CSS. You gave style information for lists and paragraphs (ul, li, p), but they are not existant on the HTML example.
Your navigation is not in list format. This is somewhat of a neutral thing, but most people recommend that you wrap a UL around your navigation, and add li around each anchor element (link). This is mostly just for semantic reasons AFAIK.
Anyways, to space elements out in web design, people use CSS properties called padding and margins.
You should check the W3Cs explanation of the box model for details about them (http://www.w3.org/TR/REC-CSS2/box.html), but the basic different is that margins are used to separate, and padding is used to, well, pad. You could use either vertical padding or a vertical margin to space your links, but you should probably use a bit of both (such as 2px padding, 5px margin or something).
dc
You can add a bunch of - however many you need, but easier to just use margin or padding on the <a>
#headernav a {
color: #000;/*#####Color change*/
padding-right: 10px;
text-decoration: none;
}
You'll learn a whole lot more about code writing from scratch than hacking in fixes - IMO. I don't know how #headenav fits into the page, but if it isn't perfect it may be the source of more problems due to the positioning and such.
<html>
<head>
<style>
#headernav {
position: absolute;
left: 338px;
top: 85px;
width: 406px;
height: 23px;
z-index: 0;/*#####Needed?*/
font: normal 14px Arial, Helvetica, sans-serif;/*#####Shorthand*/
text-decoration: none;
padding: 0px 4px 4px 4px;
margin: 2px 4px;
text-align: right;
}
#headernav ul {
padding: 2px 0 4px 0;
margin: 0;
}
#headernav p {
padding: 40px;
margin: 10px;/*#####10 what?*/
color: #fff;
background-color: #ffcb05;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
#headernav ul li {
padding: 4px; /*2px 4px 2px 2px;*//*#####Partial comment?*/
margin: 0;
display: inline;
}
#headernav a {
color: #000;/*#####Color change*/
padding-right: 10px;
text-decoration: none;
}
#headernav a:hover, #footer a:focus {
text-decoration: none;
color: #ffd34b;
}
</style>
</head>
<body>
<div id="headernav">
<a href="index.html">Home</a>
<a href="animation.html">Animations</a>
<a href="illustration.html">Illustrations</a>
<a href="clients.html">Web Sites</a>
<a href="form.html">Contact</a>
</div><!--#####
Hello, I am trying to get my navigation worked out. I have a problem with the links not having enough space
between them. They appear too close together, so I am sort of stuck. Also I used the Draw AP DIV mode in
Dreamweaver, is it okay to use it for layouts? I am also more of a beginner with CSS.
-->
</body>
</html>
