[renet]

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:

      .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;
      }

der html code innerhalb der body-tags sieht wie folgt aus:

<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&amp;partner_id=626420&amp;product_id=4183244&amp;img_id=1&amp;size=medium"></a>
</div>
<div class="producttype">
<p>Retro-Shirt "Bittesch</p>
</div>
<div class="price">
<p>22.90&nbsp;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&amp;partner_id=626420&amp;product_id=4341600&amp;img_id=1&amp;size=medium"></a>
</div>
<div class="producttype">
<p>Hanes Longsleeve "Menschheitszukunftsmaximierer" (schwarz)</p>
</div>
<div class="price">
<p>18.90&nbsp;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&amp;partner_id=626420&amp;product_id=4341606&amp;img_id=1&amp;size=medium"></a>
</div>
<div class="producttype">
<p>Continental Girlie Sweat "Menschheitszukunftsmaximierer" (braun)</p>
</div>
<div class="price">
<p>25.90&nbsp;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&amp;partner_id=626420&amp;product_id=4183453&amp;img_id=1&amp;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&nbsp;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&amp;partner_id=626420&amp;product_id=4260667&amp;img_id=1&amp;size=medium"></a>
</div>
<div class="producttype">
<p>Promodoro Raglan Langarm "Partner" (schwarz/olivgr</p>
</div>
<div class="price">
<p>22.90&nbsp;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&amp;partner_id=626420&amp;product_id=4268013&amp;img_id=1&amp;size=medium"></a>
</div>
<div class="producttype">
<p>Hi5 Girlie Baseball "Partnerin" (blau/wei</p>
</div>
<div class="price">
<p>23.90&nbsp;EUR</p>
</div>
</div>

beides jeweils w3 validiert. im gesamten kann man es sich hier ansehen. über die abgebrochenen artikelbezeichnungen braucht ihr euch keine gedanken zu machen.

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!

[kadees]

Ja, Ich weiss, es ist Winter und die Divitis grassiert wieder...
Eine reich garnierte Div-Suppe hast du da gekocht!

wie kann ich verhindern, dass der text (in jedem fall) unter das bild rutscht?

Wenn der Text zu lang ist: gar nicht.

am liebsten wäre mir, dass bei dem zu langen wort ein zeilenumbruch mitten im wort erzwungen wird.

Dann tus doch - entweder manuell oder per php, mit CSS kannst du keine Silbentrennung erzwingen.

und wie kriege ich den überflüssigen abstand unter dem bild/preis weg?

Per CSS-Prolog, siehe FAQ

Zur Divitis:
Verwende semantisch richtige Elemente!
Beispiel:

<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&nbsp;EUR</p>
</div>

Die Klassen "producttype" und "price" brauchst du in diesem Fall nicht zu floaten!

* {	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;
}

[renet]

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...

[kadees]

wie kriege ich es hin, dass der preis immer unten rechts steht

Mit

position: absolute;

.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;
}

EDIT:
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

[renet]

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...