Platzierung von div Containern [2]

11 tommik

Nicht ganz.

Ich möchte eigentlich ganz simpel: 3 Spalten.
Links die Navigation, in der Mitte der Content und rechts zwei kleine Contentboxen zum Anmelden und für einen Kalender.
Die beiden kleinen Contentboxen zum Anmelden und für den Kalender sollen untereinander angeordnet sein.

12 Jörg Kruse

Dann baust du halt noch einen übergeordneten Container #sidebar ein:

<div id="navi">
    <!-- Navigation -->
</div>
<div id="content">
    <!-- Texte -->
</div>
<div id="sidebar">
    <div id="login">
        <!-- Anmelden -->
    </div>
    <div id="calendar">
        <!-- Kalender -->
    </div>
</div>
<div class="clear"></div>

#navi {
    float: left;
    width: 120px;
}
#content {
    float: left;
    width: 550px;
}
#sidebar {
    float: right;
    width: 200px;
}
.clear {
    clear: both;
}

13 tommik

Das Problem ist nur, dass .content2 (also Login bzw. Kalender) nicht auf der gleichen Höhe wie content stehen.

Vielen Dank nochmal für deine Hilfe!

14 Jörg Kruse

Ja, weil du #content soviel margin gegeben hast, dass für #sidebar kein Platz
mehr ist und es deswegen nach unten geschoben wird

#box muss mindestens so breit sein, wie #navi, #content und #sidebar zusammengenommen, und zwar inklusive (horizontaler) padding, border und margin

15 tommik

Nochmal eine Frage: Wie bekomme ich den Text in der Navigation im Header (Über uns, Projekte, Anliegen, Suche) zentriert?

text-align:center; bewirkt leider nichts.

16 Jörg Kruse

text-align:center; bewirkt leider nichts.

Doch - der Linktext ist genau zentriert innerhalb von "ul.nav a". Vermutlich möchtest du aber eine Zentrierung innerhalb von "ul.nav li". Das erreichst du dadurch, dass du "ul.nav a" genauso breit machst wie "ul.nav li", also in etwa 250px.

Ich empfehle übrigens für solche Zwecke die Verwendung von einem Tool wie Firebug - das zeigt einem u.a auch optisch an, welchen Raum die einzelnen Elemente einnehmen.

Beitrag schreiben (als Gast)