Haruzept: 2 div Elemente zusammen ....

Hallo,

ich bin gerade dabei mir eine Homepage zu bauen.

Meine Frage ist nun;

Ich habe links ein div Element, was ein Hintergrund besitzt. Dann habe ich noch ein div Element, wo ein Text drin steht. Ich möchte nun das sich das div mit dem Bild so lange wiederholt, wie der Text lang ist.

Wäre schön, wenn mir hier jemand helfen könnte.

Mit freundlichen Grüßen

Haruzept

  1. Hallo,

    Ich habe links ein div Element, was ein Hintergrund besitzt. Dann habe ich noch ein div Element, wo ein Text drin steht. Ich möchte nun das sich das div mit dem Bild so lange wiederholt, wie der Text lang ist.

    siehe Grundlagen für Spaltenlayout mit CSS!

    Gruß Gunther

    1. Hallo,

      Ich habe links ein div Element, was ein Hintergrund besitzt. Dann habe ich noch ein div Element, wo ein Text drin steht. Ich möchte nun das sich das div mit dem Bild so lange wiederholt, wie der Text lang ist.

      siehe Grundlagen für Spaltenlayout mit CSS!

      Gruß Gunther

      Danke für den Link, bei mir geht es aber noch nicht. Die linke Spalte bleibt in der größe. Hier der Code:

      .thrColLiqHdr #sidebar1 {  
      	background-image: url(../Bilder/images_29.png);  
          float:left;  
      	width: 26px;  
      	height: 100%;  
      	min-height: 382px;  
      }  
      .thrColLiqHdr #new {  
      	background-image:url(../Bilder/images_32.png);  
      	float:left;  
      	height: auto;  
      	min-height: 87px;  
      	width:237px;  
      }  
      /* Tipps für mainContent:  
      1\. Der Abstand zwischen mainContent und den Randleisten entsteht durch den linken und rechten Rand des mainContent-div.  
      2\. Zur Vermeidung von Float-Drops bei einer unterstützten Mindestauflösung von 800 x 600 sollten Elemente im mainContent-div eine Größe von maximal 300 Pixel aufweisen (dies gilt auch für Bilder).  
      3\. Im unten stehenden bedingten Kommentar für Internet Explorer wird die Zoom-Eigenschaft verwendet, um mainContent die Eigenschaft hasLayout zuzuweisen. Dadurch werden verschiedene IE-spezifische Fehler verhindert.  
      */  
      .thrColLiqHdr #mainContent {  
        
      }
      

      Der HTML Code

       <div id="sidebar1">  
        
      <!-- end #sidebar1 -->  
        </div>  
        <div id="new">  
        <img src="Bilder/images_32_a.png" />  
        a<br />  
          a<br />  
            a<br />  
              a<br />  
                a<br />  
                  a<br />  
                    a<br />  
                      a<br />  
                      <img src="Bilder/images_32_b.png" />  
      <!-- Ende von #new -->  
        </div>  
       <div id="mainContent">  
         <div id="mainContent2">  
           <div id="mainContent3">  
             <div id="mainContent4">  
               <h1> Hauptinhalt </h1>  
               Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et  
               <p>ipsum et sapien vehicula nonummy. Suspendisse potenti. </p>  
               <h2>H2-Überschrift </h2>  
               <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.<br />  
               Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>  
               <!-- end #mainContent -->  
             </div>  
           </div>  
         </div>  
       </div>