CSS - Trouble Centering Dropdown Navigation

Ok, so I've got a decent design laid out, and I'm working on creating the markup for it, but I've run into some trouble. It's a fairly common style, two collumn with a header and footer. The navbar is a 2 deep nested unordered list sitting on the left side inside a floated div called "sidebar." What I'd like, is for the space to the right of it to function as if it was a separate cell as it were (in tables lingo anyway, if you can't tell I'm still learning the new way of things). The funny thing is, IE does this by default, and I know that's incorrect, but I really wish I could get the layout working just like it works in IE.

The page is located at: http://www.digital-traffic.net/gallery.php

CSS is at: http://www.digital-traffic.net/styles/main.css

I hope someone can help me with this, I've been messing with it for hours, and it /seems/ like it should be simple.

Take a look at this page.

I am trying to extend the green background of the nav bar over to the black line on the right hand side, and to center the css buttons so that the whole nav is centered within the containing div (the black lines on the web page.)

Here is the relevant page code:
PHP Code:
<div id="navbar" class="nav">
<ul>
        <li class="first"><a href="/admin/events/">SUBSCRIBE</a></li>
        <li><a href="/admin/photos/">ISSUES</a></li>
        <li><a href="/admin/content/">PURCHASE CATALOG</a></li>
        <li><a href="/admin/press/">SELLERS GUIDE</a></li>
        <li><a href="/admin/resources/">PRODUCTS</a></li>
        <li><a href="/admin/resources/">NEWSLETTERS</a></li>
        <li><a href="/admin/resources/">EVENTS</a></li>
        <li><a href="/admin/resources/">BLOGS</a></li>
        <li><a href="/admin/resources/">ABOUT US</a></li>
</ul>

</div> 




and here is the CSS for the nav bar:
PHP Code:
#navbar {
    width: 768px;
    text-align: center;
    background-color: #098E00;
    margin-top: 35px;
}

.nav ul {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 11px;
}

/* any li element within .nav container */
.nav li {
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid #fff;
}

/* any anchor in a .nav list item element */
.nav li a {
    display: block;         /* expand to fill parent li */
    margin: 0;              /* no space between anchors */
    padding: 3px 6px 3px 6px; 
    text-decoration: none;  /* no underline */
    color: #fff;         /* override default link color */
    background-color: #098E00;
}

/* 1st list item has no left border */
.nav li.first {
    border-left: 0 none;
}

/* rollover effect */
.nav li a:hover {
    background-color: #ccc;
} 





How do I center the nav bar, and make it so that the CSS buttons are centered on a green background that goes from the left hand black line to the right hand black line?

THANKS FOR YOUR HELP.

Hello,

My website yaou.org looks good in every browser except IE...

The css for the menu can be checked here : yaou.org/website/menu.css

Can someone tell me how to fix the CSS ?

Thanks,

I'm editing a CSS drop down navigation that uses <ul> and <li>.

Is there a way to change the background color & rollover in just one of the dropdowns? The code is below in two sections. I've highlighted the list that I'd like to change the background color of.

Thanks for your help!


Code:

<div id="wrap">
		<ul id="navbar">
		<!-- The strange spacing herein prevents an IE6 whitespace bug. -->
			<li><a href="#"><IMG SRC="d_images/navigation_01.gif" border="0"></a>
			</li>
			<li><a href="#"><IMG SRC="d_images/navigation_02.gif" border="0"></a>
				<ul>
				<li><a href="summit_09registration.cfm">Register</a></li><li>
				<a href="summit_09scholarship.cfm">Scholarships</a></li></ul>


			<li><a href="#"><IMG SRC="d_images/navigation_03.gif" border="0"></a>
				<ul>
					<li><a href="summit_09awards.cfm">Leadership Awards</a></li><li>
					<a href="summit_09party.cfm">Anniversary Party</a></li><li>
					<a href="summit_09work.cfm">Work Project</a></li><li>
					<a href="summit_09dine.cfm">Dine Arounds</a></li><li>
					<a href="summit_09jazz.cfm">Jazz Fesitval</a></li><li>
					<a href="summit_09networking.cfm">Networking</a></li></ul>
					</li>
			<li><a href="#"><IMG SRC="d_images/navigation_04.gif" border="0"></a>
				<ul>
					<li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li>
					<li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul>
			</li>

			<li><a href="#"><IMG SRC="d_images/navigation_05.gif" border="0"></a>
				<ul>
					<li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li>
					<li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul>
			</li>

			<li><a href="#"><IMG SRC="d_images/navigation_06.gif" border="0"></a>
				<ul>
					<li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li>
					<li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul>
			</li>

	<li><a href="#"><IMG SRC="d_images/navigation_07.gif" border="0"></a>
				<ul>
					<li><a href="summit_09hotel.cfm">Conference Hotel</a></li><li>
					<a href="summit_09travel.cfm">Travel</a></li><li>
					<a href="summit_09neworleans.cfm">New Orleans</a></li></ul>
			</li>



</ul></div>

Code:

<style type="text/css">

#navbar {
	margin: 0;
	padding: 0;
	height: 0;}
#navbar li {
	list-style: none;
	float: left; }
#navbar li a {
	display: block;
	padding-bottom:0px;
	padding-left: 0px;
	padding-right:0px;
	padding-top:0px;
	border: 0px;
	color: #fff;
	font-family: helvetica;
	font-size: 8pt;
	font-style: bold;
	font-color: #ffffff;
	text-decoration: none;}
#navbar li ul {
	display: none;
	width: 10em; /* Width to help Opera out */
	background-image: url(../images/summit_nav_back.gif);}

#navbar li:hover ul, #navbar li.hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0; }
#navbar li:hover li, #navbar li.hover li {
	float: none; }
#navbar li:hover li a, #navbar li.hover li a {
	background-image: url(../images/summit_nav_back.gif);
	border-bottom: 1px solid #fff;
	color: #000; }
#navbar li li a:hover {
	background-image: url(../images/summit_nav_red.gif); }
</style>


<script language="JavaScript">
<!--

function SymError()
{
  return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
  return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
	var sfEls = document.getElementById("navbar").getElementsByTagName("li");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" hover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" hover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

I have a bit of an issue with a drop down script I'm working on. It's a CSS menu built from ul/li/a tags with an iframe thrown in for IE6 sake.

My problem is 2 fold. The first problem is in firefox. There is 2-3px of mystery padding/margining on my tags. I didn't put it there, nor does it show up in browsers other than firefox.

My second problem is a safari 2 issue. The dropdowns appear to be hidden behind some kind of container, very weird if you ask me.

I'm using jQuery for my script manipulation (if you don't know about it, learn about it. Its laziness is astounding!)

[Edit: link updated]
http://programmer .whipplehill .com/wes/newDD/list/getPageList.asp

Any help would be great! Thanks
--Wes

I have a CSS dropdown menu with 1 sublevel which I want centered on my page. It looks fine when centered if I use Firefox, but in IE, the sublevels now pop out to the right of the main item and the 1st item doesnt show.

Here's my CSS for IE:

Code:

div.menu
{
position:relative;
height:30px;
display:block;
margin: 0 auto;
text-align:left;
}

ul.menu
{
top:0px;
left:0px;
position:relative;
padding:0px;
margin: 0 auto;
display:block;
float:left;
}

ul.menu li {
float:left;
}

ul.menu ul
{
position:relative;
margin:0px;
top:0px;
left:0px;
padding:0px;
display:block;
}

ul.menu ul li
{
display:inline;
float:none;
position:relative;
top:0px;
left:0px;
}

a.menu
{
display:block;
width:100px;
height:30px;
margin-top:-4px;
}
a.menu:hover
{
display:block;
}

And my HTML:

Code:

<body onload="MM_preloadImages('../Pictures/CoachesY.png','../Pictures/ScheduleY.png','../Pictures/RostersY.png','../Pictures/Sub Buttons/CoachHenriottY.jpg','../Pictures/Sub Buttons/CoachWitteY.jpg','../Pictures/Sub Buttons/CoachSchneiderY.jpg','../Pictures/Sub Buttons/CoachReevesY.jpg','../Pictures/Sub Buttons/FreshmanY.jpg','../Pictures/Sub Buttons/JVY.jpg','../Pictures/Sub Buttons/VarsityY.jpg','../Pictures/CampsY.png','../Pictures/SummerInfoY.png','../Pictures/LinksY.png','../Pictures/YouthInfoY.png','../Pictures/DirectionsY.png')" align="center">
<table width="690" align="center" bgcolor=#8560A9>
  <tr><td bordercolor="#FFFFFF" bgcolor="#8560A9">
<table width="690" border="0" align="center">
  <tr bgcolor="#FFFFFF" height="227">
    <td height="15" bgcolor="#8560A9"><div id="center"><img src="../Pictures/TitlePhoto.jpg" alt="Lady Elks Basketball" width="800" height="200" /><br />
	  <div class="menu">
   <ul class="menu">
      <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','../Pictures/CoachesY.png',1)"><img src="../Pictures/CoachesP.png" name="Image1" width="100" height="30" border="0" id="Image1" /></a>
         <ul>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','../Pictures/Sub Buttons/CoachHenriottY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachHenriottP.jpg" name="Image4" width="100" height="30" border="0" id="Image4" /></a></li>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','../Pictures/Sub Buttons/CoachWitteY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachWitteP.jpg" name="Image5" width="100" height="30" border="0" id="Image5" /></a></li>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','../Pictures/Sub Buttons/CoachSchneiderY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachSchneiderP.jpg" name="Image6" width="100" height="30" border="0" id="Image6" /></a></li>
			<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','../Pictures/Sub Buttons/CoachReevesY.jpg',1)"><img src="../Pictures/Sub Buttons/CoachReevesP.jpg" name="Image7" width="100" height="30" border="0" id="Image7" /></a></li>
         </ul>
      </li>
   </ul>
   <ul class="menu">
      <li><a class="menu" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','../Pictures/ScheduleY.png',1)"><img src="../Pictures/ScheduleP.png" name="Image2" width="100" height="30" border="0" id="Image2" /></a>
         <ul>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','../Pictures/Sub Buttons/FreshmanY.jpg',1)"><img src="../Pictures/Sub Buttons/FreshmanP.jpg" name="Image8" width="100" height="30" border="0" id="Image8" /></a></li>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','../Pictures/Sub Buttons/JVY.jpg',1)"><img src="../Pictures/Sub Buttons/JVP.jpg" name="Image9" width="100" height="30" border="0" id="Image9" /></a></li>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','../Pictures/Sub Buttons/VarsityY.jpg',1)"><img src="../Pictures/Sub Buttons/VarsityP.jpg" name="Image10" width="100" height="30" border="0" id="Image10" /></a></li>
         </ul>
     </li>
   </ul>
   <ul class="menu">
      <li> <a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../Pictures/RostersY.png',1)"><img src="../Pictures/RostersP.png" name="Image3" width="100" height="30" border="0" id="Image3" /></a>
         <ul>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image13','','../Pictures/Sub Buttons/FreshmanY.jpg',1)"><img src="../Pictures/Sub Buttons/FreshmanP.jpg" name="Image13" width="100" height="30" border="0" id="Image13" /></a></li>
            <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','../Pictures/Sub Buttons/JVY.jpg',1)"><img src="../Pictures/Sub Buttons/JVP.jpg" name="Image12" width="100" height="30" border="0" id="Image12" /></a></li>
			<li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','../Pictures/Sub Buttons/VarsityY.jpg',1)"><img src="../Pictures/Sub Buttons/VarsityP.jpg" name="Image11" width="100" height="30" border="0" id="Image11" /></a></li>
         </ul>
      </li>
   </ul>
   <ul class="menu">
   	  <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image14','','../Pictures/CampsY.png',1)"><img src="../Pictures/CampsP.png" name="Image14" width="100" height="30" border="0" id="Image14" /></a></li>
   </ul>
   <ul class="menu">
   <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','../Pictures/SummerInfoY.png',1)"><img src="../Pictures/SummerInfoP.png" name="Image15" width="100" height="30" border="0" id="Image15" /></a></li>
   </ul>
   <ul class="menu">
   <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','../Pictures/LinksY.png',1)"><img src="../Pictures/LinksP.png" name="Image16" width="100" height="30" border="0" id="Image16" /></a></li>
   </ul>
   <ul class="menu">
   <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image17','','../Pictures/YouthInfoY.png',1)"><img src="../Pictures/YouthInfoP.png" name="Image17" width="100" height="30" border="0" id="Image17" /></a></li>
   </ul>
   <ul class="menu">
   <li><a class="menu" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image18','','../Pictures/DirectionsY.png',1)"><img src="../Pictures/DirectionsP.png" name="Image18" width="100" height="30" border="0" id="Image18" /></a></li>
   </ul>
</div><br />
    </div>	</td>
    </tr>
	  </table>
</td></tr></table>
</div>
</body>

Any help would be appreciated.

Of course I've seen lots of CSS navigation using image rollovers, and others using dropdowns, but I haven't been able to find any that use both at the same time.

I'm trying to put it on a WordPress site ...

Any links or help would be much appreciated!

Laura S.

Im trying to make my site into a CSS layout with dropdown menus. The layout was fine untill i implemented the dropdown menu. Now the center window area is broken.

1. Why is this happening and whats the solution?
2. How can I make the navigation bar extend across the full length of my page area?

http://www.nevertap.com/float/

I aim to create my own wordpress theme eventually, but for now I have been trying to customize free open source themes made by others.

I have a test one set up at http://www.theepicnetwork.com/gfn

My query here is that I am trying to make that navigation menu function as a dropdown menu, but I can't seem to do it.

I managed to make it Wordpress 3.0 compatible so I can edit the menu items through the wp admin cp.

But i just need to successfully give it a drop down function. Here is all my code.

-------
NAV MENU CSS

Code:

 /* Navigations*/       #nav { position:relative; padding:0; margin:0 auto; height:68px; width:1002px; background:url(images/nav_bg.png) no-repeat center top; }       #nav ul { position:absolute; z-index:1; top:0; left:50px; width:900px; height:65px; padding:0; margin:0; list-style:none; }       #nav li { float:left; margin:0; padding:0; list-style:none; }       #nav a { display:block; padding:27px 20px; float:left; border:none; font:bold 12px Myriad Pro, Helvetica, Arial, sans-serif; color:#fff; text-transform:uppercase; }       #nav a:hover{ color:#f0ff21; background:url(images/nav_over.gif) repeat-x center top; }

INTENDED DROPDOWN CSS - I copied this from one of my other sites.

Code:

#dropmenu, #dropmenu ul {margin-top:0px; margin-left:3px;padding:0px; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; z-index:300; width:100%; background:#0A7B05; font-weight:bold;} #dropmenu a {display:block; padding:6px 1em; color:#000; border-right:0px solid #000; text-decoration:none; background:transparent url(images/menu-button.png);font-weight:bold;} #dropmenu a:hover {background:transparent url(images/menu-button-hover.png); color:#fff;} #dropmenu li {float:left; position:relative;} #dropmenu ul {position:absolute; display:none; width:12em; top:1.9em; left:-1px;} #dropmenu ul a {border:1px solid #000;} #dropmenu li ul {border-top:0px solid #000; width:14.1em;} #dropmenu li ul a {width:12em; height:auto; float:left;  border-bottom:1px solid #000;} #dropmenu ul ul {top:auto;} #dropmenu li ul ul {left:12em; margin:0px 0 0 10px;} #dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {display:none;} #dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {display:block;}

HEADER.PHP MENU LAYOUT

Code:

 <div id="nav"> <ul id="dropdown"><li><a href="<?php echo get_option('home'); ?>">Home</a></li>  <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'nav' ) ); ?> </ul>          </div>

-----

any help will be appreciated

I've created my first attempt at a pure CSS drop-down menu using an AlistApart article as a guide. It works great in Firefox, but in IE the menu's are reloading the background image and the list bullet images each time you move to a new link in the drop down.

The page is here

Any ideas?

Here is the CSS for the Menu (not cleaned up so pardon it's rag-tagness):

Code:

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  }

/* First Level */
li {
  float: left;
  position: relative;
  width: 10em;
  }
  
li#first {
	border-left-width: 2px;
	}

li#last {
	border-right-width: 2px;
	}

/* Second Level -- Drop Downs */
li ul {
  display: none;
  position: absolute; 
  top: 100%;
  left: 0;
  background: url(../images/backgroundvert.gif) bottom left no-repeat;
  padding: 3px 0 3px 8px;
  border-right: solid 1px #777777;
  }

/* Reset for all non-IE Browswers*/
li > ul {
	top: auto;
	left: auto;
	}

/* Show Second Level when First Level is Rolled Over */
li:hover ul, li.over ul{ display: block; }

a {
	text-decoration: none;
}

a:link {
	color: #080;
}

a:visited {
	color: #790;
}

a:active {
	color: red;
}

a:hover {
	text-decoration: underline;
}

#nav a {
	font-weight: bold;
	color: #149AF1;
	font-size:13px; 
}

#nav a {
	text-decoration: none;
}

/* Drop Down Menu Links */
#nav li li a {
	display: block;
	font-weight: normal;
	color: #149AF1;
	padding: 0.2em 10px 0 15px;
	background-image:url(../images/bullet.gif);
	background-repeat:no-repeat;
}

#nav li li a:hover {
	padding: 0.2em 10px 0 15px;
	background-image:url(../images/bullet2.gif);
	background-repeat:no-repeat;
	text-decoration: underline;
}

#navs {
border:1px 0 0 0;
border-right: 0;
width: 100%;
padding-left:4px;
height:20px;
padding-top:3px;
}

.nonlink {
font-weight: bold;
color: #149AF1;
font-size:13px;
cursor:default;
}

Hi All,

I am building a site that has the following structure for the navigation;

Code:

<div id="navigation">
    <ul id="navlist">
      <li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
      <li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
      <li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
        <ul>
          <li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
          <li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
          <li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
          <li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
          <li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
        </ul>
      </li>
      <li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
      <li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
    </ul>
  </div>

The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;.

Edit: Just noticed that I can't link to the full site that I have uploaded for preview.

What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another?

Your help would be much appreciated!

Hey everyone,

I am fairly comfortable with HTML, and even know a decent amount of PHP and Javascript. But sometimes trying to do the simplest things in CSS makes my head spin! (this is one of those times).

I've got a "scrolling" header at the top of a page (stays visible even when scrolling), and am trying to center a DIV (which contains opt-in forms) inside that header. It looks good when my browser window is maximized (at 1280x1024 resolution). But when I minimize the browser or check it in other screen resolutions, the "centering" of the opt-in forms are off.

Here is the page...

www.wordflood.com/Test/Scrolling_Header.html

And here are the CSS includes...

www.wordflood.com/Test/style.css
www.wordflood.com/Test/IE6_style.css

This was really just a quick hack from a "scrolling header" demo I found online, so I must have overlooked something.

Any ideas?

Hey guys, I'm having trouble centering div boxes on my page, wondering if anyone can help.

I have tried using {margin: 0 auto;} which works fine, but when the scrollbar appears on the page it knocks it off balance and the other content on the page becomes mis-aligned. I have also tried setting left margins to push the div to the middle, but I figured this would cause problems and wouldn't look right to people using higher than 1024x768 resolutions.

Is there any other way?

Hi all, this is my CSS:

Code:

body {
	font-family:arial;
	font-size:14px;
	background-color:#FFFFFF;
	margin: 0;
    padding: 0;
}

.mainbar {

	position:absolute;
	height:100%;
	width:600px;
	display:block;
	background-color:#F2F2F2;
	top:0px;
	bottom:0px;
	z-index:0;
	border-top: 0px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 0px solid #000000;
	border-left: 1px solid #000000;
}

.contact {
	position:absolute;
	display:block;
	height:40px;
	width:600px;
	background-color:#FFFFFF;
	top:80%;
	bottom:0px;
	z-index:0;
	border-top: 1px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
}

.logo { 
	position:absolute;
	display:block;
	height:200px;
	width:600px;
	background-color:#CCCCCC;
	top:10%;
	bottom:10%;
	border:1px solid #000000;
	z-index:2;
}

.logoborder {

	border-top: 0px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 0px solid #000000;
	border-left: 1px solid #000000;
	
}

Now how do I go about centering all of this? I have put many frustrated hours into this, and have tried everything that could have a possibility of working but have come out with nothing. Any help would be appreciated!

Please, I have read other forum posts and it is not clear what to do, so treat me like i'm 5 years old!!!

Thanks!

Jack.

Now while I did manage to work this out with margins and paddings, I have to ask how to do it properly.

It's very basic. You have blank page. No wrappers no nothing.

Then 1 div, holds, 1 ul, with 20 li.

The div has specified width. How to center the ul inside the div?

I need the UL to NOT have specified width since I'll be adding more items to it over time.

Thanks!