|
|||
text neben bild fixieren
hallöchen!
ich habe leider das problem, dass ich text neben einem bild ein bild (float:left) habe und dieser, wenn er im brower entweder zu groß angezeigt wird, oder ein wort länger ist, als der umgebende rahmen es zulässt, unter das bild rutscht. das würde ich gerne verhindern. außerdem schaffe ich es nicht ordentlich, den preis zu diesem artikel, dessen bild und artikelbezeichnung ich hier beschrieben habe, rechts unten in dem umgebenden rahmen anzeigen zu lassen, ohne dass ein unnötiger abstand zwischen der unteren kante des bilds und der unteren grenze des rahmens entsteht. der css code um den es sich hierbei handelt ist folgender: Code:
.container { width: 300px; float: left; border-width: 1px; border-style: solid; padding: 2px; margin: 5px; } * html .container { width: 316px; } .price { float: right; position: relative; top: -15px; } .producttype { height: 100px; width: 200px; float: left; } .product_image { float: left; top: -30px; } .price p { font-size: 12px; } p { font-family: Arial; font-size: 14px; } img { width: 100px; height: 100px; border-width: 0px; } Code:
<div class="container"> <div class="product_image"> <a href="spreadshirt_detail.htm?article_id=3742576"><img alt="Details anzeigen" src="http://www.spreadshirt.net/image.php?type=image&partner_id=626420&product_id=4183244&img_id=1&size=medium"></a> </div> <div class="producttype"> <p>Retro-Shirt "Bittesch</p> </div> <div class="price"> <p>22.90 EUR</p> </div> </div> <div class="container"> <div class="product_image"> <a href="spreadshirt_detail.htm?article_id=3879620"><img alt="Details anzeigen" src="http://www.spreadshirt.net/image.php?type=image&partner_id=626420&product_id=4341600&img_id=1&size=medium"></a> </div> <div class="producttype"> <p>Hanes Longsleeve "Menschheitszukunftsmaximierer" (schwarz)</p> </div> <div class="price"> <p>18.90 EUR</p> </div> </div> <div class="container"> <div class="product_image"> <a href="spreadshirt_detail.htm?article_id=3879624"><img alt="Details anzeigen" src="http://www.spreadshirt.net/image.php?type=image&partner_id=626420&product_id=4341606&img_id=1&size=medium"></a> </div> <div class="producttype"> <p>Continental Girlie Sweat "Menschheitszukunftsmaximierer" (braun)</p> </div> <div class="price"> <p>25.90 EUR</p> </div> </div> <div class="container"> <div class="product_image"> <a href="spreadshirt_detail.htm?article_id=3742761"><img alt="Details anzeigen" src="http://www.spreadshirt.net/image.php?type=image&partner_id=626420&product_id=4183453&img_id=1&size=medium"></a> </div> <div class="producttype"> <p>Continental Frauen Longsleeve "Kann ich sonst noch was tun?" (schwarz)</p> </div> <div class="price"> <p>26.90 EUR</p> </div> </div> <div class="container"> <div class="product_image"> <a href="spreadshirt_detail.htm?article_id=3809780"><img alt="Details anzeigen" src="http://www.spreadshirt.net/image.php?type=image&partner_id=626420&product_id=4260667&img_id=1&size=medium"></a> </div> <div class="producttype"> <p>Promodoro Raglan Langarm "Partner" (schwarz/olivgr</p> </div> <div class="price"> <p>22.90 EUR</p> </div> </div> <div class="container"> <div class="product_image"> <a href="spreadshirt_detail.htm?article_id=3816174"><img alt="Details anzeigen" src="http://www.spreadshirt.net/image.php?type=image&partner_id=626420&product_id=4268013&img_id=1&size=medium"></a> </div> <div class="producttype"> <p>Hi5 Girlie Baseball "Partnerin" (blau/wei</p> </div> <div class="price"> <p>23.90 EUR</p> </div> </div> wie kann ich verhindern, dass der text (in jedem fall) unter das bild rutscht? am liebsten wäre mir, dass bei dem zu langen wort ein zeilenumbruch mitten im wort erzwungen wird. und wie kriege ich den überflüssigen abstand unter dem bild/preis weg? ich schreibe hier übrigens aus sicht des internet explorer, da ich hier auf der arbeit nur diesen zur verfügung habe. vielen dank im voraus! Geändert von renet (06.12.2007 um 10:56 Uhr) |
Sponsored Links |
|
||||
Ja, Ich weiss, es ist Winter und die Divitis grassiert wieder...
Eine reich garnierte Div-Suppe hast du da gekocht! Zitat:
Zitat:
Zitat:
Zur Divitis: Verwende semantisch richtige Elemente! Beispiel: Code:
<div class="container"> <p class="productimage"> <a href="#"><img alt="Details anzeigen" src="image.php"></a> </p> <p class="producttype">Retro-Shirt "Bittesch</p> <p class="price">22.90 EUR</p> </div> Code:
* { margin: 0; padding: 0;} .container { border: 1px solid #000; margin: 5px; padding: 2px; width: 300px; float: left; } * html .container { width: 316px; } .price { text-align: right; font-size: 12px; } .producttype { margin-left: 130px; } .productimage { float: left; } p { font: 14px Arial; } .productimage img { border: none; width: 100px; height: 100px; }
__________________
Gruss Dieter Vegetarier essen meinem Essen das Essen weg. Und unsere Norweger sind reine Karnivoren. selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS |
Sponsored Links |
|
|||
danke. jetzt habe ich den abstand unter dem bild durch deine angaben weg gekriegt. aber wenn ich dein css einsetze, ist der preis nun nicht mehr unten rechts im rahmen. wie kriege ich es hin, dass der preis, egal ob der text 2, 3 oder 4 zeilen ergibt, immer unten rechts steht und der rahmen nicht höher ist als das bild (+ ein bisschen abstand zw. rahmen und bild)?
hier ist nun deine umsetzung zu finden. ich verstehe nicht, warum der text bei artikel 11 ("Promodoro Raglan Langarm "Weltverbesserer" (schwarz/olivgr") immernoch ab zeile 2 unter das bild rutscht und sogar den rahmen vergrößert, obwohl dort leerzeichen für einen umbruch enthalten sind... Geändert von renet (10.12.2007 um 10:05 Uhr) |
|
||||
Zitat:
Code:
position: absolute; Code:
.container { border:1px solid #000000; float:left; margin:5px; position:relative; width:300px; } .price { font-size:12px; padding:5px; position:absolute; right:0; bottom:0; text-align:right; } Das text-align: right; kannst du dir dann schenken. Allerdings: warum der IE nicht automatisch umbricht (und das auch nur bei diesem einen Artikel) kann ich auch nicht nachvollziehen. EDIT 2: Schickst du die Browser absichtlich in den Quirksmode? Da weiss man manchmal wirklich nicht wie die sich verhalten. Lies dazu puredesign.ch Webdesign | Doctypes: Websites mit dem richtigen Doctype versehen und schau dir diese Übersicht an: iX 3/2004, S. 136: HTML
__________________
Gruss Dieter Vegetarier essen meinem Essen das Essen weg. Und unsere Norweger sind reine Karnivoren. selfhtml | css4you | jendryschik | styleworks | Webdesign mit XHTML und CSS Geändert von kadees (10.12.2007 um 18:36 Uhr) |
|
|||
Hallo!
Vielen Dank, das hat mir sehr geholfen! Mit dem aktuellen Doctype schicke ich den Browser in den Quirks Modus, aber auch mit einem Doctype, bei dem das Dokument ebenfalls valide ist, bei dem der Brower laut der Tabelle im Standardmodus ist, ist dieser Zeilenumbruch da. Das ist schon seltsam. Kann es vielleicht mit der Zeichenkodierung zusammenhängen? Aber dann müsste es ja eventuell behoben sein, wenn ich die HTML-Datei unter unterschiedlichen Formatierungen (ANSI, Unicode, UTF-8 ) abspeichere, oder? In keinem der Fälle ändert das etwas... Geändert von renet (11.12.2007 um 09:12 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Parent DIV soll mit der Höhe seines Childs wachsen | Tekkla | CSS | 2 | 19.11.2009 18:27 |
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 |
Probleme mit float | Webentwickler Eric | CSS | 5 | 21.06.2007 20:09 |
Probleme mit Abständen zwischen div´s.... | darvida | CSS | 4 | 09.07.2005 18:48 |