1

HTML / CSSでこのフッターを作成しようとすると、あまりにも多くのエネルギーと時間を浪費しました。正しく理解できません。これを行う最良の方法はとを使用することだと言われましたが<ul>、<li>正しく位置合わせするのは難しいことです。

これはそれがどのように見えるべきかです これはそれがどのように見えるべきかです

これは私のバージョンがどのように見えるかです これは私のバージョンがどのように見えるかです

私がやろうとしたことは次のとおりです:(CSSは以下にあります）。

<div class="footer">
        <div class="wrapper">
            <div class="footer_container">
<ul>
    <li><strong>Title/header</strong>
    <ul>
        <li>Adresse, street</li>
        <li>Tlf: Phone</li>
    </ul>
    <ul class="right">
        <li>Zipcode/City</li>
        <li>Mail: Email</li>
    </ul>
    </li>
    <li><strong>Links</strong>
    <ul>
        <li>Om skolen</li>
        <li>Galleri</li>
    </ul>
    <ul>
        <li>Elever</li>
        <li>For&aelig;ldre</li>
    </ul>
    <ul class="right">
        <li>Kalender</li>
        <li>Fag</li>
    </ul>
    </li>
</ul>
</div>
</div>
</div>


    .footer { background:url(images/footer_bg.png) top repeat-x #e4e2de; width:100%; padding:20px 0 30px 0; }
.footer ul { margin: 0; padding: 0; list-style: none; }
.footer ul li { display: inline; margin-left: 25px; }
.footer_container { margin:22px 0 0 0;  }

.footer_container ul { margin:0; padding:0; color:#413f3d; width:100%;  }
.footer_container ul li { display:inline-block; list-style:none; margin:0; font-size:11px; text-align:left; vertical-align:top; padding:0; width:270px; }
.footer_container ul li ul { width:120px; float:left; }
.footer_container ul li ul li { display:block; width:auto; }
.footer_container ul.right { float:right; }

私はまだ3つの画像を挿入しましたが、2番目のボックスは見栄えがよくありません。私はどんな提案/アイデアにもオープンです！

ありがとうございました

4

1 に答える 1

0

私はそれを変更し、代わりにフッター内のコンテナーを使用します。

HTML

<div class="footer_container">
    <div class="container">
        <strong>Title</strong>
        <ul>
            <li>Adresse</li>
            <li>Tlf: Phone</li>
            <li>Zipcode/City</li>
            <li>Mail: Email</li>
        </ul>
    </div>
    <div class="container">
        <strong>Links</strong>
        <ul>
            <li>Om skolen</li>
            <li>Elever</li>
            <li>Kalender</li>
            <li>Galleri</li>
            <li>For&aelig;ldre</li>
            <li>Fag</li>
        </ul>
    </div>
    <div class="container">
        Your FB/Twitter things
    </div>
</div>​

CSS

.footer_container{
    width: 960px;
}
.footer_container strong{
    font-weight: bold;
}
.footer_container div.container{
    width: 320px;
    float: left;
}
.footer_container ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer_container ul li {
    width: 160px;
    float: left;
}

デモ

jsFiddleで終わります。

于 2012-09-19T15:22:03.370 に答える