go41

Imagemap Alternative CSS Liste mit Background Image

von Joern am 15. Jul. 2008 | 1 Kommentar

Auf einer Seite die ich betreue habe ich im Footer ein Background Image mit Stichworten, welche ich klickbar machen und mit Beiträgen verlinken will.

Eine Imagemap über ein mehrteiliges Hintergrundbild zu legen war mir denn doch zu schwierig, deshalb habe ich eine Liste der Links erstellt und in den Seiten Footer eingefügt.

Die Liste sieht so aus:


<div class="footimglinks">
<ul id="footimg">
<li id="l1"><a href="http://www.vinobeauty.de/inhaltsstoffe/leberwurstbaum-kigelia-africana/" title="Leberwurstbaum Extrakt (Kigelia africana)" >Leberwurstbaum Extrakt (Kigelia africana)</a></li>
<li id="l2"><a href="http://www.vinobeauty.de/inhaltsstoffe/soja-protein/" title="Soja Protein - Soja Isoflavone Extrakt" >Soja Protein - Soja Isoflavone Extrakt</a></li>
<li id="l3"><a href="http://www.vinobeauty.de/inhaltsstoffe/traubenkernoel-vitis-vinifera/" title="Traubenkernöl (Vitis vinifera)" >Traubenkernöl (Vitis vinifera)</a></li>
<li id="l4"><a href="http://www.vinobeauty.de/inhaltsstoffe/opc-oligomere-procyanidinetraubenkern-extrakt/" title="OPC (Oligomere Procyanidine / Traubenkern Extrakt)" >OPC (Oligomere Procyanidine / Traubenkern Extrakt)</a></li>
<li id="l5"><a href="http://www.vinobeauty.de/inhaltsstoffe/resveratrol/" title="Resveratrol (Traubenschalenextrakt)" >Resveratrol (Traubenschalenextrakt)</a></li>
<li id="l6"><a href="http://www.vinobeauty.de/info/" title="Panthenol - Info zur Hautpflege" >Panthenol - Info zur Hautpflege</a></li>
<li id="l7"><a href="http://www.vinobeauty.de/inhaltsstoffe/parakresse-extrakt-acmella-oleracea/" title="Parakresse Extrakt (Acmella Oleracea)" >Parakresse Extrakt (Acmella Oleracea)</a></li>
<li id="l8"><a href="http://www.vinobeauty.de/inhaltsstoffe/hyaluronsaeure-sodium-hyaluronate/" title="Hyaluronsäure (Sodium Hyaluronate)" >Hyaluronsäure (Sodium Hyaluronate)</a></li>
<li id="l9"><a href="http://www.vinobeauty.de/inhaltsstoffe/aloe-vera-extrakt-aloe-barbadensis/" title="Aloe Vera Extrakt (Aloe Barbadensis)" >Aloe Vera Extrakt (Aloe Barbadensis)</a></li>
<li id="l10"><a href="http://www.vinobeauty.de/inhaltsstoffe/parakresse-extrakt-acmella-oleracea/" title="Parakresse Extrakt in Nanopearls - anhaltender Effekt" >Parakresse Extrakt in Nanopearls - anhaltender Effekt</a></li>
<li id="l11"><a href="http://www.vinobeauty.de/inhaltsstoffe/flammengras-imperata-cylindrica/" title="Flammengras (Imperata cylindrica)" >Flammengras (Imperata cylindrica)</a></li>
<li id="l12"><a href="http://www.vinobeauty.de/hauteigene-wirkstoffe/hautverwandte-wirkstoffe/" title="CoEnzym Q10" >CoEnzym Q10</a></li>
<li id="l13"><a href="http://www.vinobeauty.de/spezielle-pflegeserie/vinolift-ampullenkur-mit-argireline/" title="Argireline Ampullenkur" >Argireline Ampullenkur</a></li>
</ul>
</div>


Wenn man das so einfügt ohne CSS styling erscheint natürlich einfach die Liste dort wo sie eingebaut wurde.

Nun zu dem etwas schwierigeren Part, das Styling:

Um die Liste erstmal wieder unsichtbar zu machen, wird sie mit einem negativen text-indent (-9999px) aus dem Bild geschoben.
Um das mit position relativ festgelegt ul Element habe ich noch eine DIV class gelegt, welche absolut positioniert ist und eine Höhe von 1px hat. Safari und Firefox haben auch ohne dieses DIV gut funktioniert, der IE Internet Explorer lag ohne den DIV-Rahmen irgendwie daneben.
Auch nur wegen dem IE habe ich eine font-size:1% eingestellt, sonst klafft da im CSS Design eine leere Lücke.

Nun habe ich in der style.css die Einträge für die DIV, ul und li ID’s eingetragen.
Positionen für die Listeneinträge wurden erstmal alle mit #nrX a top:-20px;left:200px; eingetragen.

Nachdem ich die style css dann auf dem Server hatte, habe ich den Firebug Plugin für Firefox benutzt, um direkt am Monitor einen Listeneintrag nach dem anderen dort hin zu schieben, wo er sein soll. Also letzt endlich die Position jedes einzelnen li a Elements in der CSS Datei vervollständigt. Viel probieren hilft viel…

Die Einträge in der CSS sehen nun so aus:

.footimglinks{position:absolute;height:1px; /* IE */}
#footimg{position:relative;list-style:none;width:880px;height:1px;margin:0;font-size:1%; /* fontsize IE */}
#footimg li a{position:absolute;text-indent:-9999px;display:block;text-decoration:none;width:200px;height:30px;background:none}
#footimg li a:hover {background:white;
opacity:0.5; /* CSS3 - FF, Opera und Safari */
-moz-opacity:0.5; /* für ältere Mozilla Versionen */
-khtml-opacity:0.5; /* für ältere Safari und Konqueror Versionen */
filter:alpha(opacity=50); /* IE */ }
#l1 a{top:-35px;left:150px;}
#l2 a{top:-5px;left:150px;}
#l3 a{top:-145px;left:350px;}
#l4 a{top:-105px;left:300px;}
#l5 a{top:-75px;left:300px;}
#l6 a{top:-5px;left:350px;}
#l7 a{top:-110px;left:500px;}
#l8 a{top:-60px;left:500px;}
#l9 a{top:-10px;left:530px;}
#l10 a{top:-135px;left:700px;}
#l11 a{top:-105px;left:700px;}
#l12 a{top:-70px;left:700px;}
#l13 a{top:-30px;left:700px;}

Wer will kann sich das Ergebnis hier im unteren Teil der Seite anschauen: Vinobeauty

Mindjet MindManager MindManager von Mindjet gehörte zu den ersten Programmen, die die zur Ideen-Ordnung beliebte Mindmaps für den PC umsetzte. It details processes or procedures of some aspect(s) of Wikipedia's norms and practices. It is not one of Wikipedia's policies or guidelines, as it has not been thoroughly vetted by the community. Wordpress. You'll need to use Wordpress's wp_enqeueue_script function to load qTip 2 into your blog. Load up your current theme's file and locate your wp_head call. HTML Techniques for Web Content The following HTML example (using the META element) forwards the user from one page to another after a timeout. However, users should not redirect users with this markup since is non-standard, it disorients users, and Tags: html, techniques, content, Another Web page might have s in columns, with a single column for screens with a small physical size, two columns for screens with medium physical size, and three columns for screens with big physical

Autor:

Du findest mich auch auf Google+, Twitter und Facebook!

Ein Kommentar

  1. Pingback: Recent Links Tagged With "inhaltsstoffe" - JabberTags

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.


Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.