DIV Container hängt sich an nach Positionierung

[x-plosiv]

Hallo zusammen

Ich habe da ein kleines CSS Problem, wo ich einfach den Fehler nicht finde. Ev. mache ich auch einen falschen Gedankengang. Ich hoffe jemand von euch, kann mir helfen oder einen Tipp geben. Besten Dank im Voraus.

Zu meinem Problem.

Ich habe ein Layout mit ein paar Div Containern. Als 2. letzter Container habe ich eine Grafik, welche ich mittels CSS im Header platziere. Nach diesem Container kommt der letzte Footer DIV Container. Dieser hängt sich aber nun an den Container der Header Grafik, anstatt im Textfluss des HTML Codes zu bleiben.

Am besten sehr ihr euch das selber einmal an. Ist nicht ganz einfach zu erklären :-). Ihr sehr hier die Copyright Zeile (footer) in grauer Schrift. Diese Zeile sollte aber zu unterst erscheinen, wie im Quelltext.

[Shadowcrow]

'ǝɯɐu$ ıɥ

Ich habe da ein kleines CSS Problem, wo ich einfach den Fehler nicht finde. Ev. mache ich auch einen falschen Gedankengang. Ich hoffe jemand von euch, kann mir helfen oder einen Tipp geben. Besten Dank im Voraus.

Works as designed...

position: abolut;
bottom: 10px;

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#posbottom

ssnɹƃ
ʍopɐɥs

[x-plosiv]

hi shadow

Danke für deinen Tipp. Der Footer wird zwar jetzt unten angezeigt, aber nur auf Bildschirmhöhe. Wenn der Text länger ist als der Bildschirm gross, sprich wenn man scollen muss, wird die Footerzeile über dem Text angezeigt. Er müsste aber am Ende vom Text angezeigt werden, egal ob man die Zeile dann sieht. Ich hoffe du verstehst was ich meine. Die Zeile soll einfach unter der letzten Zeile des Inhaltes angezeigt werden.

Ich habe einmal ein Beispiel hochgeladen, wo ihr seht, was ich meine, wenn der Text zu lang ist.

[Shadowcrow]

'ǝɯɐu$ ıɥ

Die Zeile soll einfach unter der letzten Zeile des Inhaltes angezeigt werden.

hm, meinst du sowas? wenn du die zeile am ende des inhalts haben willst, warum schreibst du sie dann nicht dahin?

ssnɹƃ
ʍopɐɥs

[MrMurphy]

Hallo,

das Problem ist, das das copy-DIV keinen Anhaltspunkt (übergeordnetes Element, Elternelement) hat, nach dem es sich richten kann. Deshalb bleibt ihm nur die Fenstergröße, an der es sich orientiert. Und an der Position bleibt es auch beim Scrollen.

Du musst also ein DIV erzeugen, das die gesamte Texthöhe einnimmt und gleichzeitig nicht die ("Standard"-) "position: static" enthält. Danach muss sich dann das "position: absolute" richten. Das wird aber schwierig werden, da du fast alle anderen entscheidenden DIV mit "positon: absolute" aus dem Textfluß herausnimmst. Deshalb kann das neue DIV die notwendige Höhe gar nicht errechnen.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@x-plosiv:

nuqneH

Ihr sehr hier die Copyright Zeile (footer) in grauer Schrift. Diese Zeile sollte aber zu unterst erscheinen, wie im Quelltext.

Dewegen: div[@class="inhalt"] ist absolut positioniert, dessen Box „wird völlig aus dem normalen Fluss entfernt (sie hat keinen Einfluss auf spätere gleichrangige Elemente).“ [CSS2 §9.6]

Noch einige Anmerkungen zu deinem Quelltext:

<span class="toptitel"><h1>Sizilien Ferienhaus</h1></span>

Den Fehler hätte dir der Validator auch gesagt.

<div class='navi'><p><a href="/" class="mainMenuLink">&nbsp;Home&nbsp;</a><br/><a href="fanartikel-merchandising-shop.php" class="mainMenuLink">&nbsp;Shop&nbsp;</a><br/><a href="die-simpsons-hinter-den-kulissen.php" class="mainMenuLink">&nbsp;Ferienwohnungen&nbsp;</a><br/><a href="kreative-simpsons-fans.php" class="mainMenuLink">&nbsp;Ferienhäuser&nbsp;</a><br/></p></div>

„Ich möchte eine Liste sein, bitte bitte lass mich ein <ul> sein!“ (frei nach wahsaga)

Wenn von einem Element (div[@class="navi"]) sämtliche Nachfahren desselben Typs ('a') dernselben Klasse ("mainMenuLink")angehören, dann gibt es nichts zu klassifizieren, die Klasse ist unsinnig. Du kannst die Elemente per Nachfahrenselektor '.navi a' ansprechen.

BTW, statt einer Klasse "navi" wäre eher eine ID angebracht [CLASS-ID]; dito bei "toptitel", "inhalt", "spalte_rechts", … (Letzteres ist übrigens kein sinnvoller Bezeichner. Bezeichne nach der Funktion, nie nach der gegenwärtig gewünschten Darstellung!)

Was sollen die NBSP vor und hinter den Linktiteln? Verwende 'padding'!

Und: „Verlinke niemals auf die aktuelle Seite.“ (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Dein Menü sollte derart aussehen:

<ul id='navi'>  
  <li>>Home</li>  
  <li><a href="fanartikel-merchandising-shop.php">Shop</a></li>  
  <li><a href="die-simpsons-hinter-den-kulissen.php">Ferienwohnungen</a></li>  
  <li><a href="kreative-simpsons-fans.php">Ferienhäuser</a></li>  
</ul>

<h2 align="left">Ferienh&auml;user &amp; Ferienwohnungen in Sizilien</h2>

@align="left" hat im Markup nichts zu suchen. Gib sämtliche Darstellung per CSS an!

Schreibe "Ferienhäuser" mit richtigem 'ä', nicht mit 'ä': „Es ist fast immer besser, eine Zeichencodierung zu benutzen, die es erlaubt, die Zeichen in ihrer normalen Form zu verwenden, anstatt Zeichen-Entity-Referenzen oder numerische Zeichenreferenzen zu verwenden. Die Verwendung von Escapes macht den Quelltext schlechter lesbar und schwerer zu pflegen […]“ [ESCAPES]

</strong><strong></strong></p>

Wozu ist das leere 'strong'-Element gut?

<p>&nbsp;</p>

Und wozu das? Verwende 'margin'/'padding'!

Qapla'

[x-plosiv]

sorry, dass ich mich erst jetzt melde. vielen vielen dank für dein ausführliches feedback. ich habe das eine oder andere dazu gelernt. danke

das mit dem footer klappt jetzt, aber nur weil ich den div container innerhalb des inhalt containers verschoben habe. :-(

wegen den navi links, da geht wohl nicht so wie du es geschrieben hast. denn wenn die navi auf der entsprechenden seite ist, wird eine andere css class definiert. das kann man jetzt auch testen, wenn man auf impressum klickt.