horizontale Navigation und CSS-Popup

[Gunther]

Hallo Forumer!

Zu folgender Aufgabenstellung finde ich keine geeignete Lösung:

‎————————————————————————————————————————————————————————————————
   | Link 1 |    | Link 2 |    |Link 3 |    |Link 4 |    | Link 5 |
   ‎————————————————————————————————————————————————————————————————
   | (Hier soll beim Hovern des Links oben der jeweilige Text     |
   | angezeigt werden!)                                           |
   ‎————————————————————————————————————————————————————————————————

In einer horizontalen Navigation befinden sich 5 Links. Beim Hovern der Links soll dazu jeweils ein Text in einer (permanenten) Zeile darunter angezeigt werden. Das Ganze soll rein mit CSS und auch IE tauglich realisiert werden und muss so gestaltet sein, dass die Schrift skalierbar bleibt.

So wie ich die Sache sehe, gibt es vom Grundsatz her ja nur 2 Möglichkeiten, die Links horizontal anzuordnen:

1. die <a> Elemente defaultmäßig als Inline Elemente belassen
  2. die <a> Elemente als Blocklevel Elemente formatieren und floaten

Damit das Ganze auch im IE funktioniert, muss der anzuzeigende Text ja innerhalb von <a href="..."> und </a> stehen.

Also vorzugsweise so:

<a href="..."> Link-Text <span> zusätzlicher Text </span></a>

(das Prinzip ist das der 'CSS Popups')

Mein Problem besteht nun primär darin, dass ich den Zusatztext nicht linksbündig in eine separate Zeile kriege (das Layout der Seite ist 'flexibel', also keine festen Größen vorhanden).

Hat jemand eine Idee oder einen Vorschlag, wie das zu lösen wäre?

Gruß Gunther

[fab]

schau mal vielleicht hilft dir das weiter:

http://www.alistapart.com/d/hybrid/hybrid-4.html

fab

[Gunther]

Hi fab,

schau mal vielleicht hilft dir das weiter:

http://www.alistapart.com/d/hybrid/hybrid-4.html

nein nicht wirklich. Ich kenne den Artikel bereits. Das ist zwar vom Prinzip her etwas Ähnliches, aber erstens handelt es sich dabei um ein zweizeiliges Menü und zweitens funktioniert der "Hover-Effekt" im IE nur per JS.

BTW: Die Skalierbarkeit des ganzen ist miserabel und ohne Imageanzeige fast unbrauchbar (die Beispiele auf ALA waren auch schon mal besser...).

Trotzdem besten Dank für deinen Hinweis!

Gruß Gunther

[Ingo Turski]

Hi,

dann schau Dir mal http://www.1ngo.de/web/infobox.html an.
Der Text erscheint unter dem Link an einer zu bestimmenden x-Position.

freundliche Grüße
Ingo

[Gunther]

Hi Ingo,

dann schau Dir mal http://www.1ngo.de/web/infobox.html an.
Der Text erscheint unter dem Link an einer zu bestimmenden x-Position.

na aber selbstverständlich kenne ich deine Seite(n) und auch das Beispiel ;-) !

Du benutzt aber (wie viele andere auch) ein position:absolute zur Positionierung. Mein Zusatztext soll aber ja immer linksbündig unter den Links beginnen (und das Layout ist ja flexibel), weshalb ich mit position:absolute so meine Schwierigkeiten habe.

Irgendeine Idee?

Gruß Gunther

[Ingo Turski]

Hi,

Du benutzt aber (wie viele andere auch) ein position:absolute zur Positionierung. Mein Zusatztext soll aber ja immer linksbündig unter den Links beginnen (und das Layout ist ja flexibel), weshalb ich mit position:absolute so meine Schwierigkeiten habe.

wieso? Definiere linksbündig. Linksbündig zu welcher Box? Gebe dieser position:relative und Du kannst left:0 angeben.

freundliche Grüße
Ingo

[Gunther]

Hi Ingo,

Du benutzt aber (wie viele andere auch) ein position:absolute zur Positionierung. Mein Zusatztext soll aber ja immer linksbündig unter den Links beginnen (und das Layout ist ja flexibel), weshalb ich mit position:absolute so meine Schwierigkeiten habe.
wieso? Definiere linksbündig. Linksbündig zu welcher Box? Gebe dieser position:relative und Du kannst left:0 angeben.

na linksbündig eben (siehe Abb. 1. Posting), egal welcher Link gehovert wird, immer am linken Rand der umschließenden Box (also bspw. der Headerbox).

Da der Span-Tag aber ja innerhalb des A-Tags steht, müsste ich ihn ja auf jeden Fall aus dem "normalen Fluß" nehmen (also entfällt die Verwendung von position:relative). Und position:absolute kann ich nicht nehmen, da das Layout ja 'flexibel' ist.

Ich bin zu der Überzeugung gekommen, dass das so nicht geht.
Versuche gerade dieses Hybrid-Beispiel aus ALA mit der Sliding Doors Technik (auch ALA) zu kombinieren, sodass eine Skalierbarkeit des Menüs erhalten bleibt.

Ich kriege darüber gleich die Krise ..., alles ein 'Rumgetrickse' (floats ohne width-Angabe machen Probleme hauptsächlich in den Operas)!

Über ein bischen Unterstützung (morgen, bzw. heute) würde ich mich echt freuen ;-)

Gruß Gunther

[Ingo Turski]

Hi,

Linksbündig zu welcher Box? Gebe dieser position:relative und Du kannst left:0 angeben.

na linksbündig eben (siehe Abb. 1. Posting), egal welcher Link gehovert wird, immer am linken Rand der umschließenden Box (also bspw. der Headerbox).

Da der Span-Tag aber ja innerhalb des A-Tags steht, müsste ich ihn ja auf jeden Fall aus dem "normalen Fluß" nehmen (also entfällt die Verwendung von position:relative). Und position:absolute kann ich nicht nehmen, da das Layout ja 'flexibel' ist.

Nein. Beschäftige Dich mit position:relative und position:absolute. Aus http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position:
"Besonders das Verhalten der Angaben absolute und relative ist anfangs etwas verwirrend. Denn absolute verhält sich durchaus relativ, wie die inneren div-Elemente im obigen Beispiel zeigen: relativ nämlich zum Rand des Elternelements, vorausgesetzt dieses Elternelement ist mit absolute, fixed oder relative positioniert."
*Nur* "Wenn sonst kein Elternelement existiert, ist das body-Element das Elternelement."

Lies bitte mein Zitat nochmal genau, versuche zu verstehen und interpretiere es so:

Gebe dieser [umschließenden Box] position:relative und Du kannst [für den span position:absolute und] left:0 angeben.

Auf der Seite meiner Infobox steht extra auch: "ich gebe über 'left:' den Abstand des Textbereichs zum linken Rand (hier vom <body>, da keine weiteren positionierten Elemente vorhanden sind) an".

Ich kriege darüber gleich die Krise ..., alles ein 'Rumgetrickse' (floats ohne width-Angabe machen Probleme hauptsächlich in den Operas)!

nö, nicht immer. Manchmal kann aber auch min-width etwas helfen.

freundliche Grüße
Ingo

[Gunther]

Hi Ingo,

also ich habe jetzt Mal ein Beispiel hochgeladen.

Einzig der FF (Gecko Browser) machen es imho richtig.
Der IE und Opera interpretieren beide jeweils die width Angabe für den absolut positionierten Bereich unterschiedlich.

Ich bin mit meinem Latein definitiv am Ende. Wenn es eine Lösung für das Gewünschte gibt, wäre ich sehr dankbar, wenn du (oder auch gerne wer anders) sie nennen würde.

Gruß Gunther

[Ingo Turski]

Hi,

also ich habe jetzt Mal ein Beispiel hochgeladen.

und wo/wie in Deinen ganzen vorhandenen bzw. nicht vorhandenen DCSS-Dateien hast Du die Klasse linktext definiert?

freundliche Grüße
Ingo

[Gunther]

Hi,

also ich habe jetzt Mal ein Beispiel hochgeladen.
und wo/wie in Deinen ganzen vorhandenen bzw. nicht vorhandenen DCSS-Dateien hast Du die Klasse linktext definiert?

gar nicht, aber was ändert das an dem Problem?
Das ist ein "Arbeitsbeispiel" bei dem die CSS-Anweisungen noch auf mehrere Dateien verteilt sind und halt im HTML Quelltext ein paar überflüssige Dinge herumgeistern (, die mit der Sache aber nichts zu tun haben).

Wichtig sind für das Problem eigentlich nur:
layout.css und
main-menu.css

Gruß Gunther

[Gunther]

Hi,

mir ist schon klar, wo das Problem liegt. Ich finde nur keine Lösung, bzw. keinen Weg, wie ich es vermeiden könnte.

Und zwar besteht das Problem in der Breite des Span Elementes (welches per position:absolute und display:block ja eigentlich die volle Breite des Elternelementes einnehmen müsste, also in diesem Fall vom Header-Div).

Wie gesagt macht das so nur der FF. Opera und IE hingegen "vererben" die Breite des A Elementes, welches das Span umgibt.

Da ich dem Span aber aufgrund des flexiblen Layouts keine explizite Breite verpassen kann, habe ich ein Problem.

Gruß Gunther

[Ingo Turski]

Hi,

Und zwar besteht das Problem in der Breite des Span Elementes (welches per position:absolute und display:block ja eigentlich die volle Breite des Elternelementes einnehmen müsste, also in diesem Fall vom Header-Div).

Nein; eben nicht! Ein absolut positioniertes Element bekonmmt zwar automatisch eine Blocklevel-Eigenschaft, diese beinhaltet jedoch (genau wie bei float) nicht die Ausdehnung über die zur Verfügung stehende Breite. Diese mußt Du schon noch angeben, um Anzeigeunterschiede zu verhindern.

freundliche Grüße
Ingo

[Detlef G.]

Hallo Ingo

... diese beinhaltet jedoch (genau wie bei float) nicht die Ausdehnung über die zur Verfügung stehende Breite. Diese mußt Du schon noch angeben, um Anzeigeunterschiede zu verhindern.

Er hat 100% angegeben.

Der Firefox interpretiert diese als 100% des Elements, auf das sich auch die
Positionierung bezieht.
Der IE nimmt, wie es aussieht, wohl 100% abzüglich der Position des Links
und Opera die Breite des Links.
Ohne Breitenangabe, mit left: 0; und right: 0; wird es im Firefox auf die
zur Verfügung stehende Breite gestreckt (wie zu erwarten), aber weder IE
noch Opera lassen sich davon beeindrucken.

Für den IE könnte zwar eine feste Breite angegeben werden, weil mangels
max-width für diesen auch der Seiteninhalt eine feste Breite (in em) hat,
aber Opera bleibt ein Problem.

Auf Wiederlesen
Detlef

[Gunther]

Hallo Detlef,

... diese beinhaltet jedoch (genau wie bei float) nicht die Ausdehnung über die zur Verfügung stehende Breite. Diese mußt Du schon noch angeben, um Anzeigeunterschiede zu verhindern.

Er hat 100% angegeben.

Der Firefox interpretiert diese als 100% des Elements, auf das sich auch die
Positionierung bezieht.
Der IE nimmt, wie es aussieht, wohl 100% abzüglich der Position des Links
und Opera die Breite des Links.
Ohne Breitenangabe, mit left: 0; und right: 0; wird es im Firefox auf die
zur Verfügung stehende Breite gestreckt (wie zu erwarten), aber weder IE
noch Opera lassen sich davon beeindrucken.

Für den IE könnte zwar eine feste Breite angegeben werden, weil mangels
max-width für diesen auch der Seiteninhalt eine feste Breite (in em) hat,
aber Opera bleibt ein Problem.

endlich einer, der mein Problem erkannt hat ;-) (hatte schon ernste Selbstzweifel ...)

Irgendeine Idee?

Wenn ich den Links eine "feste" prozentuale Weite gebe (bspw. 20%/Link , bei 5 Links = 100%), dann könnte ich für Opera dem Span width:500% verpassen (wobei dann beim Zoomen wieder die Rundungsprobleme bei Prozentangaben auftauchen).

Mir ist aber keine CSS-Hack-Konstruktion bekannt, die alle Operas von allen Geckos differenzieren würde. Außerdem habe ich noch gar nicht geguckt, was die anderen Browser (Konqueror, Safari & Co.) dazu sagen.

Gruß Gunther

PS: Ich war schon wählen! Du auch?

[Ingo Turski]

Hi,

Irgendeine Idee?

Ja. width nur für den IE und ansonsten den span über left:0; right:0; auf die volle Breite bringen - und diesen Bug dann bei Opera melden. ;-)

freundliche Grüße
Ingo

[Detlef G.]

Hallo Ingo

Irgendeine Idee?
Ja. width nur für den IE und ansonsten den span über left:0; right:0; auf die volle Breite bringen - und diesen Bug dann bei Opera melden. ;-)

Dazu dann noch ein min-width angeben, damit dann im Opera wenigstens eine
vernünftige Textbox erscheint, wenn schon keine komplette Zeile.

Auf Wiederlesen
Detlef

[MudGuard]

Hi,

Mir ist aber keine CSS-Hack-Konstruktion bekannt, die alle Operas von allen Geckos differenzieren würde.

Meines Wissens ist Opera der einzige Browser, der auf die verrückte Idee kommt, das elternlose html-Element könnte das erste Kind der (nicht-existenten) Eltern sein, sprich: der Selektor html:first-child wird nur von Opera interpretiert.

cu,
Andreas

[Gunther]

Hallo Andreas,

Mir ist aber keine CSS-Hack-Konstruktion bekannt, die alle Operas von allen Geckos differenzieren würde.

Meines Wissens ist Opera der einzige Browser, der auf die verrückte Idee kommt, das elternlose html-Element könnte das erste Kind der (nicht-existenten) Eltern sein, sprich: der Selektor html:first-child wird nur von Opera interpretiert.

Ja, zumindest wohl ab Version 7 (genauer 7.2) und bis hoch zur aktuellen Version 8.02!

Hab's auch (wieder)gefunden bei Herrn Lipfert (known as Cyx23):
http://www.lipfert-malik.de/webdesign/tutorial/bsp/kristof-lipfert-opera7-css-crossover.html

Dort gibt es auch noch passende CSS-Weichen für OP 4-6 (hätte man also alle erfasst, außer 7.0 - 7.1).

Vielen Dank für den Hinweis!

Gruß Gunther

[Ingo Turski]

Hi,

... diese beinhaltet jedoch (genau wie bei float) nicht die Ausdehnung über die zur Verfügung stehende Breite. Diese mußt Du schon noch angeben, um Anzeigeunterschiede zu verhindern.

Er hat 100% angegeben.

sicher? Als ich nachgeschaut hatte, fand ich nichts und fand mich auch bestätigt:

und wo/wie in Deinen ganzen vorhandenen bzw. nicht vorhandenen DCSS-Dateien hast Du die Klasse linktext definiert?
gar nicht, aber was ändert das an dem Problem?

Der Firefox interpretiert diese als 100% des Elements, auf das sich auch die
Positionierung bezieht.

Das stimmt. Die Frage ist, wer hier "containing block" korrekt interpretiert.

Ohne Breitenangabe, mit left: 0; und right: 0; wird es im Firefox auf die
zur Verfügung stehende Breite gestreckt (wie zu erwarten), aber weder IE
noch Opera lassen sich davon beeindrucken.

Hier dürfte Opera eindeutig falsch liegen. Denn selbst wenn man bzgl. der Breite den Link als containing block betrachtet, ist der Bezugsrahmen zur Positionierung die äußere Box mit position:relative.

Für den IE könnte zwar eine feste Breite angegeben werden, weil mangels
max-width für diesen auch der Seiteninhalt eine feste Breite (in em) hat,
aber Opera bleibt ein Problem.

das zu lösen wohl nur über eine konkrete Breitenangabe geht. Über em könnte diese zumindest passend zum Inhalt gewählt werden. Eine andere Lösung wäre, auf ebenfalls die 100%-Breite zu verzichten und dafür zu sorgen, daß der Infotext nicht umzubrechen ist.

freundliche Grüße
Ingo

[Gunther]

Hi Ingo,

Und zwar besteht das Problem in der Breite des Span Elementes (welches per position:absolute und display:block ja eigentlich die volle Breite des Elternelementes einnehmen müsste, also in diesem Fall vom Header-Div).
Nein; eben nicht! Ein absolut positioniertes Element bekonmmt zwar automatisch eine Blocklevel-Eigenschaft, diese beinhaltet jedoch (genau wie bei float) nicht die Ausdehnung über die zur Verfügung stehende Breite. Diese mußt Du schon noch angeben, um Anzeigeunterschiede zu verhindern.

Ja sorry - mein Fehler!
Allerdings habe ich ja (wie Detlef auch schon bemerkt hat) dem Span-Element eine width:100% zugewiesen.

Gruß Gunther