Learn VBA & Macros in 1 Week!

CSS - Menu List Will Not Center

Full Excel VBA Course - Beginner to Expert

Menu List Will Not Center	View Content

I'm embedding menumatic into a joomla 1.6 based website.
Menumatic is just a slick css suckerfish menu with some mootools effects. http://greengeckodesign.com/menumatic

Anyway, I've edited the CSS to look ALMOST right. The only problem is that I cannot get the menu as a whole to center correctly on the page.

Anybody have any ideas about how i can do this?
(In addition to the 100's of things I've tried, I've tried putting it in another set of div's and centering that div, but it didn't work )

below is all the code. I left the JS out, since it also runs (a bit less prettily) on pure css. Also, I have verified the CSS at w3. There are four lines that are not standard, but they are to do with the rounded corner borders, not the spacing or alignment.

Edit: A bit more playing around and I have think it is a conflict with floating the items left. They need to display:block in order to display correctly so they also need to float (left) since they would otherwise be on separate lines (I think).

Anybody have an idea about how to get around this?

I tried to justify the text (that would be fine for my purposes), but it didn't work either.

CSS:

Code:


#mainMenu{
background-color: #036;
padding: 0px;
font-size: medium;
text-align: center;
}

/* Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish 
 * Dropdowns by Patrick Griffiths and Dan Webb. 
 * http://carroll.org.uk/sandbox/suckerfish/bones2.html
 */

/* ----[ LINKS ]----*/

/* all menu links */
.menuMain a, #subMenusContainer a{
	text-decoration:none;
	display:block;
	padding:10px 20px;
	background-color:#036 ;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
}

/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
.menuMain a{
	margin:0;
	float:left;
        color:#fff;
        
}

/* Just sub menu links */
#subMenusContainer a, .menuMain li li a{
	
}

/* All menu links on hover or focus */
.menuMain a:hover, .menuMain a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, .menuMain a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
	background-color:#06c ;
	color:#FFF;
}

/* sub menu links on hover or focus */
#subMenusContainer a:hover, 
#subMenusContainer a:focus, 
.menuMain a.mainMenuParentBtnFocused, 
#subMenusContainer a.subMenuParentBtnFocused,
.menuMain li a:hover,
.menuMain li a:focus{
	background-color:#06c ;
	color:#FFF;
}

/* Parent Sub Menu Links ---[javascript users only]*/
.subMenuParentBtn{ 
	background: url(../ottest/templates/ot_template/images/arrow_right.gif) right center no-repeat;  
}

/* Parent Sub Menu Links on hover or focus ---[javascript users only]*/
.subMenuParentBtnFocused{ 
	background: url(../ottest/templates/ot_template/images/arrow_right_over.gif) right center no-repeat;  
}

/* Parent Main Menu Links ---[javascript users only]*/
.mainMenuParentBtn{	
	 background: url(../ottest/templates/ot_template/images/arrow_down.gif) right center no-repeat; 
}

/* Parent Main Menu Links on hover or focus ---[javascript users only]*/
.mainMenuParentBtnFocused{	
	background: url(../ottest/templates/ot_template/images/arrow_down_over.gif) right center no-repeat; 
}

/* ----[ OLs ULs, LIs, and DIVs ]----*/

/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW{ 
	display:none; 
	position: absolute; 
	overflow:hidden; 
	/*the 2px left & right padding lets you have a 1px border 
	  on the ul or ol inside since overflow is set to hidden*/
	padding:0 2px;
	margin:0 0 0 -2px;
}


/* All ULs and OLs */
.menuMain, .menuMain ul, .menuMain ol, #subMenusContainer ul, #subMenusContainer ol { 
	padding: 0;
	margin:0 20px 0 0;
	list-style: none;
	line-height: 1em;
}

/* All submenu OLs and ULs */
.menuMain ol, .menuMain ul, #subMenusContainer ul, #subMenusContainer ol {	
	/*border around submenu goes here*/	 
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	background:#036;	
	left:0;
}


/* List items in main menu --[for non-javascript users this applies to submenus as well]  */
.menuMain li { 

	/*great place to use a background image as a divider*/
	display:block;
	list-style:none;
margin:0 5px;
	position:relative;
	float:left;

}

#subMenusContainer li{
	list-style: none;
}

/* main menu ul or ol elment */
.menuMain{
	display:block;
	list-style:none;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:40px;
	margin-right:auto;
	z-index:5;
	text-align: center;
	display:block;
}

#subMenusContainer{	display:block; 	position:absolute;	top:0;	left:0;	width:100%;	height:0;	overflow:visible;	z-index:1000000000; }


/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
.menuMain li li{	float:none; }

.menuMain li li a{ /* Just submenu links*/	
	position:relative;
	float:none;
}

.menuMain li ul { /* second-level lists */
	position: absolute;
	width: 10em;
	margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	margin-top:2.2em;
}

/* third-and-above-level lists */
.menuMain li ul ul { margin: -1em 0 0 -1000em; }
.menuMain li:hover ul ul {	margin-left: -1000em; }

 /* lists nested under hovered list items */
.menuMain li:hover ul{	margin-left: 0; }
.menuMain li li:hover ul {	margin-left: 10em; margin-top:-2.5em;}

/* extra positioning rules for limited noscript keyboard accessibility */
.menuMain li a:focus + ul {  margin-left: 0; margin-top:2.2em; }
.menuMain li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
.menuMain li li a:focus {left:0;  margin-left:1000em; width:10em;  margin-top:0;}
.menuMain li li li a:focus {left:0; margin-left: 2010em; width: 10em;  margin-top:-1em;}
.menuMain li:hover a:focus{ margin-left: 0; }
.menuMain li li:hover a:focus + ul { margin-left: 10em; }

The menu html (an excerpt)
Code:

<html>
<head>
<link rel="stylesheet" href="MenuMatic.css" type="text/css" />
</head>
<body>
<div id="mainMenu" style="width:950px;">
					
<ul class="menuMain"> 

	<li id="item-101" class="current active"><a href="/ottest/" >Home</a></li>
	<li id="item-102" class="deeper parent"><a href="/ottest/currentissuemenu" >Current Issue</a>
		<ul>
			<li id="item-133"><a href="/ottest/currentissuemenu/test-item-menu" >Test item menu</a></li>
		</ul>
	</li>
	<li id="item-103"><a href="/ottest/otblogmenu" >OT Blog</a></li>
	<li id="item-104"><a href="/ottest/previousissuesmenu" >Previous Issues</a></li>
	<li id="item-105"><a href="/ottest/classifiedsmenu" >Classifieds</a></li>
	<li id="item-124"><a href="/ottest/contact-us" >Contact Us</a></li>
</ul> 
	
</div>
</body>
</html>

Full Excel VBA Course - Beginner to Expert

Positioning A List In My Center Column

Similar Tutorials

View Content

OK, I'm back for another CSS lesson - this time on lists.

My site is designed with typical three-column layout. The left and right columns are floated and
the center column contains most of my content. Sometimes in the center column of a page I want
to include a list, either ordered or unordered. This page is a splendid example:
http://stallinswebdesign.com/vs/general_OfficersContactInfo.php.

I do not yet know how to manipulate the positioning of a list (and lots of other block-level things,
truth be told).

1. Can you share with me how to nudge this unordered list (with list-style-type set to none) to
the left a wee bit so that it lies about 1em to the right of that left border?

2. Can you share with me a CSS standards-based technique for marking up the first element of a
list so that it is left-adjusted and all of the following list elements are indented from it (and I
can adjust the amount of indentation), so the list looks like this:
Code:

My Team Euskaltel-Euskadi 2005 Orbea Orca is a kick-tail bike because
     every cyclist knows that orange and black are the fastest colors
     any bike that wins Frame of the Year and Bike of the Year is a winner
     the frame stiffness is top-shelf, and the power transfer is amazing

Or, if one can do that with semantic markup other than lists, please let me know.

Thank you all for looking; I appreciate your effort.

Menu Won't Center

Similar Tutorials

View Content

Hi,

For some reason I can't get the main menu to center, nor will the background color (light blue) extend all the way to the right. You can see what I mean he

http://www.granddistraction.com

Any help would be appreciated.

Thanks.

How To Center A Menu

Similar Tutorials

View Content

The menu left aligns - from float left but even if I put the UL in a div and auto the borders it won't center.
Any ideas?

Code:

<div id="banner" align="center"><a href="mysite.com"><img src="images/top_banner.jpg" border="0"></a></div>
<ul id="menu">
	<li><a href="1.html" title=">1</a></li>
	<li><a href="2.html" title=">2</a></li>
	<li><a href="3.html" title=">3</a></li>
	<li><a href="4.html" title=">4</a></li>
	<li><a href="5.html" title=">5</a></li>
    	<li><a href="6.html" title=">6</a></li>
</ul>

I then have the following CSS:

Code:

#banner {
	background: url("images/header_split.jpg") bottom right repeat;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
 
#menu {
	background: #5a5152;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
 
#menu li {
	float: left;
	font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}
 
#menu a {
	background: #5a5152 url("images/seperator.gif") bottom right no-repeat;
	color: #ccc;
	display: block;
	float: left;
	margin: 0;
	padding: 8px 12px;
	text-decoration: none;
}
 
#menu a:hover {
	background: #2580a2 url("images/hover.gif") bottom center no-repeat;
	color: #fff;
	padding-bottom: 8px;
}

The menu left aligns - from float left but even if I put the UL in a div and auto the borders it won't center.

Any ideas?

Cant Center My Dropdown Css Menu

Similar Tutorials

View Content

I am trying to create a website for my business and I cannot seem to center the navigation at the top of the screen and have the areas to the left and right of the screen be filled with the same bg color as the UL. I know usually you would set the margins to 0 auto to center that element on the page but for some reason its not working and the UL is just sticking to the left part of the screen. If anybody knows how to get this centered or how to fix my html/css i would sincerely appreciate it. Here is my code (html then css):

<body>
<div class="wrap">
<div class="menu">
<ul>
<li><a href="products.html" target="_self" >Products</a>
<ul>
<li><a href="seaisland.html" target="_self">Sea Island Collection</a></li>
<li><a href="grandoak.html" target="_self">Grand Oak Collection</a></li>
<li><a href="airflow.html" target="_self">Air-Flow </a></li>
<li><a href="pure.html" target="_self">Pure Visor</a></li>
<li><a href="coldweather.html" target="_self">Cold Weather</a></li>
<li><a href="fahrenheit.html" target="_self">Fahrenheit Collection</a></li>
<li><a href="caddietowels.html" target="_self">Caddie Towels</a></li>
<li><a href="woventowels.html" target="_self">Woven Towels</a></li>
<li><a href="sunprotection.html" target="_self">Sun Protection</a></li>
<li><a href="" target=""></a></li>
</ul>
</li>
<li><a href="embelishments.html" target="_self" >Embellishments</a>
<ul>
<li><a href="embroidery.html" target="_self">Embroidery</a></li>
<li><a href="wovenlabels.html" target="_self">Woven Labels</a></li>
<li><a href="medallions.html" target="_self">Medallions</a></li>
<li><a href="laserappliques.html" target="_self">Laser Appliques</a></li>
<li><a href="ballmarkers.html" target="_self">Ball Markers</a></li>
<li><a href="ultrasuede.html" target="_self">Ultra Suede</a></li>
</ul>
</li>
<li><a href="specials.html" target="_self" >Specials</a> </li>
<li><a href="whatsnew.html" target="_self" >Whats New</a> </li>
<li><a href="order.html" target="_self" >Order</a> </li>
<li><a href="contact.html" target="_self" >Contact</a> </li>
</ul>
</div>

body{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
background-color:#b7b7b7;
padding: 0px;
overflow:auto;
border: #0F0 solid 5px;
margin: auto;
}

.wrap{
margin:0 auto;
background-color:b7b7b7;
border:0px;
padding:0px;

}

.menu{
border:0px;
padding:0px;
font: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
background-color:#F0F;
}
.menu ul{
background:#b7b7b7;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("images/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("images/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;

}
.menu li li {
background:url('images/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;

}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('images/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

Vertically Center Ul/li Menu In Div

Similar Tutorials

View Content

I have a horizontal nav menu I've created using <ul> and <li> inside a <div>

The problem is I can't get it to vertically center. I tried using padding and/or margin and it didn't work for all browsers.

Here is the html:
Code:

<div class="top_nav">
<ul>
<li><a href='/'>HOME</a></li>
<li><a href='menu'>MENU</a></li>
<li><a href='catering'>CATERING</a></li><li>DETAILS</li>
<li><a href='photos'>PHOTOS</a></li>
</ul>
</div>

and the CSS:
Code:


.top_nav {
	margin: 0 auto 15px auto;
    height: 25px;
    padding: 10px;
	clear: both;
}

.top_nav ul {
	list-style: none;
    text-align: center;
}

.top_nav li {
    padding: 0 25px;
    font-family: "Palatino Linotype", "Times New Roman", Times, serif;
    font-size: 16px;
    font-weight: bold;
    display: inline;
    letter-spacing: 2px;
}

.top_nav li a {
    color: #FFF;
    text-decoration: none;
}
.top_nav li a:hover {
 	text-decoration: underline;
    border-bottom: 3px solid #660000;
}

It stays vertically positioned at the top

Can Someone Help Me Center This Horizontal Menu

Similar Tutorials

View Content

This is my page

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>123</title>
<link href="oto.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
* {
margin : 0;
padding : 0;
}
html, body, #wrap {
height : 100%;
margin : 0 auto;
width : 980px;
background-color : #666666;
}
body > #wrap {
height : auto;
min-height : 100%;
width : 980px;
background-color : #333333;
}
a img {
border : none;
}
#main {
height : 200px;
background-color : #999999;
}
#nav {
height : 35px;
}
#sad {
padding-bottom : 200px;
background-color : #999999;
height : 500px;
}
#footer {
position : relative;
margin-top : -200px;
height : 200px;
clear : both;
background-color : #000000;
}
.clearfix:after {
content : ".";
display : block;
height : 0;
clear : both;
visibility : hidden;
}
.clearfix {
display : inline-block;
}
* html .clearfix {
height : 1%;
}
.clearfix {
display : block;
}
.menu {
border : none;
border : 0;
margin : 0;
padding : 0;
font : 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size : 14px;
font-weight : bold;
margin-left: auto;
margin-right: auto;
}
.menu ul {
background : #333333;
height : 35px;
list-style : none;
padding : 0;
}
.menu li {
float : left;
padding : 0;
}
.menu li a {
background : #333333 url("images/seperator.gif") no-repeat bottom right;
color : #cccccc;
display : block;
font-weight : normal;
line-height : 35px;
margin : 0;
padding : 0 25px;
text-align : center;
text-decoration : none;
}
.menu li a:hover, .menu ul li:hover a {
background : #2580a2 url("images/hover.gif") no-repeat bottom center;
color : #ffffff;
text-decoration : none;
}
.menu li ul {
background : #333333;
display : none;
height : auto;
padding : 0;
margin : 0;
border : 0;
position : absolute;
width : 250px;
z-index : 200;
}
.menu li:hover ul {
display : block;
}
.menu li li {
background : url('images/sub_sep.gif') no-repeat bottom left;
display : block;
float : none;
margin : 0;
padding : 0;
width : 250px;
}
.menu li:hover li a {
background : none;
}
.menu li ul a {
display : block;
height : 35px;
font-size : 12px;
font-style : normal;
margin : 0;
padding : 0 10px 0 15px;
text-align : left;
}
.menu li ul a:hover, .menu li ul li:hover a {
background : #2580a2 url('images/hover_sub.gif') no-repeat center left;
border : 0;
color : #ffffff;
text-decoration : none;
}
.menu p {
clear : left;
}
-->
</style></head>

<body>
<div id="wrap">
<div id="main" class="clearfix">header</div>
<div id="nav">

<div class="menu">
                <ul>
	            <li><a href="#" ><img src="images/bth.png" alt="Oto Nautika"></a></li>
	            <li><a href="#">Aaaaaa</a>
			    <ul>
				<li><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
			    </ul>
		        </li>
		        <li><a href="/faq.php">Bbbbbbb</a>
                <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                </ul>
                </li>
            	<li><a href="/faq.php">Cccccccccc</a>
                <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                </ul>
                </li>
            	<li><a href="/faq.php">Ddddddd</a>
                <ul>
                <li><a href="#">1</a></li>
                </ul>
                </li>
            	<li><a href="/faq.php">Eeeeeee</a>
                <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                </ul>
                </li>
            	<li><a href="/faq.php">Ffffff</a>
                <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                </ul>
                </li>
		        </ul>
</div>

</div>
<div id="sad">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>

I can't center the menu horizontally, I've tried a lot of methods.

The last one I tried was Matt James Taylor's on his blog, but to no avail.

I can't get it to work, so if anyone has ideas how to make the menu always in the center of the page....thanks

Center A Horizontal Menu In Css

Similar Tutorials

View Content

I want to center a horizontal menu (not the words - the entire menu). Everything I read says I need to insert align-text: center into the #menu ul portion of my CSS. However, I've tried that and it doesn't work for me. I'm using Dreamweaver for my editing and I'm rather new to CSS.

The CSS code I have for the menu is:
Code:

#menuwrapper {width: 1280px;
              height: 25px;
              background: #FFC557 url(images/menu_background.jpg) repeat-x;
              color: #000;}

#menu, #menu ul {display: inline;
                 margin: 0;
                 padding: 0;
                 list-style: none;}

#menu li {display: block;
          float: left !important;
          padding: 0;
          margin: 0;
          line-height: 25px;
          position: relative;
		  left: 19px;}

#menu a {height: 25px;
         width: 85px;
         background: #FFC557 url(images/button.jpg) no-repeat;
         color: #000;
         display: block;
         font-size: 105%;
         font-weight: bold; 
         text-align: center;
         text-decoration: none;
         border-left: 1px solid #000;}

#lastbutton {border-right: 1px solid #000;}

#menu a:hover {background-position: 0 -25px;}

Now how the heck do I center the menu as opposed to having it aligned to the left???

Menu Displaced Center Column

Similar Tutorials

View Content

Please forgive me if this is just a stupid mistake, I'm pretty much a CSS newbie.
I generated a CSS menu (http://www.webmaster-toolkit.com/css-menu-generator.shtml) and inserted it into my CSS file. The menu is ok, but it pushed my center column down so that it only touches at a corner, when it should be leveled up and touching along the side. Here's the relevant code:
Quote:
#c-col{
position: relative;
margin: 0px 74px 20px 180px;
border: 1px solid #003366;
background: #333366;
color: #CCFFFF;
padding: 20px;
z-index: 3;
}

.buttonscontainer {width: 174px;}

.buttons a {color: #333366;
border: 1px solid;
background-color: #336699;
padding: 2px;
padding-left: 3px;
font: 12px Arial, sans-serif;
font-weight: bold;
text-decoration: none;
border-color: #9999CC #333366 #333366 #9999CC;
display: block;
margin: 0px;
width: 100%;
text-align: left;}

.buttons a:hover {border: 1px solid;
padding-left: 4px;
padding-top: 3px;
padding-bottom: 1px;
padding-right: 1px;
background-color: #6666CC;
border-color: #333366 #9999CC #9999CC #333366;
color: #333366;
text-decoration: none;}

Have I inserted it in the wrong place or is there something missing/redundant? I'd appreciate any suggestions.

Trying To Center The Typical Css Drop-down Menu Within A Div

Similar Tutorials

View Content

I'm simply trying to center a horizontal menu with a drop down.

The two methods I know of to align the list items in the top menu are 1) Code:

li { float: left; }

and 2) Code:

li { display: inline; }

.

The first method is needed for absolute positioning of the drop down list, but it left aligns the top menu.

The second method centers the menu (desired affect) but throws off the drop down placement because the it lacks the containing block.

Works, but left aligned: http://www.highgatecross.com/develo...ered_menu1.html

Code:

<!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>
	<title>Centered</title>
	
	<style type="text/css" title="style" media="all">
		#navigation {
			position: relative;
			margin: 0 auto;
			width: 800px;
			height: 30px;
			background: #9E9670 }	
			
		a {  
			font: 11px verdana, sans-serif;
			color: #54503B;
			text-decoration: none }
		
		#menu { 
			position: relative;
			margin: 0 auto;
			padding: 0; 
			width: 600px; 
			border: 1px solid #c00;
			text-align:center }
		
		#menu li { 
			float: left;
			list-style: none }
		
		#menu li a {
			display: block;
			padding: 7px 25px }
		
		#menu li a:hover {
			color: #F4E9AD }
		
		#menu li ul {  
			position: absolute;
			left: -1000em;
			z-index: 10 }
		
		#menu ul {
			float: left;
			width: 100px;
			list-style: none;
			padding: 0 }
		
		#menu ul li a {
			display: block;
			padding: 7px 10px;
			background-color: #C7BE8D;
			width: 100px }
		
		#menu ul li a:hover {
			background: #F4E9AD; 
			color: #54503B }

		#menu li:hover ul {
			left: auto }
	</style>
	
</head>
<body>
	<div id="navigation">
		
		<ul id="menu">
			<li class="top"><a href="Home">Home</a></li>
			<li class="top"><a href="About">About</a></li>
			<li class="top"><a href="Training">Training</a>
				<ul>
					<li><a href="Overview">Overview</a></li>
					<li><a href="Training_Schedule">Schedule</a></li>
					<li><a href="Training_Contact">Contact</a></li>
				</ul>
			</li>
			<li class="top"><a href="Events">Events</a></li>
			<li class="top"><a href="Contact">Contact</a></li>
		</ul>

	</div>	
</body>
</html>

Centers, but drop down is in the wrong place: http://www.highgatecross.com/develo...ered_menu2.html
Code:

#menu li { 
    display: inline; /* float: left */
    list-style: none }
		
#menu li a {
    display: block; /* delete this line */
    padding: 7px 25px }

Note: I normally have my closing } flush left, but trying to keep it clean for the forum. And yes, this is not IE compatible.

Question: How to I center the top menu and have the drop down placed correctly?

Thanks.

List Menu

Similar Tutorials

View Content

I'm having troubles with a list menu.

The first problem I have is that the menu options dont fill the whole of the menu but do in Firefox.

The second problem is that the padding is different in IE and Firefox and I would like them to be the same.

If anyone could help that would be great.

http://departments.brooklands.ac.uk/wine/example/

Jemes

List Menu

Similar Tutorials

View Content

I am having problems with a horizontal list menu. If you take a look at the link below I'm trying to get the top picture, menu and the main content area to all line up vertically.

http://www.willisemail.co.uk/skill/

I may be wrong but the list menu seems to be the problem as it never lines up.

Any help would be great or a suggestion on how to go about this another way.

Thanks

Jemes

html {
padding:0px;
margin:0px;
}

body {
background-color: #F5F5F5;
font-size: 12px;
color: #564b47;
text-align:center;
margin:0px;
padding:0px;
}

/* Site Holder Start */
#box {
width: 750px;
margin: 0px auto;
padding: 0px;
text-align: left;
border: 1px solid #979696;
background-color: #FFFFFF;
background-image:url(../Images/mid.jpg);
}
/* Site Holder End */

/* Site Holder Start */
#box2 {
margin-left: 49px;
margin-right: 50px;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
text-align: left;
}
/* Site Holder End */

/* Content Start */
#content {
width: 461px;
padding:0px;
background-color:#FFF;
overflow: hidden;
}
/* Content End */

/* Content Start */
#content2 {
margin-left: 14px;
margin-right: 15px;
margin-top: 0px;
margin-bottom:0px;
padding:0px;
background-color:#FFF;
overflow: hidden;
}
/* Content End */

/*Right Menu Start*/
#right {
width: 178px;
padding:0px;
float:right;
background-color:#FFF;
overflow: auto;
}
/*Right Menu End */

.imgRight {
text-align:center;
margin-top: 10px;
}

.imgMain {
text-align:center;
margin-top:10px;
border: 1px solid #979696;
}

.Menu {
margin-top:10px;
padding: 0px;
}

.Menu ul
{
padding: 0px;
margin:0px;
list-style-type:none;
}

.Menu li
{
display: inline;
list-style-type:none;
padding: 1px;
margin:0px;
}

.Main {
margin: 0px;
border: 1px solid #979696;
margin-top:8px;
margin-bottom:10px;
}

Menu List Problem

Similar Tutorials

View Content

Hi,

I am working on this website atm: www.powys.gov.uk

I have a problem with the menu, the problem is when you scale the browser window and the menu links(on the left column) are forced to wrap, the indentation of the link isnt the same e.g:

Code:

   My Menu Link
Has been wrapped

I want it to be like:

Code:

  My Menu Link
  Has been Wrapped

The problem only occurs in IE, it looks perfect in Mozilla, can anyone offer any help on how I might fix this? I am out of ideas.

Regards,
Graham

List Of Menu In Ie And Firefox

Similar Tutorials

View Content

Hi;
I got two problem in my code.
1) a list of menu could not sit in the center.

2) a list menu has a gap from top in the Firefox, but there is not gap from top from IE browser. And in the IE Browser, the list of menu sit too hight on the top.
How could i sit the list of menu in the center and there are about 1px gas or not
gas between the top and the menu bar in IE and Firefox.

my code as following;

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"> 
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
  body {
         font: 80% arial, helvetica, sans-serif;
         background: white;
         margin: 0;
       }
#container{
   
    position: relative;
    width: 780px;
    w\idth: 780;
    border: solid #036;
    border-width: 0 3px;
    margin: auto;
 }

#navlist
{
  color: white;
  text-align: center;
  list-style-type: none;
  padding-bottom: 1px;
 
     
}

#navlist li
{
  bacground-color: #4c56d9;
  margin-left: 1px;
  display: inline;
  border: 3px solid #4c56d9;
  padding: 1px;
  
}

#navlist li a
{
  text-decoration: none;
  border: 2px solid #737be4;
  padding: 2px;
  color: white;
  margin-left: 1px;
  background-color: #4c56d9;
}
  


	
	
</style>
</head>

<body>
<div id="container">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">Contact Us </a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
</body>

</html>

Css List Menu Problem

Similar Tutorials

View Content

Simple Ul List For Menu

Similar Tutorials

View Content

Hi, I'm trying to make a simple rollover menu with a <ul><li> list.

Here's my stylesheet: Code:

.navigation{
	width:768px;
	height:26px;
	padding: 94px, 0px, 10px, 5px;	
	z-index:999;
}

.navigation ul.nav li {display:inline}

.navigation ul.nav li a.link: hover{
color:#fbe8be;
font-family:times, serif;
font-size: 14pt;
text-decoration:none;
}

.navigation ul.nav li a.link:active{
text-decoration:none;
color:#bac4a1;
font-family:times, serif;
font-size: 14pt;
}

And here's my XHTML: Code:

<div class="navigation">
<ul class="nav">
<li><a href="index.php" class="link">Home</a></li> |
<li><a href="ScopeofServices.php" class="link">Scope of Services</a></li> |   
<li><a href="BaselineFees.php" class="link">Baseline Fees</a></li> |   
<li><a href="BaslineProcedures.php" class="link">Baseline Procedures</a></li> |   
<li><a href="Qualifications.php" class="link">Qualification<a></li> |   
<li><a href="contact.php" class="link">Contact Us</a></li> |
<li><a href="considerations.php" class="link">Key Considerations & Pre-Conditions</a></li>
</ul>
</div>

Here's the page: http://www.caillouette.com/SelvanSite/index.php

Can anyone tell me why my rollovers don't work?

thanks
-

Css Menu List Styling

Similar Tutorials

View Content

I've been hit with a problem that I think isn't possible, but I'm hoping that someone else here might be able to offer some sort of solution. It's a bit complicated to explain, so I'll try and give as much detail as I can.

I have a menu system set up on a site, and it's styled correctly for the way that one section works. It's a standard unordered list.

FIRST MENU:
Code:

<ul>
    <li>
        <a href="page1.html">Link 1</a>
        <ul>
            <li><a href="page1.1.html">Link 1.1</a></li>
            <li><a href="page1.2.html">Link 1.2</a></li>
        </ul>
    </li>
    <li>
        <a href="page2.html">Link 2</a>
        <ul>
            <li><a href="page2.1.html">Link 2.1</a></li>
        </ul>
    </li>
</ul>

SECOND MENU:
Code:

<ul>
    <li>
        <a href="page1.html">Link 1</a>
    </li>
    <li>
        <a href="page2.html">Link 2</a>
    </li>
</ul>

My problem is that I also need to style another menu match this - but the second menu has to have it's first-level links look like the second-level links in the first menu.

This wouldn't be a problem normally as I'd be able to use different selectors, ID's or something else, but with this system, the menu is output from a closed function that I can't change. There's no ID's on the lists, and the classes are all the same. I can't change this, and I can't change the system to add anything else around each list to give it a better identifier. This means that both menus use the same CSS.

The only way that I can see that I can do this is to set up a CSS rule that styles the list item either only of it contains another<ul> item, or if it doesn't contain another <ul> item. As far as I know that's not possible to do.

Does anyone out there have an idea of where I can start with this?

Hidden List Menu

Similar Tutorials

View Content

Hi Folks

This is my first post here, hopefully I'll keep to etiquette I'm always ready to be corrected if I step out of line.

Anyway, I have an unusual problem I can't seem to solve. I am making a menu with drop downs using lists, I have it working in my HTML editor (CoffeeCup). When I try to view it in Firefox or IE7 the sub lists show and push the tabs I made to the side.

Here is the CSS I'm trying to use, some I've taken from tutorials, some of my own (which is where the problem possibly lies)

Code:

/*1. Taken from http://www.sohtanaka.com/web-design/liquid-color-adjustable-css-buttons/ with thanks */
.btn {
	float: left;
	background: url(images/btn_left.png) no-repeat;
	margin: 5px 0;
}
.btn a{
	float: left;
	height: 40px;
	width:100px;
	background: url(images/btn_stretch.png) repeat-x left top;
	line-height: 40px;
	color: #fff;
	font-size: 1em;
	text-decoration: none;
	padding-bottom:25px;
padding-left:10px;
}
.btn span {
	background: url(images/btn_right.png) no-repeat;
	float: left;
	width: 10px;
	height: 40px;
}
.btn_home { background-color: #575757;padding-left:10px; }
.btn_e1 { background-color: #575757;padding-left:10px; }
.btn_e2 { background-color: #575757;padding-left:10px; }
.btn_e3 { background-color: #575757;padding-left:10px; }
.btn_e4 { background-color: #575757;padding-left:10px; }
.btn_e5 { background-color: #575757;padding-left:10px; }
.btn_home:hover { background-color: #DC134C; }
.btn_e1:hover { background-color: #DC134C; }
.btn_e2:hover { background-color: #FF00FF; }
.btn_e3:hover { background-color: #DC134C; }
.btn_e4:hover { background-color: #DC134C; }
.btn_e5:hover { background-color: #DC134C; }
/*End of 1*/
/*My random scrawlings*/
#navigation {
	height:35px;
	width:787px;
	position:relative;
	margin:0 auto 0 auto;
	z-index:100;
}

#navmenu, #navmenu ul {
	padding:0;
	margin:0;
	list-style-type:none;
}

#navmenu {
	margin:0;
}

#navmenu li {
	float:left;
	position:relative;
	text-align:center;
}

#navmenu li a, #navmenu li a:visited {
	width:101px;
	font-size:1em;
	font-family:Arial;
	height:16px;
	text-decoration:none;
	
}



#navmenu li li a, #navmenu li li a:visited {
	display:block;
	width:122px;

	color:#fff;
	height:15px;
	text-decoration:none;
	z-index:100;
	margin-left:-1px;
}

#navmenu li:hover > a {
	background-color:;
	color:#fff;
	text-decoration:underline;
	
}

#navmenu li li:hover > a {
	background-color:#DC134C;
	color:#fff;
	text-decoration:underline;
	}

#navmenu li ul {
	display: none;
}
#navmenu li:hover > ul {
	display: block;
	position: absolute;
	top:0;
	left:203px;
}

#navmenu > li:hover > ul {
	left:0;
	top:35px;
}
/*End of my random scrawling*/

And here is the HTML I'm using the create my lists

Code:

<div id="navigation">
  <ul id="navmenu">
    <li class="btn btn_home"><a>Home</a><span></span></li>
    <li class="btn btn_e1"><a>Element 1</a><span></span></li>
      <ul>
        <li><a>Sub 1</a></li>
        <li><a>Sub 2</a></li>
        <li><a>Sub 3</a></li>
        <li><a>Sub 4</a></li>
      </ul>
  	<li class="btn btn_e2"><a>Element 2</a><span></span></li>
      <ul>
        <li><a>Sub 5</a></li>
        <li><a>Sub 6</a></li>
        <li><a>Sub 7</a></li>
        <li><a>Sub 8</a></li>
        <li><a>Sub 9</a></li>
      </ul>
  	<li class="btn btn_e3"><a>Element 3</a><span></span></li>
  	<li class="btn btn_e4"><a>Element 4</a><span></span></li>
  	<li class="btn btn_e5"><a>Element 5</a><span></span></li>
  </ul>
</div>

Any help in where I've been going wrong would be greatly appreciated.

Thanks

Dave

Creating A Menu Using - List

Similar Tutorials

View Content

I'm trying to create a menu using 'list' but so far without much success :-(

Problems?

Not displaying horizontally in browser.

Can't center text in box.

Adding 'padding' didn't work.

Any help would be much appreciated,

Mike

P.S. Please ignore the colors ;-)

//paste.pocoo.org/show/207718/

Please add http to the above - I'm not yet allowed to ..

Horizontal List Menu Woes

Similar Tutorials

View Content

Hi, I have a site with a horizontal menu bar that has a submenu that pops up with the top menu is hovered over. I've got everything working fine, except for one little thing; in Firefox the submenu is vertically aligned instead of horizontally. For once IE has gotten it right (or at least the way I want it) by positioning the sub menu horizontally. I can't for the life of me figure out how to get the sub menu to flow horizontally in FF. I've tried display: inline and float: left and all kinds of things but nothing seems to affect it.

My site is here

http://www.soton.ac.uk/~rollhock/new/index3.php

And the css file

http://www.soton.ac.uk/~rollhock/new/includes/style.css

If anyone is able to help I will be eternally grateful!
Thanks

Problem With Horizontal List Menu

Similar Tutorials

View Content

Heya!
I am really new to html - creating my first website for uni course now.
My problem is with the menu I have created - it's basically 5 div's with list within list in them. so that the deeper list is a sub-menu, displaying on hover on the first one.
The problem appears only in IE9 compatibility view, it works in IE9,8,7,firefox and chrome.

this is the html:
<div id="ourproject">
<ul>
<li>OUR<br>
PROJECT
<ul>
<li><a href="index.html">Project Overview</a></li>
<li><a href="Introduction.html">Introduction</a></li>
<li><a href="participants.html">Participants</a></li>
</ul>
</li>
</ul>
</div>

and my css:

#ourproject ul {
position:relative;
color: #FFF;
text-decoration: none;
width: 102px;
top:0px;
left:0px;
height:86px;
list-style:none;
float:left;
padding-left:20px;
border-left-width: 3px;
border-left-style: solid;
border-left-color: #FFF;
}
#ourproject ul:hover {
color:#FF9900;
border-left-color: #F90;
padding-left:20px;
}
#ourproject ul ul {
position:relative;
visibility:hidden;
z-index:2000;
background-color:#0E1221;
font-size: 12px;
width: 602px;
display: inline-block;
height: 45px;
float: left;
top:25px;
left:-23px;
}
#ourproject ul li {
display: inline-block;
margin-right:30px;
height: 25px;
float: left;
margin-top:4px;
width: 125px;
}
#ourproject ul:hover ul {
visibility:visible;
}
#ourproject ul ul li{
width:80px;
padding: 0;
text-align:left;
}

In IE9 compatibility view, the menu is distorted.

I have tried playing with widths of the #ourproject ul, changed it to 50px and turned on overflow:hidden. It made the other divs jump in, but there is a weird blank space bwteen where the div is cut off bu overflow, and the place where next one starts.

I have tried to put in links with photos, but forum does not allow me to. please if someone can help me, i will send them on e-mail or pm, if needed.

I hope to get some answer soon!
Please ask any more question if you need to- i will be happy to answer.
Thanks in advance.