Zur Navigation

Platzierung von div Containern

1 tommik

Hallo Jörg,

ich versuche gerade (nach langer Zeit) mal wieder eine Website auf die Beine zu stellen.
Leider schaffe ich es nicht den Inhalt rechts neben die (linke) Navigationsleiste zu platzieren. Der Text erscheint bei mir immer darunter.

Vielleicht kannst du mir ja auf die Sprünge helfen und kurz schauen, ob der Code soweit okay ist.

http://tommik.lima-city.de/Unbenannt-1.html

Liebe Grüße
Thomas

15.06.2014 22:57 | geändert: 15.06.2014 22:57

2 Jörg

div#content sollte sich auch innerhalb von div#box befinden

15.06.2014 23:48

3 tommik

Danke für die schnelle Antwort.

Ich habe leider erst heute wieder Zeit gefunden an der Homepage etwas weiter zu arbeiten.

http://tommik.lima-city.de/Unbenannt-1.html

Leider zersprengt die Seite, wenn ich das Browserfenster verkleinere.
Zum einen die beiden Boxen rechts (Termine und Benutzerbereich), aber auch das Menü im Header.
Was genau läuft da falsch?

Außerdem ist der Contentbereich durch das Hinzufügen der zwei Boxen irgendwie weiter nach unten gerutscht. Warum?


Liebe Grüße
Thomas

07.07.2014 20:48

4 Jörg

Leider zersprengt die Seite, wenn ich das Browserfenster verkleinere.

Das liegt daran, dass du flexible Breiten (Angaben in Prozent) mit festen Breiten (Angaben in pixel) mischst. Dem Browser bleibt dann gar nicht anderes übrig, als die Inhalte übereinander zu schieben, wenn das Browserfenster verkleinert wird.

Eien Lösung wäre, auch div#box eine feste Breite zu vergeben. so dass die darin enthaltenen Elemente genug Platz darin finden.

Außerdem ist der Contentbereich durch das Hinzufügen der zwei Boxen irgendwie weiter nach unten gerutscht. Warum?

Weil das rechte margin von .content2 von insgesamt 900 px für ein Float nicht mehr genug Platz lässt.

07.07.2014 21:54

5 tommik

Ich möchte aber, dass der Header den gesamten Browser (von der Breite) einnimmt. Da kann ich doch nur mit Prozenten arbeiten, oder?

07.07.2014 22:21

6 Jörg

Ich möchte aber, dass der Header den gesamten Browser (von der Breite) einnimmt.

Dann sollte sich aber auch der Rest entsprechend anpassen.

Wenn du möchtest, dass sich das Layout an die Bildschirmgröße anpasst, ist das schon etwas aufwendiger umzusetzen als ein klassisches fixes Layout. Unter dem Suchbegriff "Responsive Webdesign" lassen sich aber sicher einige brauchbare Anleitungen hierzu finden und vielleicht auch Templates, die du als Ausgangsvorlage für deine Seite nehmen kannst.

07.07.2014 22:41

7 tommik

Okay, vielen Dank. Ich werde mir das mal genauer ansehen.

Vorerst habe ich das Design jetzt "fixiert". Trotzdem hängt der Content und Content2 irgendwie zu weit unterhalb von dem Header. Woran liegt das?

http://tommik.lima-city.de/Unbenannt-1.html

07.07.2014 22:51

9 tommik

Nochmal danke!
Wenn ich clear:both entferne, setzen sich die div-Boxen jedoch nebeneinander und nicht untereinander.

07.07.2014 23:58

10 Jörg

Also du möchtest zweierlei:

1. dass Content-Container und Navigation nebeneinander angeordnet werden

2. dass die einzelnen Content-Container untereinander angeordnet werden

Das erreichst du dadurch, dass du die Content-Container in einen Eltern-Container packst, welcher dann mit der Navigation floaten kann. Die Kind-Container werden dann ganz normal untereinander angeordnet. Clearen solltest du erst nach dem Eltern-Container - ggf. mit einem leeren div

<div id="navi">
    <!-- Navigation -->
</div>
<div id="content">
    <div>
        <!-- Content 1 -->
    </div>
    <div>
        <!-- Content 2 -->
    </div>
    <div>
        <!-- Content 3 -->
    </div>
</div>
<div class="clear"></div>

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

08.07.2014 09:13 | geändert: 08.07.2014 09:16