Neuigkeiten:

moziloCMS verwendet Cookies. Wenn Sie auf unserer Seite weitersurfen, stimmen Sie der Cookie-Nutzung zu Datenschutzerklärung
moziloCMS Layouts
moziloCMS Plugins

Hauptmenü

Problem mit float

Begonnen von dummwiebrot, 21. November 2013, 01:45:02

« vorheriges - nächstes »

dummwiebrot

Hallo,

ich hab,mal wieder, ein kleines Problem mit dem ich einfach nicht weiter komme.
Zur Anzeige der Galerieübersicht habe ich Boxen mit float:left als Syntaxelemente angelegt:


col_1_3 = <div class="col_1_3"><div class="features"><div class="title clearfix">{DESCRIPTION}</div><p>{VALUE}</p></div></div>
col_3_3 = <div class="col_1_3 last"><div class="features"><div class="title clearfix">{DESCRIPTION}</div><p>{VALUE}</p></div></div>


In der Inhaltsseite sieht das so aus:


[col_1_3=Cedric|[seite={FotoGalerie|NeustesFoto,@=Cedric=@}|@=Galerie/Fotografie:Cedric=@]]
[col_1_3=Säugetiere|[seite={FotoGalerie|NeustesFoto,@=Saeugetiere=@}|@=Galerie/Fotografie:Säugetiere=@]]
[col_3_3=Vögel|[seite={FotoGalerie|NeustesFoto,@=Voegel=@}|@=Galerie/Fotografie:Vögel=@]]
[col_1_3=sonstige Tiere|[seite={FotoGalerie|NeustesFoto,@=Tiere=@}|@=Galerie/Fotografie:sonstige Tiere=@]]
[col_1_3=Landschaften|[seite={FotoGalerie|NeustesFoto,@=Landschaften=@}|@=Galerie/Fotografie:Landschaften=@]]
[col_3_3=Chemnitz|[seite={FotoGalerie|NeustesFoto,@=Chemnitz=@}|@=Galerie/Fotografie:Chemnitz=@]]


Die css:


.col_1_3 {
          float      : left;
          margin     : 0 5px 5px 0;
          padding    : 5px;
          width      : 210px;
          text-align : center;
          border     : 1px solid #fff;
          background : #c9d1cc;
         }

.col_1_3.last {margin-right: 0;}

.features .title {
         padding       : 15px 15px 5px 15px;
         margin        : 0 0 5px 0;
       }

.features img {border : 1px solid #000;}


Damit wird alles korrekt angezeigt, solange jeweils 3 Boxen nebeneinander liegen (Bild 1), wenn das Browserfenster kleiner wird, so dass nur noch 2 Boxen nebeneinander passen, sieht das wegen des .col_1_3.last {margin-right: 0;} leider nicht so schön aus (Bild 2).

Ich wollte nun nur col_1_3 verwenden (hab das in der Inhaltsseite geändert) und hab die css wie folgt geändert:


.col_1_3 {
          float      : left;
          margin     : 0 5px 5px 5px;
          padding    : 5px;
          width      : 200px;
          text-align : center;
          border     : 1px solid #fff;
          background : #c9d1cc;
         }


Dabei verschiebt sich die erste Box jeder zweiten Zeile nach rechts (Bild 3).

Dies passiert allerdings nur in Verbindung mit einem Vorschaubild das mit Fotogalerie bzw. GalleryPreview erzeugt wird. Wenn ich Bilder aus den Dateien einfüge, dann wird alles korrekt angezeigt.

Ich sitz nun schon einige Stunden dran, finde aber den Fehler nicht. Firebug hat mir auch nicht weiter geholfen.

Würde mich freuen, wenn mir jemand helfen könnte.

Greetz dwb
Greetz dwb

blacknight

so als spontane Idee. Du hast ja die width um 10 px pro Bild reduziert, das bedeutet nach dem 3 Bild sind noch 30px über. Das float left versucht dann wahrscheinlich das 4 Bild noch hinter das 3 zu bekommen was auf Grund der Größe nicht geht.

dummwiebrot

Hi,

nein, das ist es leider nicht. Bei 210px würden nur 2 Boxen nebeneinander angezeigt. Ich bin Pixelweise auf 200px runter, sobald 3 nebeneinander passen geht das vierte in der zweiten Zeile nach rechts.
Das passiert ja auch nur wenn ich mit dem Plugin Fotogalerie ein Vorschaubild in die Box einbinde:
[col_1_3=Cedric|[seite={FotoGalerie|NeustesFoto,@=Cedric=@}|@=Galerie/Fotografie:Cedric=@]]
oder
[col_1_3=Cedric|{FotoGalerie|NeustesFoto,@=Cedric=@}]

Ich hab es auch mit dem Plugin GalleryPreview probiert, das Problem bleibt.

Nehme ich ein normales Bild aus den Dateien:
[col_1_3=Test|[seite=[bild|@=Galerie:test.jpg=@] |@=Webdesign:Referenzen=@]]
dann wird alles richtig angezeigt.

Es muss also mit dem Galerievorschaubild zusammen hängen, aber eben diesen Zusammenhang find ich nicht.

Das Layout ist so noch nicht online, aber zumindest von 10 bis 22 Uhr unter http://bechti.dd-dns.de/sbdesign zu erreichen.

Greetz dwb
Greetz dwb

blacknight

hm, wenn du die Bilder direkt einbindest bekommen das img noch ein margin von 5px (class img.contentimage) wird durch das plugin nicht gemacht.

dummwiebrot

Das war es leider auch nicht.
Greetz dwb

Thorstn

Ich habe auf Deiner Testseite (dd-dns) mal die Layouts getestet (Layoutswitcher): der Fehler passiert aber nur bei den beiden responsive Layout (bnAutumn und Responsive), sehe ich das richtig?
www.mad-it.de - Wir lösen keine Probleme. Wir machen sie.
Webdesign aus Bochum

dummwiebrot

Hallo,

nein, passiert bei allen Layouts. Ich hab die betreffenden Einstellungen aber nur bei den Layouts bnAutumn, Responsive und moziloCMS gemacht.
Die Layouts winter, test_menu1 (ein responsive Menü mit JacaScript) und test_menu2 (ein responsive Menü mit :target) sind eigentlich nur die Vorgänger von responsive. Sozusagen die Sicherungen falls ich das Layout an dem ich grad arbeite restlos zerschieße.

Greetz dwb

Greetz dwb

dummwiebrot

Dank bittersmann.de habe ich jetzt eine Lösung gefunden mit der ich leben kann.

Ich habe das float:left durch display:inline-block ersetzt. Mit Tablet, Smartphone und iPod konnte ich keine Probleme feststellen. In allen modernen Browsern (die ich testen konnte) funktioniert es auch. Nur IE7 und älter und K-Meleon zeigen die Boxen dann untereinander an.

Sollte jemand bei der Darstellung Fehler finden, sagt bitte mit Angabe des verwendeten Browsers bescheid.

Greetz dwb

Greetz dwb