DerEinzige

gedanken zur illusorischen realit├Ąt des einzigen und seines eigenthums ...
... Ausgabe 198 ... 12. Jhrg.

«« »»

rubrik: css markup webdesign

DerEinzige & traumfahne.de

zeitschrift zum selbstausdrucken im eigenverlag vom 18. 5. 2007 | gesamtausgaben: 198

vom z-index und seinem nutzen als css web 2.0 banner steuerung

18. Mai 2007 | ausgabe drucken     | email mail facebook f***book twit tw | leserbrief schreiben    

nchdem 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">&nbsp;&nbsp;&nbsp;</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 :D )

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

einen leserbrief schreiben

du mußt angemeldet sein, um kommentieren zu können.

«« »»

durchschnittlich 27 abonnenten täglich
leser: 2 online, 809684 gesamt seit dem 16.februar 2006.

home | editorial | über | datenschutz | impressum

springe zum seitenanfang