HTML Help Forum

Center Menu Bar

Discuss any HTML troubles including forms, tables, and frames.

Center Menu Bar

Postby ntb08117 » Fri Dec 10, 2010 4:33 pm

Hi, I am just testing HTML and CSS as a side project because I have never used it before. I found a tutorial to create a menu bar( here it is if it helps: Log in or Register to see link ) but I cannot get it centered, despite trying to set the margin to 0 and auto etc.

How can I center it?

Here is my code;

Code: Select all
<html>
<head>
<style type="text/css">
ul{
list-style-type:none;


}
li{
display:inline;
}
a{
float:left;
width:100px;
text-decoration:none;
color:white;
font-weight:bold;
background:    #000033;
padding:5px;
border-right:1px solid #FFFFFF;
}
a:hover{
background:yellow;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS horizontal menu</title>
</head>
<body bgcolor = "silver">
<ul>
<li><a href="#">Css</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">ActionScript</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">SQL Server </a></li>
<li><a href="#">PHP</a></li>
</ul>
</body>
</html>
[/code]
ntb08117
 
Posts: 1
Joined: Fri Dec 10, 2010 4:30 pm

Postby faino » Fri Dec 10, 2010 5:39 pm

Try using a <center> tag or nesting it inside a <div> with a center align:
Code: Select all
<center>
This is some centered text/table/list/whatever
</center>

or
Code: Select all
<div style="width:100%;" align="center">
This is some centered text/table/list/whatever
</div>

Also, you're floating the links with CSS, which will have an affect on alignment within the page.
faino
 
Posts: 733
Joined: Wed Dec 08, 2010 6:15 pm
Location: Michigan

Postby sticks464 » Fri Dec 10, 2010 9:20 pm

Take it a bit further and add text-align:center to the ul.
Here's my version without the borders.
Code: Select all
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {margin:0; padding:0;}
#menu {
   width:800px;
   margin:0 auto;
}
body {background:#c0c0c0;}
#navlist {
text-align: center;
width: 100%;
height:3em; 
margin:40px auto;
padding:0; 
background: #000;
color: #FFF;
font-family: Arial,Helvetica,sans-serif;
overflow:hidden;
}
#navlist li {
display: inline;
background:#000;
padding:.92em 0;
line-height:3em;
}
#navlist li a {
line-height:3em;
padding:.92em 1.25em; 
color: #FFF;
text-decoration: none;
font-weight:bold;
}
#navlist li a:hover {
background:#ffff00;
color: #000;
}
</style>
</head>

<body>
<div id="menu">
<ul id="navlist">
<li><a href="#">Css</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">ActionScript</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">SQL Server </a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
</body>
</html>


Check Log in or Register to see link for color codes.
Check Log in or Register to see link for html tags (notice the ones marked deprecated - means they should not be used)
sticks464
Site Admin
 
Posts: 3835
Joined: Sun Dec 31, 2006 11:47 pm
Location: KS.


Return to General HTML

Who is online

Users browsing this forum: No registered users and 2 guests