# DIV-Problem



## rootssw (11. Oktober 2003)

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?!


----------



## Noby (11. Oktober 2003)

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


----------



## rootssw (11. Oktober 2003)

Darauf hab' ich schon geachtet!
Ich kann ja mal das Style posten:


```
#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)


----------



## prefix (13. Oktober 2003)

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


----------



## rootssw (13. Oktober 2003)

Ups, sorry! Das war noch 'ne alte Version!
Hier nun die Neue:


```
#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!


----------



## prefix (13. Oktober 2003)

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:
> ...



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!


----------



## rootssw (14. Oktober 2003)

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!


----------

