Results 1 to 3 of 3
  1. #1
    Join Date
    Apr 2007
    Location
    EARTH :)
    Posts
    1,022

    Stuck on Horizontal dropdown menu

    I can't get the horizontal navigation bar to center, I downloaded the code from http://purecssmenu.com/ so I'm not sure how some of it works. Here's a screenshot

    And the code
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html>
    <head>
    <link href="HTML/style.css" rel="stylesheet" type"text/css">
    <title> Home </title>
    
    <meta name="Keywords" content="Technology, reviews, t3po, tutorials, talk, games, walkthroughs," />
    <meta name="Description" content="t3po has tutorials for the most popular software and reviews to the latest games" />
    <meta name="copyright" content="2010, t3po" />
    
    
    </head>
    <body bgcolor="#3c657c">
    
    <div id="headerBackground">
    <div id="header">
    
    <img align:left src="graphics/header.jpg" />
    </div>
    </div>
    
    <!-- Star Nav Bar -->
    
    <div id"navbarContainer">
    
    <!-- Start PureCSSMenu.com STYLE -->
    <style>
    #pcm{display:none;}
    ul.pureCssMenu ul{display:none}
    ul.pureCssMenu li:hover>ul{display:block}
    ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
    ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
    ul.pureCssMenu,ul.pureCssMenu ul {
    	margin:0px;
    	list-style:none;
    	padding:0px 2px 2px 0px;
    	background-color:#fff;
    	background-repeat:repeat;
    	border-color:#808080;
    	border-width:1px;
    	border-style:solid;
    }
    ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
    	display:block;
    	zoom:1;
    	height:21px;
    	float: left;
    }
    ul.pureCssMenu ul{
    	width:134.4px;
    }
    ul.pureCssMenu li{
    	display:block;
    	margin:2px 0px 0px 2px;
    	font-size:0px;
    }
    ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
    outline-style:none;
    }
    ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
    	display:block;
    	vertical-align:middle;
    	background-color:#FFFFFF;
    	border-width:1px;
    	border-color:#fff;
    	border-style:solid;
    	text-align:center;
    	text-decoration:none;
    	padding:2px 5px 5px 10px;
    	_padding-left:0;
    	font:normal 11px Tahoma;
    	color: #000;
    	text-decoration:none;
    	cursor:default;
    }
    ul.pureCssMenu span{
    	overflow:hidden;
    }
    ul.pureCssMenu li {
    	float:left;
    }
    ul.pureCssMenu ul li {
    	float:none;
    }
    ul.pureCssMenu ul a {
    	text-align:left;
    	white-space:nowrap;
    }
    ul.pureCssMenu li.sep{
    	text-align:left;
    	padding:0px;
    	line-height:0;
    	height:100%;
    }
    ul.pureCssMenu li.sep span{
    	float:none;	padding-right:0;
    	width:3px;
    	height:100%;
    	display:inline-block;
    	background-color:#808080;	background-image:none;
    	}
    ul.pureCssMenu ul li.sep span{
    	width:100%;
    	height:3px;
    }
    ul.pureCssMenu li:hover{
    	position:relative;
    }
    ul.pureCssMenu li:hover>a{
    	background-color:#DBF0F9;
    	border-color:#45ADE4;
    	border-style:solid;
    	font:normal 11px Tahoma;
    	color: #444;
    	text-decoration:none;
    }
    ul.pureCssMenu li a:hover{
    	position:relative;
    	background-color:#DBF0F9;
    	border-color:#45ADE4;
    	border-style:solid;
    	font:normal 11px Tahoma;
    	color: #444;
    	text-decoration:none;
    }
    ul.pureCssMenu li.dis a {
    	color: #557D4F !important;
    }
    ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
    height:16px;
    }
    ul.pureCssMenu ul img {width:16px;
    height:16px;
    }
    ul.pureCssMenu img.over{display:none}
    ul.pureCssMenu li.dis a:hover img.over{display:none !important}
    ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
    ul.pureCssMenu li:hover > a img.def  {display:none}
    ul.pureCssMenu li:hover > a img.over {display:inline}
    ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over{display:inline}
    ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def{display:none}
    ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul,ul.pureCssMenu a:hover a:hover a:hover ul{display:block}
    ul.pureCssMenu a:hover ul ul,ul.pureCssMenu a:hover a:hover ul ul{display:none}
    ul.pureCssMenu span{
    	display:block;
    	background-image:url(./images/arrv_white.gif);
    	background-position:right center;
    	background-repeat: no-repeat;
       padding-right:9px;}
    ul.pureCssMenu ul span{background-image:url(./images/arr_black.gif)}
    ul.pureCssMenu ul li:hover > a span{	background-image:url(./images/arr_white.gif);}
    ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span,ul.pureCssMenu table a:hover a:hover a:hover span{background-image:url(./images/arr_white.gif)}
    ul.pureCssMenu table a:hover table span,ul.pureCssMenu table a:hover a:hover table span{background-image:url(./images/arr_black.gif)}
    ul.pureCssMenu li.pureCssMenui0 {
    width:110px;
    height:23px;
    }
    ul.pureCssMenu li a.pureCssMenui0{
    height:100%;
    background-image:url(./images/btn3.jpg);
    border-width:0px;
    font:normal 11px Tahoma;
    color:#fff;
    }
    ul.pureCssMenu li a.pureCssMenui0:hover{
    background-image:url(./images/btn4.jpg);
    font:normal 11px Tahoma;
    color:#eee;
    }
     ul.pureCssMenum0 {
    background-color:transparent;
    border-width:0px;
    	padding:0px 0px 0px 0px;
    }
     ul.pureCssMenum0>li>a {
    padding:8px 10px 0px 10px;
    }
     ul.pureCssMenum0 a {
    padding:8px 10px 0px 10px;
    }
     ul.pureCssMenum0 ul a {
    padding:2px 5px 5px 10px;
    }
     ul.pureCssMenum0>li {
    margin:0px 0px 0px 0px;
    }
     ul.pureCssMenum0 li {
    margin:0px 0px 0px 0px;
    }
     ul.pureCssMenum0 li li {
    margin:2px 0px 0px 2px;
    }
    
    </style>
    <!-- End PureCSSMenu.com STYLE -->
    
    <!-- Start PureCSSMenu.com MENU -->
    <ul align="center" class="pureCssMenu pureCssMenum0">
    	<li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Home</a></li>
    	<li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>Tutorials</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul class="pureCssMenum">
    		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Web Design</a></li>
    
    		<li class="pureCssMenui"><a class="pureCssMenui" href="#">2D/3D</a></li>
    		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Programming</a></li>
    
    		<ul class="pureCssMenum">
    			<li class="pureCssMenui"><a class="pureCssMenui" href="#">1. Select Template</a></li>
    			<li class="pureCssMenui"><a class="pureCssMenui" href="#">2. Customize Items</a></li>
    			<li class="pureCssMenui"><a class="pureCssMenui" href="#">3. Download Zip</a></li>
    		</ul>
    		<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    
    		<ul class="pureCssMenum">
    			<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Windows OS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
    			<ul class="pureCssMenum">
    				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Internet Explorer</a></li>
    				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li>
    				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Chrome</a></li>
    				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Safari</a></li>
    
    				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Mozilla</a></li>
    				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Opera</a></li>
    				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Netscape Navigator</a></li>
    			</ul>
    			<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    			<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>MAC OS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
    			<ul class="pureCssMenum">
    
    				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li>
    				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Safari</a></li>
    				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Internet Explorer</a></li>
    			</ul>
    			<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    			<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Unix/Linux OS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
    			<ul class="pureCssMenum">
    
    				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li>
    				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Konqueror</a></li>
    			</ul>
    			<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    		</ul>
    		<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    	</ul>
    	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    
    	<li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>Gaming</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
    	<ul class="pureCssMenum">
    		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Reviews</a></li>
    		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Walkthroughs</a></li>
    		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Talk</a></li>
    	</ul>
    	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    	<li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Forums</a></li>
    	<li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Contact</a></li>
    </ul>
    
    </div>
    
    <!-- End Nav Bar -->
    
    <div id="container">
    
    <div id="body">
    Test
    </div>
    
    <div id="footerBottom"><img align:left src="graphics/footer.jpg" /></div>
    
    
    </div>
    
    </body>
    </html>

  2. #2
    Join Date
    Feb 2007
    Location
    Atlanta, GA
    Posts
    79
    Code:
    <ul align="center" class="pureCssMenu pureCssMenum0">
    First of all, the ul element doesn't support the align attribute.

    second of all if it did (like the td element) it would affect the child elements not the current element.

    thirdly, to center an element you need two things. first is to make sure the parent element has the proper width (in your case this is the body tag and it has a width that is at least the width of the browser window, no need to make any changes). second is to apply css which is dependent on whether the centering element is an inline level or block level element.

    The css you can use for inline elements is:
    Code:
    text-align:center;
    For Block-level elements you can try:
    Code:
    margin: 0px auto;
    since the ul tag is a block level element you can alter the margin.

    you can either change the following code:
    Code:
    <ul align="center" class="pureCssMenu pureCssMenum0">
    to:
    Code:
    <ul style="margin:0px auto;" class="pureCssMenu pureCssMenum0">
    or you can add/modify one of the css classes. I recommend that you add this style inside the "ul.pureCssMenum0 {}" selector as only the top ul tag uses this class.

  3. #3
    rayonkerion Guest
    i want to customize drop down menu what best i can do

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •