Backround in aufgespanntem DIv

Luck_Strike · #1 (**permalink**) 25.10.2005, 16:03

Hallo, ich hab ein kleines Problem bei Firefox. Ich habe in meim Layout einen Div, der alle weiteren Divs umspannt. Dieser Div soll einen Background bekommen, der sich in Y-Richtung kachelt. Das funktioniert auch in Explorer und Opera hervorragend, nur Firefox mag den Div nicht über die ganze Höhe der folgenden Divs kacheln.

Wenn ich dem betreffenden Div eine Höhe von 100% gebe, kachlt sich der Hintergrund zumindest bis zum Fensterrand, darunter ist dann aber auch wieder Ende-Gelände. Ein absolute Höhe kann ich ihm nicht geben, da er sich ja variabel aufspannen soll....

hier mal der code:

Code:

#rap {
background-image: url(Bilder/BG_y.jpg);
background-repeat: repeat-y ;
width: 821px;
display: block;
margin: auto;
position: relative;
height:100%;
}

Hat wer ne Ahnung, was man da machen kann? Den Body kann ich nicht nutzen, da ich da schon nen Background in X-Richtung verbaut habe. Bin mit meinem Latain echt am Ende

Danke im Voraus!

mazzo · #2 (**permalink**) 25.10.2005, 16:06

ich vermute eher ein nicht gecleartes float oder sowas. Gib dem Hintergrund-enthaltenen DIV mal nen Rahmen um genau zu prüfen wo es endet. Ist es so, dass der Container wirklich alles andere umschliesst oder ragt da im FF was unten raus?

Luck_Strike · #3 (**permalink**) 25.10.2005, 17:56

Danke für die Antwort! hmm - floats hab ich derzeit noch keine drin... ist nur das Grundgerüst der Seite...

Der DIV endet devinitiv ganz am Ende. Aber es sind eine ganze Reihe verschachtelter DIVs.

Habe testweise mal dem DIV ne rote Border gegeben. In Dreamweaver, Explorer und Opera umschließt der DIV mit der Border auch alles andere. Bei Firefox eindet die Border auf halber strecke (100% bildschirmhöhe). Wenn ich die 100% höhe rausnehme endet er schon vorher - nämlich nach dem ersten DIv (Header), den er umschließt.
kann mir nur vorstellen, dass firefox die verschachtelten divs nicht richtig interpretiert. Der code ist aber OK...

Im schlimmsten fall, muss ich ne Tabelle drum rum ziehen - Sch....!

fricca · #4 (**permalink**) 25.10.2005, 18:03

Zitat:

Zitat von Luck_Strike

kann mir nur vorstellen, dass firefox die verschachtelten divs nicht richtig interpretiert.

Das ist eher unwahrscheinlich.

Zeig doch deinen Code mal her.

Grüße
fricca

Luck_Strike · #5 (**permalink**) 26.10.2005, 09:22

hab's eine test-datei hier hochgeladen. der rote rahmen (#rap) ist der böse div

. Muss dazu sagen, dass ich aus unverzeihlicher Bequemlichkeit seit vielen vielen Monaten nicht mehr mit reinen CSS Layouttechniken gearbeitet habe. Aber bei dem Projekt komm ich nicht drum rum

http://www.ortenausport.de/voth_kund...ex_testCSS.htm

fricca · #6 (**permalink**) 26.10.2005, 09:41

Deinem Dokument fehlt die Doctype-Angabe! Ändere das zuerst.

Der Firefox stellt das dar, was in deinem Stylesheet steht.
Wenn du eine Höhe in % angibst bezieht sich das auf die height-Angabe des Elternelements. Auch für body.
Height:100% heißt genau 100% und nicht mehr (der IE macht das falsch). Du brauchst für #rap min-height.
#main hat eine überflüssige Höhenangabe!

Dieser Artikel dürfte dir auch helfen:
http://www.themaninblue.com/writing/...ve/2005/08/29/

Grüße
fricca

heiko_rs · #7 (**permalink**) 26.10.2005, 09:43

Nimm dem #rap das

height: 100%;

weg, denn das bewirkt, daß sich #rap im Firefox sich nur bis zum unteren Rand des Browserfensters ausdehnt, und kein einziges Pixel weiter

Was Du Dir darüberhinaus mal anschauen solltest, sind die Fehlermeldungen, die der Validator ausgibt:

http://validator.w3.org/check?uri=ht...ex_testCSS.htm

Schöne Grüße,
Heiko

heiko_rs · #8 (**permalink**) 26.10.2005, 10:11

Und wie Fricca schon sagte, #main hat eine überflüssige Höhenangabe. Wenn Du diese entfernst, dehnt sich #rap korrekt nach unten aus und schließt auch den Footer mit ein.

Allerdings würde ich für #rap keine min-height empfehlen, da sich dieses div eh mit dem Inhalt ausdehnt. Und falls es auf einer Seite mal wenig Inhalt gibt, würde es sich mit einer min-height zu weit ausdehnen und der Footer würde irgendwo in der Luft schweben (d.h. unter ihm wäre ein unnötiger leerer Raum) anstatt die Seite abzuschließen.

Und wieso hat #rap ein

position: relative;

ohne jegliche weitere Angaben? Das würde ich auch gleich mal rausschmeißen

Schöne Grüße,
Heiko

fricca · #9 (**permalink**) 26.10.2005, 10:15

Zitat:

Zitat von heiko_rs

Allerdings würde ich für #rap keine min-height empfehlen, da sich dieses div eh mit dem Inhalt ausdehnt. Und falls es auf einer Seite mal wenig Inhalt gibt, würde es sich mit einer min-height zu weit ausdehnen und der Footer würde irgendwo in der Luft schweben

Das muss nicht sein. Schau dir den Link an, den ich oben mitgegeben habe.

mazzo · #10 (**permalink**) 26.10.2005, 10:15

ich würde sogar die ganze #main rauswerfen. #rap reicht doch als umgebendes DIV für das vorgestellte Layout aus.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
Header entfernen	tripple	CSS	17	15.06.2010 15:41
Schriftfarbe in den Eintragungsfeldern von jforms	Steveislucky	CSS	2	16.03.2010 10:59
CSS Text nebeinander?	carstiee09	CSS	13	13.11.2009 19:18