Beispiel:CSS-Anw-Bildergalerie-3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
  <style>
/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
#galerie,li {
	margin: 0.1em;
	padding: 0.1em;
}
 
li {
    display: inline-block;	
	list-style-type: none;
	width: 45%;
}
 
img {
  padding: 0;
  margin: 0;	
  width: 100%;  /* Bild passt sich an verfügbaren Raum im li ann */
}
 
a {
  padding: 0.1em;
}
 
a:focus, a:hover {
	background: #09c;
}
 
     /* Large screens */
@media all and (min-width: 35em) {
	li {
		width: 10em;
	}
 
.details {
	position: absolute;
	right: 10%;
	top: 10%;
	background-color: #F1F3F4;
	border: 0.1em solid #3983ab;
	border-radius: 0 8px 8px;
	padding: 1em 1em .2em;
	width: 25em;
	max-height: 20em;
	overflow: auto;
	display: none;
}
 
.details img {
	width: 90%;
}
 
.details:target {
	display: block;
}
 
.close {
	width:0;
	heigh:0;
	border: 0; 
	text-shadow: none; 
	color: transparent;
}
.close::after {
   position: absolute;
   top: 1em;
   right: 1em;
   content:"X";
   color: white;
   background: #c32e04;
   font: bold 1em/150% Georgia, Times, serif;
   border: 0.1em solid #3983ab;
   border-radius: 0 8px 8px;
   display: block;
   text-align:center;
   width: 1.5em;
   height:1.5em; padding:0.2em 0 0 0em;
 
}
}
 
  </style>
  <title>Bildergalerie - 3</title>
</head>
 
<body>
<h1>Bildergalerie - 3</h1>
<main>
	<p>Klicken Sie auf die ausgewählten Bilder, um eine Großansicht zu öffnen.</p>
	<ul id="galerie">
		<li><a tabindex="1" href="#bild1"><img src="//wiki.selfhtml.org/images/8/80/Dummy-1.jpg" alt="Spaß in der Sonne"></a></li>
		<li><a tabindex="1" href="#bild2"><img src="//wiki.selfhtml.org/images/e/e7/Dummy-2.jpg" alt="Spaß in der Sonne"></a></li>
		<li><a tabindex="1" href="#bild3"><img src="//wiki.selfhtml.org/images/c/c9/Dummy-3.jpg" alt="Berg im Morgennebel"></a></li>
		<li><a tabindex="1" href="#bild4"><img src="//wiki.selfhtml.org/images/8/8e/Dummy-4.jpg" alt="Korallenriff"></a></li>
		<li><a tabindex="1" href="#bild5"><img src="//wiki.selfhtml.org/images/1/1c/Dummy-5.jpg" alt="Morgensonne in Salo, Gardasee"></a></li>
		<li><a tabindex="1" href="#bild6"><img src="//wiki.selfhtml.org/images/6/61/Dummy-6.jpg" alt="Via Appia, Rom"></a></li>    
        </ul>  
 
	<figure id="bild1" class="details">
		<img src="//wiki.selfhtml.org/images/8/80/Dummy-1.jpg" alt="Spaß in der Sonne">
		<a class="close" id="c1" href="#c1" title="schließen">schließen</a>
		<figcaption>Spaß in der Sonne</figcaption>
	</figure>
	<figure id="bild2" class="details">
		<img src="//wiki.selfhtml.org/images/e/e7/Dummy-2.jpg" alt="Spaß in der Sonne">
		<a class="close" id="c1" href="#c1" title="schließen">schließen</a>
		<figcaption>Spaß in der Sonne</figcaption>
	</figure>
	<figure id="bild3" class="details">
		<img src="//wiki.selfhtml.org/images/c/c9/Dummy-3.jpg" alt="Berg im Morgennebel">
		<a class="close" id="c1" href="#c1" title="schließen">schließen</a>
		<figcaption>Berg im Morgennebel</figcaption>
	</figure>
	<figure id="bild4" class="details">
		<img src="//wiki.selfhtml.org/images/8/8e/Dummy-4.jpg" alt="Korallenriff">
		<a class="close" id="c1" href="#c1" title="schließen">schließen</a>
		<figcaption>Korallenriff</figcaption>
	</figure>   		
        <figure id="bild5" class="details">
		<img src="//wiki.selfhtml.org/images/1/1c/Dummy-5.jpg" alt="Morgensonne in Salo, Gardasee">
		<a class="close" id="c1" href="#c1" title="schließen">schließen</a>
		<figcaption>Morgensonne in Salo, Gardasee</figcaption>
	</figure>   		
        <figure id="bild6" class="details">
		<img src="//wiki.selfhtml.org/images/6/61/Dummy-6.jpg" alt="Via Appia, Rom">
		<a class="close" id="c1" href="#c1" title="schließen">schließen</a>
		<figcaption>Via Appia, Rom</figcaption>
	</figure>                       
</main>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-Anw-Bildergalerie-3.html&oldid=67284“