Bildunterschrift mit Definitionsliste

Paulinche · #1 (**permalink**) 25.04.2006, 09:21

Hallo zusammen!

Ich habe mir in den letzten Tag ein wenig css angeeignet und mich mal durch folgenden Thread http://www.xhtmlforum.de/viewtopic.p...ldunterschrift
gelesen. Dort wird das Problem behandelt, Bilder mit Bildunterschriften in einen Fließtext einzufügen. Dort wird es u.A. durch das integrieren einer Definitionsliste gelöst, was ich für sinnvoll halte.

Mein Problem ist nun wie folgt:
Lasse ich die Liste ähnlich wie beihttp://www.mediaevent.de/article.php...40926103515715
rechts im Hauptcontainer floaten, zeigt der Feierfuchs das genauso an, wie ich das haben möchte, der IE machts wie immer falsch. Hier ist die Liste dann zwar rechts im Container positioniert, der im Quelltext folgende Textparagraph umfließt die Liste aber nicht und hält respektvoll Abstand.

Gehen muss es ja irgendwie, da http://www.mediaevent.de/article.php...40926103515715
und http://www.ego4u.de/de/read-on/count...budget-britain in beiden Browsen [sogar auch im IE!] fast identisch aussehen.

Hier der Link:
http://www.ktt-mtb.de/news/rundumkoeln.html
Bitte einmal im IE und im FF testen.

Es wäre schön, wenn mir da jemand helfen könnte. Hier der Code:

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" />
<meta name="author" content="Sven Grosser" />
<meta name="description" content="Die Internetseite der Mountenbike-Abteilung des Kölner Triathlon Teams in Köln." />
<meta name="keywords" content="MTB, Mountenbike, Köln, Triathlon, Team, Abteilung," />
<title>MTB Abteilung des Kölner Triathlon Teams</title>
<link rel="stylesheet" type="text/css" href="../css/css.css"/>
 
</head>

<body>
<div id="container">
<div id="header"></div>
<div id="left">

<div id="navigation">
<ul>[*]Die Startseite[*]Die Abteilung[*]Die Sportler[*]Das Training[*]Die Ergebnisse[*]Die Termine[*]Die Kondolenz[*]Der Verein[*]Die Downloads[*]Das Impressum[/list]<dl class="image left">
  	<dd>[img]../sponsoren/Energo_Banner2.3.jpg[/img]</dd>
 	<dt>Energo Sportlerernährung</dt>
	<dd>[img]../sponsoren/powerbar-logo1.2.jpg[/img]</dd>
 	<dt>Powerbar Sportscare</dt>
	<dd>[img]../sponsoren/logo_campana1.1.jpg[/img]</dd>
 	<dt>Campana Radhaus</dt>
	<dd>[img]../sponsoren/gerhard-herrera-logo1.4.jpg[/img]</dd>
 	<dt>Herrera Übersetzungen</dt>
	<dd>[img]../sponsoren/woodtec-logo1.1.jpg[/img]</dd>
 	<dt>Woodtec</dt>
</dl>
</div>
</div>

<div id="content">
<h1>17.04.06 - Rund um Köln 2006</h1>



Ostermontag wurde im Bergischen Land die 91. Auflage von Rund um Köln ausgetragen. 200 Profis und 4000 Jederfrauen und –männer quälten sich über 203, beziehungsweise 60 und 100 Kilometer. Dieser Qual wollten wir an unserem trainingsfreien Tag natürlich beiwohnen und schlugen in Bergisch Gladbach Sand an der Bergwertung unser KTT-Zelt auf.  
</p>


<dl class="textimg"
<dt>[img]../css/pics/altig.jpg[/img]</dt>
<dd>der Rudi</dd>
</dl>




...
Gegen 10:30 Uhr passierten die Jederfrauen mit ihren Männern das erste Mal die Bergwertung. Die Durchfahrt dauerte fast 45 Minuten, da sich das ...
</p>

</div>


<div id="footer">
<span>
| &copy;2006 by ktt-mtb.de | Letzte Aktualisierung 25.04.06  8:58->
| Impressum |
</span>

</body>
</html>

Hier der Link zur css:
http://www.ktt-mtb.de/css/css.css

Vielen Dank im Voraus für die Hilfe!

fricca · #2 (**permalink**) 25.04.2006, 09:48

Nimm die (überflüssige) Breitenangabe bei den p-Elementen raus; im IE haben die Elemente dann "Layout" und können mit float nicht mehr richtig umgehen.
Mehr dazu:
http://www.satzansatz.de/cssd/onhavinglayout.html

Paulinche · #3 (**permalink**) 25.04.2006, 10:43

DANKE!!!

Da bin ich echt nicht drauf gekommen! Vielen, vielen Dank!

lieblichste Grüße

Paula

prm · #4 (**permalink**) 17.06.2006, 22:21

Hab das mit den Bildunterschriften mal probiert und habe dabei das Problem dass der Text nicht automatisch umbricht, d.h. ich muss immer <br> setzen, damit die Textbreite nicht über die Bildbreite hinausläuft. Kann man das auch ohne <br> lösen, so dass sich in diesem Fall die Textbreite automatisch auf max. 300px begrenzt?

Code:

 dl.img300
{
width=300px;
margin:0;
font-size:0.8em;
line-height:1.3em;
font-weight:600;
text-align:left;
float:right;
padding-top:4px;
padding-bottom:3px;
padding-left:6px;
}

Code:

<dl class="img300">
<dt><img src="../bilder/2006jun15sobernheim1.JPG" width="300" height="217" border="0" alt="sobernheim 2006"></dt>
<dt>Ein großer Vesperkorb als Prämie: Diese<br>originelle Idee des Veranstalters setzte<br> wieder Kräfte frei für's Abendprogramm.</dt>
</dl>

Beispiel siehe hier

heiko_rs · #5 (**permalink**) 17.06.2006, 23:34

<br /> ist überflüssig, paß einfach die Breite von <dl> den Bildern entsprechend an. Du mußt <dl> eh eine Breite geben, da Du sie floatest. Übrigens gehört der Text in <dd>, was Du nicht hast (Du hast nur <dt>).

Boris · #6 (**permalink**) 17.06.2006, 23:57

Zitat:

width=300px;

Das ist im übrigen falsch, richtig müsste es (wie beim Rest auch) width: 300px; lauten.

prm · #7 (**permalink**) 18.06.2006, 08:26

Vielen Dank, mal wieder kleine Ursache und große Wirkung.
Wenn ich jedoch den Text in <dd>-Tags schreibe, hat das diese Wirkung.
Nehme ich für den Text einen <dt> Tag wird er - so wie gewünscht - linksbündig am Bild ausgerichtet.
Kann ich also trotzdem <dt> für den Text nehmen oder müsste für <dd> noch eine gesonderte Definition hinterlegt werden, damit der Text nicht "einrückt"?

Boris · #8 (**permalink**) 18.06.2006, 08:52

Dem DT musst du auch eine bestimmte Breite mit auf den Weg geben - oder du vergist dem <dl> die Breite, daran halten sich dann <dt> und <dd>.

prm · #9 (**permalink**) 18.06.2006, 11:01

Danke, der dl hat ja jetzt die Breite 300.
Der dt hält sich dran, der dd nicht.
Ich nehm dann eben den dt.

dd ist eine Definition innerhalb der Definitionsliste und deshalb wohl generell eingerückt während der dt (definition term) so ne Art Überschrift in der Liste ist und deshalb linksbündig steht.
"Die Abfolge von dt- und dd-Elementen innerhalb einer dl-Liste ist nicht streng geregelt. Es dürfen auch mehrere dt- oder dd-Elemente hintereinander folgen."
Quelle: Münz/Nefzger, HTML Handbuch (Ausgabe 2005) Seite 133

Boris · #10 (**permalink**) 18.06.2006, 11:05

Zitat:

dd ist eine Definition innerhalb der Definitionsliste und deshalb wohl generell eingerückt

Ja, das stimmt ja auch. Und wo ist das Problem? Setzt doch einfach margin und padding für das DD auf 0 - dann sind die vordefinierten Abstände weg.

Es empfiehlt sich bei neuen CSS Projekten immer erstmal alle Standardabstände aller Elemente auf 0 zu setzen -das geht ganz einfach so:

*
{
margin: 0;
padding: 0;
border: 0 none;
}

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
Abstand zwischen Bild und Bildunterschrift	SuZ	CSS	2	21.10.2009 23:21
Mehrzeilige Bildunterschrift an Bildbreite ausrichten	sysscore	CSS	1	23.09.2009 21:03
Bilder-Gallery ohne JavaScript	ulle	Knowledge Base	71	02.01.2008 15:42
bild und bildunterschrift zentriert auf seite	o_anonym	CSS	7	10.08.2006 13:59
artikelliste - definitionsliste oder was macht sinn	andip	(X)HTML	22	13.06.2006 11:51