• Registered: 2009-01-26
  • Posts: 171

Topic: Menu cannot be in center

Hi
I have a CSS UL list menu
But I cannot make it in center.
It can be at right of the page or at left but not in center.

My code is:

<!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>CSS Horizantal DropDown Menu</title> 
<style type="text/css"> 
<!--
.hormenu {
    list-style-type: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width: 90%;
    display: inline;
    font-size: 12px;
    text-align: center;
    margin: 0px;
    padding: 0px;
}
.hormenu  li a {
    font-size: 12px;
    text-decoration: none;
    display: block;
    margin: 0px;
    padding: 7px;
    background-color: #016F70;
    color: #FFFFCC;
    text-align: center;
    float: left;
}
.hormenu  li a:hover {
    font-size: 12px;
    text-decoration: none;
    display: block;
    margin: 0px;
    padding: 7px;
    background-color: #FFCC4A;
    color: #006464;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
-->
</style> 
</head> 
 
<body> 
    <ul class="hormenu"> 
        <li> <a href="#">Home</a></li>
                      <li><a href="#"> About us </a></li> 
             <li><a href="#">Downloads</a></li>
            <li><a href="#">Photos Gallery</a></li>
            <li><a href="#">Contact us</a></li>
    </ul> 
</body> 
</html>

Am I missing or code?

  • Gender: Female
  • From: San Antonio, TX
  • Registered: 2008-12-19
  • Posts: 3,640

Re: Menu cannot be in center

It centers if you put a div around it all, give it a width and add a 'margin: 0 center;} to that division.

I tried adding the same to .hormenu ul and that didn't make it center - I'm not sure why - seems to me it should have the same effect, but didn't.

But also, you should use a HTML strict doctype, your body CSS could just be written as 

body { margin:0;}

- when it's zero, it does not need a unit, zero is zero.  and in your hover css, you only need to repeat the parts that change.

  • Registered: 2009-01-13
  • Posts: 486

Re: Menu cannot be in center

http://www.cssplay.co.uk/menus/centering.html

  • ll87
  • New member
  • Offline
  • Registered: 2009-03-23
  • Posts: 17

Re: Menu cannot be in center

am i being stupid? i cant get to the actual steps of how to center the menu on the above cssplay link

  • Eric
  • Advanced Member
  • Offline
  • Gender: Male
  • From: Carlsbad, CA
  • Registered: 2008-12-19
  • Posts: 2,038

Re: Menu cannot be in center

It's all in the head.