Liona: ZPosition, überlagerung klappt nicht! :(

Beitrag lesen

SELF-Forum

ZPosition, überlagerung klappt nicht! :(

Liona Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo Leute,

Ich arbeite seid kurzem an einer Homepage.
nun stehe ich vor dem folgenden Problem:

Ich möchte sog. Inhaltsboxen im Hauptteil einfügen.
Diese sollen so aussehen:
https://onedrive.live.com/redir?resid=6FEED54A5AE42BBA!816&authkey=!ABOOcK3rJC9QehA&v=3&ithint=photo%2Cpng
____________________________________________________________________________________________

Hier mein Code-Versuch:
HTML:
<!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">
<link rel="stylesheet" type="text/css" href="Test.css"/>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Ohne_Titel_1</title>
</head>
<body>

<!-- START INHALT -->
   <div id="inhalt">
    
<!-- START 1. Inhaltsbox -->  
<div id="inhaltsbox1">

		<!-- START Rand / Titel -->

<div id="inhaltsboxrand">
    
     <div id="inhaltsboxrandspacea">
     </div>
    
     <div id="titelinhalt">
     Hallo Welt!
     </div>
    
     <div id="inhaltsboxrandspaceb">
     </div>
     </div>
    
        <!-- START 1. Inhaltsbox -->
        <div id="boxinhalt">
       
        <div id="inhaltsboxspacea">
        </div>
       
        <div id="inhaltsboxautor">
        geschrieben von Hans Wurst
        </div>
       
        <div id="inhaltsboxtext">
        blahblah
        </div>
        </div>
      <!-- ENDE Inhalt -->
     
     </div>
     <!-- ENDE 1. Inhaltsbox -->
   </div>
</body>
</html>

____________________________________________________________________________________________

CSS:
body {
background-color:olive;
}

/* START Inhalt */
#inhalt {
    height:600px;
    position:absolute;
    top:220px;
    left:560px;
}

/* START erste Inhaltsbox */
#inhaltbox1 {
height:400px;
width:600px;
background-color:gray;
position:absolute;
    top:220px;
    left:560px;
}

/* Der Titel Überlappt den Boxinhalt*/
#inhaltsboxrand{
width:20px;
height:400px;
float:left;
}

#inhaltsboxrandspacea{
width:20px;
height:40px;
}

#titelinhalt {
height:60px;
width:800px;
background-color:maroon;
z-index:2;
}

#inhaltsboxrandspaceb {
height:300px;
}

/* Dieser Teil soll im Hintergrund zum Rand stehen! Soll BG-Farbe von der Box haben (Grau) */
#boxinhalt {
height:400px;
z-index:1;
float:left;
}

/* Sorgt dafür, dass der Boxinhalt erst nach dem Titel anfängt! Soll BG-Farbe von der Box haben (Grau) */
#inhaltsboxspacea {
height:110px;
}

/* Soll BG-Farbe von der Box haben (Grau) */
#inhaltsboxautor {
height:30px;
}

/* Soll BG-Farbe von der Box haben (Grau) */
#inhaltsboxtext {
height:260px;
}

____________________________________________________________________________________________

Leider ein totaler Reinfall... Trotz div. verschiedenen Versuchen mit anderen Eigenschaften, Größen, etc. bekomme ich es einfach nicht hin. Nach langem belesen im Internet kann ich kurz zusammenfassen: Ich verstehe es nicht. :( Die Z-Position bleibt mir ein Rätsel.

Was ich brauche ist eine verständliche Lösung, warum es nicht funktioniert und wie ich es besser machen kann.
Ich hoffe einer von euch kann mir helfen.

LG Lio

Beitrag melden
–
Informationen zu den Bewertungsregeln