Mineotopia: Vorder-Hintergrund von Boxen

Hallo liebe Community,

ist mir jetzt schon fast peinlich so etwas zu fragen ... ich arbeite jetzt echt schon lange mit HTML und habe auch schon sehr viele und sehr umfangreiche Websites erstellt ... aber das will einfach nicht klappen, auch nicht mit z-index ... vielleicht kann einer von euch mir ja helfen :)

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  
"http://www.w3.org/TR/html4/frameset.dtd">  
  
<html>  
<head>  
<title><?php echo $title; ?></title>  
  
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />  
  
<style>  
  
#back {  
	width: 100%;  
	height: 110px;  
}  
  
#back_left {  
	width: 50%;  
	height: 100px;  
	float: left;  
	background-color: blue;  
}  
#back_right {  
	width: 50%;  
	height: 100px;  
	float: left;  
	background-color: yellow;  
}  
  
#body {  
	width: 1000px;  
	height: 1000px;  
	margin-top: -110px;  
	margin-left: auto;  
	margin-right: auto;  
	background-color: #234567;  
}  
  
</style>  
  
</head>  
	<body>  
		<div id="back">  
			<div id="back_left"></div>  
			<div id="back_right"></div>  
		</div>  
		<div id="body"></div>  
	</body>  
</html>  

So, die hellblaue und die gelbe Box sollen im Hintergrund sein, sodass die Body-Box davor ist.  Klar kann ich im Body-Bereich auch einfach die Reihenfolge von den div-tags ändern, allerdings will ich die Seite mit Variablen Größen erstellen und deswegen gehen ja keine festen margin-Werte.

Schon mal vielen Dank für eure Hilfe!

  1. Om nah hoo pez nyeetz, Mineotopia!

    </head>  
    
    > 	<body>  
    > 		<div id="back">  
    > 			<div id="back_left"></div>  
    > 			<div id="back_right"></div>  
    > 		</div>  
    > 		<div id="body"></div>  
    > 	</body>  
    > </html>  
    > 
    
    

    So, die hellblaue und die gelbe Box sollen im Hintergrund sein, sodass die Body-Box davor ist.  Klar kann ich im Body-Bereich auch einfach die Reihenfolge von den div-tags ändern, allerdings will ich die Seite mit Variablen Größen erstellen und deswegen gehen ja keine festen margin-Werte.

    Lass mich raten, die divs innerhalb von back sollen keinen Text erhalten sondern nur Hintergrund?

    Dafür gibt es multiple Hintergrundgrafiken.

    Aber auch ohne diese, die inzwischen breit unterstützt werden, bekäme man dies hin.

    <html>  
      <body>  
        <main role="main">  
        </main>  
      </body>  
    </html>
    

    html und body können entsprechend formatiert werden.

    Verwechsle nicht tag und element.

    So richtig mag ich nicht glauben, dass du

    jetzt echt schon lange mit HTML [arbeitest] und […] auch schon sehr viele und sehr umfangreiche Websites erstellt [hast]

    z-index wirkt übrigens nur auf Elemente, deren position-Wert verschieden von static ist.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen CAS und Casanova.

    1. Om nah hoo pez nyeetz, Matthias Apsel!

      Dafür gibt es multiple Hintergrundgrafiken.

      Ergänzung: Für streifenförmige Hintergründe ist linear-gradient geeignet.

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen satt und Sattel.