Navigation - wie am geschicktesten?

Neues Thema verfassen Neues Thema

april
Beginner

Registriert: 10.10.2008
Beitraege: 39

10.08.2009 um 12:33 Uhr

Wollte einfach mal doof fragen, wie ich das am besten mach.
Eine horizontale Navigation, beim hovern von einem Menpunkt, frbt sich das Feld um und ein kleiner Pfeil bildet sich nach rechts (nicht nach unten) und berlappt teilweie das Feld vom nchsten Navipunkt. Imagemappen ist mir zu langwierig. Gibts da was krzeres? Wie krieg ich das nur gecodet hin?

Und ein Beispiel find ich auch nirgends. Ich such jetzt seit 2 Stunden nach so einer Beispielnavigation, die so aussieht. Hat da jemand vllt was passendes zur Hand?

Der Beitrag wurde insgesamt 1 mal editiert, zuletzt 10.08.2009 um 13:53 Uhr ...
.

Antworten Zitat
Alice
Admin

Registriert: 14.12.2006
Beitraege: 1058

11.08.2009 um 23:32 Uhr

Du nehmen CSS...
Ne absolute Position der einzelnen Links, sollte zum gewuenschten Ergebnis fuehren ...

... { signatur } ...

Antworten Zitat
april
Beginner

Registriert: 10.10.2008
Beitraege: 39

12.08.2009 um 11:03 Uhr

Ja^^ aber das Problem ist, dass sich das gegenseitig berschendiet.
Ich mals mal auf.
+-----------------+--------------------+
|***************|****************|
|*************** >***************|
|***************|****************|
+-----------------+--------------------+

*= freies Feld, mit Leerzeichen hat sich alles zusammengerckt
Ist jetzt verrutschtm durch die andere Schrift als hier unten im Inout.
Ich hoffe man kann trotzdem erkennen, was ich meine. Wenn nicht mal ichs mit Photoshop.

So, das Linke ist beim Mouseover und das Rechte ist normal.
Also, beim Onmouseover berschneidet sich ja das Feld mit dem Nchsten.
Und wie soll ich das im CSS festlegen? Tut mir leid, Alice. Ich versteh das nicht, wie das gehen soll.

Der Beitrag wurde insgesamt 1 mal editiert, zuletzt 12.08.2009 um 11:11 Uhr ...
.

Antworten Zitat
Alice
Admin

Registriert: 14.12.2006
Beitraege: 1058

12.08.2009 um 13:37 Uhr

Du musst eigentlich nur bei dem a:hover dann mit nem z-index arbeiten, damit die 'Ebene' dann hoeher liegt als die anderen und die Position kannst du ja ganz einfach mittels position: absolut; bzw. positions: relative und der Angabe von top: Xpx; und left: Xpx; bestimmen ...

So kannst du problemlos mehrere 'Schichten' uebereinander legen.

Du musst allerdings aus dem Inline Element a:hover ein Blockelement machen mittels display: block; ...

Schau mal hier vorbei, da wird ein Tooltip bei :hover erstellt, da liegt der Text des Tooltips auch ueber dem normalen Text...

Liebe Gruesse
Alice

... { signatur } ...

Antworten Zitat
Alice
Admin

Registriert: 14.12.2006
Beitraege: 1058

12.08.2009 um 13:42 Uhr

Du musst eigentlich nur bei dem a:hover dann mit nem z-index arbeiten, damit die 'Ebene' dann hoeher liegt als die anderen und die Position kannst du ja ganz einfach mittels position: absolut; bzw. positions: relative und der Angabe von top: Xpx; und left: Xpx; bestimmen ...

So kannst du problemlos mehrere 'Schichten' uebereinander legen.

Vorraussetzung, das es funktioniert ist, dass du aus dem Inline Element ein Blockelement machst mittels display: block; ...

Schau mal hier vorbei, da wird ein Tooltip bei :hover erstellt, da liegt der Text des Tooltips auch ueber dem normalen Text...

Liebe Gruesse
Alice

... { signatur } ...

Antworten Zitat
april
Beginner

Registriert: 10.10.2008
Beitraege: 39

12.08.2009 um 21:25 Uhr

Das ist geschickt. Wusste ich gar nicht.
Jetzt hab ichs verstanden. Danke. War ganz wichtig.

.

Antworten Zitat