html.de - Elemente passen sich nicht an Inhalt an etc. - Demo #3

by SpiceLab

HTML

<header>
	<nav>
		<ul class="clearfix">
			<li class="home"><a href="Startseite.html">Cosima</a></li>
			<li class="about"><a href="#">About</a></li>
			<li class="contact"><a href="#">Kontakt</a></li>
		</ul>
	</nav>
</header>


<main>	
  <ul class="clearfix">  
		<li>
      <a href="Detailseite.html">
  			<img class="eins" src= "http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
  			<span class="outer"><h1 class="ontop">Titel 1</h1></span>
      </a>
    </li>

		<li>
      <a href="we.html">
  			<img class="zwei" 
  			src="http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
  			<span class="outer"><h1 class="ontop">Titel 2</h1></span>
  		</a>
		</li> 

		<li>
      <a href="we.html">
  			<img class="drei"
  			src="http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
  			<span class="outer"><h1 class="ontop">Titel 3</h1></span>
  		</a>
		</li>

		<li>
      <a href="we.html">
  			<img class="vier"
  			src="http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
        <span class="outer"><h1 class="ontop">Titel 4</h1></span>
  		</a>
		</li>

		<li>
      <a href="we.html">
  			<img class="fünf"
  			src="http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
        <span class="outer"><h1 class="ontop">Titel 5</h1></span>
  		</a>
		</li>

		<li>
      <a href="we.html">
  			<img class="sechs"
  			src="http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
        <span class="outer"><h1 class="ontop">Titel 6</h1></span>
  		</a>
		</li>

		<li>
      <a href="we.html">
  			<img class="sieben"
  			src="http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
        <span class="outer"><h1...

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext);

/* global */
html,body {
	margin:0;
  padding:0;
	background-color:white
}
ul {
  list-style:none;
  padding:0;
  margin:0
}

/* nav */
nav ul {  
	text-align:right
}
nav ul li {
	display:inline-block;
	font-size:17px;
	padding:20px 0
}
nav ul li.home {
	float:left;
	padding-left:40px
}
nav ul li.contact {
	padding:0 40px 0 15px
}
nav ul li a {
	color:black;
	font-family:"Open Sans";
	font-size:18px;
	text-decoration:none;
	padding:10px 12px 5px 12px	
}
nav ul li a:hover {
	border-bottom:4px solid #71F5EE
}
/* main */
main ul li {
  float:left;
  position:relative
}
main ul{
	padding-left: 15px;
	padding-right: 15px
}
main ul li a img {
	display:block;
	width:100%;
	padding:10px; 
  box-sizing:border-box
}
main ul li a .outer {
  position:absolute;
  top: 0;
  width:100%;
  text-align:center;
  height:100%;
  background:rgba(250, 250, 250, 0.6)
}
/* auskommentiert = entfällt */
/*.outer h1 {
   background: rgba(250, 250, 250, 0.6);
   height: 100%;
}*/
h1 {
	color: black;
	text-align: center;
	width: 100%;
	position:absolute; 
	top:50%; 
	height:3em; 
	margin-top:-1.5em;
	font: bold 20px/40px "Open Sans"
}

/* hover text */
.outer {
    visibility:hidden
}
li:hover .outer {
    visibility:visible
}

/* footer */
footer p  a img {
	min-width: 20px;
	max-height: 40px
}

/* clearfix-Class */
.clearfix:before,
.clearfix:after {
  content: "";
  display:table
}
.clearfix:after {
  clear:both
}

/* media queries */
@media screen and (max-width: 1900px) {
	main ul li {
		width:33.33%
	}
}
@media screen and (max-width: 1100px) {
	main ul li {
		width:50%
	}
}