My question has to do with how do you spread the items in the list (li) across the page evenly so that they have equal width.
I have been eyeballing it and increasing the width on #menu li until it looks the way I want it to. To make it look even
I created a width of 60px and padded the left 60 to make it look centered. What is the correct way to do this.
I appreciate your help
Howard
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>empty html</title>
<style>
body {font-size: .75em;font-family: arial;}
#container{width: 800px; height: 300px; margin:0 auto; border:1px solid black;}
#header{height: 60px; background-color: black;color: white;}
ul,li {margin:0;padding:0;}
#menu {width: 800px; height: 20px; background-color: orange;}
#menu ul {}
#menu li {list-style: none; float: left; width: 60px; padding-left:60px;}
#menu li a {color: white; text-decoration: none; }
#menu li a:hover {color: black;}
</style><base href="file:///C:/Users/csphard/Desktop/practice%20css/emptyhtml.html"></head><body><div id="container">
<div id="header">header</div>
<div id="menu">
<ul>
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
<li><a href="#">test5</a></li>
<li><a href="#">test6</a></li>
</ul>
</div>
</div>
</body></html>
I have been eyeballing it and increasing the width on #menu li until it looks the way I want it to. To make it look even
I created a width of 60px and padded the left 60 to make it look centered. What is the correct way to do this.
I appreciate your help
Howard
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>empty html</title>
<style>
body {font-size: .75em;font-family: arial;}
#container{width: 800px; height: 300px; margin:0 auto; border:1px solid black;}
#header{height: 60px; background-color: black;color: white;}
ul,li {margin:0;padding:0;}
#menu {width: 800px; height: 20px; background-color: orange;}
#menu ul {}
#menu li {list-style: none; float: left; width: 60px; padding-left:60px;}
#menu li a {color: white; text-decoration: none; }
#menu li a:hover {color: black;}
</style><base href="file:///C:/Users/csphard/Desktop/practice%20css/emptyhtml.html"></head><body><div id="container">
<div id="header">header</div>
<div id="menu">
<ul>
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
<li><a href="#">test5</a></li>
<li><a href="#">test6</a></li>
</ul>
</div>
</div>
</body></html>
