3 replies to this topic

[crushed]

I recently read a few convincing articles over the transition from tables to CSS layouts. So now here I am trying to make some nice looking DIV's.

www.virtueskate.com

I am trying to get the box that says NAVIGATION right under the left side of the image. That's one thing I need help with. One of the mains, is do you see the soon to be links, saying Home and Team? Those need to be centered under the word NAVIGATION, but since it's a list, its appearing off to the right of the centered point. I set list-style to none, so you don't see bullets - so I know that if you set the option display: inline it'll show them side by side, so is there one thats like display: horizontal? Where they would be directly underneath each other? Code would be appreciated.

[coolaid]

it would be

display: block

[crushed]

thanks for the quick reply, but that doesn't work..it leaves the links in the exact same place! they don't center themselves out right underneath the navigation text..

[raenef]

I just quickly glanced at your code and I think I may be able to help:
#1 Close your html file with the </body> and </html> (tip)

#2 Open your css file and replace:

#address ul, #address li {
 background-color: #FFBFBF;
 font: normal 10px/11px Verdana, Arial, Helvetica;
 color: #B30000;
 width: 100%;
 height: 12px;
 border: 1px solid #B30000;
 margin: 0px 0px 1px 0px;
 padding: 1px 0px 1px 2px;
 text-align: left;
 display: block;
 list-style-type: none;
}

with:

#address{
 background-color: #FFBFBF;
 font: normal 10px/11px Verdana, Arial, Helvetica;
 color: #B30000;
 width: 100px;
 height: auto;
 margin: 0px 0px 0px 0px;
 padding: 1px 0px 1px 2px;
}
#address li{
padding: 0px;
text-align: center;
list-style: none;
border: 1px solid #B30000;
}

Note this was just quickly thrown together but I believe it should work with what you're trying to do.