Text so groß wie Grafik
Olli
- css
Hallo,
ich wollte einen Text-Block erstellen, der links eine Grafik enthält. Da ich nicht weiß, wie groß die Grafik links ist, soll sich die Box entsprechend mit dem Bild vergrößern. Da ich das nicht gut beschreiben kann hier mal ein Beispiel, mit dem ich gerade experimentiere:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
body{
background-color: #000;
color: #fff;
}
#kommentar{
background-color: #282828;
border: 1px solid #343434;
padding: 5px;
}
#kommentar #bild{
border: 1px solid #343434;
float: left;
margin-right: 10px;
padding: 2px;
}
#kommentar #text{
padding-top: 15px;
}
</style>
</head>
<body>
<div id="kommentar">
<div id="bild">
<img src="http://sportguidecuracao.com/images/examplePic.jpg" alt="" />
</div>
<div id="text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</body>
</html>
Wie bekommen ich es hin, dass die Box mindestens so groß wird wie die Grafik?
Hi,
ich wollte einen Text-Block erstellen, der links eine Grafik enthält. Da ich nicht weiß, wie groß die Grafik links ist, soll sich die Box entsprechend mit dem Bild vergrößern.
http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#float-einschliessen
MfG ChrisB
Ay cool. Und ich suche hier schon geschlagene drei Stunden. Dabei ist die Lösung doch so einfach... Danke schön, tut jetzt.
Hi,
Hallo,
ich wollte einen Text-Block erstellen, der links eine Grafik enthält. Da ich nicht weiß, wie groß die Grafik links ist, soll sich die Box entsprechend mit dem Bild vergrößern. Da ich das nicht gut beschreiben kann hier mal ein Beispiel, mit dem ich gerade experimentiere:
<div id="kommentar">
<div id="bild">
<img src="http://sportguidecuracao.com/images/examplePic.jpg" alt="" />
</div>
Wozu das div um das Bild?
<div id="text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
Sieht nach Textabsatz aus. Warum also kein p?
Wenn's nur ein Absatz ist: wozu das äußere div?
<p><img>bla bla</p>
reicht doch auch. Das img links floaten, und per p::after mit clear dafür sorgen, daß das p das img umschließt.
cu,
Andreas