Harp: CSS-Divs variable Höhe, find keine Lösung

Beitrag lesen

SELF-Forum

CSS-Divs variable Höhe, find keine Lösung

Harp
– Informationen zu den Bewertungsregeln

Hallo,

ich mach zum ersten mal ein Layout rein auf basis von DIVs und CSS. Eigentlich ne wunderbare Sache, nur hab ich ein Problem: Die Seite passt sich nicht der Textlänge an. Das ganze ist in einem DIV-Container und die Seite soll sich nach dem DIV-"Content" nach unten verlängern und natürlich auch nicht über den Footer laufen. Hat da jemand nen Tip, bin echt am verzweifeln und hab dazu nix hilfreiches gefunden!

Hier mein Code, zuerst die HTML:

<html>
   <head>
      <title>
         Template für TYPO3
      </title>
    <link rel="stylesheet" type="text/css" href="css/ik-t3style.css" />
   </head>
   <body>
      <div id="container">
    <div id="headPicLinks">
  <img src="b/head_links_neu.jpg" alt="">
  </div>
  <div id="headPicRechts">
  <img src="b/head_rechts_neu.jpg" alt="">
  </div>
  <div id="logoBalken">
       <div id="logoLink">
       <a href="../../../index.php?id=2"><img src="b/trans_platzh.gif" border="0" height="42" width="120" alt=""></a>
       </div>
       <div id="topMenuL1">
       </div>
  </div>
  <div id="leftMenuL2">
  </div>
  <div id="languageSwitch">
       <span class="tx_01_menu"><img src="b/pfeil_grau.gif"> &nbsp;<a href="../../../index.php?id=2">English</a></span>
  </div>
  <div id="leftMenuBasisinfo">
  </div>
  <div id="content">
  <p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
  <p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
  <p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
  <p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
  <p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
  <p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
  <p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
  <p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
  <p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
  <p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
  <p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
  <p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
  <p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
  <p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
  <p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
  <p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
  <p>Dies ist der Content, an dem sich die Länge des Containers ausrichten soll</p>
     </div>
  <div id="imageMenuNext">
  </div>
  <div id="imageMenuPrev">
  </div>
  <div id="rechterSchatten">
    </div>
    <div id="weCare">FOOTERTEXT
    </div>
    <div id="footerSchatten">
    </div>
      </div>
   </body>
</html>

Und hier die CSS:

html, body  {
 padding: 0;
 margin:0px auto;
 border: 0;
 background: #E0DCD1;
 font-family: Helvetica, Arial, SunSans-Regular, sans-serif;
 font-size: 10px;
 height: 100%;
 width: 100%;
}

p {
 margin: 10px 0px 0px 0px;
}

#container {
 position: absolute;
 height: 97%;
 width: 600px;
 top: 15px;
 left: 50%;
 margin-left: -300px;
 text-align: left;
 background-color: #B4CDF2;
 background-image: url(../b/bg_container.jpg);
 background-repeat: repeat-x;
}

* html #container {
  height: 97%;
  width: 600px;
  border-top: 0px solid #FFFFFF;
  border-bottom: 0px solid #FFFFFF;
}

#rechterSchatten {
 position: absolute;
 height: 100%;
 width: 10px;
 top: 0px;
 left: 600px;
 background-color: #E0DCD1;
 background-image: url(../b/bg_schatten.jpg);
 background-repeat: repeat-y;
}

#headPicLinks {
 position: absolute;
 left: 0px;
 height: 164px;
 width: 305px;
 padding: 0;
}

#headPicRechts {
 position: absolute;
 right: 0px;
 height: 164px;
 width: 295px;
}

#logoBalken {
 position: absolute;
 top: 164px;
 height: 100px;
 width: 600px;
 background-image: url(../b/logobalken.jpg);
}

#logoLink {
 position: absolute;
 left: 25px;
 height: 35px;
 width: 120px;
}

#topMenuL1 {
 position: absolute;
 left: 200px;
 top: 28px;
 height: 25px;
 width: 350px;
 text-align: left;
}

#leftMenuL2 {
 position: absolute;
 left: 35px;
 top: 255px;
 height: 250px;
 width: 150px;
 text-align: left;
}

#languageSwitch {
 position: absolute;
 left: 35px;
 top: 535px;
 height: 30px;
 width: 150px;
 text-align: left;
}

#leftMenuBasisinfo {
 position: absolute;
 left: 35px;
 top: 580px;
 height: 100px;
 width: 150px;
 text-align: left;
}

#content {
 position: absolute;
 left: 200px;
 top: 255px;
 width: 335px;
 text-align: left;
 color: black;
 font-size: 8pt;
 font-family: Helvetica, Arial, SunSans-Regular, sans-serif;
 line-height: 10pt;
 text-decoration: none;
}

#content h1 {
 font-size: 10pt;
 font-weight: bold;
}

#content a:link {
 color: #0569b6;
}

#content a:hover {
 color: #5a5a5a;
}
#content a:visited {
 color: #0569b6;
}
#content a:active {
 color: #0569b6;
}

#imageMenuNext {
 position: absolute;
 right: 10px;
 top: 535px;
 height: 37px;
 width: 34px;
}

#imageMenuPrev {
 position: absolute;
 right: 10px;
 top: 572px;
 height: 36px;
 width: 34px;
}

#weCare {
 position: absolute;
 bottom: 30px;
 width: 610px;
 font-family: "Times New Roman", Times, serif;
 font-size: 43px;
 text-align: center;
 color: #ffffff;
}

#footerSchatten {
 position: absolute;
 bottom: -1px;
 height: 10px;
 width: 610px;
 background-color: #E0DCD1;
 background-image: url(../b/footer_neu.jpg);
 background-repeat: no-repeat;
}

Beitrag melden
–
Informationen zu den Bewertungsregeln