illthis: ungewollte Abstände zwischen 2 DIVs

Beitrag lesen

SELF-Forum

ungewollte Abstände zwischen 2 DIVs

illthis
– Informationen zu den Bewertungsregeln

Danke für den Tipp mit margin-top bei H1!!! Bin jetzt selbst auf eine Lösung gekommen, die verhindert, dass der Text ganz am Rand steht, ohne dass dabei Browserweichen bei IE wegen padding nötig werden. Warum sich das margin-top des H1-Tags aber über den DIV hinaus auswirkt ist mir dennoch unverständlich. Würde mich über eine Erklärung freuen.

Viele Grüße, Illthis.

  
<?xml version="1.0" encoding="iso-8859-1"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
  
<head>  
  <title>Design Test</title>  
  <style type="text/css"><!--  
  body {  
 margin: 0px;  
 font-family: Verdana, Arial, Helvetica, sans-serif;  
 color: #000000;  
 background-color: #FFFFFF;  
 text-align: center;  
  }  
  div#dsg_headerback {  
 width: 100%;  
 height: 122px;  
 background-color: #880000;  
 text-align: center;  
 margin: 0px;  
  }  
  div#dsg_header {  
 width: 1000px;  
 height: 122px;  
 background-color: #FF0000;  
 margin: 0px auto 0px auto;  
  }  
  div#dsg_lineback {  
 width: 100%;  
 height: 38px;  
 background-color: #008800;  
 text-align: center;  
 margin: 0px;  
  }  
  div#dsg_line {  
 width: 1000px;  
 height: 38px;  
 background-color: #00FF00;  
 margin: 0px auto 0px auto;  
  }  
  div#dsg_main {  
 width: 1000px;  
 min-height: 800px;  
 background-color: #CCCCCC;  
 text-align: center;  
 margin: 0px auto 0px auto;  
  }  
  div#dsg_content {  
 width: 960px;  
 text-align: left;  
 padding-top: 20px;  
 margin: 0px auto 0px auto;  
  }  
  --></style>  
</head>  
  
<body>  
  <div id="dsg_headerback">  
    <div id="dsg_header"></div>  
  </div>  
  <div id="dsg_lineback">  
    <div id="dsg_line"></div>  
  </div>  
  <div id="dsg_main">  
    <div id="dsg_content">  
      <h1 style="margin-top:0px">Page &Uuml;berschrift</h1>  
      <div class="item">  
        <h2>Item Überschrift</h2>  
        <div>Inhalt bla bla bla bla bla bla bla und noch ein bisschen mehr.  
          Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr.  
          Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr.  
          Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr.  
          Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr.  
          Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr.  
          Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr.  
        </div>  
      </div>  
      <div class="item">  
        <h2>Item Überschrift</h2>  
        <div>Inhalt bla bla bla bla bla bla bla und noch ein bisschen mehr.  
          Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr.  
          Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr.  
          Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr.  
          Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr.  
          Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr.  
          Bla bla bla bla bla bla bla bla bla bla bla bla und noch ein bisschen mehr.  
        </div>  
      </div>  
    </div>  
  </div>  
</body>  
  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln