bild in text positionieren

MoJo · #1 (**permalink**) 27.05.2006, 16:28

Ich habe einen langen text, der in einem div-tag geschrieben ist. ich möchte jetzt ein kleines bild an den linken inneren rand des div-tags setzen. das bild soll aber nicht ganz oben im div-tag positioniert werden sondern ungefähr in der mitte. der text soll dann das bild oben, rechts und unten umfließen.

wo positioniere ich das bild (ich kanns ja nicht einfach in den text zwischen 2 sätzen positionieren oder?), sodass es in der mitte des textes erscheint? wie muss die css-formatierung dafür heißen?

fricca · #2 (**permalink**) 27.05.2006, 20:49

Schau mal da:
http://www.xhtmlforum.de/viewtopic.php?t=5903
Ganz ähnliche Fragestellung.

Zitat:

ich kanns ja nicht einfach in den text zwischen 2 sätzen positionieren oder?

Doch doch. Das ist IMHO die beste Lösung.

MoJo · #3 (**permalink**) 27.05.2006, 23:36

erst mal danke für den tipp

Zitat:

http://www.xhtmlforum.de/viewtopic.php?t=5903

...sehr ermutigend...

Zitat:

ich kanns ja nicht einfach in den text zwischen 2 sätzen positionieren oder?

Doch doch. Das ist IMHO die beste Lösung.

und wie bekomme ich es dann hin, dass zwischen den 2 sätzen nicht ein großes leeres loch entsteht (sieht ungefähr wie ein absatz aus obwohl nur der img-souce angegeben ist)

[oder ist das auch unlösbar

]

danke für antworten

DerFremde

fricca · #4 (**permalink**) 28.05.2006, 00:01

Zitat:

Zitat von DerFremde

und wie bekomme ich es dann hin, dass zwischen den 2 sätzen nicht ein großes leeres loch entsteht (sieht ungefähr wie ein absatz aus obwohl nur der img-souce angegeben ist)

Wie hast du's denn versucht? Code?
Vermutlich suchst du die float-Eigenschaft.

Zitat:

oder ist das auch unlösbar

Wieso "auch"?
In dem verlinkten Thread steht eine (wenig elegante) Lösung.

MoJo · #5 (**permalink**) 29.05.2006, 18:52

mein code sieht so aus:

HTML-Code:

...<div class="main">
...ea commodo consequat.
  <dl class="image">
  <dd><img src="Bilder/Grabkreuze 001.jpg" alt="Testbild" /></dd>
  <dt>Dies ist das Testbild</dt>
</dl>Duis autem vel eum iriure dolor... </div>...

css:

Code:

.main {
	background-color: #E9E1DA;
	width: 575px;
	float: left;
	min-height: 350px;
}
dl.image {  
	padding: 0px;
	margin: 0px;
	text-indent: 0px;
	list-style-type: none;
	float: right;
	text-align: right;
}

dl.image dt {  
	font-size: 11px;
	color: #999999;
	padding: 0px;
	margin: 0px;
}

ich hab für die bildunterschrift eine dl verwendet (wie im wiki beschrieben)
muss ich bei dt dann clearen oder nicht?

[andere Frage: wie kann ich für dl die breite festlegen? wenn ich einfach width angebe dann rutscht mir firefox das bild, also den dd ca. 20px nach rechts???]

fricca · #6 (**permalink**) 29.05.2006, 19:20

Zitat:

Zitat von DerFremde

ich hab für die bildunterschrift eine dl verwendet

Aha, jetzt gibt's also auch noch eine Bildunterschrift.
Ich würde das Bild ins dt setzen, die Bildunterschrift ins dd (der Text beschreibt das Bild, oder?)
Ein Artikel dazu: Die vergessene Bildunterschrift

Zitat:

muss ich bei dt dann clearen oder nicht?

Bei deinen Codeschnipseln hätte das keinerlei Auswirkung.

Zitat:

wie kann ich für dl die breite festlegen? wenn ich einfach width angebe dann rutscht mir firefox das bild, also den dd ca. 20px nach rechts???]

Hast du die Default-Randabstände auf Null gesetzt?

Poste bitte einen *vollständigen* Code, der dein Problem wirklich nachvollziehbar macht (siehe auch hier und hier)

MoJo · #7 (**permalink**) 29.05.2006, 19:39

stimmt

Zitat:

Poste bitte einen *vollständigen* Code

stimmt, sorry

HTML-Code:

<body  class="body">
<div class="content">
<div class="space"></div>
<div class="header"></div>
<div class="breadcrumb">Home &raquo; 2.Ebene &raquo; 3.Ebene</div>
<div class="navcontainer">
	<ul class="navigation">
		<li class="first"><a href="">Portr&auml;t</a></li>
		<li class="second"><a href="">Historie</a></li>
		...
		<li class="first"><a href="">Partner</a></li>
		<li class="first"><a href="">Kontakt</a></li>
		<li class="second"><a href="">Anreiseplan</a></li>
	</ul>
	</div>
<div class="main">
  <p>Lorem Ipsum</p>
 
Lorem ipsum dolor...consequat.
  <dl class="image">
  <dd><img src="Bilder/Grabkreuze 001.jpg" alt="Bild von Christian" /></dd>
  <dt>Dies ist das Testbild, das sp&auml;ter einmal hoffentlich angezeigt wird wenn es gut geht</dt>
</dl>Duis autem vel...volutpat.
</div>
  
  <div class="footer"></div>
</div>
</body>
</html>

css:

Code:

.body {
	text-align: center;
}

.content {
	font: Verdana, Arial, Helvetica, sans-serif, 12px, normal, normal;
	width: 800px;
	height: auto;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	background-color: #893E27;
	border: #FFFFFF 2px outset;
	display: table;
	text-align: left;
}

.space {
	background-color:	#68533E;
	height: 150px;
	width: 200px;
	float: left;
}

.header {
	height: 150px;
	width: 575px;
	float: left;
}

.breadcrumb {
	font: Verdana, Arial, Helvetica, sans-serif, 12px;
	background-color: #B59C84;
	float: left;
	width: 775px;
	height: 20px;
	text-indent: 200px;	
}

.navcontainer {
	width: 200px;
	height: 100%;
	float: left;
	background-color: #6B5239;
}

.navigation {
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}

.navigation .first{
	padding: 0px;
	margin: 0px;
}

.navigation .second{
	padding: 0px;
	margin: 0px;
	text-indent: 20px;
	background-color: #816345;
}

.navigation a:link, .navigation a:active, .navigation a:visited {
	color: #FFFFFF;
	text-decoration: none;
	background-color: inherit;
	font: bold 14px Verdana, Arial, Helvetica, sans-serif;
	display: block;
}

.navigation a:hover {
	background-color: #A9845F;
}

.main {
	background-color: #E9E1DA;
	width: 575px;
	float: left;
	min-height: 350px;
}


.footer {
	background-color: #9A7056;
	width: 800px;
	height: 20px;
	clear: both;
}

dl.image {  
	padding: 0px;
	margin: 0px;
	text-indent: 0px;
	list-style-type: none;
	float: right;
	text-align: right;
}

dl.image dt {  
	font-size: 11px;
	color: #999999;
	padding: 0px;
	margin: 0px;
}

fricca · #8 (**permalink**) 29.05.2006, 19:44

Dieser Code ist noch immer nicht vollständig (Doctype!?). Lies die beiden Links oben nochmal aufmerksam.
Vollständig heißt *nicht*, dass du für das Problem irrelevante Elemente dazusetzen sollst.

Inwiefern haben dich die Hinweise aus meinem Vorposting nicht weitergebracht?

MoJo · #9 (**permalink**) 29.05.2006, 20:57

Zitat:

Inwiefern haben dich die Hinweise aus meinem Vorposting nicht weitergebracht?

das problem mit der firefox-verschiebung hat sich jetzt gelöst - Danke!

meine frage war noch, ob es nötig ist nach der dl zu clearen bzw. bei welchem element ich das am besten mache.

hier nochmal der code (ich probiers nochmal, vll isses diesmal besser...)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Schmiede</title>

<style type="text/css">
.content {
	display: table;
}
.navcontainer {
	height: 100%;
	float: left;
}
.main {
	background-color: #E9E1DA;
	width: 575px;
	float: left;
	min-height: 350px;
}
.footer {
	background-color: #9A7056;
	width: 800px;
	height: 20px;
	clear: both;
}
dl.image {  
	padding: 0px;
	margin: 0px;
	text-indent: 0px;
	list-style-type: none;
	float: right;
	text-align: right;
	width: 100px;
}
dl.image dd {  
	font-size: 11px;
	color: #999999;
	padding: 0px;
	margin: 0px;
} 
</style>	

</head>

<body  class="body">
<div class="content">
<div class="breadcrumb"></div>
<div class="navcontainer"></div>
<div class="main">
Lorem ipsum dolor sit.
  <dl class="image">
  <dt><img src="Bilder/Grabkreuze 001.jpg" alt="Bild von Christian" /></dd>
  <dd>Dies ist das Testbild</dt>
</dl>
</div>
<div class="footer"></div>
</div>
</body>
</html>

...ganz perfekt isses nich gekürzt, aber ich weiß ja auch nicht genau wo die Fehlerquelle liegt...

fricca · #10 (**permalink**) 29.05.2006, 21:11

Zitat:

Zitat von DerFremde

meine frage war noch, ob es nötig ist nach der dl zu clearen bzw. bei welchem element ich das am besten mache.

Es ist nicht unbedingt nötig. Das hängt von deinen Inhalten ab und davon, was du erreichen willst.
Ansonsten setz das clear an eine Stelle, die immer unterhalb des Bildes sein soll.

Zitat:

aber ich weiß ja auch nicht genau wo die Fehlerquelle liegt...

Dein Code enthält Fehler. Validieren hilft.
Ich weiß nicht, von welchem "Fehler" du sonst noch sprichst.
Schau dir das verlinkte Beispiel genau an, das entspricht doch dem, was du erreichen willst.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Hilfe!!! mein Homepagelayout funktioniert nicht!	maxx	CSS	5	14.10.2012 07:21
gibt es eine andere Lösung ohne Tabelle?	online	CSS	16	24.04.2009 08:41
Zeilenabstand bei font-Angabe wieder weg	nick	CSS	7	16.02.2008 14:39
Floats verschwinden im nichts, Fließer überdecken Floats.	nick	CSS	5	09.02.2008 14:34
Bild im Container mittig positionieren...	18inch	CSS	5	09.07.2005 14:48