float funzzt, nach clear wird ungewollter abstand eingefügt

[tox]

Hallo Ihr Lieben,

ich versuche gerade einen framelosen Webshop per CSS zu realisieren, bin aber noch neu in der Materie. Jetzt stehe ich vor einem etwas dubiosen Problem das ich mir nicht erklären kann.

Bei den Artikelübersichten werden die einzelnen Artikel als Liste dargestellt und die einzelnen Listen per float:left; nebeneinander dargestellt. Das klappt hervorragend. Das folgende Element (div:listend) enthält den clear:left; der die Auflistung beendet und das folgende Element wieder nach unten zwingt. Soweit funktioniert das auch, aber:

Wenn in der Produktkategorie weniger als eine Reihe Artikel dargetellt wird macht der Browser (FF oder IE) erst nach dem Ende der linken Spalte weiter. Warum? Und wie kann man das umgehen?

Hier die Startseite der Shopvorschau: http://www.vanvara.com/self

Danke
tox

[Efchen]

Wenn in der Produktkategorie weniger als eine Reihe Artikel dargetellt wird macht der Browser (FF oder IE) erst nach dem Ende der linken Spalte weiter. Warum? Und wie kann man das umgehen?

Ich verstehe den Satz auch anhand der von Dir verlinkten Seite nicht.

Hinweis zur Seite: Rosa als Hintergrundfarbe halte ich für unpassend. Und der horizontale Scrollbalken ist doof.

[tox]

Hallo Efchen,

wenn Du Dir die Kategorie Papierschirme ansiehst, werden zwei Artikel nebeneinander dargestellt, also nur eine Artikelreihe. Dann folgt der Textblock erst nach einem grösseren Abstand, der nicht erwünscht ist.

Wenn Du die Kategorie Wandfächern mit Tiermotiven auswählst, dann werden zwei Artikelreihen erzeugt und alle Abstände passen.

Mit welchen Browser guckst Du? Hintergrundfarbe ist Standard, also weiss und das Ganze ist nur 755 Pixel breit.

Gruss tox

[MudGuard]

Hi,

Mit welchen Browser guckst Du? Hintergrundfarbe ist Standard,

Du meinst: "nicht angegeben"?

also weiss

Fehlschluß. Wie kommst Du auf die Idee, daß weiß default-Hintergrundfarbe sein könnte?

Der "Fehler" ist kein Fehler. Du sagst doch per clear, daß der Float aufgehoben werden soll.
Dein div mit der id "menu" floated.

cu,
Andreas

[tox]

Hallo Mudguard,

Fehlschluß. Wie kommst Du auf die Idee, daß weiß default-Hintergrundfarbe sein könnte?

ist sie das nicht? Peinlich. Muss ich mir näher ansehen...

Der "Fehler" ist kein Fehler. Du sagst doch per clear, daß der Float aufgehoben werden soll.
Dein div mit der id "menu" floated.

Okay, das heisst ich kann mit clear gar nicht das letzte Float alleine aufheben, sondern nur alle?

Das wäre ja mächting enttäuschend!

Gruss von einem Exilmünchner
tox

[MudGuard]

Hi,

Fehlschluß. Wie kommst Du auf die Idee, daß weiß default-Hintergrundfarbe sein könnte?
ist sie das nicht? Peinlich. Muss ich mir näher ansehen...

Die Default-Farbe ist das, was der User für seinen Browser als Default-Farbe eingestellt hat.

cu,
Andreas

[wahsaga]

hi,

wenn Du Dir die Kategorie Papierschirme ansiehst, werden zwei Artikel nebeneinander dargestellt, also nur eine Artikelreihe. Dann folgt der Textblock erst nach einem grösseren Abstand, der nicht erwünscht ist.

ist dir aufgefallen, "bis wo" genau dieser "abstand" da "geht"?
jawohl, bis genau zu dem punkt, wo dein menübereich aufhört.

Wenn Du die Kategorie Wandfächern mit Tiermotiven auswählst, dann werden zwei Artikelreihen erzeugt und alle Abstände passen.

da fällt dir dieser umstand nicht auf, weil der inhalt selber schon bis unter das menü reicht.

tja ja, die auswirkungen von clear - nicht ganz trivial zu verstehen, und auch nicht in jedem browser richtig umgesetzt.

Ingo hat da einen guten artikel zu den auswirkungen von clear (weiß nicht, ob er den letztlich schon upgedated hat, wie er vorhatte).

dein stichwort lautet "block formating context" - wenn du dafür sorgst, dass dein inhaltsbereich zu einem solchen wird, darf clear nur innerhalb von diesem interpretiert werden. dass er zu einem solchen wird, erreichst du bspw., in dem du ihn ebenfalls floaten lässt.

gruß,
wahsaga

[tox]

Hi Wahsaga,

ist dir aufgefallen, "bis wo" genau dieser "abstand" da "geht"?
jawohl, bis genau zu dem punkt, wo dein menübereich aufhört.

ack

Wenn Du die Kategorie Wandfächern mit Tiermotiven auswählst, dann werden zwei Artikelreihen erzeugt und alle Abstände passen.

da fällt dir dieser umstand nicht auf, weil der inhalt selber schon bis unter das menü reicht.

ack

tja ja, die auswirkungen von clear - nicht ganz trivial zu verstehen, und auch nicht in jedem browser richtig umgesetzt.

ack :-)

dein stichwort lautet "block formating context"

sch..... (<-- neue Rechtschreibung ;-) ), ich finde dazu nichts in slfhtml oder google!

• wenn du dafür sorgst, dass dein inhaltsbereich

Von wo bis wo meinst Du?

Gruss Tommi

[wahsaga]

hi,

ack
ack
ack

klingt wie ein huhn mit sprachfehler *scnr*

dein stichwort lautet "block formating context"

sch..... (<-- neue Rechtschreibung ;-) ), ich finde dazu nichts in slfhtml oder google!

ok, google schlägt vor, formatting doch mit zwei 't' richtig zu schreiben - aber sowohl mit als auch ohne liefert diese phrase jede menge treffer.

• wenn du dafür sorgst, dass dein inhaltsbereich

Von wo bis wo meinst Du?

ich rede von deinem bereich mit der id "cont".

gruß,
wahsaga

[tox]

klingt wie ein huhn mit sprachfehler *scnr*

Was? Ist es schon soweit? Hoffentlich fällt mir mit dem float Kram nicht noch ein Ei aus der Hose. *gggggg*

ok, google schlägt vor, formatting doch mit zwei 't' richtig zu schreiben - aber sowohl mit als auch ohne liefert diese phrase jede menge treffer.

Achso, Du hast es ohne Anführungszeichen geschrieben. Da, habe ich mir jetzt einige angesehen, war sehr interessantes Zeuch dabei, aber wie aus einem div ein "block formating context" wird schreibt keiner.

wenn du dafür sorgst, dass dein inhaltsbereich zu einem solchen wird, darf clear nur innerhalb von diesem interpretiert werden. dass er zu einem solchen wird, erreichst du bspw., in dem du ihn ebenfalls floaten lässt.
ich rede von deinem bereich mit der id "cont".

Sorry, wenn ich deswegen nerve, aber er tut doch floaten, deswegen habe ich ja Bauchschmerzen. Wie meinst Du das genau?

Gruss tox (leicht verwirrt)

[wahsaga]

hi,

ich rede von deinem bereich mit der id "cont".

Sorry, wenn ich deswegen nerve, aber er tut doch floaten, deswegen habe ich ja Bauchschmerzen. Wie meinst Du das genau?

nein, der bereich mit der ID cont floatet nicht. (oder änderst du aktuell an der testseite?)

setze den mal auf float:left, gebe ihm eine breite von 300px, und streiche zunächst mal das margin (vorsicht, das hast du an zwei stellen angegeben, sowohl in der externen CSS-datei als auch im dokument selber).

gruß,
wahsaga

[tox]

Hi,

nein, der bereich mit der ID cont floatet nicht. (oder änderst du aktuell an der testseite?)

Ja hatte ich, sorry.

setze den mal auf float:left, gebe ihm eine breite von 300px, und streiche zunächst mal das margin (vorsicht, das hast du an zwei stellen angegeben, sowohl in der externen CSS-datei als auch im dokument selber).

Es funzzt wie ein Christbaum. Ich liebe Dich man. ;-) Hast mein Leben gerettet. *g* Wünsche Dir ein langes Leben und viele gesunde Nachkommen. Aber ernsthaft: Danke.

Gruss tox

[Ingo Turski]

Hi,

Da, habe ich mir jetzt einige angesehen, war sehr interessantes Zeuch dabei, aber wie aus einem div ein "block formating context" wird schreibt keiner.

Hattest Du Tomaten auf den Augen?
Auf der in wahsagas erstem Posting verlinkten Seite (die ich übrigens tatsächlich aktualisiert habe) steht das doch ganz deutlich:
"Ein neuer Box-Kontext ("block formatting context") wird nach CSS 2.1 durch "Floats, absolutely positioned elements, inline-blocks, table-cells, and elements with 'overflow' other than 'visible'" erzeugt."
Und nachfolgend sogar zwei Beispiele und weitere Erläuterungen hierzu.

freundliche Grüße
Ingo

[Efchen]

Mit welchen Browser guckst Du?

Firefox.

Hintergrundfarbe ist Standard, also weiss

Nein, also rosa.

und das Ganze ist nur 755 Pixel breit.

Nein, es ist breiter als meine 772px. Warum nutzt Du feste Breiten?

[tox]

Hi Du,

Nein, also rosa.

jetzt muss aber weiss sein. background-color:#ffffff; ist jetzt im Body.

Nein, es ist breiter als meine 772px. Warum nutzt Du feste Breiten?

Das verstehe ich nicht, ich habs jetzt im Photoshop nachgemessen(!) und habe exakt 755 Pixel. Wenn es Dir nichts ausmacht, maile mir einen Screenshot. Welchen FF hast Du denn? Ich benutze den 1.0.4 .

Gruss tox

[Efchen]

jetzt muss aber weiss sein. background-color:#ffffff; ist jetzt im Body.

Nein, jetzt kommt ein 404 :-)

Nein, es ist breiter als meine 772px. Warum nutzt Du feste Breiten?

Das verstehe ich nicht, ich habs jetzt im Photoshop nachgemessen(!) und habe exakt 755 Pixel. Wenn es Dir nichts ausmacht, maile mir einen Screenshot.

Kann ich nicht (s.o.), aber Du brauchst ja nur Deinen Browser auf 772px Breite zu stellen. Aber wie dem auch sei, selbst wenn Du nur 755px hast (hast Du margins mit eingerechnet?), bleibt das Problem bei Browsern bestehen, die weniger als 755px breit sind.

Welchen FF hast Du denn?

hier 1.0.2

[tox]

Hallo nochmal,

Warum nutzt Du feste Breiten?

Ich habe einen Notebook mit 1680 x 1xxx Pixel Bildschirmauflösung und ich stelle mir dann immer vor wie jemand die Seite mit so einer Auflösung anguckt und riesige Schriften und winzige Bilder zu sehen bekommt. Z.B. bei den Papierschirmen.

Was denkst Du darüber?

[Efchen]

Warum nutzt Du feste Breiten?

Ich habe einen Notebook mit 1680 x 1xxx Pixel Bildschirmauflösung und ich stelle mir dann immer vor wie jemand die Seite mit so einer Auflösung anguckt

Du meinst, wie sich das jemand mit nem maximierten Fenster ansieht? Wer würde denn auch bei so einer Auflösung ein maximiertes Fenster nutzen.

Was denkst Du darüber?

Ich denke, dass Sites, die sich an die Browserfenstergröße anpassen, sinnvoller sind, als feste Pixelbreiten, die nur auf einer Minderheit von Fenstern gut aussehen.

Gruß,
-Efchen