nicht angemeldet
Hallo,
ich traue mir einige Erfahrung mit Tabellen-losen Layouts zu, dennoch stosse ich hier vor ein Problem. Wie kann ich folgendes ohne Tabellen lösen:
---------- Hier steht dann die Beschreibung zum Produkt.
| | Können mehrere Zeilen sein.
| Produkt |
| Bild |
| |
---------- Auf dieser Zeile (also unten) soll dann der Preis stehen.D.h. auf der "letzten Zeile des Bildes" soll der Preis stehen. Auf der "ersten Zeile des Bildes" beginnt dessen Beschreibung...über x-Zeilen.
Die Höhe des Bildes kann variieren. Nur die Breite ist gegeben.
<!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">
.produktAngebot { margin:0; padding:0; width:500px; margin-bottom:1ex; clear:left; overflow:auto; position:relative; background-color:#0F0; }
.produktBild { margin:0; float:left; width:150px; }
.produktBeschreibung { margin:0; padding:0; margin-left:160px; }
.produktPreis { margin:0; padding:0; position:absolute; bottom:0; left:160px; }
</style>
</head>
<body>
<div class="produktAngebot">
<img src="Beispiel.jpg" alt="" class="produktBild">
<p class="produktBeschreibung">Hier steht dann die Beschreibung zum Produkt. Können mehrere Zeilen sein.</p>
<p class="produktPreis">Auf dieser Zeile (also unten) soll dann der Preis stehen.</p>
</div>
<div class="produktAngebot">
<img src="Beispiel2.jpg" alt="" class="produktBild">
<p class="produktBeschreibung">Hier steht dann die Beschreibung zum Produkt. Können mehrere Zeilen sein.</p>
<p class="produktPreis">Auf dieser Zeile (also unten) soll dann der Preis stehen.</p>
</div>
</body>
</html>
Wie mach ich sowas? Oder "darf" ich Tabellen brauchen?
Naja, die Tabelle würde aber auch nicht ganz unkompliziert, oder?
viele Grüße
Axel