SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot ontargett's Avatar
    Join Date
    Oct 2013
    Location
    England, UK
    Posts
    157
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Centralising items when window is reduced

    Hi,

    website: www.neverup-neverin.com

    Probably getting sick of all my requests for help, but not quite sure how to do this.

    I have created the footer, with a list of all the pages (These words "Home Properties Bottle Cottages" etc will all eventually be links)

    What I want to do is when someone reduces the size of the window, for the words that don't fit in the window to fall directly beneath the other in the centre. I have seen it done on this website, this is the effect I am looking for in the footer of this web page:

    http://www.apricotonline.co.uk/


    Any help would me much appreciated

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    ontargett,

    I'm a little puzzled. You say that you want the list items to drop to a new line and center, yet everything is floated left. Seems like to be centered, something ought to suggest "centered". For inline or inline-block objects, text-align:center in their parent container would work; and for block objects with a fixed width, margin:0 auto would do the trick. But you are doing none of this. You're just floating the footer, floating the <ul> and floating the <li>s. Seems off-target.

    In the following example, there are NO floats. I have used inline-block for the list items and anchors. There are other methods, too, but this is pretty easy.

    See if this behavior is what you want and if the code makes sense to you. There are several examples where "text align:center" is utilized in your code so if you are learning by doing the concept is already there. (This example is not meant to be "copy and paste".)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>centered footer menu items</title>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1185905-Centralising-items-when-window-is-reduced
    Thread: Centralising items when window is reduced
    2014.01.07 09:44
    ontargett
    http://www.neverup-neverin.com/
    -->
        <style type="text/css">
    
    .footer {
        background-color:#99abc1;
        padding:0 0 .125em;
    }
    ul {
        list-style:none;
        text-align:center;
        padding:0;
        margin:0;
    }
    li {
        display:inline-block;
        vertical-align:top;
        margin:.125em 0;
    }
    a {
        outline:1px solid magenta;  /* TEST Outline */
        color:#fff;
        display:inline-block;
        vertical-align:top;
        padding:.25em .5em .25em;
    }
    p {
        text-align:center;
        margin:.125em 0;
    }
        </style>
    </head>
    <body>
    
    <div class="footer">
        <ul>
            <li><a href="">menu item 1</a></li>
            <li><a href="">menu item 2</a></li>
            <li><a href="">menu item 3</a></li>
            <li><a href="">menu item 4</a></li>
            <li><a href="">menu item 5</a></li>
            <li><a href="">menu item 6</a></li>
            <li><a href="">menu item 7</a></li>
            <li><a href="">menu item 8</a></li>
            <li><a href="">menu item 9</a></li>
        </ul>
        <p><a href="">0777777777landord@gmail.com</a></p>
    </div>
    
    </body>
    </html>

  3. #3
    SitePoint Zealot ontargett's Avatar
    Join Date
    Oct 2013
    Location
    England, UK
    Posts
    157
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that, I thought I had to float the list items left to allow them to line up next to each other instead of being vertical like normal unordered lists.

    I assume the display: inline-block replaces the float: left attribute? Why don't we use display: inline-block for more items instead of float, or are there other disadvantages that I'm not seeing?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,350
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ontargett View Post

    I assume the display: inline-block replaces the float: left attribute? Why don't we use display: inline-block for more items instead of float,
    We do

    Inline-block is useful as you can stack items horizontally and also have them centred just like text by setting text-align on the parent. It is also useful when you have items of different height because the items will wrap to a new line easily and not snag as floats would.

    or are there other disadvantages that I'm not seeing?

    The main disadvantage is that inline-block elements honour whitespace in the html between them. In-between each inline-block you will get a gap just like you would with the space between words. In some cases it doesn't matter but if you want borders that butt up close together then its a little problem. There is a solution but is a little complex and is explained in one of the css quizzes a while ago (there's a link to the quizzes in the sticky at the top of the forum).

    It al depends on the layout as to which method you choose but I use inline-block a lot these days. If you need to support ie7 and under you have to add a hack though if you use inline-block on block elements such as a div..

    Code:
    .element{
    display:inline-block
    *display:inline;/* ie7 and under hack */
    *zoom:1.0;/* ie7 and under hack */
    }
    For elements that are inline by default (such as spans) you don't need to add the hack.

  5. #5
    SitePoint Zealot ontargett's Avatar
    Join Date
    Oct 2013
    Location
    England, UK
    Posts
    157
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'b that was very helpful.

    I have tended to use floats quite a bit, but have found a few problems with them. Since ronpat has introduced them to me I have been playing around with them and find them a lot easier to control.

    In this code that you posted above:

    Code:
    .element{
    display:inline-block
    *display:inline;/* ie7 and under hack */
    *zoom:1.0;/* ie7 and under hack */
    }
    Are the * essential at the beginning of the line, if so what is the purpose of them?

    Thanks in advance


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
  •