Web Analytics Made Easy -
StatCounter centering unordered list - CodingForum

Announcement

Collapse
No announcement yet.

centering unordered list

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • centering unordered list

    the max width is 728px and i just want it in the center of that.. how do i do this? theres 2 objects in the unordered list if that helps any

  • #2
    Do you want each element centred separately (in which case you can just style the <li> tags with text-align:center ) or do you want the list centred as a block with the bullets still vertically aligned (in which case you need to style the <ul> tag with width:100px;margin:0 auto; substituting the maximum length of an individual entry for the 100px)
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

    Comment


    • #3
      i want the 2 links to be side by side like this


      link#1 link#2


      in the center of a 728px width area.. how do i do that?
      Last edited by efhx; Oct 1, 2006, 05:43 AM.

      Comment


      • #4
        Originally posted by efhx View Post
        i want the 2 links to be side by side like this


        link#1 link#2 int he center of a 728px width area.. how do i do that?
        You would use:

        Code:
        CSS:
        #container {
          max-width: 728px;
          }
        #container ul {
          display: table;
          margin: 0 auto;
          }
        #container li {
          display: table-cell;
          }
        
        HTML:
        <div id="container">
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
          </ul>
        </div>
        However, Internet Explorer 6 does not support the max-width, display: table, or display: table-cell properties. Internet Explorer 7 RC1 supports max-width, at least.

        Another method:

        Code:
        CSS:
        #container {
          max-width: 728px;
          }
        #container ul {
          text-align: center;
          }
        #container li {
          display: inline; /* or display: inline-block; */
          }
        
        HTML:
        <div id="container">
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
          </ul>
        </div>
        The #container element is not actually necessary in this example; you could just put set the maximum width on the unordered list element itself. This method has the drawback of collapsed white-space between the list item elements unless you use disorganized markup or comments to separate the list elements. It also means that you can't set dimensions or other block-level properties on the list item elements unless you use display: inline-block, a property that Internet Explorer doesn't support correctly and that Firefox doesn't support at all (even with -moz-inline-block). To get rid of the white-space, you could do something like:

        Code:
        <div id="container">
          <ul>
            <li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li>
          </ul>
        </div>
        
        … or …
        
        <div id="container">
          <ul>
            <li>Item 1</li><!--
         --><li>Item 2</li><!--
         --><li>Item 3</li><!--
         --><li>Item 4</li><!--
         --><li>Item 5</li>
          </ul>
        </div>

        Comment


        • #5
          <p style="text-align:center"><a href="/link1.html">Internal Link 1</a><a href="/lin2.html">Internal Link 2</a></p>

          Comment

          Working...
          X