ttriana
20th September 07, 08:40 PM
Ok well i have a bit of a problem, im trying to create a horizontal navigation bar that is also fluid. The only problem is that the anchor doesn't extend all the way down to the bottom of the div (it looks ok with smaller fonts but as font size increases it becomes more obvious) . I tried fixing this by adjusting the height of the anchor to 100% but this along with the padding that was already in place to center the text caused the anchor to extend past its container. if I remove the padding then the text sits at the top rather then the middle. Is there any way to get this to work
Heres the css for the navigation area:
div#nav{
padding: 0px;
height: 2.8em;
width: 100%;
background-color: rgb(201,146,65);
}
ul#navlist{
height: 43px;
background-color: rgb(201,146,65);
display: inline;
list-style-type: none;
font-size: 0.7em;
}
ul#navlist li{
float: left;
overflow: hidden;
display: inline;
background-color: rgb(201,146,65);
margin: 0;
}
ul#navlist a {
padding-left: 15px;
padding-right: 15px;
padding-top: 1.4em;
padding-bottom: 1.3em;
display: block;
color: black;
text-decoration: none;
}
ul#navlist a:hover {
background-color:rgb(134,61,23);
}
here's an image that shows the space between the anchor and the bottom of the div:
http://img.photobucket.com/albums/v365/tonytriana/img2.png
like i said it's small but get bigger with increased text size
Heres the css for the navigation area:
div#nav{
padding: 0px;
height: 2.8em;
width: 100%;
background-color: rgb(201,146,65);
}
ul#navlist{
height: 43px;
background-color: rgb(201,146,65);
display: inline;
list-style-type: none;
font-size: 0.7em;
}
ul#navlist li{
float: left;
overflow: hidden;
display: inline;
background-color: rgb(201,146,65);
margin: 0;
}
ul#navlist a {
padding-left: 15px;
padding-right: 15px;
padding-top: 1.4em;
padding-bottom: 1.3em;
display: block;
color: black;
text-decoration: none;
}
ul#navlist a:hover {
background-color:rgb(134,61,23);
}
here's an image that shows the space between the anchor and the bottom of the div:
http://img.photobucket.com/albums/v365/tonytriana/img2.png
like i said it's small but get bigger with increased text size