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

Join the conversation

Browse

Activity

Important Information