amidala82: rahmen problem mit div

SELF-Forum

rahmen problem mit div

amidala82
– Informationen zu den Bewertungsregeln

hallo,

ich habe nun endlich nach vielen versuchen und einigen ratschlägen mein listing, bestehend aus divs hinbekommen.

es schaut so aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="width:850px; clear:both">

<div style="float:left;width:400px;">
      <!-- Produkt 1 -->
      <div style="overflow:auto; border:1px solid black; margin-bottom:15px; background:#FFFFFF;">
         <div style="float:left;width:120px;">Bild 1<br />Bild 1<br />Bild 1<br />Bild 1<br />Bild 1<br />Bild 1<br />Bild 1<br />Bild 1<br /></div>
         <div style="float:left;padding:5px;"><b>Titel</b><br>Beschreibung 1<br>xxxxxx</div>
         <br style='clear:left'>
      </div>
   </div>

<div style="float:left;width:50px;">&nbsp;</div>

<div style="float:left;width:400px;">
      <!-- Produkt 2 -->
      <div style="overflow:auto; border:1px solid black; margin-bottom:15px; background:#FFFFFF;">
         <div style="float:left;width:120px;">Bild 2</div>
         <div style="float:left;padding:5px;"><b>Titel</b><br>Beschreibung 2</div>
         <br style='clear:left'>
      </div>
   </div>

</div>

<div style="width:850px; clear:both">

<div style="float:left;width:400px;">
      <!-- Produkt 3 -->
      <div style="overflow:auto; border:1px solid black; margin-bottom:15px; background:#FFFFFF;">
         <div style="float:left;width:120px;">Bild 3</div>
         <div style="float:left;padding:5px;"><b>Titel</b><br>Beschreibung 3</div>
         <br style='clear:left'>
      </div>
   </div>

<div style="float:left;width:50px;">&nbsp;</div>

<div style="float:left;width:400px;">
      <!-- Produkt 4 -->
      <div style="overflow:auto; border:1px solid black; margin-bottom:15px; background:#FFFFFF;">
         <div style="float:left;width:120px;">Bild 4</div>
         <div style="float:left;padding:5px;"><b>Titel</b><br>Beschreibung 4<br />geht<br />hier<br />weiter</div>
         <br style='clear:left'>
      </div>
   </div>

</div>

<!-- clear am ende -->
<br style="width:850px; clear:both">

</body>
</html>

das ist fast so wie ich will. in jeder zeile sind immer zwei produkte. wer das html ausführt wird sehen das dies auch der fall ist, mich stört aber das die rahmen in jeder zeile nicht die gleiche höhe haben. eine feste höhe will ich nicht definieren, mich interessiert aber, was abzuändenr ist, damit die rahmen gleich hoch sind, nämlich die höhe des größeren.

amidala

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. rahmen problem mit div

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hello out there!

    das ist fast so wie ich will.

    Das ist allerschlimmste 'div'-Suppe. Du solltest es anders wollen: Verwende HTML-Elemente ihrem Sinn entsprechend, „bitte bitte“ [wahsaga].

    Außerdem verwendest du Inline-Style-Angaben, anstatt alles CSS zentral anzugeben oder gar auszulagern. Das macht den Quelltext schwer überschaubar.

    Räum da auf, dann ist auch Hilfe möglich.

    See ya up the road,
    Gunnar

    --
    „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. rahmen problem mit div

      amidala82
      – Informationen zu den Bewertungsregeln

      okay, ich habe die einzelnen css elemente mal in klassen ausgelagert, damit es übersichtlich ausschaut.

      dann siehts so aus:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Untitled Document</title>
      </head>

      <style type="text/css">
      .plistingLeftOdd {overflow:auto; border:1px solid black; margin-bottom:15px; background:#FFFFFF;}
      .plistingLeftEven {overflow:auto; border:1px solid black; margin-bottom:15px; background:#FFFFFF;}

      .plistingRightOdd {overflow:auto; border:1px solid black; margin-bottom:15px; background:#FFFFFF;}
      .plistingRightEven {overflow:auto; border:1px solid black; margin-bottom:15px; background:#FFFFFF;}

      .plistingAllwidth {width:850px; clear:both}
      .plistingProductwidth {float:left;width:400px;}

      .plistingProductbild {float:left;width:120px;}
      .plistingProductdesc {float:left;padding:5px;}

      </style>

      <body>
      <div class="plistingAllwidth">

      <div class="plistingProductwidth">
            <!-- Produkt 1 -->
            <div class="plistingLeftOdd">
               <div class="plistingProductbild">Bild 1<br />Bild 1<br />Bild 1<br />Bild 1<br />Bild 1<br />Bild 1<br />Bild 1<br />Bild 1<br /></div>
               <div class="plistingProductdesc"><b>Titel</b><br>Beschreibung 1<br>xxxxxx</div>
               <br style='clear:left'>
            </div>
         </div>

      <div style="float:left;width:50px;">&nbsp;</div>

      <div class="plistingProductwidth">
            <!-- Produkt 2 -->
            <div class="plistingRightOdd">
               <div class="plistingProductbild">Bild 2</div>
               <div class="plistingProductdesc"><b>Titel</b><br>Beschreibung 2</div>
               <br style='clear:left'>
            </div>
         </div>

      </div>

      <div class="plistingAllwidth">

      <div class="plistingProductwidth">
            <!-- Produkt 3 -->
            <div class="plistingLeftEven">
               <div class="plistingProductbild">Bild 3</div>
               <div class="plistingProductdesc"><b>Titel</b><br>Beschreibung 3</div>
               <br style='clear:left'>
            </div>
         </div>

      <div style="float:left;width:50px;">&nbsp;</div>

      <div class="plistingProductwidth">
            <!-- Produkt 4 -->
            <div class="plistingRightEven">
               <div class="plistingProductbild">Bild 4</div>
               <div class="plistingProductdesc"><b>Titel</b><br>Beschreibung 4<br />kann<br />noch<br />länger<br />sein</div>
               <br style='clear:left'>
            </div>
         </div>

      </div>

      <!-- clear am ende -->
      <br class="plistingAllwidth">

      </body>
      </html>

      amidala

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln