What's the trick to making a navbar using ul, li, a and the like to form a navbar that spans 100% of the screen and uses percents for each link item. I'd like to have the navbar be 100% wide, and if I have 5 links in the list, then I'd use 20% as a width... or if I had 4 links in the list, I'd set the width to 25%... I can not make this work successfully. Can someone explain to me what I'm missing?OK, here's what I have come up with... it seems to work, but I want to be sure it's proper usage of the CSS. Also, I find that when resizing the browser sometimes it will begin to stack instead of resizing correctly...is this normal?
<head>
<title>NavBar Test</title>
<style type="text/css">
<!--
body
{
margin: 0;
}
#nav-menu ul
{
width: 100%;
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
#nav-menu li
{
width: 25%;
float: left;
display: block;
margin: 0;
padding: 0;
text-align: center;
}
#nav-menu li a
{
background: #0ff;
float: left;
width: 100%;
display: block;
color: #000;
text-decoration: none;
text-align: center;
margin: 0;
padding: 0;
}
#nav-menu li a:hover
{
background: #ff0;
float: left;
width: 100%;
display: block;
color: #000;
text-decoration: none;
text-align: center;
margin: 0;
padding: 0;
}
-->
</style>
</head>
<body>
<div id="nav-menu">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">LINK1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">LINK2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">LINK3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">LINK4</a></li>
</ul>
</div>
</body>That doesn't work if IE is full screen.
Use: width:25% !important; width:24.97%;Thanx, Fang...you're right...fullscreen fails with 25%...and if I use 5 links and go 20% the same thing...using 19.97% seems ok, there, respectively...
Now, what's the trick for IE to make that little gap seem like it's not there? Use a matching background color for the ul or li?No, like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>List 100% width</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {
padding:0;
margin: 0;
}
ul {
display:inline;
list-style-type:none;
}
li {
float:left;
width:25% !important; width:24.97%;
}
li a {
display:block;
border:1px solid black;
background:#ff0;
color:#000;
text-decoration:none;
}
#wrapper {
background:#ff0;
color:#000;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">News</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Events</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Calendar</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Contact us</a></li>
</ul>
<div style="clear:both;"></div>
</div>
</body>
</html>Good deal...ThanX!
<head>
<title>NavBar Test</title>
<style type="text/css">
<!--
body
{
margin: 0;
}
#nav-menu ul
{
width: 100%;
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
#nav-menu li
{
width: 25%;
float: left;
display: block;
margin: 0;
padding: 0;
text-align: center;
}
#nav-menu li a
{
background: #0ff;
float: left;
width: 100%;
display: block;
color: #000;
text-decoration: none;
text-align: center;
margin: 0;
padding: 0;
}
#nav-menu li a:hover
{
background: #ff0;
float: left;
width: 100%;
display: block;
color: #000;
text-decoration: none;
text-align: center;
margin: 0;
padding: 0;
}
-->
</style>
</head>
<body>
<div id="nav-menu">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">LINK1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">LINK2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">LINK3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">LINK4</a></li>
</ul>
</div>
</body>That doesn't work if IE is full screen.
Use: width:25% !important; width:24.97%;Thanx, Fang...you're right...fullscreen fails with 25%...and if I use 5 links and go 20% the same thing...using 19.97% seems ok, there, respectively...
Now, what's the trick for IE to make that little gap seem like it's not there? Use a matching background color for the ul or li?No, like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>List 100% width</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {
padding:0;
margin: 0;
}
ul {
display:inline;
list-style-type:none;
}
li {
float:left;
width:25% !important; width:24.97%;
}
li a {
display:block;
border:1px solid black;
background:#ff0;
color:#000;
text-decoration:none;
}
#wrapper {
background:#ff0;
color:#000;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">News</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Events</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Calendar</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Contact us</a></li>
</ul>
<div style="clear:both;"></div>
</div>
</body>
</html>Good deal...ThanX!