Is there a way to float something to the center? Options

[NovaArgon]

CODE

  }
ul#mainNav li{
    float: right;
    border-top: 1px solid #766454;
    border-bottom: 1px solid #766454;
  }

How to I center this?

I know I can float left and right and none but that doesn't work.

[Darin McGrew]

What are you trying to center? The whole list (the ul element)? Just the inline content of the li element? The whole li element?

[NovaArgon]

http://www.tarantuladatabase.com/assets/forum

See the nav bar under the logo that is floated to the right?

That

This post has been edited by NovaArgon: Jun 18 2008, 07:33 PM

[Darin McGrew]

Give the ul#mainNav element left and right margins of auto, and display its li elements inline rather than floating them.

See also CSS: centering things and Centring using CSS.

[NovaArgon]

CODE

<div id="navblock">
            <ul id="mainNav">
                <li><a href="../../index.php" title="Tarantula Database Home">Home</a></li>
                <li><a href="../pages/search.php" title="Tarantula Database Search">Search</a></li>
                <li><a href="../pages/submit.php" title="Tarantula Database Submit">Submit</a></li>
                <li><a href="index.php" title="Tarantula Database Forum">Forum</a></li>
                <li><a href="../pages/contact.php" title="Tarantula Database Contact">Contact</a></li>
            </ul>
        </div>

That part is fine

and this is the new code

CODE

  }

ul#mainNav li{
    border-top: 1px solid #766454;
    border-bottom: 1px solid #766454;
    margin-right: auto;
    margin-left: auto;
  }

[NovaArgon]

It looks like its doing the same thing it was when I was trying to float it to none.

You think it has to do with something in the div?

[pandy]

You didn't make the LIs display inline.

[NovaArgon]

I don't see how to do that. Was it in the links Darin posted?

[pandy]

No. Look it up in the refrence(s).
http://htmlhelp.com/reference/css/classifi...on/display.html
http://www.w3.org/TR/CSS2/visuren.html#propdef-display

[Frederiek]

Ah, that's why I saw those links vertically instead of horizontally (see the screenshot I posted earlier in your other thread at http://forums.htmlhelp.com/index.php?showtopic=6234).

Darin told you to set the left and right margins of ul#mainNav to auto, not ul#mainNav li.
Then you need to set the ul#mainNav li to display inline.

[NovaArgon]

Thanks I think I am going to go back to before I started messing with it becuase some one pointed out to me that my css code is full of errors. I'm going to go back and try to see where I am messing up

[Frederiek]

You can check CSS errors for yourself at http://jigsaw.w3.org/css-validator/.

[NovaArgon]

This is so strange I have a zip file with the good copy of everything but the css files are not updating

[NovaArgon]

CODE

<div id="navblock">
            <ul id="mainNav">
                <li><a href="../../index.php" title="Tarantula Database">Home</a></li><li><a href="../pages/search.php" title="Tarantula Database Search">Search</a></li><li><a href="../pages/contact.php" title="Tarantula Database Contact">Contact</a></li>
            </ul>
        </div>

Is that what you mean by in line? Because its not working. THe links pandy gave me just said to take out all the line breaks to put it inline but i wasnt using line breaks in the first place.

You guys are making everything way to complex posting links. get over it for real. It would take you less time to say

inline (no line break before and after the element)

Than it did to link to it.

This post has been edited by NovaArgon: Jun 19 2008, 11:38 AM

[Darin McGrew]

No, inline, as in

CODE

display: inline

There is a nice explanation of how to turn a list of links into a horizontal menu bar in ALA's Taming Lists, but don't just copy-paste the code. Try to understand what it's doing.

[pandy]

You guys are making everything way to complex posting links. get over it for real. It would take you less time to say

inline (no line break before and after the element)

I think you've misunderstood something. This isn't Ask And We Do Your Job For You.

Had you actually read that page, you would know the above syntax is off by a mile and you would also have learnt a few other things besides how to make something display inline.