navigation mit runden ecken
moin,
ich bin gerade am überlegen wie ich die angehängte grafik am besten umsetze. das design sollte genau so umgesetzt werden. http://www.imagebanana.com/img/xew1fzt7/navi.jpg die problemkinder sind die rundungen. soll ich da mit grafiken arbeiten, den links eine klasse zuweisen und dann die individuelle "abgerundete grafik" reinladen? klappt das überhaupt? bin für jede hilfe dankbar: ^^ |
Poste mal das HTML und CSS deiner Navigation. Dann kann dir gezeigt werden, wo anzuknüpfen ist.
|
Mein Tipp wenn dein Hintergrund hinter der Navi nicht unregelmäßig ist:
Gestalte dir 4 "Ecken" (4 einzelne Grafiken, Empfehlung hat so seine Gründe im Bezug zum IE), gebe deinem Navi-Block (vermutlich ein ul?) ein "position: relative;" und erstelle 4 Klassen die jeweils eine deiner 4 Eckgrafiken verwenden, gebe diesen ein "position: absolute;" und weise ihnen top / bottom / left / right zu. Dann haust du diese 4 Divs (oder was auch immer) in deinen Navi-Block -> und siehe da -> die 4 Ecken platzieren sich absolute von der relativen Navi. Die Ecken solltest du so designen: Außenrum ist die Hintergrundfarbe und das Innere bleibt transparent. Beispiel: Code:
<div id="navi"> Code:
div#navi Hab das da jetzt nur schnell hingeschrieben, hoffe es haben sich dabei keine Fehler eingeschlichen - sonst einfach nachfragen. |
schonmal ty für die antworten.
es geht um das hover. für den ersten hover-effekt benötige ich ja kein rechteck sondern eben diese angepasste variante mit den rundungen bei link "sadf". die darauffolgenden funktionieren mit dem rechteck, bis dann der letzte link folgt. dieser sollte dann auch so wie der erste link bei hover mit einer abgerundeten, angepassten grafik daherkommen. |
Ob hover oder nicht, solange der z-index von den Ecken höher ist als das der Elemente in der Navi und der Navi selbst wird es darüber gelegt - somit egal ob ein hover oder nicht berührter Link an den Ecken hängt -> in beiden Fällen wird die Grafik darüber gelegt.
Probiers einfach mal aus :) |
hey,
kk, ich setz mich jetzt mal hin und teste das aus. |
Ein Menü gehört in eine ul. Leere Elemente werden nicht benötigt.
Für den oberen & unteren Abschluss gibst Du dem ersten & letzten li jeweils eine ID, dadurch hast Du alle Optionen für die Zuweisung Deiner Grafik mit den Rundungen, auch beim Hovern. Bei Menü-Breite in px reicht jeweils eine Grafik für oben & unten. |
@frankw.:
danke, hat jetzt geklappt! \o/ @heiko_rs: würde gerne noch deine variante durchtesten. bei hover verschluckt er mir aber die background-grafik für die li#corner_top. mmhh. z-index ist ja für mehrere divs ausgelegt. was für möglichkeiten gibt es noch, oder wo liegt der fehler? Code:
<div id="navi"> Code:
* { |
Die Grafiken immer a zuweisen, und beim Hovern austauschen. Und nie height für Elemente mit Text!
|
@heiko_rs
klappt nun auch mit deiner variante! vielen vielen dank für die antworten. :mrgreen: |
Alle Zeitangaben in WEZ +2. Es ist jetzt 14:51 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023