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] 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 Link to comment https://forums.phpfreaks.com/topic/214846-css-menu-problem/#findComment-1117826 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.