Alexander Bahlk Webdesign » HTML/CSS http://abahlk.de Flash / Actionscript // Webanimation Tue, 02 Feb 2010 17:28:09 +0000 en hourly 1 Z-Index von PNG Grafiken in ul/il http://abahlk.de/htmlcss/z-index-von-png-grafiken-in-ulil/. http://abahlk.de/htmlcss/z-index-von-png-grafiken-in-ulil/.#comments Tue, 29 Sep 2009 18:45:48 +0000 Alex http://abahlk.de/?p=133 Hallo,
vielleicht hatte ja schon der ein oder andere das Problem seine Navigation mit PNG Background im Z-Index zu positionieren. Für alle die, die daran verzweifeln bloge ich hier eine kleine Anleitung.

1. die Objekte die im Z-Index positioniert werden sollen müssen die CSS Eigenschaft position:relative bekommen
2. um den li Tag muss ein weiter Div mit einem Klassennamen erstellt werden
3. das übergeordnete Objekt zB. Outline bekommt einen positiven Z-Index
3. die erstellten Divs erhalten einen negativen Z-Index

Mit der Lösung bin ich bis jetzt sehr zufrieden.

MfG Alex

HTML Code

  1.  
  2.  <div id="navcontainer">
  3.         <ul id="navlist">
  4.                 <div class="zpos"><li><a id="about" href=…><span> °About° </span></a></li></div>
  5.  

CSS Code

  1.  
  2. #outline {
  3.         position:relative;
  4.         z-index:1000;
  5.         width:1060px;
  6.         height:auto;
  7.         margin:50px auto;
  8. }
  9. .zpos {
  10.         position:relative;
  11.         z-index:-1;
  12. }
]]> http://abahlk.de/htmlcss/z-index-von-png-grafiken-in-ulil/./feed 0