[Gelöst] Clear: left; und float: left; - ein einziges Chaos

[Efferd]

Hallo,

ob ich hier ganz richtig bin mit meiner Frage, weiss ich "noch" nicht ;o)
Es handelt sich wohl ehr um eine allgemeine CSS Frage. Vorab: ich habe Little Boxes 1 + 2 und kämpfe mich damit durch mein Template und mein CSS.

Nach und Nach wird es auch... wobei ich noch relativ am Anfang beim Umbau stehe (viel vom standard-Template ist noch "über").

Es geht um folgendes:
http://www.efferd.de/allgshirts/cmsmade ... tsortiment

Diese Übersicht besteht immer aus einem "Pärchen" Kisten (jeweils Bild und Beschreibung).

Sieht im Template so aus:

{* Bild1*}
         
         {content block='bild1'}
           
{* Block1 *}
         
         {content block='beschreibung1'}
           
{* Bild2*}
         
         {content block='bild2'}
           
{* Block2 *}
         
         {content block='beschreibung2'}
           




und dazu im CSS:

div#bild1 {
width: 130px;
       hight: 250px;
padding: 10px;
border: 1px solid #09425d;
margin: 2px;
       float: left;
}

div#bild2 {
width: 130px;
       hight: 250px;
padding: 10px;
border: 1px solid #09425d;
margin: 2px;
       float: left;
       clear: left;
}


div#beschreibung1 {
padding: 10px;
margin: 2px;
margin-left: 10px;
       hight: 250px;
       max-width: 450px;
       min-width: 250px;
       float: left;
}

div#beschreibung2 {
padding: 10px;
margin: 2px;
margin-left: 10px;
       hight: 250px;
       max-width: 450px;
       min-width: 250px;
       float: left;
}


so. Durch das Clear fängt das 2. Pärchen halt erst unter dem News-Block und der Navi auf der linken Seite an...
Gibts was schöneres als "clear" als Lösung?

man könnte noch eine "Trennzeile" als Dummy einbauen, das sich beim verkleinern des Browsers die Kisten nicht all zu arg verschieben... aber schön ist das nicht.


Ich bin über jeden Tip dankbar - denn langsam bin ich mit dem Latain am Ende ;o)


PS: auf der Startseite gibt es ja immer noch ne zwischen-Überschrit, die das ungewollte Umbrechen verhindert
http://www.efferd.de/allgshirts/cmsmadesimple/




Das 2. Wäre, wie hier im Beispiel zu sehen:
http://www.efferd.de/allgshirts/cmsmade ... ge=alias-4

unten stehen die "ungenutzen" Kisten leer rum und sollten - wenn Möglich, nicht angezeigt werden. Ist dies Möglich das ich Ihm sage - wenn kein Inhalt, dann nicht anzeigen?

Vielen Dank,
Florian

[cyberman]

Das 2. Wäre, wie hier im Beispiel zu sehen:
http://www.efferd.de/allgshirts/cmsmade ... ge=alias-4

unten stehen die "ungenutzen" Kisten leer rum und sollten - wenn Möglich, nicht angezeigt werden. Ist dies Möglich das ich Ihm sage - wenn kein Inhalt, dann nicht anzeigen?

Dafür kannst du den Parameter assign verwenden

Code: Select all

          {content block='bild1' assign='bild1'}
          {if $bild1 != ''}
          <div id="bild1">
          {$bild1}
          </div>
          {/if}

[mike-r]

Ich würde zuerst mal die Bilder + Beschreibung jeweils in eigene Boxen packen. Innerhalb dieser Boxen kannste dann (theoretisch) floaten und clearen, wie Du lustig bist, ohne Effekte auf andere Boxen.

[Efferd]

vielen Dank für die Antworten )

Das hilft mir schon sehr weiter,

Gruss
Florian