SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text Align Centre Floated Horizontal Nav

    Buongiorno from 3 degrees C wetherby UK :-)

    Ive learned you cant text-align centre li elemnts that are floated. For example in this nav http://tutorial.davidclick.com/philpotts-clone.html ( the first one in a mint colour) how could you align the li items so they sit in the middle as in this example http://tutorial.davidclick.com/align-nav.html.

    Any insights welcome with a sprinkling of CSS theory much appreciated.

    Grazie tanto,
    David
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    You could try this:

    Code:
    #navigation {
    text-align: center;
    }
    
    #navigation li {
    display: inline-block;
    }

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's also worth mentioning that you can take the "float: left" off of #navigation and #navigation ul. It's just not needed since we're using an inline-block.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Make the following changes to your css to center the #navigation menu using inline-block list items.

    Line 37
    Code:
    #navigation {
        background: none repeat scroll 0 0 #B5F0E5;
        float: left;    /* Deleting this property will show the #navlist border-bottom; see line 344 below. */
        width: 900px;
    }
    Line 43
    Code:
    #navigation ul {
        margin: 0;
        padding: 0;
        text-align: center;    /* add this property */
    }
    Line 49
    Code:
    #navigation ul li {
        display: inline-block;    /* change this property */
        list-style-type: none;
        vertical-align: top;    /* add this property */
    }
    Line 344
    Code:
    #navlist {
        border-bottom: 1px solid #000000;    /* Do you want this border showing?  If no, delete it. */
        margin: 0;
        padding: 0 0 20px 10px;
    }
    Line 383
    Code:
    #navigation li {
        float: left;      /* delete this property */
        position: relative;

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,225
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Zygoma View Post
    Ive learned you cant text-align centre li elemnts that are floated.
    Zygoma,

    Think in terms of containers.

    While it is true that one cannot center list items that are floated, one CAN center their container, the <ul> or <ol>.

    Normally, a <ul> or <ol> is a block object that takes up the full width of the page, just like a paragraph. The "trick" to centering it is to shrink that ul box around its list items. Two techniques for doing that are {display:inline-block} and {display:table}.

    The following two pages show left floated list items centered on the page. In both cases, it is the unordered list box that is being centered. The list items are floated within that container.

    There are only 3 lines of difference between the pages, one in the body selector (the parent container of the ul box) and two in the ul selector:

    Code:
    1.   body {text-align:center}       body {}
    2.   ul {display:inline-block}      ul {display:table}
    3.   ul {margin:0}                  ul {margin:0 auto}
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/showthread.php?977665-Text-Align-Centre-Floated-Horizontal-Nav
    Thread: Text Align Centre Floated Horizontal Nav
    2013.02.18 12:36
    Zygoma
    -->
    <head>
        <title>Centering Floated List Items</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    body {text-align:center;}
    
    ul {
        list-style-type:none;
        display:inline-block;
        overflow:hidden;
        padding:0;
        margin:0;
    }
    li {
        float:left;
    }
    
    a {
        display:block;
        padding:6px 10px;
        border-radius:8px;
        font-weight:bold;
        text-decoration:none;
        margin:6px;
    }
    a:link,a:visited {
        color:#888;
        border:2px solid #aaa;
        background-color:#eee;
    }
    a:hover {
        color:#00f;
        border:2px solid #00f;
        background-color:#def;
    }
    a:active {
        color:#fff;
        border:2px solid #00f;
        background-color:#f00;
        text-decoration:underline;
    }
    
        </style>
    </head>
    <body>
    
    <ul>
        <li><a href="#">List Item One</a></li>
        <li><a href="#">List Item Two</a></li>
        <li><a href="#">List Item Three</a></li>
        <li><a href="#">List Item Four</a></li>
    </ul>
    
    </body>
    </html>
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    http://www.sitepoint.com/forums/show...Horizontal-Nav
    Thread: Text Align Centre Floated Horizontal Nav
    2013.02.18 12:36
    Zygoma
    -->
    <head>
        <title>Centering Floated List Items</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    body {}
    
    ul {
        list-style-type:none;
        display:table;
        overflow:hidden;
        padding:0;
        margin:0 auto;
    }
    li {
        float:left;
    }
    
    a {
        display:block;
        padding:6px 10px;
        border-radius:8px;
        font-weight:bold;
        text-decoration:none;
        margin:6px;
    }
    a:link,a:visited {
        color:#888;
        border:2px solid #aaa;
        background-color:#eee;
    }
    a:hover {
        color:#00f;
        border:2px solid #00f;
        background-color:#def;
    }
    a:active {
        color:#fff;
        border:2px solid #00f;
        background-color:#f00;
        text-decoration:underline;
    }
    
        </style>
    </head>
    <body>
    
    <ul>
        <li><a href="#">List Item One</a></li>
        <li><a href="#">List Item Two</a></li>
        <li><a href="#">List Item Three</a></li>
        <li><a href="#">List Item Four</a></li>
    </ul>
    
    </body>
    </html>

  6. #6
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for getting back to me :-) Ah yes i never thought about converting so to speak the block element again to {display:inline-block}

    Grazie Tanto :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com


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
  •