UL mit Scrollbalken und Hoverbild mit Position:absolute

[Jan-Frederik Stieler]

Hi,
ich hab ein Problem mit einer Ul die etwas zu lan geworden ist. Ich habe diese Liste auf overflow-y:auto; gesetzt um einen Scrollbalken zu bekommen.
Mein Problem ist nun das eigentlich beim Hover über die Li ein Bild angezeigt wird welches mit position:absolut an einer Position der Webseite eingeblendet wird. Leider funktioniert das nicht mehr seit ich den Scrollbalken hinzugefügt habe.
So wie es aussieht wird versucht die Breite der Liste bis zum Hoverbild zu vergrößern da kurzzeitig ein horizontaler Scrollbalken eingeblendet wird obwohl ja overflow-y gesetzt ist und nicht -x.

ul#uebersicht
{
	max-height: 300px;
	overflow-y: auto;
}

ul.menu-uebersichtmenu
{
	position: absolute;
	bottom: 0;
	margin-right: 2px;
	font-family: univers,helvetica,arial, sans-serif; 
	font-weight: bold;
	color:#000; 
	font-size: 18pt; 
	text-transform: uppercase;
	text-decoration: none;
}

ul.menu-uebersichtmenu li a img
{
	display: none;
}

ul.menu-uebersichtmenu li a:hover img
{
	position: absolute;
	top: -175px;
	left: 400px;
	display: block;
}

Gibt es ne Möglichkeit das hinzubekommen und trotzdem die Liste und die Hoverbilder auf position:absolute zu belassen?
Wenn ich nämlich die Liste ohne position verwende funktioniert es ja. Aber ich muß die Liste unten ausrichten und daher wäre es gut es so belasen zu können.

Viele Grüße
Jan

 

[Maik]

Moin,

kurzzeitig ein horizontaler Scrollbalken eingeblendet wird obwohl ja overflow-y gesetzt ist und nicht -x.

mit overflow-x:hidden unterbindest du in deinem CSS aber auch nicht explizit den horizontalen Scrollbalken im Anzeigebereich des <ul>-Elements bei übergroßem Inhalt, oder wenn das Hover-Bild angezeigt werden soll, das vom linken Boxenrand 400px entfernt erscheinen soll.

Weil das <ul>-Element mit position:absolute aus seinem normalen Dokumentfluß genommen wird, richtet sich seine darzustellende Breite, wie für ein Block-Element typisch, nicht mehr nach dem Elternelement, sondern ergibt sich aus dem (sichtbaren) Inhalt im <a>-Element.

Ist der Inhalt nicht breit genug, um die 400px + Bildbreite zu überbrücken, stellt der Browser seinem Nutzer die horizontale Scrollleiste zur Verfügung, um an den Inhalt zu gelangen.

Gibt es ne Möglichkeit das hinzubekommen und trotzdem die Liste und die Hoverbilder auf position:absolute zu belassen?
Wenn ich nämlich die Liste ohne position verwende funktioniert es ja. Aber ich muß die Liste unten ausrichten und daher wäre es gut es so belasen zu können.

Die Positionierung der Liste ist hier überhaupt nicht der Knackpunkt, sondern, dass ihr übergroßer Inhalt scrollfähig sein soll, und das Hover-Bild mit der negativen Positionsangabe top:-175px aus dem oberen Boxenrand der Liste heraus angezeigt werden soll.

Aber das ist dir ja selbst aufgefallen, nachdem du zusätzlich die overflow-Eigenschaft mit ins Spiel gebracht hast.

mfg Maik

 

[Jan-Frederik Stieler]

mit overflow-x:hidden unterbindest du in deinem CSS aber auch nicht explizit den horizontalen Scrollbalken im Anzeigebereich des <ul>-Elements…

Okay, da hat der Meister mal wieder recht .
Das andere mit der absoluten Positionierung ist mir vom theoretischen her schon klar, also warum das nicht so funktioniert wie ich das gerne hätte. Nur hab ich jetzt ein Problem damit eine Lösung zu finden.
Ich dachte ja dass wenn ich das Bild aus dem Textfluss nehme die Ul mit ihren Eigenschaften keinen direkten Einfluss mehr auf das Bild hätte?
Verstehe das jetzt richtig dass ich das jetzt nur mit JS realisiert bekomme, oder denke ich da schon wieder zu kompliziert?

Viele Grüße

 

[Maik]

Die Lösung könnte so aussehen, das Hover-Bild nicht in dem Listenmenü, sondern in dem Seitenbereich einzubinden, wo es erscheinen soll, und es dann aus dem Menü heraus mit JS anzusprechen, respektive einzublenden.

mfg Maik