Capior: Wie mache ich sowas mit CSS?

Beitrag lesen

Hallo Capior

Hallo Detlef

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


> </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]  
  
Vielen Dank für den ausführlichen Code. So werde ich es versuchen.  
  

> Auf Wiederlesen  
> Detlef  
  
Grüsse, ciao  
  Capior