css-bilder-gallerie-in-4-x-3-bilder-feld.php
Quell Code
<!DOCTYPE html> <html lang="de"> <head> <title>Galerie ohne Java Script</title> <meta charset="utf-8"/> <style> * { margin:0; padding:0; list-style:none; } #ausgabe { margin:10px; padding:5px 5px 2px 5px; background-color:#333; width:435px; float:left; -moz-border-radius:5px; -o-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } #ausgabe ul { position:relative; width:435px; height:auto ; background-color:#333; } #ausgabe li ul { margin-left:-5px; margin-top:-5px; padding:15px 20px; position:absolute; top:0px; left:-9999px; width:405px; -moz-border-radius:5px; -o-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; background:#555; cursor:pointer; } #ausgabe li { width:103px; display:inline-block; padding:1px; } #ausgabe li a { display:block; border:1px solid #666; padding:4px; background:#555; } #ausgabe li a:active + ul , #ausgabe li a:focus + ul , #ausgabe li ul:hover /* Anweisung für Wbkit-Browser */ { left:0px; background:#333; } #ausgabe li ul:active { left:-9999px; } #ausgabe img { display:block; margin:0 auto; } #ausgabe li ul:after { content:"X"; position:absolute; right:1px; top:1px; color:#fff; z-index:99; padding:2px; -moz-border-radius:0px 3px 0px 0px; -o-border-radius:0px 3px 0px 0px; -webkit-border-radius:0px 3px 0px 0px; border-radius:0px 3px 0px 0px; text-align:center; background:#a33 } #ausgabe li ul { cursor:pointer; } #ausgabe li ul img { display:block; margin:10px auto 0 auto; cursor:default; width:400px; border:1px solid #fff; } h1 { margin:20px; text-align:center; font-size:100%; } p { clear:left; margin:10px; } </style> <link rel="stylesheet" href="http://adblockers.opera-mini.net/css_block/default-domainless.css" type="text/css" /> </head> <body> <div id="container"> <div id="titel"> <h1>-Galerie06- CSS3 Bilder-Galerie</h1></div> <div id="ausgabe"> <ul> <li><a href="#bild" tabindex="1"><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/thumloewe.jpg" alt="bild1"/> </a> <ul> <li><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/loewe.jpg" alt="bild1"/></li> </ul> </li> <li><a href="#bild"><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/thumzebra.jpg" alt="bild2"/> </a> <ul> <li><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/zebra.jpg" alt="bild2"/></li> </ul> </li> <li><a href="#bild"><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/thumente.jpg" alt="bild3"/> </a> <ul> <li><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/ente.jpg" alt="bild3"/></li> </ul> </li> <li><a href="#bild"><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/thumeisbaer.jpg" alt="bild4"/> </a> <ul> <li><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/eisbaer.jpg" alt="bild4"/></li> </ul> </li> <li><a href="#bild"><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/thumkamel.jpg" alt="bild5"/> </a> <ul> <li><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/kamel.jpg" alt="bild5"/></li> </ul> </li> <li><a href="#bild"><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/thumpferd.jpg" alt="bild1"/> </a> <ul> <li><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/pferd.jpg" alt="bild1"/></li> </ul> </li> <li><a href="#bild"><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/thumtierparkbruecke.jpg" alt="bild2"/> </a> <ul> <li><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/tierparkbruecke.jpg" alt="bild2"/></li> </ul> </li> <li><a href="#bild"><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/thumbrunnen1.jpg" alt="bild3"/> </a> <ul> <li><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/brunnen1.jpg" alt="bild3"/></li> </ul> </li> <li><a href="#bild"><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/thumblumen.jpg" alt="bild4"/> </a> <ul> <li><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/blumen.jpg" alt="bild4"/></li> </ul> </li> <li><a href="#bild"><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/thumfenster.jpg" alt="bild5"/> </a> <ul> <li><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/fenster.jpg" alt="bild5"/></li> </ul> </li> <li><a href="#bild"><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/thumscheune.jpg" alt="bild3"/> </a> <ul> <li><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/scheune.jpg" alt="bild3"/></li> </ul> </li> <li><a href="#bild"><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/thumfturm2.jpg" alt="bild4"/> </a> <ul> <li><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/fturm2.jpg" alt="bild4"/></li> </ul> </li> <li><a href="#bild"><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/thumfturm.jpg" alt="bild5"/> </a> <ul> <li><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/fturm.jpg" alt="bild5"/></li> </ul> </li> <li><a href="#bild"><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/thumschildkroete.jpg" alt="bild3"/> </a> <ul> <li><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/schildkroete.jpg" alt="bild3"/></li> </ul> </li> <li><a href="#bild"><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/thumvogel.jpg" alt="bild4"/> </a> <ul> <li><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/vogel.jpg" alt="bild4"/></li> </ul> </li> <li><a href="#bild"><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/thumvogel2.jpg" alt="bild5"/> </a> <ul> <li><img src="http://www.gipspferd.de/CSS-Experimente/Galerie/fotos/vogel2.jpg" alt="bild5"/></li> </ul> </li> </ul> </div> <p><a href="../">zurück</a></p> </div> </body> </html>
Comments (1)
Die Canvas Balken Uhr ist ja mal Fett