Centering

[buckycat7]

I have something I can’t figure out. I’ve centered using CSS many times, the whole text-align center/ margins 0 auto line. I’m working on a mock up now and I can’t for whatever reason get the nav to center.

Here is the code(HTML)

Code:

• Home
• Home
• Home
• Home
• Home

Headline

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam tincidunt, quam quis rutrum condimentum, nisi lacus sagittis tortor, a accumsan risus eros non velit. Etiam porttitor quam eu ligula. Ut sodales, sapien non dictum dapibus, massa felis laoreet diam, egestas sagittis nunc orci sit amet nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mauris a arcu vulputate luctus. Fusce laoreet bibendum dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In condimentum est vel magna. Quisque porta lectus eget nisi. Proin lacus dui, consequat nec, cursus ut, aliquam vehicula, tellus. Morbi porttitor, diam sed suscipit convallis, neque ipsum ultricies massa, at laoreet purus felis eu nibh. Etiam leo metus, commodo vitae, lobortis eget, dapibus ac, augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

• Home
• Home
• Home
• Home
• Home

Here is the CSS

Code:

body{font-size: 62.5%; font-size: .9em; font:Georgia, “Times New Roman”, Times, serif; line-height: 21px; margin: 5px 0; color:#666666;}
.wrapper{text-align: center; margin: 0 auto;}

h2{font: 1.2em; color:#be1e2d;}
ul{list-style: none inside}

.gray{width: 100%; background-color: #f2f2f2; height: 100px;}

.nav{padding-top: 10px;}
.nav li{display: inline;}
.nav li a{display: block; width: 80px; height: 80px; float: left; text-indent:-9999px; padding-left:10px;}
.nav li.drive a{background: url(images/drive.jpg) bottom center no-repeat;}
.nav li.drive a:hover{background-position: center center;}

.red{width: 100%; background-color: #BE1E2D; height: 25px;}

.content{text-align: left; margin: 0 auto; width: 800px;}
.main{float: left; width: 580px;}
.side{float: right; width: 200px;}

It’s the .nav class that is causing the problems. Everything else lines up just fine, but the nav for some reason lines up to the left and nothing I can do will make it center on the page.

Any thoughts/ideas?

Thanks.

[buckycat7]

Here is the screen shot from my local computer. I’m developing it on Mac and testing with Firefox. The problem if for whatever reason the images go to the left. Sorry I’m sure the images would have made the problem clearer.

[buckycat7]

Thats not do anything either. Here is the and screen shot…way stripped down:

Code:

• Home
• Home
• Home
• Home
• Home

Code:

body{ text-align: center; font: 62.5%; font-family: Georgia, “Times New Roman”, Times, serif; padding: 0;}
.wrapper{text-align: left; width: 800px; margin: 0 auto;}

.nav{padding-top: 10px;}
.nav li{display: inline;}
.nav li a{display: block; width: 80px; height: 80px; float: left; text-indent:-9999px; padding-left:10px;}
.nav li.drive a{background: url(images/drive.jpg) bottom center no-repeat;}
.nav li.drive a:hover{background-position: center center;}

Okay, with that the page is center on the page, but the menu bar still stays to the left, I want it to be directly centered in the middle of the screen. I have to use the float: left tag so that it stays displayed inline. And even if I add the < center > tags above a below the ul code is does nothing. Plus as you can see in the mock up above I’m wanting the greay and red bar to have a width of 100% of the page with the content still centered in the middle.

I’m really at a lost here I have no idea what is going on. Does this make the problem any clearer?

[Author]

Posts