CSS Menu Problem

andrew6607 · September 30, 2010

Hello,

I am currently trying to design my website with a dropdown menu. But, i am running into a slight problem with the allignment. I want the menu to allign to the center, but i can't get it to do that for some reason. I'm sure it will be a simple fix. Any help is welcome!

Code is Below:

style.css

@charset "utf-8";
/* CSS Document */
html body{
margin:0;
padding:0;
vertical-align:middle;
background-color:#CCC;
}
#header{
margin:auto;
width:800px;
}
#navMenu{
margin:0;
padding:0;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:url(redBG.png);
}
#navMenu ul li a{
text-align:center;
font-family:"MS Serif", "New York", serif;
text-decoration:none;
height:30px;
width:100px;
display:block;
color:#FFF;
}
#navMenu ul ul{
position:absolute;
visibility:hidden;
top:30px;
}
#navMenu ul li:hover ul{
visibility:visible;
background:#000;
}
#navMenu li:hover{
background:url(redBGOver.png);
color:#FFF;
}
#navMenu ul li:hover ul li a:hover{
background:#CCC;
color:#000;	
}
#navMenu a:hover{
color:#000;	
}
#navMenu ul li:hover ul li a{
background:#000;
border:1px solid #FFF;
}

index.html

<!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" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Andrew Erhardt - Blog and Portfolio</title>
</head>

<body>
<div id="header">
<img src="images/header.png" />
</div>
<div id="navMenu">
<ul>
        	<li><a href="#">Home</a>
            	<ul>
                </ul><!-- End Inner UL Tag -->
            </li><!-- End Main LI Tag -->
            <li><a href="#">About Me</a>
            	<ul>
                </ul><!-- End Inner UL Tag -->
            </li><!-- End Main LI Tag -->
             <li><a href="#">Portfolio</a>
            	<ul>
                <li><a href="#">Websites</a></li>
                <li><a href="#">Photos</a></li>
                <li><a href="#">Programs</a></li>
                </ul><!-- End Inner UL Tag -->
            </li><!-- End Main LI Tag -->
            <li><a href="#">Live Show</a>
            	<ul>
                <li><a href="#">Show Page</a></li>
                <li><a href="#">Pre-Recorded</a></li>
                <li><a href="#">Chat Rules</a></li>
                </ul><!-- End Inner UL Tag -->
            </li><!-- End Main LI Tag -->
        </ul><!-- End Main UL Tag -->
</div>
</body>
</html>

A screenshot of the website i'm working on, is attached, to help give you a better idea of what i'm trying to explain.

[attachment deleted by admin]

n000bie · October 1, 2010

Keep your header and nav inside a wrapper, set a fixed width for the wrapper and center it using margin:0 auto

Sign In

CSS Menu Problem

Recommended Posts

andrew6607

Link to comment

Share on other sites

n000bie

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information