Trennlinie zwischen Navigation und Inhalt

[Anton]

Hallo,

meine Webseite hat einen Navigations- und einen Inhaltsbereich. Den Navigationsbereich habe mich mit "position:left" positioniert. Den Inhaltsbereich habe ich mit "position:right" positionniert. Damit der Fuß der Seite immer unter diese beiden Bereiche gesetzt wird, habe ich diesem ein "clear:both" zugewiesen.

Ich will nun eine vertikale Trennlinie zwischen meinem Inhaltsbereich unter der Navigationsleiste meiner Webseite. Deshalb habe ich auf der linken Seite meines Inhaltsbereichhs einen Rahmen eingefügt. Im allgemeinen wird das dann auch richtig angezeigt, da der Inhaltsbereich meistens eine größere Höhe als die Navigation hat. Die horizontale Trennlinie zwischen Navigation und Inhalt wird also bis zum Fuß der Seite nach unten durchgezogen.

Es gibt allerdings eine Unterseite die so wenig Inhalt enthält, dass die Navigationsleite eine größere Höhe als der Inhaltsbereich hat. Das führt dazu, dass die horizontale Trennlinie zwischen Navigation und Inhaltsbereich nicht bis unten durchgezogen wird.

Wie kann ich diese Problematik denn am besten umgehen?

[Peter Gisch]

Wie kann ich diese Problematik denn am besten umgehen?

Ich würde eine Grafik zeichnen (1px hoch, 2px breit), diese würde ich dann als Trennliene benutzen, die höhe der Grafik kannst du dann auf 100px oder 1000px setzen, das ist egal, aber somit hättest deine eigene individuell einstellbare Trennliene (T):

Bsp:

Nav  T  Content
+----+-+-------------+
|    | |             |
|    | |             |
|    | |             |
|    | |             |
|    | |             |
|    | |             |
|    | |             |
+----+-+-------------+

[EKKi]

Mahlzeit Anton,

Es gibt allerdings eine Unterseite die so wenig Inhalt enthält, dass die Navigationsleite eine größere Höhe als der Inhaltsbereich hat. Das führt dazu, dass die horizontale Trennlinie zwischen Navigation und Inhaltsbereich nicht bis unten durchgezogen wird.

Wie kann ich diese Problematik denn am besten umgehen?

Weise sowohl Navigations- als auch Inhaltsbereich einen Rahmen zu (Navigation rechts, Inhalt links) und sorge dafür, dass diese Rahmen übereinander liegen.

MfG,
EKKi

[Anton]

Wie kann ich denn dafür sorgen, das die Rahmen übereinander liegen? Kannst du mir vielleicht einen Link oder ein Stichwort geben? Momentan habe ich sowhl der Navigation als auch dem Inhalt eine Rahmen zugewiesen. Das Problem ist, dass die Rahmen nebeneinander liegen.

[EKKi]

Mahlzeit Anton,

Wie kann ich denn dafür sorgen, das die Rahmen übereinander liegen? Kannst du mir vielleicht einen Link oder ein Stichwort geben?

Sicher - sogar beides: Stichwort "http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=position" :-)

MfG,
EKKi

[Anton]

Ich glaub ich hab grade ein Brett vorm Kopf. die beiden Container (Navigation und Inhalt) hab ich ja bereits mit position left bzw. right positionniert. Nun kann ich an deren Positionierung ja nichtsmehr ändern. Ich will ja erreichen, dass deren Rahmen übereinanderliegen. Wie gehe ich denn dann diesbezüglich vor? Weiß nicht so richtig wie mir position hier weiterhelfen soll.

[Detlef G.]

Hallo Anton

Wie kann ich denn dafür sorgen, das die Rahmen übereinander liegen?

Wenn du den Inhalt nicht rechts floatest sondern mit margin-left auf Abstand hältst, passiert dies bei der Wahl des gleichen Wertes für width (Navi) und margin-left (Inhalt) ganz automatisch in Browsern, die sich an das richtige Boxmodel halten.
Natürlich darf dabei IE 6 nicht im Quirksmodus sein und in IE<6 gibt es dann eben eine Doppellinie.

#navi {  
 float:left;  
 width:10em;  
 border-right:1px solid #000;  
 /* darf kein margin oder padding erhalten oder muss bei width berücksichtigt werden */  
}  
#inhalt {  
 margin-left:10em;  
 border-left:1px solid #000;  
}  

Auf Wiederlesen
Detlef

[Ulysses]

Hi!

Es gibt allerdings eine Unterseite die so wenig Inhalt enthält, dass die Navigationsleite eine größere Höhe als der Inhaltsbereich hat. Das führt dazu, dass die horizontale Trennlinie zwischen Navigation und Inhaltsbereich nicht bis unten durchgezogen wird.

Wie kann ich diese Problematik denn am besten umgehen?

gib dem Inhaltsbereich doch ein min-height (bzw. height im IE<=6)
MfG Ulysses

[suit]

meine Webseite hat einen Navigations- und einen Inhaltsbereich. Den Navigationsbereich habe mich mit "position:left" positioniert. Den Inhaltsbereich habe ich mit "position:right" positionniert. Damit der Fuß der Seite immer unter diese beiden Bereiche gesetzt wird, habe ich diesem ein "clear:both" zugewiesen.

ich erinnere mich, dir gesagt zu haben, du sollst deine bereiche mit float ausrichten und für den fake-hintergrund faux columns verwenden (auch für die trennlinie kannst du das tun)

von "position: left;" habe ich verm. nie etwas gesagt - diese angabe wäre ziemlich wirkungslos (sollte das noch keinem aufgefallen sein)

[Anton]

ich erinnere mich, dir gesagt zu haben, du sollst deine bereiche mit float ausrichten und für den fake-hintergrund faux columns verwenden (auch für die trennlinie kannst du das tun)

von "position: left;" habe ich verm. nie etwas gesagt - diese angabe wäre ziemlich wirkungslos (sollte das noch keinem aufgefallen sein)

Sorry, ich hab natürlich nicht "position:left" sondern "float:left" bzw. "float:right" verwendet. Ich hab mir nur vertan beim verfassen dieses Threads.

Was sind denn Faux-Columns? Ich such natürlich auch bei Google. Vielleicht kannst du mir aber trotzdem kurz sagen in welchem Zusammenhang die mir für die Trennelinie zwischen Navigation und Inhalt behilflich sein können?

[Anton]

ich erinnere mich, dir gesagt zu haben, du sollst deine bereiche mit float ausrichten und für den fake-hintergrund faux columns verwenden (auch für die trennlinie kannst du das tun)

Jetzt erinnere ich mich wieder. Das letztemal war es so, dass der linke Rand der Navigation ganz bis nach unten gehen mußte. Dazu hab ich mir dann eine Grafik gebastelt welche ich dem übergeordneten Element als Hintergrundgrafik zugewiesen habe. Das hat auch soweit geklappt.

Diesmal ist es aber so, das der Rand nicht links von der Navigation sondern zwischen Navigation und Inhalt sein soll. Ich würde das momentan so machen: Die Navigation setze ich mit float:left, den Inhalt mit float:right. Außerdem sorge ich dafür, das zwischen diesen beiden Containern noch ein Pixel Platz ist. Hier sieht man dann als "Trennlinie" die Hintergrundfarbe des übergeordneten Elementes (in meinem Fall body). Was hälst du von dieser Lösung?

Altertiv kann ich natürlich einfach min-height des Inhaltbereichs so groß setzen, dass dieser immer höher als die Navigation ist. Wäre vielleicht die bessere Variante. Was meinst du?

[suit]

Diesmal ist es aber so, das der Rand nicht links von der Navigation sondern zwischen Navigation und Inhalt sein soll.

spielt keine rolle obs eine schöne grafik ist oder eine 1 pixel breite trennlinie

[...]

halte ich nicht viel davon, weils umständlicher ist, ist aber auch eine möglichkeit - zwar benötigst du hier keine separate grafik und sparst ggf ein paar bytes, wenn du dann aber mal eine gestrichelte linie haben willst oder ganz was anderes, musst du wieder umbauen - von der seite gleich faux columns verwenden und gut ist