möchte zwischen 2 Bildern einen Textblock einfügen

bewusstwerdung · 13.05.2008, 12:45

Hallo Forum,

wie kann ich folgendes (für mich) Problem lösen?

Möchte in ein DIV 1Bild links setzten daneben einen Textblock und rechts daneben noch 1Bild.

Den text rechts neben Bild1 bekomme ich noch hin mit:

HTML-Code:

#div1 {
float:left;
padding-right:20px;
text-align:center;
}

Aber das Bild2 nochmals daneben bekomme ich nicht mehr hin

Anbei ein Screnshoot...

Greets Otto

zulujaner · 13.05.2008, 15:25

hallo,

probier das mal so.

nimm einfach in deinen DIV Container noch drei weitere DIV mit rein.

Bild - Text - Bild

Idee und Beschreibung stammt von hier: http://www.css4you.de/wslayout1/ex0010.html

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title><style type="text/css">
<!--
* {
margin:0;
padding:0;
}

#inhalt {
position:absolute;
height:300px;
width:600px;
margin-top:-150px;
margin-left:-300px;
top: 50%;
left: 50%;
text-align: center;
overflow: auto;
background-color:green;
}


#left,#right {
width:12%;
line-height:18px;
border:1px solid #000000;
background-color:#efefef;
}
#left {
float:left;
}
#right {
float:right;
}

#text {
width:70%;
float:left;
margin-left:3%;
border:1px solid #000000;
background-color:#efefef;
}

-->
</style>
</head>
<body>
<div id="inhalt">

<div id="left">linkes bild hier</div>
<div id="text">Unmengen von Text....</div>
<div id="right">rechtes Bild hier</div>

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

Wenn du das mehrmals auf einer Seite einsetzen möchtest, geht ID nicht mehr. Dann ersetze bei den inneren DIV ID durch Class und ändere im CSS Code die Raute gegen nen Punkt.

bewusstwerdung · 13.05.2008, 18:58

Hallo zulujaner!

Egal ob die Idee nun von dir stammt oder nicht, du hast
die Korrekte Antwort inkl. Beispiel geliefert/gebracht und...

..... die funkt

Siehe Anhang!

Danke nochmals

Greets Otto

zulujaner · 13.05.2008, 21:34

Das hast du schön gesagt...

Na dann mal viel Spass mit der Seite und mit dem Basteln...

Grüsse

webcreate · 14.05.2008, 10:36

Kleine Anregung um die DIV-Suppe zu vermeiden:

HTML-Code:

<style type="text/css">
#container{
	background: #fcedea;
	padding: 10px;
	width: 900px;
	min-height:210px;
	height:auto !important;
	height:210px;
}

#container img{
	float: left;
}

#container div{
	float: left;
	width: 250px;
	padding: 0 25px;
}

</style>
</head>

<body>
<div id="container">
	<img src="b1.jpg" alt="bild1" />
	<div>
		<p>Das ist der Text</p>
		<ul>
			<li>top1</li>
			<li>top2</li>
			<li>top3</li>
		</ul>
	</div>
	<img src="b2.jpg" alt="bild2" />
</div>
<p>Und hier geht die Page normal weiter</p>
</body>