title image


Smiley Heureka :)
> Das willst du nicht sehen .... (sehr schräge Lösung)



Genial :)

Zwar *ziemlich dolle schräg* und diese komischen weißen Blöcke (sieht aus wie Zähne :)) sind auch nicht ganz nachvollziehbar, aber was solls: So gut hat das noch nie funktioniert.

Das sollte man als Tutorial online stellen :)



Danke!



Madien







Fürs Archiv (getestet mit firefox 1.0, opera 7.54, Internet Explorer 6):



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

 <head>

  <title>Tooltipp / Infobox zusammengefrickelt von BubbaHyde & Madien :) </title>

  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />

  <style type="text/css">

   html>body #tooltip a {

   display: block;

    float: left;

   }

   #endtooltip {

    clear:left;

   }

   #tooltip a span {

    display: none;

   }

   #tooltip a {

    margin:0 10px;

    position:relative;

    text-decoration:none;

   }

   #tooltip a:hover, #tooltip a:focus, #tooltip a:active {

    font-size: 100%; /* trotz Sinnlosigkeit bitte nicht löschen! */

    position:relative;

    z-index:1; /*notwendig, sonst ist tooltip hinter den thumbs*/

   }

   #tooltip a:hover span, #tooltip a:focus span, #tooltip a:active span {

    display: block;

    position: absolute;

    z-index:1; /*notwendig, sonst ist tooltip hinter den thumbs*/

    top: 20px;

    left: 40px;

    width: 75px;

    background: yellow;

    color: black;

    padding: 10px 7px;

    font-size: 0.8em;

    border:1px solid black;

   }

   body {

    background:white;

   }

   #tooltip:hover {

    background:white; /*In Verbindung mit einer Hintergrundfarbe für den body bleibt im Opera kein "Rest" des Tooltips übrig*/

   }

  </style>

 </head>

 <body>

  <p id="tooltip">

   <a href="#"><img src="" alt="" /><span>bla</span></a>

   <a href="#"><img src="" alt="" /><span>bla</span></a>

   <a href="#"><img src="" alt="" /><span>bla</span></a>

   <a href="#"><img src="" alt="" /><span>bla</span></a>

   <a href="#"><img src="" alt="" /><span>bla</span></a>

   <a href="#"><img src="" alt="" /><span>bla</span></a>

   <a href="#"><img src="" alt="" /><span>bla</span></a>

   <a href="#"><img src="" alt="" /><span>bla</span></a>

  </p>

  <p id="endtooltip">blablabla</p>

 </body>

</html>



Madien ['madi:n] (GF'06: W31)
  pro: "…", contra: "..."

Tipp: Mein privates Fotoarchiv!
Investigativ: die Sodakonzentrationsschnecke!
Abitur … keiner weiß warum!



geschrieben von

Login

E-Mail:
  

Passwort:
  

Beitrag anfügen

Symbol:
 
 
 
 
 
 
 
 
 
 
 
 
 

Überschrift: