Wie mache ich sowas mit CSS?
Capior
- css
Hallo zusammen,
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.
Wie mach ich sowas? Oder "darf" ich Tabellen brauchen?
Grüsse, ciao
Capior
Moin
Oder "darf" ich Tabellen brauchen?
Produktbild, -beschreibung, -preis
ist doch ein nettes Beispiel für tabellarische Daten - wo ist das Problem?
Gruß
rfb
Moin
Oder "darf" ich Tabellen brauchen?
Produktbild, -beschreibung, -preis
ist doch ein nettes Beispiel für tabellarische Daten - wo ist das Problem?Gruß
rfb
Hi!
Naja.... Tabellen sind da zur Darstellung von tabellarischem Inhalt und nicht fürs Layouting.
Hier kannst Du nachlesen, wie man eine Grafik von Text umfließen lassen kann. Geht ganz einfach .. :)
LG
Scarlet
Hi!
Naja.... Tabellen sind da zur Darstellung von tabellarischem Inhalt und nicht fürs Layouting.
Hier kannst Du nachlesen, wie man eine Grafik von Text umfließen lassen kann. Geht ganz einfach .. :)
LG
Scarlet
Sorry: hab den Link vergessen, hier ist er nun: http://de.selfhtml.org/html/grafiken/ausrichten.htm
Moin
Naja.... Tabellen sind da zur Darstellung von tabellarischem Inhalt und nicht fürs Layouting.
Wem sagst du das! Aber warum?
Das sind hier - meines Erachtens - tabellarische Daten.
Die Positionierung des Preises wäre eine zusätzliche Layout-Frage, aber die hab ich gar nicht beantwortet.
Gruß
rfb
Hallo rfb
Produktbild, -beschreibung, -preis
ist doch ein nettes Beispiel für tabellarische Daten - wo ist das Problem?
Ja, das könnte durchaus auch eine Tabelle sein. - Aber, wie willst du eine dreispaltige Tabelle entsprechend den genannten Anforderungen formatieren?
In Browsern sehe ich da auch keine großen Probleme, der IE dürfte sich da jedoch hartnäckig wehren.
Auf Wiederlesen
Detlef
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
Wie mach ich sowas? Oder "darf" ich Tabellen brauchen?
Ich wüsste beim besten Willen nicht, was gegen Tabellen spräche.
---------- 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.
Damit Du allerdings, wenn die Bildhöhe variiert, die Preiszeile wirklich immer "auf der letzten Zeile" des Bildes stehen hast (herrlicher Ausdruck, aber es ist klar, was Du meinst :-), wirst Du das Bild in ein <td rowspan="2">[Bild]</td> packen müssen. Produktbeschreibung steht in einer nächsten <td>; der Preis dann, auf der nächsten Tabellenzeile, wiederum in einer eigenen <td>. Siehe hier. Gut?
Herzlich, twb
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!
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
Tach.
Interessante Lösung. Erlaube mir eine Ergänzung:
.Produkte img {
margin:0 0 -1em 0;
Wenn line-height (wie in den meisten Fällen) größer als 1em ist, sollte der negative margin des Bildes diesen Betrag haben; nicht bloß 1em. Andernfalls hängt die letzte Zeile jeweils ein Stück unter dem Bildrand.
--
Once is a mistake, twice is jazz.
Hallo Blaubart
Wenn line-height (wie in den meisten Fällen) größer als 1em ist, sollte der negative margin des Bildes diesen Betrag haben; nicht bloß 1em. Andernfalls hängt die letzte Zeile jeweils ein Stück unter dem Bildrand.
Danke für den Hinweis. Ich hatte es vergessen zu erwähnen.
Auf Wiederlesen
Detlef
Hi there,
Wie mach ich sowas? Oder "darf" ich Tabellen brauchen?
Ego te absolvo, filius meus...
In Zeiten echter Not mögen Sünden verzeihlich sein. Aber ich finde es echt lieb, daß Du hier nachfragst, ob Du Tabellen verwenden darfst. Wie man sieht, betreiben nicht nur die klassischen Religionen Gehirnwäsche...