Hello
I have made a horizontal list using list-o-matic (<!-- m --><a class="postlink" href="http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp">http://www.accessify.com/tools-and-wiza ... -matic.asp</a><!-- m -->) and the buttons are the same size as the text in them. Can i have it so each button is a percentage of the screen width?
ThanksYou need them to spread evenly through the window to fit into 100%?yesTry this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#nav {
width: 100%;
}
#nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#nav ul li {
float: left;
width: 25%;
text-align: center;
}
#nav ul li#n_last {
margin-left: -1px; /* Darn IE */
}
html>body #nav ul li#n_last {
margin-left: 0; /* Back to normal */
}
#nav ul li a {
display: block;
background: #eee;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">One</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Two</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Three</a></li>
<li id="n_last"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Four</a></li>
</ul>
</div>
</body>
</html>
I have made a horizontal list using list-o-matic (<!-- m --><a class="postlink" href="http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp">http://www.accessify.com/tools-and-wiza ... -matic.asp</a><!-- m -->) and the buttons are the same size as the text in them. Can i have it so each button is a percentage of the screen width?
ThanksYou need them to spread evenly through the window to fit into 100%?yesTry this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#nav {
width: 100%;
}
#nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#nav ul li {
float: left;
width: 25%;
text-align: center;
}
#nav ul li#n_last {
margin-left: -1px; /* Darn IE */
}
html>body #nav ul li#n_last {
margin-left: 0; /* Back to normal */
}
#nav ul li a {
display: block;
background: #eee;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">One</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Two</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Three</a></li>
<li id="n_last"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Four</a></li>
</ul>
</div>
</body>
</html>