vertical-align: top

[Peter Mueller]

Hallo,

ich frage mich, warum hier
http://mtv48hildesheim.de/content/gesundheit/
das vertical-align bei der 'Werbung' (unten oder mitte links) von
einigen Browsern nicht angewandt wird. Also bei Opera ist es so wie ich
es mir wï¿œnschen wï¿œrde, Firefox und IE 8 zeigen das Bild in der td-Mitte.
Kann mir da jemand weiterhelfen?

Viele Grￜￜe,

Peter

[Susanne Jäger]

Peter Mueller schrieb am 03.04.2013 11:24:

> ich frage mich, warum hier
> http://mtv48hildesheim.de/content/gesundheit/
> das vertical-align bei der 'Werbung' (unten oder mitte links) von
> einigen Browsern nicht angewandt wird. Also bei Opera ist es so wie ich

> es mir wünschen würde, Firefox und IE 8 zeigen das Bild in der td-Mitte.

mal abgesehen davon, dass die Konstruktion arg seltsam ist - wenn schon
Tabellenlayout dann doch bitte konsequent, verhält sich Opera da IMHO
falsch.

Die Spezifikation sieht vor [1], dass float aus display: table-cell
display: block macht und dafür greift vertical-align nicht.

Gruß
Susanne

[1] Visual formatting model - 9.7 Relationships between 'display',
'position', and 'float' <http://www.w3.org/TR/CSS21/visuren.html#floats>

[Peter Mueller]

Susanne Jäger schrieb am 03.04.2013 12:30:
> Peter Mueller schrieb am 03.04.2013 11:24:
>
>> ich frage mich, warum hier
>> http://mtv48hildesheim.de/content/gesundheit/
>> das vertical-align bei der 'Werbung' (unten oder mitte links) von
>> einigen Browsern nicht angewandt wird. Also bei Opera ist es so wie ich
>> es mir wünschen würde, Firefox und IE 8 zeigen das Bild in der td-Mitte.
>
> mal abgesehen davon, dass die Konstruktion arg seltsam ist - wenn schon
> Tabellenlayout dann doch bitte konsequent, verhält sich Opera da IMHO
> falsch.
>
> Die Spezifikation sieht vor [1], dass float aus display: table-cell
> display: block macht und dafür greift vertical-align nicht.

Ok, das war's, danke! float stammt aus der vorigen Version, und sollte
da nicht stehen.

Peter

[Peter Mueller]

Susanne Jäger schrieb am 03.04.2013 12:30:

> Peter Mueller schrieb am 03.04.2013 11:24:
>
>> ich frage mich, warum hier
>> http://mtv48hildesheim.de/content/gesundheit/
>> das vertical-align bei der 'Werbung' (unten oder mitte links) von
>> einigen Browsern nicht angewandt wird. Also bei Opera ist es so wie ich
>> es mir wünschen würde, Firefox und IE 8 zeigen das Bild in der td-Mitte.
>
> mal abgesehen davon, dass die Konstruktion arg seltsam ist - wenn schon
> Tabellenlayout dann doch bitte konsequent, verhält sich Opera da IMHO
> falsch.
>
> Die Spezifikation sieht vor [1], dass float aus display: table-cell
> display: block macht und dafür greift vertical-align nicht.

Jetzt dachte ich, es lag an dem float, aber nachdem ich es rausgenommen
habe, ist es immer noch wie vorher. :(
Sieht man besser hier, unten links, vertical-align: top ist nicht angewandt:
http://mtv48hildesheim.de/content/sport/inliner/

Gruß,

Peter

[Susanne Jäger]

Peter Mueller schrieb am 03.04.2013 13:16:

> Jetzt dachte ich, es lag an dem float, aber nachdem ich es rausgenommen
> habe, ist es immer noch wie vorher. :(
> Sieht man besser hier, unten links, vertical-align: top ist nicht
> angewandt:
> http://mtv48hildesheim.de/content/sport/inliner/

klar wird das angewendet, nur ist die td scheinbar nicht da, wo du sie
vermutest. Ergänze mal .boxwerbung {background: yellow;} dann siehst du
es besser.

Gruß
Susanne

PS: Hat jemand behauptet Tabellenlayout wäre einfacher als vernünftiger
Code?

[Peter Mueller]

Susanne Jäger schrieb am 03.04.2013 13:28:
> Peter Mueller schrieb am 03.04.2013 13:16:
>
>> Jetzt dachte ich, es lag an dem float, aber nachdem ich es rausgenommen
>> habe, ist es immer noch wie vorher. :(
>> Sieht man besser hier, unten links, vertical-align: top ist nicht
>> angewandt:
>> http://mtv48hildesheim.de/content/sport/inliner/
>
> klar wird das angewendet, nur ist die td scheinbar nicht da, wo du sie
> vermutest. Ergänze mal .boxwerbung {background: yellow;} dann siehst du
> es besser.

> PS: Hat jemand behauptet Tabellenlayout wäre einfacher als vernünftiger
> Code?

Damit sind wir beim Kern meines Problems. Ursprünglich hatte ich die
Seite mit einem floatenden Navi-Bereich angelegt. Dann sollte die
Werbung unter den Navi-Bereich. Das wollte ich mit float: left; clear:
left erreichen. Das zerschoss mir aber das Layout nicht nur einer Seite,
auf dem z.B. ein Bild zu einem Text mit float: right; angelegt war (Z.B.
hier: http://mtv48hildesheim.de/content/sport/tanzen/ -> das Bild rechts
oben rutscht dann sehr weit nach unten).

Also wenn du mir da helfen könntest, wäre ich dir seeehr dankbar!

Grüße,

Peter

[Susanne Jäger]

Peter Mueller schrieb am 03.04.2013 14:49:

>> PS: Hat jemand behauptet Tabellenlayout wäre einfacher als vernünftiger
>> Code?
>
> Damit sind wir beim Kern meines Problems. Ursprünglich hatte ich die
> Seite mit einem floatenden Navi-Bereich angelegt. Dann sollte die
> Werbung unter den Navi-Bereich. Das wollte ich mit float: left; clear:
> left erreichen. Das zerschoss mir aber das Layout nicht nur einer Seite,
> auf dem z.B. ein Bild zu einem Text mit float: right; angelegt war (Z.B.
> hier: http://mtv48hildesheim.de/content/sport/tanzen/ -> das Bild rechts
> oben rutscht dann sehr weit nach unten).

Konkret ist das schwer zu beantworten ohne zu sehen, wie du das genau
aufgebaut hattest. Aber der Schlüsselbegriff dürfte "Block formatting
context" sein. [1] Innerhalb eines solchen gelten nämlich clear
Anweisungen zuweilen weiter als geplant, gehofft. Je nach Aufbau hilft
meist eine weitere float-Anweisung oder ein overflow: auto/hidden.
Ersteres ist meist sicherer, letzteres leichter anzuwenden, kann aber in
Kombination mit unüberlegten Größenangaben unschöne Nebeneffekte haben
(abgeschnittene Inhalte oder seiteninterne Scrollbalken). Spiel doch mal
ein bisschen damit rum

Gruß
Susanne


[1] Visual formatting model - "The 'clear' property does not consider
floats inside the element itself or in other block formatting contexts."
<http://www.w3.org/TR/CSS21/visuren.html#propdef-clear> und
<http://www.w3.org/TR/CSS21/visuren.html#block-formatting>

[Peter Mueller]

Susanne Jäger schrieb am 03.04.2013 15:32:
> Peter Mueller schrieb am 03.04.2013 14:49:
>
>>> PS: Hat jemand behauptet Tabellenlayout wäre einfacher als vernünftiger
>>> Code?
>>
>> Damit sind wir beim Kern meines Problems. Ursprünglich hatte ich die
>> Seite mit einem floatenden Navi-Bereich angelegt.

> Konkret ist das schwer zu beantworten ohne zu sehen, wie du das genau
> aufgebaut hattest. Aber der Schlüsselbegriff dürfte "Block formatting
> context" sein. [1] Innerhalb eines solchen gelten nämlich clear
> Anweisungen zuweilen weiter als geplant, gehofft. Je nach Aufbau hilft
> meist eine weitere float-Anweisung oder ein overflow: auto/hidden.

> [1] Visual formatting model - "The 'clear' property does not consider
> floats inside the element itself or in other block formatting contexts."
> <http://www.w3.org/TR/CSS21/visuren.html#propdef-clear> und
> <http://www.w3.org/TR/CSS21/visuren.html#block-formatting>
>

Ok, schaue ich mir an. Ich probiere auch noch mal eine Version mit
vernünftigen Code.

Viele Grüße,

Peter

[Peter Mueller]

Susanne Jäger schrieb am 03.04.2013 15:32:
> Konkret ist das schwer zu beantworten ohne zu sehen, wie du das genau
> aufgebaut hattest.

Ich habe das nochmal hergestellt und hier
(http://mtv48hildesheim.de/layouttest.html)hochgeladen. Der
entscheidende div-Block hat eine blaue Umrandung. Das darin enthaltene
Bild wird erst viel weiter unten angezeigt.

Aber der Schlüsselbegriff dürfte "Block formatting
> context" sein. [1] Innerhalb eines solchen gelten nämlich clear
> Anweisungen zuweilen weiter als geplant, gehofft. Je nach Aufbau hilft
> meist eine weitere float-Anweisung oder ein overflow: auto/hidden.

Welche weitere float-Anweisung meinst du? Overflow: auto/hidden kommt
nicht in Frage, weil damit eventuell Inhalt abgeschnitten wird.

Danke dir für die Hilfe, hab schon was gelernt. Die von dir genannten
Texte des W3C (http://www.w3.org/TR/CSS21/visuren.html#block-formatting
z.B.) sind aber für mich schwer zu verstehen. Ich hätte nie daraus
geschlossen, dass clear eine solche Auswirkung auf nachfolgende floats hat.

Grüße,

Peter

[Susanne Jäger]

Peter Mueller schrieb am 04.04.2013 21:19:
> Susanne Jäger schrieb am 03.04.2013 15:32:
>> Konkret ist das schwer zu beantworten ohne zu sehen, wie du das genau
>> aufgebaut hattest.
>
> Ich habe das nochmal hergestellt und hier
> (http://mtv48hildesheim.de/layouttest.html)hochgeladen. Der
> entscheidende div-Block hat eine blaue Umrandung. Das darin enthaltene
> Bild wird erst viel weiter unten angezeigt.

im Schnelltest (Seamonkey) hilft ein
#inhalt {overflow-y: auto;}

>
> Aber der Schlüsselbegriff dürfte "Block formatting
>> context" sein. [1] Innerhalb eines solchen gelten nämlich clear
>> Anweisungen zuweilen weiter als geplant, gehofft. Je nach Aufbau hilft
>> meist eine weitere float-Anweisung oder ein overflow: auto/hidden.
>
> Welche weitere float-Anweisung meinst du? Overflow: auto/hidden kommt
> nicht in Frage, weil damit eventuell Inhalt abgeschnitten wird.

Das ginge mit einem Rahmen div für Menu und Werbung, das dann komplett
gefloatet würde. Bei deinem Markup geht das nicht, aber overflow für
#inhalt müsste eigentlich unproblematisch sein, solange du keine feste
Höhenangabe machst, durch die Beschränkung auf overflow-y dürften auch
überbreite Inhalte (z.B. Tabellen oder große Bilder nicht mehr
problematisch sein.

> Danke dir für die Hilfe, hab schon was gelernt. Die von dir genannten
> Texte des W3C (http://www.w3.org/TR/CSS21/visuren.html#block-formatting
> z.B.) sind aber für mich schwer zu verstehen. Ich hätte nie daraus
> geschlossen, dass clear eine solche Auswirkung auf nachfolgende floats hat.

das ergibt sich auch eher aus dem Abschnit zu "clear"; wichtig an der
Definition des BFT ist vor allem der erste Absatz - daraus lässt sich
ableiten, was man tun muss um das unerwünschte Verhalten zu unterbinden.
Aber es ist eher schwer verdaulicher Stoff, eine richtig umfassende
verständliche Erklärung zum Problem habe ich nicht gefunden. Angerissen
wird es in diesem Artikel: Einschließen von Floats ohne zusätzliches
Markup - easyclear - <http://jassesnee.de/easyclear/index.html> im
Abschnitt "Eine wichtige Warnung!"

Gruß
Susanne

[Peter Mueller]

Susanne Jäger schrieb am 04.04.2013 21:52:
> Peter Mueller schrieb am 04.04.2013 21:19:
>> Susanne Jäger schrieb am 03.04.2013 15:32:
>>> Konkret ist das schwer zu beantworten ohne zu sehen, wie du das genau
>>> aufgebaut hattest.
>>
>> Ich habe das nochmal hergestellt und hier
>> (http://mtv48hildesheim.de/layouttest.html)hochgeladen. Der
>> entscheidende div-Block hat eine blaue Umrandung. Das darin enthaltene
>> Bild wird erst viel weiter unten angezeigt.
>
> im Schnelltest (Seamonkey) hilft ein
> #inhalt {overflow-y: auto;}
>
>>
>> Aber der Schlüsselbegriff dürfte "Block formatting
>>> context" sein. [1] Innerhalb eines solchen gelten nämlich clear
>>> Anweisungen zuweilen weiter als geplant, gehofft. Je nach Aufbau hilft
>>> meist eine weitere float-Anweisung oder ein overflow: auto/hidden.
>>
>> Welche weitere float-Anweisung meinst du? Overflow: auto/hidden kommt
>> nicht in Frage, weil damit eventuell Inhalt abgeschnitten wird.
>
> Das ginge mit einem Rahmen div für Menu und Werbung, das dann komplett
> gefloatet würde.

So habe ich das jetzt letztendlich gemacht. Danke für den Tipp! Wenn ich
darauf gleich gekommen wäre, hätte es mir viel Arbeit erspart.

> Aber es ist eher schwer verdaulicher Stoff, eine richtig umfassende
> verständliche Erklärung zum Problem habe ich nicht gefunden. Angerissen
> wird es in diesem Artikel: Einschließen von Floats ohne zusätzliches
> Markup - easyclear - <http://jassesnee.de/easyclear/index.html> im
> Abschnitt "Eine wichtige Warnung!"

Ich bin da eher ein Anhänger von
http://de.wikipedia.org/wiki/KISS-Prinzip und beim Lesen von dem Artikel
oben wird mir mulmig zumute.

Also nochmal: danke dir! und viele Grüße,

Peter

[Susanne Jäger]

Peter Mueller schrieb am 05.04.2013 10:41:
> Susanne Jäger schrieb am 04.04.2013 21:52:
>> Peter Mueller schrieb am 04.04.2013 21:19:
>>> Susanne Jäger schrieb am 03.04.2013 15:32:

>>> Welche weitere float-Anweisung meinst du? Overflow: auto/hidden kommt
>>> nicht in Frage, weil damit eventuell Inhalt abgeschnitten wird.
>>
>> Das ginge mit einem Rahmen div für Menu und Werbung, das dann komplett
>> gefloatet würde.
>
> So habe ich das jetzt letztendlich gemacht.

ok. Aber ergänze mal noch ein
#menu {min-width: 13em;}

"Beckenbodentraining" passt nämlich hier nicht auf 160px und läuft raus.

>> Aber es ist eher schwer verdaulicher Stoff, eine richtig umfassende
>> verständliche Erklärung zum Problem habe ich nicht gefunden. Angerissen
>> wird es in diesem Artikel: Einschließen von Floats ohne zusätzliches
>> Markup - easyclear - <http://jassesnee.de/easyclear/index.html> im
>> Abschnitt "Eine wichtige Warnung!"
>
> Ich bin da eher ein Anhänger von
> http://de.wikipedia.org/wiki/KISS-Prinzip und beim Lesen von dem Artikel
> oben wird mir mulmig zumute.

KISS ist oft auch Interpretationsfrage. Jetzt hast du ein zusätzliches
markup-Element benötigt. Die "clearing mit generated content Methode"
liest sich komplizierter als sie letztlich ist [1] und sie hat in
manchen Situationen klare Vorteile gegenüber den anderen Varianten. Wenn
man statt einer Klasse .clearfix die entsprechenden styles direkt auf
die gewünschten Elemente anwendet, muss man auch wirklich nicht mehr im
markup rumpfuschen.

Gruß
Susanne


[1] dein Namensvetter Peter Müller liefert eine ganz schöne Erklärung
dazu:
<http://little-boxes.de/lb1/14.9.1-teil-1-der-kern-von-clearfix.html> da
geht es allerdings nicht um den Teil mit dem Fremd-Clearing, der dir
Probleme machte.