Navigation Tabs Problem

[acownamedkow]

Oops, I forgot to say what my problem was... I am trying to get this to center on the page, but I can't get it to work. Can someone please help me with this?


CSS:

div.main {border-width:2px; border-color:ffffff; background-color:C6D5DC; width:100%}

/*- Menu Tabs 7--------------------------- */

#tabs7 {
float:left;
width:100%;
background:#C6D5DC;
font-size:93%;
line-height:normal;
border-bottom:1px solid #333B66;
}
#tabs7 ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs7 li {
display:inline;
margin:0;
padding:0;
}
#tabs7 a {
float:left;
background:url("tableft7.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs7 a span {
float:left;
display:block;
background:url("tabright7.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#999;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs7 a span {float:none;}
/* End IE5-Mac hack */
#tabs7 a:hover span {
color:#ECB546;
}
#tabs7 a:hover {
background-position:0% -42px;
}
#tabs7 a:hover span {
background-position:100% -42px;
}

#tabs7 #current a {
background-position:0% -42px;
}
#tabs7 #current a span {
background-position:100% -42px;
}


HTML:

<center>
<div class="main">
<a href="index.html"><img src="images/fine-art-artist.gif"></a>
<br>
<div id="tabs7" align="center">
<ul>
<!-- CSS Tabs -->
<li><a href="paintings.html"><span>Gallery</span></a></li>
<li><a href="for-sale.html"><span>Available paintings</span></a></li>
<li><a href="commissions.html"><span>Commissions</span></a></li>
<li id="current"><a href="artist.html"><span>Artist's Note</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
<li><a href="guestbook.html"><span>Guestbook</span></a></li>
</ul>
</div>
</div>
</center>

[bustamelon]

Is this a riddle?

[acownamedkow]

Is this a riddle?
Sorry, it's fixed. I was in a hurry to get it posted.

[fyo]

I'm not sure I understand what you want centered. The "main" div has a width of 100%, so it's going to be as wide as the viewport. Not much to center there.

Anyway, what you want to do is add "margin: 0 auto;" to whatever block-level element you want centered. Let's say your "main" div had a width of 70%. Then adding that would result in the div being centered.

Centering using margin is the correct CSS way of doing things. It's not inherited, so you'll need to apply it to any nested block-level elements you want centered as well.

If you also want to align inline content, "text-align: center;" is what you need to use.