|
|||
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? |
Sponsored Links |
|
|||
Schau mal da:
http://www.xhtmlforum.de/viewtopic.php?t=5903 Ganz ähnliche Fragestellung. Zitat:
|
Sponsored Links |
|
|||
erst mal danke für den tipp
...sehr ermutigend... Zitat:
[oder ist das auch unlösbar ] danke für antworten DerFremde |
|
|||
Zitat:
Vermutlich suchst du die float-Eigenschaft. Zitat:
In dem verlinkten Thread steht eine (wenig elegante) Lösung. |
|
|||
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>... 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; } 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???] |
|
|||
Zitat:
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:
Zitat:
Poste bitte einen *vollständigen* Code, der dein Problem wirklich nachvollziehbar macht (siehe auch hier und hier) |
|
|||
stimmt
Zitat:
HTML-Code:
<body class="body"> <div class="content"> <div class="space"></div> <div class="header"></div> <div class="breadcrumb">Home » 2.Ebene » 3.Ebene</div> <div class="navcontainer"> <ul class="navigation"> <li class="first"><a href="">Porträ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äter einmal hoffentlich angezeigt wird wenn es gut geht</dt> </dl>Duis autem vel...volutpat. </div> <div class="footer"></div> </div> </body> </html> 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; } |
|
|||
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? |
|
|||
Zitat:
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> |
Sponsored Links |
|
|||
Zitat:
Ansonsten setz das clear an eine Stelle, die immer unterhalb des Bildes sein soll. Zitat:
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. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |