|
|||
Bildunterschrift mit Definitionsliste
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> | ©2006 by ktt-mtb.de | Letzte Aktualisierung 25.04.06 8:58-> | Impressum | </span> </body> </html> http://www.ktt-mtb.de/css/css.css Vielen Dank im Voraus für die Hilfe! |
Sponsored Links |
|
|||
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 |
Sponsored Links |
|
|||
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> |
|
||||
Zitat:
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
|
|||
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"? |
|
||||
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>.
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
|
|||
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 |
Sponsored Links |
|
||||
Zitat:
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; }
__________________
“My software never has bugs. It just develops random features ...” » DevShack - die Website des freien Webentwicklers Boris Bojic |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |