...

View Full Version : css horizontal menu



wincode
11-14-2010, 03:54 AM
Hello, I'm trying to make a horizontal css menu, but I'm having trouble making it align horizontally. Here is the code:


<!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" lang="en" xml:lang="en">
<head>
<style type="text/css">
#bar
{
width: 100%;
background: #333;
height: 35px;
}

#top
{
width: 1000px;
margin: 0 auto;
}
#bar
{
list-style: none;
margin: 0;
text-align: center;
}

#bar li
{
list-style: none;
margin: 0;
background: #333;
}
#bar a
{
color: #ccc;
text-decoration: none;
height: 35px;
padding: 0 25px;
display: block;
}
#bar a:hover
{
color: #fff;
background: #355999;
text-decoration: none;
}
</style>

</head>

<body>
<div id="bar">
<div id="top">
<ul id="bar">
<li><a href="index.php">Home</a></li>
<li><a href="index.php">Home</a></li>
<li><a href="index.php">Home</a></li>
<li><a href="index.php">Home</a></li>
</ul>
</div>
</div>
</body>
</html>

Can someone guide me please?
Thanks for your time.

Chris Hick
11-14-2010, 03:56 AM
Can't use the same id twice, Mr. Win.

wincode
11-14-2010, 04:02 AM
I changed the first div to something else, but I'm still getting the same results.

teedoff
11-14-2010, 04:08 AM
Did you float the li element left?

wincode
11-14-2010, 04:14 AM
Did you float the li element left?

That worked, but the menu is now aligned to the left (I want to center it).
How exactly does the float work to put the list horizontally?

Thanks

Excavator
11-14-2010, 04:17 AM
Hello wincode,
Looks like you have a little divitis too. Are all those containing elements really needed for a few menu buttons? The ul is already containing them and, if there is no layout specific reason for more containers then you can do away with them.
Have a go with something like this:
<!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 {
background: #FC6;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 100%;
}
#page {
height: 600px; /*for demonstration only*/
width: 800px;
margin: 30px auto;
background: #999;
font-size: 0.8em;
}
ul#bar {
list-style: none;
padding: 0;
text-align: center;
}
ul#bar li {
width: 200px;
float: left;
text-align: center;
line-height: 35px;
background: #333;
}
ul#bar li a {
color: #ccc;
display: block;
}
ul#bar li a:hover {color: #fff;}
</style>
</head>
<body>
<div id="page">
<ul id="bar">
<li><a href="index.php">Home</a></li>
<li><a href="index.php">Home</a></li>
<li><a href="index.php">Home</a></li>
<li><a href="index.php">Home</a></li>
</ul>
<!--end page--></div>
</body>
</html>

teedoff
11-14-2010, 04:29 AM
You should do some reading about floats and divs...w3schools.com (http://www.w3schools.com) is a great place to start.

wincode
11-14-2010, 06:42 AM
Thanks I've got it to work, just need to practice now :)

Chris Hick
11-14-2010, 07:11 PM
Don't forget to placed this as resolved. See steps below. :thumbsup:

Steps:
edit opening post>go advanced>set the prefix before the title as resolved



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum