Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 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
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.

  • #3
    New Coder
    Join Date
    Apr 2006
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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; 10-01-2006 at 09:43 AM.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote 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>
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Regular Coder
    Join Date
    Jul 2006
    Posts
    175
    Thanks
    14
    Thanked 1 Time in 1 Post
    <p style="text-align:center"><a href="/link1.html">Internal Link 1</a><a href="/lin2.html">Internal Link 2</a></p>


  •  

    Posting Permissions

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