|
|||
Hey,
^^ den letzten Trick verstehe ich nicht ganz. (vll geht der ja in meine Richtung) sonst sehr interessante Ansätze - danke! Hatte mir jetzt überlegt folgende Ebenen zu machen:
Jedoch wird in meinem Test der Link nicht über dem Logo angezeigt: Code:
#rao { background-image: url(img/grundgeruest/gg_01.jpg); width: 950px; height: 207px; position: relative; clear: both; z-index: 1; } /*-------------------------- Logo --------------------------*/ #ralogo { background-image: url(img/grundgeruest/logo.png); width: 345px; height: 114px; position: absolute; z-index: 3; top: 28px; left: 73px; } /*-------------------------- Navigation oben --------------------------*/ #nav { } a.nav , a.nav:link, a.nav:visited, a.nav:active{ z-index: 4; background-image: none; background-repeat: repeat-x; } a.nav:hover { background-image: url(img/grundgeruest/navhover.png); background-repeat: repeat-x; } a.nav#aktiv { background-image: url(img/grundgeruest/navhover.png); background-repeat: repeat-x; } #navtrenner { background-image: url(img/grundgeruest/navtrenner.jpg); height: 21px; width: 2px; float: left; z-index: 2; } Code:
<div id="rao"> <div id="ralogo"> </div> <div id="nav"> <a class="nav">Home</a> <div id="navtrenner"></div> <a class="nav">Aktuelles</a> <div id="navtrenner"></div> <a class="nav">Beschreibung</a> <div id="navtrenner"></div> <a class="nav">Arbeitsbereiche</a> <div id="navtrenner"></div> <a class="nav" id="aktiv">Öffentlichkeitsarbeit</a> <div id="navtrenner"></div> <a class="nav">Partner</a> </div> </div> LG |
Sponsored Links |
|
|||
Hey,
habe gerade den 1. Screenshot gesehen. - oh mein Gott - ich glaube damit hat sich fast schon das komplett für mich erledigt mit den PNG... interessant fände ich es trotzdem! IE6 - 40% Marktanteil Schade! LG |
|
|||
Zitat:
das hat gut funktioniert... danke! Werde wohl nun Browserweichen einbauen... die schönen Farbverläufe sind mir da doch wichtig. LG Geändert von theviper06 (17.06.2009 um 18:27 Uhr) |
|
|||
Zitat:
|
|
|||
Zitat:
Es ragt ein Element (das ich als Bild bezeichnet habe) in ein Element (das ich als "Menu" bezeichnet habe) hinein. Das Menu selbst soll dennoch in der vollen Breite anwählbar sein. Meine Lösung zeigt, dass dies nur dann möglich ist, wenn man mit position & z-index arbeitet. Wichtig dabei ist, dass man den Link (also der Bereich, der anklickbar sein soll) vom Design (Text und Hintergrund) getrennt wird und mittels z-index platziert wird. HTML: HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <HEAD> <TITLE>Ueberlappungsproblem</TITLE> <link rel="stylesheet" type="text/css" href="EigenerVersuch.css"> </HEAD> <BODY> <div id="containerGlobal"> <ul id="navigation"> <li class="entry"><a></a>Hier stehen</li> <li class="entry"><a></a>ein paar Dinge</li> <li class="entry"><a></a>die mit CMM</li> <li class="entry"><a></a>modifiziert werden</li> </ul> <div id="picture"><!-- Das Bild --></div> </div> </BODY> </html> Code:
body { background-color: gray; padding: 10px: } #containerGlobal { height:500px; background-color: white; padding: 10px; } #navigation { width: 200px; background-color: yellow; padding: 5px; margin: 0; } .entry { list-style-type: none; position: relative; background-color: wheat; } #picture { height: 50px; width: 200px; background-color: red; position: absolute; top: 40px; left: 60px; opacity: 0.5; } a { cursor:pointer; position:absolute; bottom:0; top:0; left:0; right:0; z-index: 1; } a:hover { background-color: white; opacity: .75; } Das Beispiel arbeitet mit opacity anstatt mit PNG Dateien. Das vereinfacht aber das Beispiel. Dadurch sollte es aber nur im Firefox getestet werden. Klappt es jetzt??? |
|
|||
Noch eine kleine Anmerkung.
Möchtest du, dass der Text weiterhin im Ankerelement und somit VOR dem Bild steht, musst du das Ankerelement so modifizieren: Code:
a { cursor:pointer; display:block; position:relative; z-index:1; } |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fertiges Drop-Down Menü ins Layout einfügen | VoB | CSS | 6 | 15.03.2011 16:14 |
ul richtig zentrieren | Muamicus | CSS | 23 | 14.12.2010 18:28 |
span hover element 0 ausrichtung obwohl link padding? | sepp88 | CSS | 2 | 24.09.2009 16:10 |
Link Hover Problem bei Bilder | Deluxxxe | CSS | 7 | 21.09.2009 19:59 |
1. Link in Hover Farbe ? | snuffi | CSS | 2 | 20.02.2004 09:34 |