I've been trying to modify a CMS template to meet my needs and couldn't get it to work, so I decided to just start from scratch to figure it out... And I still can't get it to work. I want three links arranged on each side of a logo image (which descends lower than the navigation), with the whole thing centered on the page. I don't want to specify a width for the UL because of possible differences in how fonts are rendered.
I tried the text-align:center and display:inline method, but it doesn't seem to allow me to have my logo box in the middle. I tried splitting the navbar into two ULs (with the logo in a div), but couldn't make that work either.
My code is below. Thanks for any help:
I tried the text-align:center and display:inline method, but it doesn't seem to allow me to have my logo box in the middle. I tried splitting the navbar into two ULs (with the logo in a div), but couldn't make that work either.
My code is below. Thanks for any help:
Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
width:100%;
height:40px;
background-color:black;
}
ul {
list-style: none;
margin:0;
padding: 0;
}
li {
margin: 0 10px;
float:left;
}
li a {
color:white;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="/1">Topic 1</a></li>
<li><a href="/2">Topic 2</a></li>
<li><a href="/3">Topic 3</a></li>
<li style="width:150px; height:100px; background-color:blue;"><a href="/index.html"></a></li>
<li><a href="/4">Topic 4</a></li>
<li><a href="/5">Topic 5</a></li>
<li><a href="/6">Topic 6</a></li>
</ul>
</div>
</body>
</html>