Positionierungsproblem

[Thomas J.]

Tag allerseits

Es geht um folgendes:

[1]            [2]
 +-----------+  +---------~
 | verweis 1 |  |
 |           |  |   Inhalt
 | verweis 2 |  |
 |--------------|
 | verweis 3    |
 |--------------|
 |           |  |
 +-----------+  |
                |
                |
                |

Das ist an sich nichts besonderes. Links ist ein Div mit Textlinks, Hintergrundfarbe und float:left. Dieser hat keine feste Breite. Er "wächst" sozusagen je nach eingestellter Schriftgröße.
Rechts ist ein Div mit Inhalt und einer anderen Hintergrundfarbe. Die Verweise haben eine a:hover-Angabe, womit die Text- und Hintergrundfarbe (letztere von transparent zur Farbe des Inhalt-Div) geändert werden.

So weit so gut.
Das Projekt ist (eigentlich) fertig. Nun kommt plötzlich der Kunde daherspaziert und meint, daß es doch viel besser aussehen würde, wenn die Verweise im "Hover-Zustand" bis an den Inhalt heranreichen würden - also den kleinen Abstand überbrücken so wie bei "verweis 3" dargestellt.
Und dabei stehe ich jetzt total auf dem Schlauch.

Habe ich ein Brett vor dem Kopf? Oder ist das wirklich nicht so einfach, wie es auf den ersten Blick aussieht?

Thomas J.

[jan b.]

hallo,

meinst du sowas:

#menue a {
position:absolute;
top:50px;
left:20px;
width:100px;
background-color:#FF7D7B;
display:block;
}

#menue a:hover {
position:absolute;
top:50px;
left:20px;
width:150px;
background-color:#00FFAD;
display:block;
}

gruß
jan

[Thomas J.]

Tag

meinst du sowas:

nein

#menue a {
position:absolute;

Ich hatte geschrieben, daß die Breite des linken Div flexibel ist. Die kann also je nach verwendeter Schriftart/-größe variieren. Ich wüßte nicht, wie ich das mit absolut positionierten Verweisen unter einen Hut bekommen sollte.

Thomas J.

[jan b.]

Ich hatte geschrieben, daß die Breite des linken Div flexibel ist. Die kann also je nach verwendeter Schriftart/-größe variieren. Ich wüßte nicht, wie ich das mit absolut positionierten Verweisen unter einen Hut bekommen sollte.

hallo nochmal,

wenn du weißt, daß es nicht geht, warum fragst du dann. imho ist es doch so, daß du mit deinem problem darauf angewiesen bist, eine bestimmte breite im linken div festzulegen.

gruß
jan

[Jan]

Hallo,

wenn die Verweise im "Hover-Zustand" bis an den Inhalt heranreichen würden

wenn du das <a> element als blockelement definierst kannst du ihm eine breite geben welche du bei hover verändern kannst.
wenn deine seite mit hilfe von flaot aufgeteilt ist musst du lediglich dem linken bereich (nur der text?) eine ausreichendes margin-left geben damit der text nicht verutscht bei linkhover.

http://www.fractatulum.de/fraccss/sample/menu3format.htm
die vorletzte list als beispiel zur breitenänderung.

Gruss, Jan aus Dresden

[Thomas J.]

Tag

Ich würde den Verweisen nur äußerst ungern eine feste Breite geben, da ich nur mit relativen Schriftgrößen und generischen Schriftfamilien arbeite.

Mit a {display:block; padding-right:40px; margin-right:-20px} erreiche ich in etwa das, was dem Kunden vorschwebt. Nämlich, daß der Verweis sozusagen über das Elternelement hinausragt.
Den umfließenden Inhalt biege ich mir auch noch irgendwie hin.

... mal sehen, was der IE daraus macht.

Thomas J.

[Orlando]

Hi Thomas,

Ich würde den Verweisen nur äußerst ungern eine feste Breite geben, da ich nur mit relativen Schriftgrößen und generischen Schriftfamilien arbeite.

du kannst den Links eine Breite in 'em' verpassen, damit sie mitskalieren.

LG Roland

[Thomas J.]

Moin Roland

du kannst den Links eine Breite in 'em' verpassen, damit sie mitskalieren.

Ahhhh.
Bingo. Das war das dicke Brett. Manchmal sieht man eben den Wald vor lauter Bäumen nicht.
Warum bin ich da nicht selbst darauf gekommen?

Thomas J.