Zur Navigation

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.




08.07.2014 12:58

12 Jörg

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;
}

08.07.2014 13:07

1 Forenmitglied fand diesen Beitrag gut

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!

08.07.2014 13:33

14 Jörg

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

08.07.2014 13:55 | geändert: 08.07.2014 13:56

1 Forenmitglied fand diesen Beitrag gut

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.

18.07.2014 18:55

16 Jörg

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.

18.07.2014 19:47 | geändert: 18.07.2014 19:49

1 Forenmitglied fand diesen Beitrag gut

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]