andrew6607 Posted September 30, 2010 Share Posted 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] Quote Link to comment https://forums.phpfreaks.com/topic/214846-css-menu-problem/ Share on other sites More sharing options...
n000bie Posted October 1, 2010 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/214846-css-menu-problem/#findComment-1117826 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.