✔ Toten Rand farblich anders gestalten

[Fluxxx]

Ein herzliches Hallo an alle Forenteilnehmer!

Ich bin gerade dabei, eine Internetseite mittels Winkellayout zu erstellen und komme nicht weiter.

Ich habe die Seite auf 90% begrenzt, weil ich auf der rechten Seite längs gerne einen "toten Raum" haben möchte.

Dieser soll jedoch eine andere Farbe als die vom eigentlichen Inhalt unter dem Winkellayout haben und der Bodyinhalt soll unendlich weiß nach unten auslaufen.

Meine bisherige CSS Definition:

html, body{
margin:0px;
padding:0px;
background-color:rgb(220,220,220);
background-image:url(back-h.png);
background-repeat:repeat-y;
}
body {
margin:0px;
padding:0px;
background-color:rgb(255,255,255);
}

#seitenbereich {
width: 90%;
}

#top_section {
background-color:rgb(44,188,153);
background-image:url(back-v.png);
background-repeat:no-repeat;
height:100px;
left:200px;
margin:0px;
padding:0px;
}
#main_section {
margin:0px;
padding:0px;
}

Bei dieser Einstellung läuft der weiße Hintergrund von der Größe des Bodyinhaltes bis zum Rand komplett aus. Der Rest ist grau.

Kann mir jemand helfen? Für Antworten wäre ich sehr dankbar.

 

[Maik]

Hi,

wenn ich dein Anliegen jetzt richtig verstanden habe, muß die weiße Hintergrundfarbe für #seitenbereich deklariert werden:

html, body{
margin:0px;
padding:0px;
background-color:rgb(220,220,220);
background-image:url(back-h.png);
background-repeat:repeat-y;
}

#seitenbereich {
width: 90%;
background-color:rgb(255,255,255);
}

mfg Maik

 

[Fluxxx]

Danke, für die schnelle Antwort. Ich musste nur noch eine Kleinigkeit abändern, da ansonsten das Weiss in den linken Randbereich hineinlief. Jetzt ist es fast perfekt.

html, body{
margin:0px;
padding:0px;
background-color:rgb(220,220,220);
background-image:url(back-h.png);
background-repeat:repeat-y;
}
body {
margin:0px;
padding:0px;
}

#seitenbereich {
width: 90%;
background-color:rgb(255,255,255);  
background-image:url(back-h.png);
background-repeat:repeat-y;
}

Weiß eventuell noch jemand, wie ich den weißen Texthintergrund nach unten auslaufen lassen kann, also auch dorthin, wo kein Text steht? Die Möglichkeit mit mehreren <br> finde ich unsauber.

Für Antworten wäre ich sehr dankbar.

viele Grüße

Trixi

 

[Maik]

Das lässt sich so realisieren:

html, body{
margin:0px;
padding:0px;
background-color:rgb(220,220,220);
background-image:url(back-h.png);
background-repeat:repeat-y;
height:100%; /* Viewport und Dokumentkörper auf 100%-Höhe strecken */
}
 /* Dieser Regelblock kann im Stylesheet entfernt werden */
/*body {
margin:0px;
padding:0px;
}*/

#seitenbereich {
width: 90%;
background-color:rgb(255,255,255);  
background-image:url(back-h.png);
background-repeat:repeat-y;
min-height:100%; /* Mindesthöhe in modernen Browsern */
height:auto !important; /* auto-height mit !important-Regel für moderne Browser, damit sie die nachfolgende height-Deklaration ignorieren */
height:100%;  /* Mindesthöhe in IE */
}

mfg Maik

 

[Fluxxx]

Herzlichen Dank!


viele Grüße

Trixi