DIV-Problem

Status
Nicht offen für weitere Antworten.
R

rootssw

Erfahrenes Mitglied
Hallo zusammen!

Ich hab' folgendes Problem:

Ich möchte meine Homepage mit DIVs gestalten.
Und zwar so:

Haupt-DIV
Unter-DIV
Seiteninhalts-DIVs (mehrere
Unter-DIV-Ende
Haupt-DIV-Ende

Das an sich funktioniert auch wunderbar.
Aber wenn ich auf dem obersten DIV (also dem einem der DIVs für den Seiten-Inhalt) versuche mittels

BackGround-Image: URL (bild.jpg)

ein Hintergrund-Bild zu setzen, wird dieses nicht angezeigt (nicht beim IE oder Netscape genauso Opera).

Die Angegebene URL des Bildes ist aber 100% richtig!
Kann mir da vielleicht jemand helfen?! :confused:
 
Hallo
Hast du Z-index verwendet? wenn ja, überlagert vielleicht ein Div-Container dein Bild. Ansonsten poste doch am Besten mal deinen Code.
Ciao
Noby
 
Darauf hab' ich schon geachtet!
Ich kann ja mal das Style posten:

Code: 
#Main {
	Position: Absolute;
	Top: 0px;
	Left: 0px;
	Width: 1000;
	Height: 940px;
	Min-Width: 1000px;
	Min-Height: 940px;
	Max-Width: 1000px;
	Max-Height: 940px;
	Z-Index: 1;
	OverFlow: Visible;
	BackGround-Color: #575757;
	Align: Center
}

#MPage {
	Position: Absolute;
	Top: 50px;
	Left: 230px;
	Width: 536px;
	Height: 850px;
	Min-Width: 536px;
	Min-Height: 850px;
	Max-Width: 536px;
	Max-Height: 850px;
	Z-Index: 2;
	OverFlow: Hidden;
	BackGround-Color: #FFFFFF;
	Border-Width: 2px;
	Border-Style: Solid;
	Border-Color: #000000;
	Align: Center
}

#Banner_1 {
	Position: Absolute;
	Top: 0px;
	Left: 0px;
	Width: 100%;
	Height: 60px;
	Min-Width: 100%;
	Min-Height: 60px;
	Max-Width: 100%;
	Max-Height: 60px;
	Z-Index: 3;
	OverFlow: Hidden;
	BackGround-Color: #BBBBBB;
	Border-Bottom: 2px Solid #000000;
	Align: Center
}

#Logo {
	Position: Absolute;
	Top: 60px;
	Left: 0px;
	Width: 100%;
	Height: 69px;
	Min-Width: 100%x;
	Min-Height: 69px;
	Max-Width: 100%;
	Max-Height: 69px;
	Z-Index: 4;
	OverFlow: Hidden;
	BackGround-Color: #FFFFFF;
	Align: Center;
}

#Menu {
	Position: Absolute;
	Top: 129px;
	Left: 0px;
	Width: 100%;
	Height: 79px;
	Min-Width: 100%;
	Min-Height: 79px;
	Max-Width: 100%;
	Max-Height: 79px;
	Z-Index: 5;
	OverFlow: Hidden;
	BackGround-Color: #FFFFFF;
	Align: Center
}

#Menu_S {
	Position: Absolute;
	Top: 208px;
	Left: 20px;
	Width: 494px;
	Height: 30px;
	Min-Width: 100%;
	Min-Height: 30px;
	Max-Width: 100%;
	Max-Height: 30px;
	Z-Index: 5;
	OverFlow; Hidden;
	BackGround-Color: #FFFFFF;
}

#Content {
	Position: Absolute;
	Top: 238px;
	Left: 10px;
	Width: 494px;
	Height: 477px;
	Min-Width: 494px;
	Min-Height: 477px;
	Max-Width: 494px;
	Max-Height: 477px;
	Margin-Top: 30px;
	Margin: 10px;
	Padding-Top: 25px;
	Padding-Bottom: 25px;
	Padding-Left: 15px;
	Padding-Right: 15px;
	Z-Index: 7;
	OverFlow: Scroll;
	BackGround-Color: #BBBBBB;
	BackGround-Image: URL (../pictures/0800100001.gif);
	BackGround-Position: Center Middle;
	BackGround-Repeat: No-Repeat;
	BackGround-Attachment: Fixed;
	Border-Width: 1px;
	Border-Style: Solid;
	Align: Center
}

#Banner_2 {
	Position: Absolute;
	Top: 735px;
	Left: 0px;
	Width: 100%;
	Height: 98px;
	Min-Width: 100%;
	Min-Height: 98px;
	Max-Width: 100%;
	Max-Height: 98px;
	Z-Index: 6;
	OverFlow: Hidden;
	BackGround-Color: #FFFFFF;
	Align: Center
}


Dabei ist Main das Fenster, MPage der zweite div und der rest (content, menu und die banner) der seiteninhalt. (Menu und Menu_S sollen den gleichen z-index haben)
 
du solltest mal deine schreibweise ändern und alles klein schreiben!

des weiteren: welches doctype verwendest du?

des weiteren: unterstriche sind in klassen- und id-namen NICHT erlaubt! hast das css validiert -> http://jigsaw.w3.org/css-validator/

dabei wird dir auffallen, dass du weitere nicht erlaubte definitionen verwendest, wie z.b. "Align: Center" - was ist das? was tut das? gar nichts! es muss nämlich "text-align: center" sein :)

-> OverFlow; Hidden;

was macht der strichpunkt, gehört da nicht ein doppelpunkt -> usw.

valider code ist die grundvoraussetzung für funktionierendes css!

des weiteren: "middle" gibt es nicht, es müsste in deinem fall wie folgt sein:

background-position: center center; /* sicherheitshalber beide ausrichtungen, damit es auch in mozilla / netscape / opera klappt */

hier mal der link auf die css2-spezifkation - betroffener abschnitt: http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap14.html#heading-14.2.1

dies ist die bibel für alle cssler - mal damit auseinandersetzen ;)
 
Zuletzt bearbeitet:
Ups, sorry! Das war noch 'ne alte Version!
Hier nun die Neue:

Code: 
#Main {
	Position: Absolute;
	Top: 0px;
	Left: 0px;
	Width: 1000px;
	Height: 940px;
	Min-Width: 1000px;
	Min-Height: 940px;
	Max-Width: 1000px;
	Max-Height: 940px;
	Z-Index: 1;
	OverFlow: Visible;
	BackGround-Color: #FF8044;
}

#MPage {
	Position: Absolute;
	Top: 40px;
	Left: 230px;
	Width: 536px;
	Height: 850px;
	Min-Width: 536px;
	Min-Height: 850px;
	Max-Width: 536px;
	Max-Height: 850px;
	Z-Index: 2;
	OverFlow: Hidden;
	BackGround-Color: #FFFFFF;
	Border-Width: 3px;
	Border-Style: Solid;
	Border-Color: #000000;
}

#BannerF {
	Position: Absolute;
	Top: 0px;
	Left: 0px;
	Width: 100%;
	Height: 60px;
	Min-Width: 100%;
	Min-Height: 60px;
	Max-Width: 100%;
	Max-Height: 60px;
	Z-Index: 3;
	OverFlow: Hidden;
	BackGround-Color: #BBBBBB;
	Border-Bottom: 3px Solid #000000;
}

#Logo {
	Position: Absolute;
	Top: 60px;
	Left: 0px;
	Width: 100%;
	Height: 69px;
	Min-Width: 100%x;
	Min-Height: 69px;
	Max-Width: 100%;
	Max-Height: 69px;
	Z-Index: 4;
	OverFlow: Hidden;
	BackGround-Color: #FFFFFF;
}

#MenuM {
	Position: Absolute;
	Top: 129px;
	Left: 0px;
	Width: 100%;
	Height: 79px;
	Min-Width: 100%;
	Min-Height: 79px;
	Max-Width: 100%;
	Max-Height: 79px;
	Z-Index: 5;
	OverFlow: Hidden;
	BackGround-Color: #FFFFFF;
}

#MenuPM{
	Position: Absolute;
	Top: 208px;
	Left: 20px;
	Width: 494px;
	Height: 30px;
	Min-Width: 100%;
	Min-Height: 30px;
	Max-Width: 100%;
	Max-Height: 30px;
	Z-Index: 6;
	OverFlow: Hidden;
	BackGround-Color: #000000;
}

#Content {
	Position: Absolute;
	Top: 238px;
	Left: 10px;
	Width: 494px;
	Height: 477px;
	Min-Width: 494px;
	Min-Height: 477px;
	Max-Width: 494px;
	Max-Height: 477px;
	Padding-Top: 25px;
	Padding-Bottom: 25px;
	Padding-Left: 15px;
	Padding-Right: 15px;
	Z-Index: 7;
	OverFlow: Scroll;
	BackGround-Color: #BBFFBB;
	BackGround-Image: URL ('/pictures/0900100001.gif');
	BackGround-Position: Center Middle;
	BackGround-Repeat: No-Repeat;
	BackGround-Attachment: Fixed;
	Border-Width: 2px;
	Border-Style: Solid;
}

#BannerS {
	Position: Absolute;
	Top: 735px;
	Left: 0px;
	Width: 100%;
	Height: 98px;
	Min-Width: 100%;
	Min-Height: 98px;
	Max-Width: 100%;
	Max-Height: 98px;
	Z-Index: 8;
	OverFlow: Hidden;
	BackGround-Color: #FFFFFF;
}

Und, wegen dem Middle:
Schau doch mal bei SelfHTML rein! Da gibt's auch ein Middle! Das sorgt für die vertikale Ausrichtung!

Ist da irgendwas verkehrt?!

PS:

Ich werde NIEMALS (solange es nicht zwingend notwendig ist) alles klein schreiben!
NIE! NIIEEE! NIIIIIEEEEE!
 
selfhtml ist nicht der Standard - das ist die W3C-Spezifikation!

ich zitiere aus der spezifikation:

Wert:
[[<percentage> | <length> ]{1,2} | [[top | center | bottom] || [left | center | right ]]] | inherit

Ausgangswert:
0% 0%

Angewendet auf:
Elemente auf Blockebene und ersetzte Elemente.

Vererbt:
Nein

Prozentwerte:
Bezieht sich auf die Größe der eigentlichen Box.

Medium:
visual
Zum Vergrößern anklicken....

ergo: du kannst mir und der spezifikation jetzt glauben schenken, dein css mal validieren (inkl. unten beschriebener kleinschreibung), dann kann ich dir helfen - wenn du das einfach nicht willst: auch gut, erspar ich mir arbeit in der freizeit :)

ich denke, das sollte man auch mal so sehen ;)

Und ob du klein schreiben willst oder nicht - ab xhtml musst du das aber!
 
Zuletzt bearbeitet:
Das Problem mit der KleinSchreibung hab' ich mit PHP gelöst (die CSS-Datei wird sowieso von einem PHP-Script generiert) - strtolower().
So muss ich das nicht klein schreiben! :)
Daran lag's aber auch nicht.
Ich hab' es aber dennoch zum Funktionieren gebracht! Trotz middle! :-)
Klappt wunderbar!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück