kostenloser Webspace werbefrei: lima-city

3- spaltiges Layout mit float div

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   david-tiede

   david-tiede hat kostenlosen Webspace.

   7:44, 23.10.2011

   Hallo,
   
   ich habe ein Problem mit meinem 3- spaltigen Layout mit float div.
   

   <div style="padding: 0px; margin: 0px">
   	<div style="background-image: url('http://www.david-tiede.lima-city.de/test/ol.png'); height: 60px; width: 60px; margin: 0px; float: left;">
   	</div>
   	<div style="background-image: url('http://www.david-tiede.lima-city.de/test/or.png'); height: 60px; width: 60px; margin: 0px; float: right;">
   	</div>
   	<div style="background-image: url('http://www.david-tiede.lima-city.de/test/om.png'); height: 60px; padding: 0px; margin: 0px 60px 0px 60px">
   	</div>
   	<div  id="Container" >
   		<div id="1" style="background-image: url('http://www.david-tiede.lima-city.de/test/ml.png'); width: 60px; float: left; margin: 0px">
   		</div>
   		<div id="2" style="background-image: url('http://www.david-tiede.lima-city.de/test/mr.png'); width: 60px; float: right; margin: 0px">
   		</div>
   		<div style="padding: 0px; width: 500px; margin: 0px 60px 0px 60px">
   			Text<br />
   		</div>
   		<div style="clear: both">
   		</div>
   	</div>
   	<div style="background-image: url('http://www.david-tiede.lima-city.de/test/ul.png'); height: 60px; width: 60px; margin: 0px; float: left;">
   	</div>
   	<div style="background-image: url('http://www.david-tiede.lima-city.de/test/ur.png'); height: 60px; width: 60px; margin: 0px; float: right;">
   	</div>
   	<div style="background-image: url('http://www.david-tiede.lima-city.de/test/um.png'); height: 60px; padding: 0px; margin: 0px 60px 0px 60px">
   	</div>
   </div>

   
   Ich möchte, dass die divs 1 und 2 das Hintergrundbild bis zum Ende des Containers wiederholen.
   Wie ist das möglich?
   
   Gruß David

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. felicius12

   felicius12 hat kostenlosen Webspace.

   8:38, 23.10.2011

   Das kannst du mit

   background-repeat: repeat;

   machen. Siehe dazu http://de.selfhtml.org/css/eigenschaften/hintergrund.htm.
   

4. fatfreddy

   

   fatfreddy hat kostenlosen Webspace.

   14:12, 23.10.2011

   david-tiede schrieb:
   Ich möchte, dass die divs 1 und 2 das Hintergrundbild bis zum Ende des Containers wiederholen.
   

   
   
   Da mußt Du mit einem zusätzlichen Container, der die beiden Divs umschließt, arbeiten. *Lesestoff mit Beispiel*
   
5. Autor dieses Themas

   david-tiede

   david-tiede hat kostenlosen Webspace.

   9:49, 24.10.2011

   felicius12 schrieb:
   Das kannst du mit

   background-repeat: repeat;

   machen. Siehe dazu http://de.selfhtml.org/css/eigenschaften/hintergrund.htm.
   

   Standardmäßig wird der Background wiederholt. Sonst würde die obere Leiste auch nicht durchgehend den Background haben.
   
   

   fatfreddy schrieb:
   Da mußt Du mit einem zusätzlichen Container, der die beiden Divs umschließt, arbeiten. *Lesestoff mit Beispiel*
   

   Danke, ich werde das gleich mal ausprobieren.
   
   Ich habe es jetzt auf diese Weise gemacht:
   

   <div style="padding: 0px; margin: 0px">
   	<div style="background-image: url('http://www.david-tiede.lima-city.de/test/ol.png'); height: 60px; width: 60px; margin: 0px; padding: 0px; float: left;">
   	</div>
   	<div style="background-image: url('http://www.david-tiede.lima-city.de/test/or.png'); height: 60px; width: 60px; margin: 0px; padding: 0px; float: right;">
   	</div>
   	<div style="background-image: url('http://www.david-tiede.lima-city.de/test/om.png'); height: 60px; padding: 0px; margin: 0px 60px 0px 60px; padding: 0px; ">
   	</div>
   	<div style="background: url('http://www.david-tiede.lima-city.de/test/ml.png') repeat-y; margin: 0px; padding:0px;">
   		<div style="background: url('http://www.david-tiede.lima-city.de/test/mr.png') repeat-y right; margin: 0px; padding: 0px; ">
   			<div style="background: #FF9354; margin:0px 60px"></div>
   		</div>
   	</div>
   	<div style="background-image: url('http://www.david-tiede.lima-city.de/test/ul.png'); height: 60px; width: 60px; margin: 0px; padding: 0px; float: left;">
   	</div>
   	<div style="background-image: url('http://www.david-tiede.lima-city.de/test/ur.png'); height: 60px; width: 60px; margin: 0px; padding: 0px; float: right;">
   	</div>
   	<div style="background-image: url('http://www.david-tiede.lima-city.de/test/um.png'); height: 60px; padding: 0px; margin: 0px 60px 0px 60px; padding: 0px; ">
   	</div>
   </div>

   
   
   Beitrag zuletzt geändert: 24.10.2011 10:20:28 von david-tiede

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?