Capior: Wie mache ich sowas mit CSS?

SELF-Forum

Wie mache ich sowas mit CSS?

Capior
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Wie mache ich sowas mit CSS?

    rfb Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Moin

    Oder "darf" ich Tabellen brauchen?

    Produktbild, -beschreibung, -preis
    ist doch ein nettes Beispiel für tabellarische Daten - wo ist das Problem?

    Gruß
    rfb

    --
    Man kann einen Menschen nichts lehren, man kann ihm nur helfen, es selbst zu entdecken.
    (Galileo Galilei)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Wie mache ich sowas mit CSS?

      Scarlet Homepage des Autors
      – Informationen zu den Bewertungsregeln

      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

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Wie mache ich sowas mit CSS?

        Scarlet
        – Informationen zu den Bewertungsregeln

        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

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. Wie mache ich sowas mit CSS?

        rfb Homepage des Autors
        – Informationen zu den Bewertungsregeln

        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

        --
        Man kann einen Menschen nichts lehren, man kann ihm nur helfen, es selbst zu entdecken.
        (Galileo Galilei)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

    2. Wie mache ich sowas mit CSS?

      Detlef G.
      – Informationen zu den Bewertungsregeln

      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

      --
      - Wissen ist gut
      - Können ist besser
      - aber das Beste und Interessanteste ist der Weg dahin!
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Wie mache ich sowas mit CSS?

    Axel Richter
    – Informationen zu den Bewertungsregeln

    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

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Wie mache ich sowas mit CSS?

    twb Homepage des Autors
    – Informationen zu den Bewertungsregeln

    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

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  4. Wie mache ich sowas mit CSS?

    Detlef G.
    – Informationen zu den Bewertungsregeln

    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!
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Wie mache ich sowas mit CSS?

      Capior
      – Informationen zu den Bewertungsregeln

      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
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Wie mache ich sowas mit CSS?

      Blaubart
      – Informationen zu den Bewertungsregeln

      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.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Wie mache ich sowas mit CSS?

        Detlef G.
        – Informationen zu den Bewertungsregeln

        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

        --
        - Wissen ist gut
        - Können ist besser
        - aber das Beste und Interessanteste ist der Weg dahin!
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  5. Wie mache ich sowas mit CSS?

    Klawischnigg
    – Informationen zu den Bewertungsregeln

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

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln