Navigationsmodul lappt über wrapper und container

[Ralf_Schmitt]

Hallo zusammen,

ich erstelle auf einer lokalen Installation von Contao 3.2.9 eine Webite (Header, dann 2-spaltig mit Nav links und content rechts ...) und muss leider feststellen, dass Wrapper und Container sich nicht an die Höhe der Navigation anpassen. Siehe hier:
container.jpg
wrapper.jpg

Ich habe bislang keiner css, dass auf #wrapper und #container angewandt wird, die css der Navigation entspricht weitestgehend der der Contao-Demosite.
Woran kann das liegen, was muss ich tun?

Danke schonmal,
Ralf

[uwe]

Hallo Ralf

Kann es sein, dass du das Navigationsmodul in den Footer gepackt hast, statt in die linke Spalte?

[Ralf_Schmitt]

Hallo Ralf

Kann es sein, dass du das Navigationsmodul in den Footer gepackt hast, statt in die linke Spalte?

Leider nein, das wäre auch zu einfach gewesen :-)
Das Layout hat gar keinen Footer. Ich habe auch das Originaltemplate nicht angefasst und die Webtools von Chrome verorten den Platz von aside#left an einer sehr seltsamen Stelle: nav1.jpg

Im Quellcode ist der Nav-Block auch an der richtigen Stelle: nav2.jpg

Ich muss jetzt doch nochmal das css anschauen, oder hast Du einen anderen Tip?

Gruß,
Ralf

[Ralf_Schmitt]

soooo,

ich hab nochmal im css für den Nav-Block nachgeschaut:

.mod_navigation {
    width:200px;
    top:20px;
    position:relative;
}

position war vorher absolute, mit relative hat der #container plötzlich eine Höhe von 391px. Schon besser, aber der Nav-Blok lappt immer noch deutlich über ...

Wenn ich nun dem Nav-Block eine margin-bottom gebe, passt es plötzlich. Der aside#left div.inside verharrt allerdings bei 391 px. Komisch, aber damit kann ich vorerst leben.

[tab]

Völlig normal. Bei absoluter Positionierung wird kein Platz für das Navigationsmodul reserviert. Wenn sonst keine Inhalte vorhanden sind, entsteht eben auch keine entsprechende Höhe in der linekn Spalte und damit auch nicht im Container. Außer es ist explizit im CSS eine Höhe definiert. Die Spaltenhöhen passen sich den Inhalten an, der Container passt sich der höchsten Spalte an.

Bei relativer Positionierung wird soviel Platz für dein Modul reserviert wie seiner Höhe entspricht, die Verschiebung wird dabei nicht berücksichtigt. Also müsste eigentlich dein Modul nach unten 20 Pixel über die linke Spalte und den Container hinausgehen.

Edit: Wenn du mit der relativen Positionierung nur einen Abstand nach oben erreichen willst, dann definiere lieber eine entsprechende margin nach oben für dein Modul und verzichte auf die relative Positionierung.

Edit2: In der Demo steht das Navigationsmodul im Header, nicht in der linken Spalte, das macht natürlich schon einen Unterschied. Und der Header ist auch etwas "tricky" gebaut. Dass dortige CSS für die Navi im Header sollte also nicht unbedingt als Vorlage für deine Navi in der linken Spalte dienen.

[Ralf_Schmitt]

Völlig normal. Bei absoluter Positionierung wird kein Platz für das Navigationsmodul reserviert. Wenn sonst keine Inhalte vorhanden sind, entsteht eben auch keine entsprechende Höhe in der linekn Spalte und damit auch nicht im Container. Außer es ist explizit im CSS eine Höhe definiert. Die Spaltenhöhen passen sich den Inhalten an, der Container passt sich der höchsten Spalte an.

Bei relativer Positionierung wird soviel Platz für dein Modul reserviert wie seiner Höhe entspricht, die Verschiebung wird dabei nicht berücksichtigt. Also müsste eigentlich dein Modul nach unten 20 Pixel über die linke Spalte und den Container hinausgehen.

Edit: Wenn du mit der relativen Positionierung nur einen Abstand nach oben erreichen willst, dann definiere lieber eine entsprechende margin nach oben für dein Modul und verzichte auf die relative Positionierung.

Genau so isses. Danke! Ich habe position rausgenommen und eine Topmargin eingebaut und jetzt ist alles, wie es soll, auch beim div.inside.

Edit2: In der Demo steht das Navigationsmodul im Header, nicht in der linken Spalte, das macht natürlich schon einen Unterschied. Und der Header ist auch etwas "tricky" gebaut. Dass dortige CSS für die Navi im Header sollte also nicht unbedingt als Vorlage für deine Navi in der linken Spalte dienen.

Mhm, da hab ich nicht richtig aufgepasst. War zufrieden, dass es beim ersten hingucken klappte und wurde erst stutzig, als ich dem Wrapper testweise eine border-bottom gab. Die saß dann natürlich völlig falsch. Also nochmals vielen Dank Euch beiden!

Gruß,
Ralf