Navigation ul li with images

Question

I have this: http://jsfiddle.net/40y622e6/1/

<div class="footer_middle">
    <div class="clear"></div>
    <div id="footer_middle">
        <div>
            <ul>
                <li class="desc">BEZAHLARTEN</li>
                <li class="vorkasse">Vorkasse</li>
                <li class="paypal">Paypal</li>
                <li class="rechnung">Rechnung</li>
            </ul>
        </div>
        <div>
            <ul>
                <li class="desc">WIR VERSENDEN MIT</li>
                <li class="dhl">DHL</li>
            </ul>
        </div>
    </div>
</div>

.footer_middle {background-color: #e9ebed; height:80px;text-align: center;}
#footer_middle ul li {display: inline;margin-right:20px;color: #5c5f6f;font-size: 13px;font-weight: 200;}
.vorkasse, .rechnung, .paypal, .dhl {font-size: 11px !important;color: #848484 !important; padding-top:40px;}
#footer_middle div {display: inline-block;margin-top: 30px;}
#footer_wrapper .footer_inner #footer {background: none;}
.vorkasse {background: url('https://adium.im/images/services/icon-msn.png') no-repeat center top;}
.rechnung {background: url('https://adium.im/images/services/icon-msn.png') no-repeat center top;}
.paypal {background: url('https://adium.im/images/services/icon-msn.png') no-repeat center top;}
.dhl {background: url('https://adium.im/images/services/icon-msn.png') no-repeat center top;}

and are trying to get this result:

I have tried to add a heigh to the li elements and deleted the padding but the elements are not moving down.
Does someone has an idea how to resolve this problem I have?

Answer 1

Make the following changes to CSS:

• #footer_middle ul li - Change display: inline; to display: inline-block; . Add vertical-align: middle; . This will ensure that the padding on the li s is obeyed and will vertically align them.
• #footer_middle div - Remove margin-top: 30px; . This is no longer needed due to li changes.

CSS:

.footer_middle {background-color: #e9ebed; height:80px;text-align: center;}
#footer_middle ul li {display: inline-block;vertical-align: middle;margin-right:20px;color: #5c5f6f;font-size: 13px;font-weight: 200;}
.vorkasse, .rechnung, .paypal, .dhl {font-size: 11px !important;color: #848484 !important; padding-top:40px;}
#footer_middle div {display: inline-block;}
#footer_wrapper .footer_inner #footer {background: none;}
.vorkasse {background: url('http://www.taxi-blau.de/images/stories/icon_ec_a.png') no-repeat center top;}
.rechnung {background: url('http://www.taxi-blau.de/images/stories/icon_ec_a.png') no-repeat center top;}
.paypal {background: url('http://www.taxi-blau.de/images/stories/icon_ec_a.png') no-repeat center top;}
.dhl {background: url('http://www.taxi-blau.de/images/stories/icon_ec_a.png') no-repeat center top;}

JS Fiddle: http://jsfiddle.net/hk036jzc/1/

Answer 2

I'm seeing 403 errors on chrome console...

GET http://www.taxi-blau.de/images/stories/icon_ec_a.png 403 (Forbidden)

i tried replacing your backgrounds with another image (example http://google.com/images/srpr/logo11w.png ) and it works.... its a permissions issue it seems

Answer 3

GET http://www.taxi-blau.de/images/stories/icon_ec_a.png 403（禁止）首先检查background-image属性。

Answer 4

I think you should go for table design, since the footer appears like a row. Besides you can easily use vertical-align , height and other styles for easy customization. The best of all: it requires minimal code!

In your case it can be done like this:

<table>
    <tr>
        <td>BEZAHLARTEN</td>
        <td>
            <img src="http://i.stack.imgur.com/95dh3.png">
            <br/>Vorkasse
        </td>
        <td>
            <img src="http://i.stack.imgur.com/95dh3.png">
            <br/>Paypal
        </td>
        <td>
            <img src="http://i.stack.imgur.com/95dh3.png">
            <br/>Rechnung
        </td>
    </tr>
</table>

I suppose you want something like this:

http://jsfiddle.net/61hp2p5y/