how to center floating elements? 1010 Responses

Last post: 6 months, 1 week ago | Thread started: May 29, 08, 2:48 a.m.

RespondNew TopicDisable Images

• bezul555

  Hi, I have one problem;
  There is navigation bar, with list as buttons

  <div id="nav">
  <ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  </ul>
  </div>

  All list items <li> are floted to the left, but I want them to appear in the center of the navigation bar <div id="nav">; I tried margin: 0 auto 0; for <ul> but it doesn't work; the problem is that number of the list items is different on every page;
  Thanks

  May 29, 08, 2:48 a.m. – Permalink

• ernexbcn

  Put list-style:none; to the UL

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMay 29, 08, 3:21 a.m. – Permalink

• trooper

  wrote this in 06 for you :)

  http://www.markrushworth.com/tem…

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMay 29, 08, 3:22 a.m. – Permalink

• trooper

  and you dont need to put UK inside a DIV just id the UL dude (pet peeve)

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMay 29, 08, 3:23 a.m. – Permalink

• trooper

  ^ UL not UK

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMay 29, 08, 3:23 a.m. – Permalink

• Haydesign

  #nav {
  text-align: center;
  }

  ????

  • doesn't work, I am using image repalcement with css sprites and I ithink that there is collisions somewhere– bezul555

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMay 29, 08, 3:23 a.m. – Permalink

• Haydesign

  <div id="navcontainer">
  <ul id="navlist">
  <li id="active"><a href="#" id="current">Item one</a></li>
  <li><a href="#">Item two</a></li>
  <li><a href="#">Item three</a></li>
  <li><a href="#">Item four</a></li>
  <li><a href="#">Item five</a></li>
  </ul>
  </div>

  CSS
  ul#navlist
  {
  margin-left: 0;
  padding-left: 0;
  white-space: nowrap;
  }

  #navlist li
  {
  display: inline;
  list-style-type: none;
  }

  #navlist a { padding: 3px 10px; }

  #navlist a:link, #navlist a:visited
  {
  color: #fff;
  background-color: #036;
  text-decoration: none;
  }

  #navlist a:hover
  {
  color: #fff;
  background-color: #369;
  text-decoration: none;
  }

  http://css.maxdesign.com.au/list…

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMay 29, 08, 5:27 a.m. – Permalink

• fugged

  if you set an absolute width on the list elements and set their margin to 0 auto, it should work.

  #nav li {
  width:200px;
  margin: 0 auto;
  }

  • *should - meaning I haven't tried...– fugged1/2

    yep this is what i was thinking. agree it should work too.– creativeworld2/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMay 29, 08, 5:33 a.m. – Permalink

• trooper

  ul{text-align:center}
  li{display:inline}

  then inside in the <a or whatever use

  display:block;width:100px;height…

  mark

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMay 29, 08, 5:34 a.m. – Permalink

• bezul555

  thanks for help guys!

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMay 29, 08, 7:34 a.m. – Permalink

• 7point34

  yeah you need width and height and possibly display to make things center (or at least make all browsers recognize it)

  then coupled with margin: 0 auto; it should work just fine

  • display: block; i meant– 7point34

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earMay 29, 08, 7:42 a.m. – Permalink