Centralising items when window is reduced

HTML & CSS
1

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:

Any help would me much appreciated

2

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”.)


<!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

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

We do :slight_smile:

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…


.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

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:

.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