Archiv der Kategorie ‘HTML/CSS‘

Z-Index von PNG Grafiken in ul/il

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. }

Keine Kommentare »

Alex am 29. September 2009 in HTML/CSS