Überschneidung der divs vermeiden ?

CarstenH · 18.12.2009

hallo,
in einem dokument befinden sich zwei divs, wobei das zweite den kompletten inhalt enthält (mit zusätl. divs).
bei verkleinerung des fensters treten überschneidungen auf - siehe screenshots.

woran könnte das liegen ?

Silvio · 18.12.2009

AW: Überschneidung der divs vermeiden ?

Hast du den divs feste breiten gegeben? Es wäre hilfreicher, wenn du noch den Quellcode einstellst.

Silvio

CarstenH · 18.12.2009

AW: Überschneidung der divs vermeiden ?

hier der quellcode vom header-bereich, wo der fehler ebenfalls auftritt:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>New Document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    
    html,body{
      width:100%;
      margin:0;
      background:#035F86 ;
     }
     
    #header {
        background-color: #035f86;
        letter-spacing: 0.2em;
        margin: 0;
      width:auto;
      height: 170px;    
    }
    
    #headl{    
    padding-top:20px;
    color: white;
    height: 25px;
    font-weight:bold;
    font-size: 14px;
    font-family: Arial;
    border-bottom: white solid 1px;
    display: block;
    text-align:left;
    width:100%;   
    } 
   
  
    
    #shad_left{
    background:#035F86 url(images/shadow_left.gif) top left repeat-y;    
  margin-left:15px;
    margin-bottom:0;
    min-height:100%;    
    height:auto !important;
    height:100%;  
    position:fixed;
    width:100%;
     
}


#main_cont{
  background:url(images/shadow_right.gif) top right repeat-y;
  margin-right:15px;
  padding:10px 40px;
  margin-top: 0px;
  margin-bottom:0px;
  min-height:100%;
  height:auto !important;
  height:100%;  
  width:91.5%;
  position:absolute;
 min-width:800px;
}

#img_logo_g{
    margin-top:0px;
    padding-right:10px;
    
    background-image:url(images/b1.jpg);
    background-repeat: no-repeat;
    width:170px;
    height:170px;
    float:left;
    border-right: white solid 1px;
}

#img_m{
    margin-left:200px;
    background-image:url(images/header.jpg);
    background-repeat: no-repeat;
    width:769px;

    height:170px;
    
}
    
</style>

  </head>
  <body>
  
<div id="shad_left" >
<div id="main_cont">
<div id="headl">
<div id="header">

<div id="img_logo_g"></div>
<div id="img_m"></div>


  </div>
  </div> 
  </div>
  </div> 
  </body>
</html>

Silvio · 18.12.2009

AW: Überschneidung der divs vermeiden ?

Also, Du kannst bei den css-Einträgen min-height:100% weglassen, wenn du danach die height eh mit 100% festlegst.
html und body brauchst du auch nicht eine width von 100% geben , da der body eh immer 100% hat und html css-technisch nicht angesprochen werden muss.

Wenn ich das jetzt richtig entnehme, hast Du alle divs in den container "shad_left" gepackt? Ist das richtig so?

CarstenH · 18.12.2009

ja alle divs sind in dem container shad_left.

ohne min-height werden die hintergrundbilder, die den schatten rechts und links darstellen abhängig vom content abgeschnitten.
min-height erzwingt die darstellung über die ganze tiefe, zumindest im opera.

problem gelöst.

der erste div muss in den body gesetzt werden, damit der zweite eine min-höhe zugewiesen bekommen kann.
nur der erste div nimmt die min-height, also ersten div löschen.