Infobox in Verbindung mit overflow:auto

[Leo]

Guten Morgen,

ich habe auf der angehängten Website Infoboxen (im meinem CSS heissen sie "popupbox") realisiert, wie sie in http://aktuell.de.selfhtml.org/artikel/css/infobox/index.htm beschrieben sind. Es handelt sich um eine Repertoireliste, beim hovern über den Stücktitel werden rechts Details eingeblendet.

Das funzt auch in den meisten Browsern sehr schön, nur Opera zeigt im mittleren Fenster (#middlecolumn) plötzlich einen vertikalen Scrollbalken an, was wohl mit dem "overflow:auto" zu tun hat, da die Popupbox ja außerhalb des #middlecolumn-Bereichs angezeigt wird...

Ist das, was ich zu realisieren versuche unschön, bzw. gibt es dafür eine elegantere Lösung, die auch in Opera korrekt angezeigt wird?

LiGrü Leo

[Marc]

Hallo Leo,

ich habe auf der angehängten Website Infoboxen (im meinem CSS heissen sie "popupbox") realisiert

Das funzt auch in den meisten Browsern sehr schön, nur Opera zeigt im mittleren Fenster (#middlecolumn) plötzlich einen vertikalen Scrollbalken an,

Ich habe den auch im Firefox unter Windows. Schön ist das nicht, zumal man damit nur 8-12px weiße Fläche sichtbar macht - so lange ich die Schrift nicht vergößer. Mit den Pop-Up-Boxen gibt es ein Problem bei vergrößerten Schriften (Strg und zweimal +) - Dann ist besipielsweise der Text zu Bizet teilweise nicht mehr zu lesen.

Viele Grüße,
Marc.

[Leo]

Danke für die prompte Antwort.

Ich glaub, ich hab mich falsch ausgedrückt: Der Scrollbalken rechts ist schon OK, zumal die Repertoireliste noch länger werden soll. Was mich unter Opera stört, ist ein Scrollbalken unten (also horizontal, nicht vertikal), der offenbar entsteht, weil die Popup-Box außerhalb des mittleren Bereiches, aber aus dem mittleren <div>-Bereich heraus plaziert wird...

LiGrü Leo

PS.: Die <br/>'s hab ich eh schon länger eliminiert, diese Fassung ist aber noch nicht online...

[Matze]

Hallo,

PS.: Die <br/>'s hab ich eh schon länger eliminiert, diese Fassung ist aber noch nicht online...

ich kann dir zu deinem eigentlichen Problem leider nichts sagen, aber wenn du schon dabei bist, ersetze h2 und h4 am besten auch gleich noch durch h1 und h2 und pass deren Schriftgröße mit CSS an. h1 und h3 fehlen nämlich bei dir. Ist aber nur eine Kleinigkeit.

Grüße, Matze

[Marc]

Hallo zusammen,

Danke für die prompte Antwort.

Ich glaub, ich hab mich falsch ausgedrückt: Der Scrollbalken rechts ist schon OK, zumal die Repertoireliste noch länger werden soll. Was mich unter Opera stört, ist ein Scrollbalken unten (also horizontal, nicht vertikal), der offenbar entsteht, weil die Popup-Box außerhalb des mittleren Bereiches, aber aus dem mittleren <div>-Bereich heraus plaziert wird...

Was passiert, wenn Du der mittleren Spalte ein Breite gibst? Tritt das Phänomen dann auch noch auf?

Mal so am Rande: Die ganzen Texte gehören in Absätze, nicht in divs. Warum folgt eine H4 der H2?

Viele Grüße,
Marc.

[Leo]

Was passiert, wenn Du der mittleren Spalte ein Breite gibst? Tritt das Phänomen dann auch noch auf?

Ich wollte auch Leuten mit kleinerer Bilschirmauflösung eine Chance geben und hab daher die Breite der Mittelspalte nur mit max-width statt mit width festgesetzt. Das ist auch der Grund, warum ich das Ganze auch nach unten begrenzt habe. Ich persönlich find die Scrollbalken nicht so störend.

Mal so am Rande: Die ganzen Texte gehören in Absätze, nicht in divs.

Ich weiß, dass das so gehört, aber dann funktioniert das Infobox-Ding nicht mehr...

Warum folgt eine H4 der H2?

Das mit den Headern ist etwas, woran ich zugegebenermaßen noch arbeiten muß. Ich habe da, wie Matze völlig richtig vermutet, eher nach der Header-Größe als nach dem semantischen Kontext eingeteilt. Aber noch ist die Seite ja nicht online und ich lerne stündlich dazu! ;-)

LiGrü Leo

[Marc]

Hallo Leo,

Was passiert, wenn Du der mittleren Spalte ein Breite gibst? Tritt das Phänomen dann auch noch auf?
Ich wollte auch Leuten mit kleinerer Bilschirmauflösung eine Chance geben und hab daher die Breite der Mittelspalte nur mit max-width statt mit width festgesetzt. Das ist auch der Grund, warum ich das Ganze auch nach unten begrenzt habe. Ich persönlich find die Scrollbalken nicht so störend.

Mir scheint das Ganze ohne Konzept aufgesetzt zu sein. Vielleicht irre ich mich, aber kann es sein, dass es allerhand nette Gimmicks gibt, über die du mehr oder weniger zufällig gestolpert bist und die Du dann in die Seite einbauen wolltest?

Zum Beispiel die Infoboxen. Ich kann verstehen, wenn man so etwas für Links umsetzt, für Flächen also, über die man sowieso mit der Maus fährt oder die man antabbt. Schön wenn man vor dem Klick weitere Infos zu dem bekommt, was jetzt gleich passiert.

Aber woher weißt du, dass jemand die Seite mit der Maus abfährt. Gut, da Du den größten Teil der Seite so hinterlegt hast, wird das automatisch passieren. Das heißt dann aber doch für den Nutzer, dass er auf allen Folgeseiten mit der Maus über die Inhalte fahren muss, um herauszufinden, ob es versteckte Informationen gibt, die er sich durch die Rumfahrerei erschließen kann.

Was ist übrigens mit Leuten die keine Maus haben, aber einen kleinen Bildschirm (z. B. Handheld, Handy), die sich durch die Seite tabben (manche Programmierer, Behinderte, Eilige)?

Wenn Du nicht diese ganzen Probleme lösen willst, solltest du auf die Infoboxen für DIESEN Zweck verzichten. Hier machen die meiner Meinung nach keinen Sinn. Mir erschließt sich die Logik hinter der Versteckerei jedenfalls nicht.

Mal so am Rande: Die ganzen Texte gehören in Absätze, nicht in divs.
Ich weiß, dass das so gehört, aber dann funktioniert das Infobox-Ding nicht mehr...

Natürlich kannst Du um die ganzen spans ein p setzen - warum soll das dann nicht mehr funktionieren?

Allerdings würde ich für den Komponisten-Namen eine Überschrift empfehlen...

Warum folgt eine H4 der H2?
Das mit den Headern ist etwas, woran ich zugegebenermaßen noch arbeiten muß. Ich habe da, wie Matze völlig richtig vermutet, eher nach der Header-Größe als nach dem semantischen Kontext eingeteilt. Aber noch ist die Seite ja nicht online und ich lerne stündlich dazu! ;-)

Das ist die Hauptsache!

Marc.

[Leo]

Mir scheint das Ganze ohne Konzept aufgesetzt zu sein.

Also eigentlich hab ich mir schon so meine Gedanken gemacht und nicht einfach "Gimmicks zusammengetragen"

Zum Beispiel die Infoboxen. Ich kann verstehen, wenn man so etwas für Links umsetzt, für Flächen also, über die man sowieso mit der Maus fährt oder die man antabbt. Schön wenn man vor dem Klick weitere Infos zu dem bekommt, was jetzt gleich passiert.

Das habe ich auf den Seiten mit Links auch so gemacht.

Aber woher weißt du, dass jemand die Seite mit der Maus abfährt. Gut, da Du den größten Teil der Seite so hinterlegt hast, wird das automatisch passieren. Das heißt dann aber doch für den Nutzer, dass er auf allen Folgeseiten mit der Maus über die Inhalte fahren muss, um herauszufinden, ob es versteckte Informationen gibt, die er sich durch die Rumfahrerei erschließen kann.

Ich glaube, dass die anderen Seiten so strukturiert sind, dass man intuitiv erraten kann, ob sich irgendwo zusätzliche Inhalte verstecken.

Was ist übrigens mit Leuten die keine Maus haben, aber einen kleinen Bildschirm (z. B. Handheld, Handy), die sich durch die Seite tabben (manche Programmierer, Behinderte, Eilige)?

Für kleine Schirme werde ich selbstverständlich ein eigenes CSS bauen, bei dem die Zusatzinfo direkt unter dem Stücktitel steht. Selbiges natürlich auch für print, tty oder braille

Wenn Du nicht diese ganzen Probleme lösen willst, solltest du auf die Infoboxen für DIESEN Zweck verzichten. Hier machen die meiner Meinung nach keinen Sinn. Mir erschließt sich die Logik hinter der Versteckerei jedenfalls nicht.

Ich finde es, ehrlich gesagt, übersichtlicher so: Wenn jemand schon von sich aus genug über die Stücke weiß, dann kann er gleich weiterlesen, wer Infos braucht, kann sie sich auch leicht holen...

Aber das ist wohl auch ein wenig Geschmacksache...

Aber um zurückzukommen auf mein ursprüngl. Problem: Weiß jemand eine Lösung, ohne dass ich die Breite des Mittelfensters fixiere?

LiGrü
Leo

[Marc]

Hallo zusammen,

Mir scheint das Ganze ohne Konzept aufgesetzt zu sein.
Also eigentlich hab ich mir schon so meine Gedanken gemacht und nicht einfach "Gimmicks zusammengetragen"

Tschuldigung, war ein bißchen überspitzt formuliert...

Dass Du Dir Gedanken gemacht hast, sieht man - ich hatte eher den Eindruck, als wäre es - zumindest was die Boxen angeht, nicht zu Ende gedacht. Aber vielleicht sind mir auch einfach andere Dinge wichtig als Dir (z. B. Barrierefreiheit).

Zum Beispiel die Infoboxen. Ich kann verstehen, wenn man so etwas für Links umsetzt, für Flächen also, über die man sowieso mit der Maus fährt oder die man antabbt. Schön wenn man vor dem Klick weitere Infos zu dem bekommt, was jetzt gleich passiert.
Das habe ich auf den Seiten mit Links auch so gemacht.

Und da wo es keine Links gibt, machst Du es auch.

Ich glaube, dass die anderen Seiten so strukturiert sind, dass man intuitiv erraten kann, ob sich irgendwo zusätzliche Inhalte verstecken.

Also auf der einen Seite, die du online gestellt hast, gibt es keinen Hinweis auf die versteckten Inhalte - auf anderen Seiten, die Links enthalten verfolgst du dann ein zweites Konzept - finde ich persönlich schwierig zu durchschauen...

Was ist übrigens mit Leuten die keine Maus haben, aber einen kleinen Bildschirm (z. B. Handheld, Handy), die sich durch die Seite tabben (manche Programmierer, Behinderte, Eilige)?
Für kleine Schirme werde ich selbstverständlich ein eigenes CSS bauen, bei dem die Zusatzinfo direkt unter dem Stücktitel steht. Selbiges natürlich auch für print, tty oder braille

Wozu für braille? Kein mensch nutzt das...

Steht der Aufwand bei so vielen CSS noch in einem vertretbaren Verhältnis zum Nutzen? Wahrscheinlich für Dich schon, sonst würdest Du es ja nicht machen...

Wenn Du nicht diese ganzen Probleme lösen willst, solltest du auf die Infoboxen für DIESEN Zweck verzichten. Hier machen die meiner Meinung nach keinen Sinn. Mir erschließt sich die Logik hinter der Versteckerei jedenfalls nicht.
Ich finde es, ehrlich gesagt, übersichtlicher so: Wenn jemand schon von sich aus genug über die Stücke weiß, dann kann er gleich weiterlesen, wer Infos braucht, kann sie sich auch leicht holen...

Übersichtlicher als

Komponist 1
-----------

STÜCK 1
Erläuterung Erläuterung Erläuterung Erläuterung Erläuterung
Erläuterung Erläuterung Erläuterung Erläuterung Erläuterung Erläuterung Erläuterung Erläuterung

STÜCK 2
Erläuterung Erläuterung Erläuterung Erläuterung Erläuterung
Erläuterung Erläuterung Erläuterung Erläuterung Erläuterung Erläuterung

Komponist 2
-----------

STÜCK 1
Erläuterung Erläuterung Erläuterung Erläuterung Erläuterung
Erläuterung Erläuterung Erläuterung Erläuterung Erläuterung Erläuterung Erläuterung Erläuterung

Ich finde es gut - und jeder ist daran gewöhnt - wenn der Text zu einer Überschrift direkt unter der Überschrift folgt und nicht erst durch Überfahren mit der Maus herausgekitzelt werden muss - aber cool aussehen tut es...

Aber das ist wohl auch ein wenig Geschmacksache...

Jein - ob es einem gefällt ist Geschmackssache - dass es weniger gut nutzbar ist, lässt sich schon daran ersehen, dass Du Menschen ohne Maus und Blinde schlichtweg vergessen hast. Die werden an diese doch interessanten Informationen niemals kommen.

Aber um zurückzukommen auf mein ursprüngl. Problem: Weiß jemand eine Lösung, ohne dass ich die Breite des Mittelfensters fixiere?

Irgendwie hängt das doch damit zusammen, oder? Aber wir sollten das vielleicht abschließen. Meiner Meinung nach wirst Du um eine feste Breite (die Du ja explizit für Opera angeben kannst) nicht herum kommen.

Viele Grüße,
Marc.

[Leo]

Meiner Meinung nach wirst Du um eine feste Breite (die Du ja explizit für Opera angeben kannst) nicht herum kommen.

Die feste Breite löst das Problem bei Opera leider nicht.
LiGrü Leo

[Marc]

Hallo Leo,

übrigens solltest du in einem HTML-Dokument auf den Einsatz von XHTML verzichten (der Validator (s. u.) zeigt Dir schon, was ich meine)...

Viele Grüße,
Marc.

[Felix Riesterer]

Lieber Leo,

nur Opera zeigt im mittleren Fenster (#middlecolumn) plötzlich einen vertikalen Scrollbalken an, was wohl mit dem "overflow:auto" zu tun hat, da die Popupbox ja außerhalb des #middlecolumn-Bereichs angezeigt wird...

und wenn Du overflow:hidden benutzt?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Marc]

Hallo zusammen,

Lieber Leo,

nur Opera zeigt im mittleren Fenster (#middlecolumn) plötzlich einen vertikalen Scrollbalken an, was wohl mit dem "overflow:auto" zu tun hat, da die Popupbox ja außerhalb des #middlecolumn-Bereichs angezeigt wird...

und wenn Du overflow:hidden benutzt?

Werden die texte nicht mehr vollständig angezeigt. :-)

Ich persönlich halte davon eh nichts, so eine lange schmale Spalte zu basteln, die man kilometerweit scrollen muss... - ich hätte gerne das gesamte Repertoire (oder doch wenigstens so viel wie möglich) auf einen Blick.

Die vorliegende Seite würde ich persönlich lieber ohne CSS ansehen - ist ja nur ein Klick. Dann ahbe ich alles deutlich übersichtlicher schwarz auf weiß. :-)

Viele Grüße,
Marc.

[Marc]

Hallo zusammen,

Die vorliegende Seite würde ich persönlich lieber ohne CSS ansehen - ist ja nur ein Klick. Dann ahbe ich alles deutlich übersichtlicher schwarz auf weiß. :-)

Obwohl: hier machen sich dann wieder die fehlenden Überschriften der Stücke negativ bemerkbar - an der Benutzbarkeit der Seite ließe sich also sicher noch das eine oder andere verbessern.

Aber das war ja nicht die Frage.

Viele Grüße,
Marc.