Erawan: Schönheitsfehler bei CSS Layout

Beitrag lesen

SELF-Forum

Schönheitsfehler bei CSS Layout

Erawan
– Informationen zu den Bewertungsregeln

N'Abend zusammen!

Ich erbitte wieder einmal eure Hilfe.

Für folgendes Design bin ich gerade dabei ein CSS Layout zusammenzustellen:

auf der Seite zentrierter Container dessen Breite flexibel in em angegeben werden soll, links und rechts davon soll sich ein gemusterter Balken mit Schatten befinden, unabhängig vom Inhalt soll er sich der Hintergrund (weiße Fläche des Content-Bereichs und die beiden Balken links und rechts) über die ganze Fensterhöhe erstrecken

hoffentlich vorstellbar? im Grunde e so wie man es häufig sieht nur mit dem großen Unterschied dass ich anstatt eines Hintergrundbildes mit fixer Breite (das sich im body wiederholt) ein Layout schaffen möchte das sich ausdehnen kann aber auch immer an den senkrechten Rändern einen Schatten/Muster hat.

Nach stundenlangen herumprobieren bin ich derzeit auf dem Stand das es bereits im IE (6) funktioniert nur beim FF (2) passiert folgendes:
wenn der Inhalt größer ist als das Fenster und ein Scrollbalken angezeigt wird und man hinunterscrollt, wird hinter dem Bereich der "hinaufgescrollt" wird kein Hintergrund angezeigt wird.

(dieses Verhalten leuchtet mir ja auch ein - schließlich schreibe ich im Stylesheet ja vor das sich der Container "nur" über 100% des Fensters erstrecken soll) Da es aber im IE funktioniert hoffe ich das es auch eine entsprechende Lösung auch für den Firefox gibt!?

Nachfolgend der Quellcode des Layouts:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<title>zentriertes flexibles Layout</title>  
<style type="text/css">  
html,body {  
height:100%;  
}  
body{  
margin:0;  
padding:0;  
background-color: #CCC;  
}  
#randrechts{  
height:100%;  
width:55em;  
margin:0 auto;  
background-image: url(pix/randrechts.gif);  
background-repeat:repeat-y;  
background-position: 100% 100%;  
}  
#randlinks{  
height:100%;  
margin-right:15px;  
background-image: url(pix/randlinks.gif);  
background-position: 0% 0%;  
background-repeat:repeat-y;  
}  
#content{  
margin-left:15px;  
height:100%;  
background-color: #FFF;  
}  
</style>  
</head>  
  
<body>  
<div id="randrechts">  
<div id="randlinks">  
 <div id="content">  
  <br />  
  <br />  
  Inhalt  
  <p>&nbsp;</p>  
  <p>&nbsp;</p>  
  <p>&nbsp;</p>  
 </div>  
</div>  
</div>  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln