centering help please

RZX Developer · #1 (**permalink**) Aug 2nd, 2007, 08:52

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 · #2 (**permalink**) Aug 2nd, 2007, 09:06

Quote:

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 · #3 (**permalink**) Aug 2nd, 2007, 09:10

Hey Mike,

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

Thanks

Wayne

MikeHopley · #4 (**permalink**) Aug 2nd, 2007, 09:15

Quote:

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 · #5 (**permalink**) Aug 2nd, 2007, 09:20

Thanks I shall try this now

Wayne

MikeHopley · #6 (**permalink**) Aug 2nd, 2007, 09:46

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 · #7 (**permalink**) Aug 2nd, 2007, 09:55

Thanks mate

karinne · #8 (**permalink**) Aug 2nd, 2007, 11:58

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Vertical centering - please help!	mpnuttall	Web Page Design	6	Apr 16th, 2008 11:38
Centering a Page In CSS	britishchampion	Web Page Design	5	Jan 3rd, 2008 16:20
Centering website	afowler	Web Page Design	8	Oct 24th, 2007 18:59
Centering a DIV	johnmr	Web Page Design	12	Sep 13th, 2006 13:07
centering vertically	benbacardi	Web Page Design	17	May 27th, 2004 13:51

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
centering help please