DerEinzige & traumfahne.de
zeitschrift zum selbstausdrucken im eigenverlag vom 18. 5. 2007 | gesamtausgaben: 194
vom z-index und seinem nutzen als css web 2.0 banner steuerung
18. Mai 2007 | ausgabe drucken | Kommentare deaktiviertleserbrief schreibennchdem ich beschlossen habe ein tour blog zu schreiben, wollt ich es auch promoten. ein typisches web 2.0 banner war bald im photoshop fabriziert und hat die grösse von 240 x 240.
jetzt soll das nicht überall nerven, sondern nur auf der startseite, sowie auf der tourseite und der macseite.
auch soll es, egal bei welcher auflösung die hauptnavigation nicht verdecken.
ich hab nun bei kollegen rumgeschaut und gekuckt wie es die anderen blogger so machen: meist mit javascript.
dagegen hab ich eigentlich nichts einzuwenden … lieber ist mir css 
also hab ich angefangen rumzuexperimentieren und es wurde schnell klar, dass der z-index im zusammenhang mit einer positionierung die wahl ist.
obacht safari und opera rendern anders als die mozilla familie. was die einen anzeigen muss nicht bei den anderen erscheinen!
das css:
.banner{position: absolute; z-index:0; top: 0px; left: 0px; width: 240px; height: 240px;background-image: url(tourblog.png)}
.bannerlink{position: absolute; z-index:1; top:50px; left:30px; width:130px; height:100px}
.lifter{position:relative;z-index:2}
die zwei div container legst du ans ende des htmls der seiten auf denen du das banner angezeigt haben willst (am ende des footers, wenn es überal erscheinen soll ):
<div class="bannerlink">
<a href="http://dereinzige.de/category/tour2007/" title="tour blog 2007" style="font-size:100px;text-decoration:none"> </a>
</div>
<div class="banner">
</div>
wie du siehst, wollte ich nicht das ganze banner klickbar machen, sondern nur ungefähr den bereich der textes (sehr ungefähr 
)
alles was nicht von dem banner überdeckt werden soll, packst du in folgenden container:
<div class="lifter">
</div>
autor: jeff brett, verfasst am 18. 5. 2007
permalink: http://dereinzige.de/2007/05/18/vom-z-index-und-seinem-nutzen-als-css-web-20-banner-steuerung/
short url: http://dereinzige.de/255
