centering help please

[RZX Developer]

Hey All,

I have a problem, I am attempt to design my first tabless layout which seems to be giving me all sorts of problems, I am currently atteptimg to place the part where it has "Destination", "Destination", "Destination", etc at the bottom of the layout: http://www.cheep-flights.com/
With this I want it to be in the center of the layout but everytime I change the float attribute to center it completely ruins the layout.

Here is my HTML code

Code: Select all

<div class="desttable">
<ul>
<li><a href="">DESTINATION</a></li>
<li><a href="">DESTINATION</a></li>
<li><a href="">DESTINATION</a></li>
<li><a href="">DESTINATION</a></li>
<li><a href="">DESTINATION</a></li>
</ul>
</div>

Here is my CSS code

Code: Select all

.desttable{
    position: relative;
    display: block;
    height: 20px;
    font-family: Arial,Verdana,Helvitica,sans-serif;
    font-size: 10px;
    font-weight: bold;
    padding: 5px;
}

.desttable ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: auto;
}

.desttable ul li{
    display: block;
    float: left;
    border: 1px solid #000;
}

.desttable ul li a{
    display: block;
    float: left;
    color: #0096ff;
    text-decoration: none;
    padding: 1px 10px 0px 10px;
    height: 18px;
}

.desttable ul li a:hover{
    text-decoration: underline;
    color: #000000;
}

Any help would be most appreciated

Thanks
Wayne

[MikeHopley]

Originally Posted by RZX Developer

everytime I change the float attribute to center it completely ruins the layout.

There is no float: center;. Float takes the values "left", "right", or "none" (the default).

"Float: center" is invalid CSS that will never work.

To centre a <div>, or other block-level element, use the CSS "margin: 0 auto;"

[RZX Developer]

Hey Mike,

In which part of my css do I add "margin: 0 auto;"?

Thanks

Wayne

[MikeHopley]

Originally Posted by RZX Developer

Hey Mike,

In which part of my css do I add "margin: 0 auto;"?

Thanks

Wayne

Apply this to whatever element you want centred. It also requires you to specify a width. For example, to centre the container <div id="footer">:

Code: Select all

div#footer {
width: 700px;
margin: 0 auto;
}

This will centre it horizontally inside its parent container. This could be (say) another DIV, or the viewport (if there's no higher container).

You can replace the "0" with another number if you want top and bottom margins. Or you can expand the shorthand:

Code: Select all

margin: 20px auto 10px auto;

[RZX Developer]

Thanks I shall try this now

Wayne

[MikeHopley]

One more thing: it won't work in IE if you trigger quirks mode.

To avoid triggering quirks mode, use a correct Doctype.

Note that this will never work in IE5 (IE5 is always in quirks mode, as it were). There is a workaround, however.

[RZX Developer]

Thanks mate

[karinne]

Hmmm .... I posted that answer in the FAQ of the Webforumz Newsletter