< >

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>

Add Comment

* Required information
1000
Powered by Commentics

Comments (1)

Gravatar
Admin
Sascha65says...

Die Canvas Balken Uhr ist ja mal Fett