Enrico: Leere div-Bereiche werden nicht angezeigt

Hallo,

ich habe mich eurer Ratschläge in meinem anderen "Beitrag" angenommen und den Code, aktuell nur mal das Layout, auf div-Bereiche umgestellt:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
   <head>  
      <title>div-Layout</title>  
      <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
      <link type="text/css" href="../CSS/Standard.css" rel="stylesheet" media="screen">  
   </head>  
   <body>  
      <div id="Ausrichtung">  
         <div id="VorInhalte"></div>  
         <div id="Inhalte">  
            Text, Text, Text  
         </div>  
         <div id="NachInhalteVorSidebar"></div>  
         <div id="Sidebar">  
            Text, Text, Text, Text, Text, Text, Text  
         </div>  
         <div id="NachSidebar"></div>  
      </div>  
   </body>  
</html>  

Die css-Definitionen schauen folgendermaßen aus:

  
div#Ausrichtung  
{  
   margin:   0px auto;  
   overflow: hidden;  
   width:    866px;  
}  
  
div#VorInhalte  
{  
   background:     url(../GRAFIKEN/HomepageVorInhalte.png) repeat-y;  
   float:          left;  
   margin-bottom:  -10000px;  
   padding-bottom: 10000px;  
   width:          64px;  
}  
  
div#Inhalte  
{  
   background:     url(../GRAFIKEN/HomepageInhalte.png) repeat-y;  
   float:          left;  
   margin-bottom:  -10000px;  
   padding-bottom: 10000px;  
   width:          579px;  
}  
  
div#NachInhalteVorSidebar  
{  
   background: url(../GRAFIKEN/HomepageNachInhalteVorSidebar.png) repeat-y;  
   ...  
}  
  
...  

Ich habe die Methode mit negativem margin und positivem padding deshalb gewählt, damit sich alle div-Bereiche auf eine einheitliche Länge ausdehnen.

Die div-Bereiche "Inhalte" und "Sidebar" werden einwandfrei angezeigt und gleichen sich bezüglich ihrer Höhe dem jeweils höchsten div-Bereich an. Die leeren div-Bereich "VorInhalte" und "NachInhalteVorSidebar" werden mir aber nur dann angezeigt, wenn ich irgendein Textzeichen "reinpacke". Dabei wundert es mich aber, dass der - ebenfalls leere - div-Bereich "NachSidebar" wiederum schon angezeigt wird.

Ich habe es daraufhin mit einer ergänzten transparenten Grafik im html-Code und im nächsten Schritt mit Ergänzung von display: block bei den css-Angaben (ohne Ergänzung von Textzeichen im html-Code) versucht, aber ohne Erfolg.

Wie bekomme ich es hin, dass mir die vorgenannten div-Bereiche ebenfalls angezeigt werden?

Wie immer Danke für eure Hilfe.

Gruß,
Enrico

  1. hi,
    wie sieht den der CSS-Teil zu "NachSidebar" aus? Kann es sein das Du dort eine Höhe angegeben hast, welche bei den anderen fehlt? Ein div welches keine Höhe hat, hat automatisch die eigenschaft height:auto;, ist also nur sichtbar wenn es Ihnalt hat

    Grüße
    tunnel85

    1. Hallo tunnel85,

      wie sieht den der CSS-Teil zu "NachSidebar" aus? Kann es sein das Du dort eine Höhe angegeben hast

      Nein, ich habe in keinem der divs eine Höhe angegeben.

      Gruß
      Enrico

  2. @@Enrico:

    nuqneH

    ich habe mich eurer Ratschläge in meinem anderen "Beitrag" angenommen

    Nein, hast du nicht.

    und den Code, aktuell nur mal das Layout, auf div-Bereiche umgestellt:

    Von div-Suppe war in jenem Thread nicht die Rede.

    Sondern von sinnvoller Auszeichnung. Das kann auch mal zur Gruppierung ein div sein, wenn nichts aus header, main, footer, section, article, aside passt.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    Warum nicht HTML5?

    <html>

    BTW, hier wäre sinnvollerweise die Sprache anzugeben. (aktualisierte Übersetzung in Arbeit)

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

    Warum eine veraltete Zeichencodierung, die schon für den deutschen Sprachgebrauch unzureichend ist? Verwende UTF-8, immer und überall!

    <div id="VorInhalte"></div>

    Wozu dieses leere Element? Das Pseudoelement ::before existiert.

    <div id="NachInhalteVorSidebar"></div>

    Dito.

    <div id="NachSidebar"></div>

    Dithree. Das Pseudoelement ::after existiert.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)