zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden bild in text positionieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.05.2006, 17:28
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.05.2006
Beiträge: 46
MoJo befindet sich auf einem aufstrebenden Ast
Standard bild in text positionieren

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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.05.2006, 21:49
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.05.2006, 00:36
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.05.2006
Beiträge: 46
MoJo befindet sich auf einem aufstrebenden Ast
Standard

erst mal danke für den tipp

...sehr ermutigend...


Zitat:
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
Mit Zitat antworten
  #4 (permalink)  
Alt 28.05.2006, 01:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 29.05.2006, 19:52
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.05.2006
Beiträge: 46
MoJo befindet sich auf einem aufstrebenden Ast
Standard

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???]
Mit Zitat antworten
  #6 (permalink)  
Alt 29.05.2006, 20:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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)
Mit Zitat antworten
  #7 (permalink)  
Alt 29.05.2006, 20:39
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.05.2006
Beiträge: 46
MoJo befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Mit Zitat antworten
  #8 (permalink)  
Alt 29.05.2006, 20:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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?
Mit Zitat antworten
  #9 (permalink)  
Alt 29.05.2006, 21:57
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.05.2006
Beiträge: 46
MoJo befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 29.05.2006, 22:11
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wachsende Container Andy CD CSS 13 10.02.2010 14:08
Float und Clear Earl of Green CSS 3 22.02.2009 19:48
Float-Bilder im Fließtext an Absatz binden netAction CSS 17 19.02.2008 16:18
Bild im Container mittig positionieren... 18inch CSS 5 09.07.2005 15:48


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:58 Uhr.