Menü problematisch bei anderer Schriftgröße

[Christian Eyrich]

Hallo zusammen,

folgendes Konstrukt

<div id="menue">
<a href="index.htm">Home<span> Hier geht es zur Startseite</span></a><br>
<a href="navi/up.htm">Updates<span> &Uuml;bersicht der Updates</span></a>
</div>

welches u.a. durch folgendes CSS gesteuert wird (in der Anwendung natürlich noch schöner gestaltet)

div#menue a span {display: none;}

div#menue a:hover span
{
 display: block;
 position: absolute;
 top: 100pt; left: 0; width: 125px;
}

Die Erläuterung der einzelnen Links wird also unter ihnen angezeigt.
Alles schön und gut. Das Problem ist nun, daß wenn die Schriftgröße vom User verändert (insbesondere erhöht) wird, wird die Erklärung über die Links selbst gepinselt.
Fällt euch dazu eine Lösunge ein? Irgendwas, womit man die Positionierung relativ zum div-Ende oder einem anderen zu definierenden Punkt unterhalb aller Links angeben kann?

Gruß,
Christian

[Kai Lahmann]

hi

Fällt euch dazu eine Lösunge ein? Irgendwas, womit man die Positionierung relativ zum div-Ende oder einem anderen zu definierenden Punkt unterhalb aller Links angeben kann?

arbeite mit einem möglichst hohen %-Wert. Bis ca. 80% biste noch über der Schrift (normalerweise)

Grüße aus Bleckede

Kai

[Christian Eyrich]

Tag Kai,

Fällt euch dazu eine Lösunge ein? Irgendwas, womit man die Positionierung relativ zum div-Ende oder einem anderen zu definierenden Punkt unterhalb aller Links angeben kann?

arbeite mit einem möglichst hohen %-Wert. Bis ca. 80% biste noch über der Schrift (normalerweise)

Äh, bitte? Bei welcher Angabe - top: 80%; left: 0; width: 125px;?

Dann werden die Erläuterungen aber schon bei normaler Schriftgröße fast am Seitenende angezeigt. Oder habe ich Dich falsch verstanden?

Gruß,
Christian

[Kai Lahmann]

hi

Äh, bitte? Bei welcher Angabe - top: 80%; left: 0; width: 125px;?

Dann werden die Erläuterungen aber schon bei normaler Schriftgröße fast am Seitenende angezeigt. Oder habe ich Dich falsch verstanden?

achso.. da fehlte noch was. Verpass den links ein position:relative, dann bezieht sich diese position darauf und nicht mehr auf die gesamte Seite.

Grüße aus Bleckede

Kai

[Christian Eyrich]

'n Abend,

ich glaube ich steh' ziemlich auf dem Schlauch, Kai.

div#menue a:hover span
{
 display: block;
 position: relative;
 top: 100%; left: 0; width: 125px;
}

resultiert nur darin, daß die in <span> eingefaßte Texte zwischen dem eigenen und dem nächsten Link angezeigt werden, aber nicht unterhalb aller Links.

Ich glaube, am besten zeige ich mal, wie das Ding komplett aussieht (siehe Link)

Gruß,
Christian

[Kai Lahmann]

hi

ich glaube ich steh' ziemlich auf dem Schlauch, Kai.

resultiert nur darin, daß die in <span> eingefaßte Texte zwischen dem eigenen und dem nächsten Link angezeigt werden, aber nicht unterhalb aller Links.

merkt man ;) das <a>um das <span> herum, nicht das <span> selbst auf position:reelative; setzen - das <span> bleibt absolute.

Grüße aus Bleckede

Kai

[Tim Tepaße]

Hi,

merkt man ;) das <a>um das <span> herum, nicht das <span> selbst auf position:reelative; setzen - das <span> bleibt absolute.

Dann schwebt bei mir der erläuternde Text über dem restlichen Münetext - auch kein schlechter Effekt.

Ich habe gerade mal etwas rumgespielt, das <a> nicht auf relative gesetzt, das <span> absolut positioniert gelassen, aber die Angaben in em gemacht. In meinem Mozilla wirkte es auch, der erläuternde Text blieb immer unter dem Menü, egal wieviel man an der Schrift rumfrickelte.
Aaaaaallerdings: Ich wußte bisher nicht, daß em auch auf sonstige Größenangaben wirken kann außer auf Text - Tatsache?

Grüße,
  Tim

[Christian Eyrich]

Hi nochmal,

Dann schwebt bei mir der erläuternde Text über dem restlichen Münetext - auch kein schlechter Effekt.

So nicht, das stimmt.

Ich habe gerade mal etwas rumgespielt, das <a> nicht auf relative gesetzt, das <span> absolut positioniert gelassen, aber die Angaben in em gemacht. In meinem Mozilla wirkte es auch, der erläuternde Text blieb immer unter dem Menü, egal wieviel man an der Schrift rumfrickelte.

Da hast Du recht, das skaliert sehr viel besser wenn man die Verhältnisse von Schriftgröße, Position und Feldbreite richtig wählt.

Aber wie es aussieht, gibt es wirklich keine Möglichkeit, die Position eines Elements an einem beliebigen anderen festzumachen als am Parent bzw. Bodyrahmen.

Aber gut, dafür langt's so erstmal.

Aaaaaallerdings: Ich wußte bisher nicht, daß em auch auf sonstige Größenangaben wirken kann außer auf Text - Tatsache?

Hm, warum nicht?
Punkt ist ja auch nicht gerade das klassische Maß für Boxbreiten.

Danke,
Christian

[Christian Eyrich]

Ich habe gerade mal etwas rumgespielt, das <a> nicht auf relative gesetzt, das <span> absolut positioniert gelassen, aber die Angaben in em gemacht. In meinem Mozilla wirkte es auch, der erläuternde Text blieb immer unter dem Menü, egal wieviel man an der Schrift rumfrickelte.

Da hast Du recht, das skaliert sehr viel besser wenn man die Verhältnisse von Schriftgröße, Position und Feldbreite richtig wählt.

Naja, ist der Abstand bei Normalgröße mit em so eingestellt wie vorher mit pt, gibt's Probleme mit Skalierung nach unten.
Soll er da auch stimmen, wird der Abstand Beschreibung zum Menü schon arg groß bei > 150%.
Oder ist es bei Dir anders? Mail mir dann doch bitte mal die von Dir ausgetüftelten Werte.

Gute Nacht,
Christian

[Tim Tepaße]

Hi,

Oder ist es bei Dir anders? Mail mir dann doch bitte mal die von Dir ausgetüftelten Werte.

Du hast Glück, daß ich noch gerade fasziniert Mozillas Tab-Lesezeichenfunktion entdeckt habe und noch nicht in Richtung bett verschwunden war. ;-)

Ich habe mein Rumfummelexemplar Deiner Seite mal hochgeladen:
http://www.blackshirt.de/tmp/test/Nav-Testseite.html

Gute nacht und mach nicht mehr so lange! ;-)

Tim

[Christian Eyrich]

Hallo nochmal,

Du hast Glück, daß ich noch gerade fasziniert Mozillas Tab-Lesezeichenfunktion entdeckt habe und noch nicht in Richtung bett verschwunden war. ;-)

Dann habe ich Mozilla also noch mehr zu verdanken als bisher. ;-)

Ich habe mein Rumfummelexemplar Deiner Seite mal hochgeladen:
http://www.blackshirt.de/tmp/test/Nav-Testseite.html

Danke, hab's mir angesehen. Aber auch der von Dir eingsetzte Code schiebt schon bei 75% Skalierung die Erläuterung über die Navigation.

Gute nacht und mach nicht mehr so lange! ;-)

Vergebens, es wurde doch wieder vier Uhr ...

Bye,
Christian

[David Bruchmann]

Du kannst im CSS absolute Schriftgrößen Angaben. Die können im Browser normalerweise nicht verändert werden. Ist natürlich schwierig bei verschiedenen Auflösungen.

div#nurnenvorschlag {  font-size:10pt; font-family: tahoma, verdana, Helvetica; color:#002450; }

Gruß
David

[Kai Lahmann]

hi

Du kannst im CSS absolute Schriftgrößen Angaben. Die können im Browser normalerweise nicht verändert werden. Ist natürlich schwierig bei verschiedenen Auflösungen.

da bist du auf dem Holzweg, außer dem IE können das alle.

Grüße aus Bleckede

Kai

[David Bruchmann]

NN 4.7 nicht, aber der leigt neben dem Weg ;-))

Gruß
David

[Kai Lahmann]

hi

NN 4.7 nicht, aber der leigt neben dem Weg ;-))

und ist in diesem Zusammenhang wurscht - dank fehlendem :hover kommt da so oder so nix.

Grüße aus Bleckede

Kai

p.s. das ganze hat bei mir immer nur in Mozilla geklappt (also der CSS-Tooltipp), geht das bei irgendwem noch woanders?

[David Bruchmann]

p.s. das ganze hat bei mir immer nur in Mozilla geklappt (also der CSS-Tooltipp), geht das bei irgendwem noch woanders?

Was meinst Du genau ?

[molily]

Hallo David,

p.s. das ganze hat bei mir immer nur in Mozilla geklappt (also der CSS-Tooltipp), geht das bei irgendwem noch woanders?

Was meinst Du genau ?

*lol* Vielen Dank für diese halbe Minute Fröhlichkeit, ich lache selten so herzhaft. ("Das ist nicht böse gemeint.")
Du hast nicht etwas zufällig mitbekommen, worum es in diesem Thread geht...?

Mathias
(Dieses Posting hat keinen Inhalt.)

[David Bruchmann]

Hallo David,

p.s. das ganze hat bei mir immer nur in Mozilla geklappt (also der CSS-Tooltipp), geht das bei irgendwem noch woanders?

Auch auf den Verdacht mich als Idiot zu outen, der Begriff "CSS-Tooltipp" sagt mir nichts.

Was meinst Du genau ?

*lol* Vielen Dank für diese halbe Minute Fröhlichkeit, ich lache selten so herzhaft. ("Das ist nicht böse gemeint.")

Freut mich, dass Du so ein fröhlicher Mensch bist ;-))

Du hast nicht etwas zufällig mitbekommen, worum es in diesem Thread geht...?

Lesen kann ich eigentlich ;-D

Gruß
David

[Tim Tepaße]

Hi,

Fällt euch dazu eine Lösunge ein? Irgendwas, womit man die Positionierung relativ zum div-Ende oder einem anderen zu definierenden Punkt unterhalb aller Links angeben kann?

Wenn ich Dich richtig verstehe, wäre es Dir auch recht, wenn der erläuternde Text nicht zwangsläufig unter den wahrscheinlich vertikal sortierten Links in Deinem Menü stehen, sondern unter dem Menü. Dann empfehle ich Dir mal, etwas bei Eric Meyer zu schnüffeln - der hat sowas als Beispiel online gestellt:
http://www.meyerweb.com/eric/css/edge/popups/demo.html

Grüße,
  Tim

[Christian Eyrich]

Hi auch,

Wenn ich Dich richtig verstehe, wäre es Dir auch recht, wenn der erläuternde Text nicht zwangsläufig unter den wahrscheinlich vertikal sortierten Links in Deinem Menü stehen,

Nö, der soll unter dem gesamten Menü stehen, mein reduziertes Anfangsbeispiel war wohl zu reduziert.

sondern unter dem Menü. Dann empfehle ich Dir mal, etwas bei Eric Meyer zu schnüffeln - der hat sowas als Beispiel online gestellt:
http://www.meyerweb.com/eric/css/edge/popups/demo.html

Oh? Das fühlt sich nicht nur so an wie meine Navigation, der Code sieht auch fast so aus. Sachen gibt's.

Aber er hat auch das gleiche Problem wie ich, schon bei geringen Größenänderungen fließt es ineinander.

Gruß,
Christian