...

View Full Version : Header Buttons Question



theflyingminstr
04-01-2009, 09:02 PM
Hi in the code below I have 8 menu links. What would be the best way to have them all evenly spread across the entire width without the space to the left?

Thanks so much



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style type="text/css">

BODY{ color: White; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; margin: 0; padding: 0; }
a{ color: #FFFFFF; text-decoration: none; }

#HEADER{ width:760px; margin-left:auto; margin-right:auto;}
#HEADER ul{ margin: 0; padding-left: 0; height: 44px; line-height: 44px; display: block; list-style: none; background-color: #1F2C56; }
#HEADER li{ display: inline; background-color: #395A8D; float: right; }
#HEADER li a{ height: 44px; line-height: 44px; display: block; padding-left: 25px; padding-right: 30px; border-left: 1px solid Black; float: left; }
#HEADER li a:hover{ background-color: #1F2C56; text-decoration: none;}
#HEADER .Visual{ height:263px; background-repeat: no-repeat; background-color: #1F2C56; border-top: 3px solid Black; }

</style>

</head>

<body>

<div id="HEADER">
<h1>Welcome</h1>
<ul>
<li><a href="link8.html">Link 8</a></li>
<li><a href="link7.html">Link 7</a></li>
<li><a href="link6.html">Link 6</a></li>
<li><a href="link5.html">Link 5</a></li>
<li><a href="link4.html">Link 4</a></li>
<li><a href="link3.html">Link 3</a></li>
<li><a href="link2.html">Link 2</a></li>
<li><a href="link1.html">Link 1</a></li>
</ul>
<div class="Visual"> </div>
</div>

</body>

</html>

Excavator
04-01-2009, 09:19 PM
Hello theflyingminstr,
Try this for starters, the key changes are highlighted in red -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
body{
color: #fff;
font: 10pt Arial, Helvetica, sans-serif;
}
* {
margin: 0;
padding: 0;
}
#header{
width:760px;
margin: 0 auto;
}
#header ul{
height: 44px;
line-height: 44px;
display: block;
list-style: none;
background: #1F2C56;
}
#header li{
display: inline;
background: #395A8D;
float: right;
}
#header li a{
height: 44px;
line-height: 44px;
display: block;
width: 94px;
text-align: center;
border-left: 1px solid Black;
float: left;
}
#header li a:hover{
background: #1F2C56;
text-decoration: none;
}
#header .visual{
height:263px;
background: #1F2C56;
border-top: 3px solid Black;
}
a{ color: #FFFFFF; text-decoration: none; }
</style>
</head>
<body>
<div id="header">
<h1>Welcome</h1>
<ul>
<li><a href="link8.html">Link 8</a></li>
<li><a href="link7.html">Link 7</a></li>
<li><a href="link6.html">Link 6</a></li>
<li><a href="link5.html">Link 5</a></li>
<li><a href="link4.html">Link 4</a></li>
<li><a href="link3.html">Link 3</a></li>
<li><a href="link2.html">Link 2</a></li>
<li><a href="link1.html">Link 1</a></li>
</ul>
<div class="visual"> </div>
</div>
</body>
</html>

Some other centered menu examples here:

one (http://nopeople.com/CSS/menu-h_centered-ul/index.html)
two (http://nopeople.com/CSS/ul-menu-positioned-with-text-align/index.html)

theflyingminstr
04-01-2009, 09:26 PM
Hey that's awesome, thanks so much!

Edit:

One thing I noticed is that if needs to wrap text to the next line it pushes the text very far down into the visual area.

Ex:

<div id="header">
<h1>Welcome</h1>
<ul>
<li><a href="link8.html">Link 8 Link 8 Link 8</a></li>
<li><a href="link7.html">Link 7</a></li>
<li><a href="link6.html">Link 6</a></li>
<li><a href="link5.html">Link 5</a></li>
<li><a href="link4.html">Link 4</a></li>
<li><a href="link3.html">Link 3</a></li>
<li><a href="link2.html">Link 2</a></li>
<li><a href="link1.html">Link 1</a></li>
</ul>
<div class="visual"> </div>

Excavator
04-01-2009, 09:37 PM
Cleaned up a little more -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 14px "Comic Sans MS";
text-align: center;
background: #FC6;
}
* {
margin: 0;
padding: 0;
outline: none;
border: none;
}
#container {
width: 760px;
margin: 30px auto;
background: #999;
overflow: auto;
}
h1 {
height: 44px;
line-height: 44px;
}
ul#menu {
height: 44px;
margin: 0 0 300px;
line-height: 44px;
list-style: none;
border-bottom: 3px solid #000;
}
#menu li{
display:inline;
}
#menu li a{
width: 94px;
height: 44px;
float: left;
line-height: 44px;
display: block;
text-align: center;
text-decoration: none;
color: #fff;
background: #395A8D;
border-left: 1px solid Black;
}
#menu li a:hover{background: #1F2C56;}
</style>
</head>
<body>
<div id="container">
<h1>Header text goes here</h1>
<ul id="menu">
<li><a style="border:0;" href="link1.html">Link 1</a></li>
<li><a href="link2.html">Link 2</a></li>
<li><a href="link3.html">Link 3</a></li>
<li><a href="link4.html">Link 4</a></li>
<li><a href="link5.html">Link 5</a></li>
<li><a href="link6.html">Link 6</a></li>
<li><a href="link7.html">Link 7</a></li>
<li><a href="link8.html">Link 8</a></li>
</ul>
<!--end container--></div>
</body>
</html>

Excavator
04-01-2009, 09:41 PM
Hey that's awesome, thanks so much!

Edit:

One thing I noticed is that if needs to wrap text to the next line it pushes the text very far down into the visual area.

Ex:

Yeah, it's never good when you full width menu needs to wrap. Specify px sized text and make sure it all fits.

theflyingminstr
04-01-2009, 09:45 PM
Gotcha thanks!!

theflyingminstr
04-01-2009, 10:27 PM
Cleaned up a little more -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 14px "Comic Sans MS";
text-align: center;
background: #FC6;
}
* {
margin: 0;
padding: 0;
outline: none;
border: none;
}
#container {
width: 760px;
margin: 30px auto;
background: #999;
overflow: auto;
}
h1 {
height: 44px;
line-height: 44px;
}
ul#menu {
height: 44px;
margin: 0 0 300px;
line-height: 44px;
list-style: none;
border-bottom: 3px solid #000;
}
#menu li{
display:inline;
}
#menu li a{
width: 94px;
height: 44px;
float: left;
line-height: 44px;
display: block;
text-align: center;
text-decoration: none;
color: #fff;
background: #395A8D;
border-left: 1px solid Black;
}
#menu li a:hover{background: #1F2C56;}
</style>
</head>
<body>
<div id="container">
<h1>Header text goes here</h1>
<ul id="menu">
<li><a style="border:0;" href="link1.html">Link 1</a></li>
<li><a href="link2.html">Link 2</a></li>
<li><a href="link3.html">Link 3</a></li>
<li><a href="link4.html">Link 4</a></li>
<li><a href="link5.html">Link 5</a></li>
<li><a href="link6.html">Link 6</a></li>
<li><a href="link7.html">Link 7</a></li>
<li><a href="link8.html">Link 8</a></li>
</ul>
<!--end container--></div>
</body>
</html>

Thank you Excavator



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum