[Typo3-german] HTML Template / CSS Vorlage

[Joachim Bolz]

Hallo zusammen,

ich habe eine Frage zum Thema HTML Template und CSS File:

Ich habe für meine erste Typo3 Site ein HTML Template erstellt, das wiederum 
auf ein entsprechendes CSS File verweist.
Im HTML Template definiere ich lediglich folgende "DIV-Container":

<div id="outer-wrapper">
    <div id="content-wrapper">
                <div id="rootline"> </div>
                <div id="content"> </div>
                <div id="copyright"> </div>
    </div>
    <div id="header">
                <div id="logo"> </div>
                <div id="topmenu"> </div>
    </div>
    <div id="header2">
                <div id="header-image"> </div>
                <div id="header-text"> </div>
    </div>
    <div id="left">
               <div id="leftmenu"> </div>
               <div id="search"> </div>
    </div>
</div>

Nun möchte ich, dass die Hintergrundfarbe des Containers "left", der mein 
Menü (Senkrecht am linken Bildrand) enthält, immer jeweils so tief angezeigt 
wird, wie ich rechts daneben entsprechenden Content habe.
Da der Container "left" ein Kind-Container des div-Elementes "outer-wrapper" 
ist, war ich der Meinung, dass ich für "left" einfach nur "hight: 100%;" 
angeben muss, damit mein "left" Container entsprechend "mitwächst". (Da der 
Content Bereich ebenfalls ein Kind-Element von "content-wrapper ist" und das 
Eltern-Element "content-wrapper" daher immer die entsprechende Höhe haben 
müsste, auf die sich dann "left" beziehen kann.)

Doch leider funktionier das bei mir nicht. Der Bereich "left" ist immer nur 
eine Bildschirmhöhe hoch, egal ob der Content grösser, kleiner oder gleich 
der Bildschirmhöhe ist.

Hat jmd einen guten Tip für mich?

Im Anhang habe ich auch nochmals die komplette css Datei angehängt....


Vielen Dank und viele Grüsse,
Joachim


@import url (content.css);

body, html {
         border: 0;
         margin: 0;
         width: 100%;
         height: 100%;
         background: #ffffff;
         position: relative;
         text-align: center;
         font: normal 100.01% Arial, Helvetica, Verdana; sans-serif;
}

#outer-wrapper {
 text-align: left;
 margin: 0 auto 0 auto;
 width: 845px;
 position: relative;
 height: 100%;
}

#header {
 position: absolute;
                z-index: 5;
 top: 0;
 left: 0;
 width: 845px;
 height: 85px;
                background: #ffffff;
}

#logo {
 position: absolute;
 right: 5px;
 top: 21px;
 width: 238px;
 height: 45px;
}

#topmenu {
 position: absolute;
 left: 22px;
 bottom: 10px;
}

#header2 {
 position: absolute;
                z-index: 5;
 left: 0;
 top: 85px;
 width: 845px;
 height: 180px;
 background: #4d669f;
}


#header-image img {
 border-right: 1px solid white;
}


#header-text {
 position: absolute;
 bottom: 20px;
 right: 35px;
 font: normal 20px Verdana, Arial, Helvetica, sans-serif;
 color: #ffffff;
}


#content-wrapper {
   position: absolute;
   top: 295px;
   left: 280px;
   width: 527px;
}

#content {
 position: relative;
                top: 0px;
 margin: 20px 0 0 0;
}

#copyright {
   padding: 20px 0 0 0;
   clear: both;
   font: normal 11px Arial,Helvetica, Verdana, sans-serif;
   color: #999999;
}

#left {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        background: url(../img/feggruen.gif) repeat;
        width: 240px;
        height: 100%;
}

#leftmenu {
   margin: 290px 0 0 20px;
}

#topmenu ul {
   margin: 0;
   padding: 0;
}

#topmenu li {
   float: left;
   display: block;
   color: #000000;
   padding: 0 10px 0 0;
   font: normal 14px Verdana,Arial,Helvetica,sans-serif;
}

#topmenu li a {
   text-decoration: none;
   color: #000000;
}

#topmenu li a:hover {
   color: blue;
}


#topmenu li.ACT,
#topmenu li.CUR {
   font-size: 18px;
   position: relative;
   top: -4px;
}


#leftmenu ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
}

#leftmenu li {
   text-decoration: none;
   font: normal 13px Arial, Helvetica, Verdana, sans-serif;
   padding: 5px 0 5px 30px;
}

#leftmenu li a {
   text-decoration: none;
}

#leftmenu li a:hover {
   color: red;
}

#leftmenu li a {
   color: #000000;
}


#leftmenu li.ACT,
#leftmenu li.CUR {
   background: url(../img/leftmenu-bg.gif) no-repeat;
   font-weight: bold;
   color: #000000;
}