Detlef G.: Wie mache ich sowas mit CSS?

Beitrag lesen

Hallo Capior

----------   Hier steht dann die Beschreibung zum Produkt.
|          |  Können mehrere Zeilen sein.
|  Produkt |
|   Bild   |
|          |
  ----------   Auf dieser Zeile (also unten) soll dann der Preis stehen.

Absolute Positionierung bietet immer die Gefahr von Überlappungen.
Deshalb mein Vorschlag:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Beschreibung der Seite</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
[code lang=css].Produkte img {  
 margin:0 0 -1em 0;  
 float:left;  
 width:150px;  
 height:150px;  
}  
.Produkte dd {  
 margin:0 0 0 160px;  
 padding-bottom:0.5em;  
 /* hier darf kein margin-bottom angegeben werden, sonst spinnt IE zumindest der 6er) */  
}  
.Produkte .Preis {  
 padding:0;  
 clear:left;  
 margin-bottom:1em; /* wenn nötig bzw. gewünscht, kann stattdessen margin-top für dt verwendet werden. */  
}  
 /* .Produkte dt {  
 margin-top:1em;  
} */  

~~~</style>  
</head>  
<body>  
  
<dl class="Produkte">  
 <dt><img src="Beispiel.jpg" alt="Bezeichnung des Produkts"></dt>  
 <dd>Hier steht dann die Beschreibung zum Produkt.<br>  
     Können mehrere Zeilen sein.</dd>  
 <dd class="Preis">Auf dieser Zeile (also unten) soll dann der Preis stehen.</dd>  
  
 <dt><img src="Beispiel.jpg" alt="Bezeichnung des Produkts"></dt>  
 <dd>Hier steht dann die Beschreibung zum Produkt.<br>  
     Können mehrere Zeilen sein.<br>  
     Wenn<br>es<br>aber<br>zu<br>viele<br>Zeilen<br>werden (z.B. bei Schriftvergrößerung),<br>  
     dann sollte der Preis vielleicht Platz machen.</dd>  
 <dd class="Preis">Auf dieser Zeile (also unten) soll dann der Preis stehen.</dd>  
</dl>  
  
</body>  
</html>[/code]  
  
  
Auf Wiederlesen  
Detlef  

-- 
- Wissen ist gut  
- Können ist besser  
  
- aber das Beste und Interessanteste ist der Weg dahin!