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