SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict Caterwomtious's Avatar
    Join Date
    Dec 2001
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Displaying a list in the centre

    I need to have an unordered (bulleted) list which appears in the centre of the page, but which aligns the bullets to the left.

    At the moment I have the list set to text-align:left in a centred single-cell table. Does anyone know how to achieve this effect with just CSS and no table?

  2. #2
    SitePoint Addict
    Join Date
    Jul 2001
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about centering the table instead of the contents of the cell?

    <center>
    <table><tr><td>
    list here
    </td></tr></table>
    </center>

    Without a width specified for the table, it would conform to the size of the contents (the list).

    The table itself would be centered on the page.

    The list would behave as it should normally do in the cell (left aligned by default).

  3. #3
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about this (unfortunately, IE forces the code to be twice as long as it should be):
    Code:
    #myList {
      margin: auto;
      width: #;  /* Pick a Number */
      text-align: left; /* Part of the IE hack :-( */
    }
    
    /* IE Hack :-( */
    #myListContainer {
      text-align: center;
    }
    /* End IE Hack  :-( */
    ~~Hope This Helps

  4. #4
    SitePoint Addict Caterwomtious's Avatar
    Join Date
    Dec 2001
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ian - that's exactly what I wanted. I think I'll have to stick with the table for now though, unless there's a hack to get NS4 working as well?

    So is "margin: auto" supposed to be doing the centering? I've only ever used that before on the body tag to get the content shoved up against the edges of the browser window.

  5. #5
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd say just drop NS4. It's been declining in market share for a while now, and sooner or later those people still using it will upgrade or get a new computer or something... Plus, on of the big bonuses of CSS is that pages shouldn't break in older browsers -- they just don't look as pretty. :-)

    Anyway, as for the "margin: auto;" to set body margins, I think "margin: 0;" is the right way to go, there.

    ~~Ian

  6. #6
    SitePoint Addict Caterwomtious's Avatar
    Join Date
    Dec 2001
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ian.

    I completely agree with you about NS4, and that's the approach I take with my personal sites. Legible is enough.

    However, I wanted this effect for the site I maintain at work, which is very basic and does look OK in NS4. The list is being used for the contents of each area, and would look very strange left-aligned and, besides, the site has plenty worse accessibility issues to sort out before I get really worried about a one-cell table. :-( Plus, we're planning to redesign this year anyway, so it's no great loss.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •