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

by SpiceLab

HTML

<header>
	<nav>
		<ul class="clearfix">
			<li class="home"><a href="#">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="we.html">
  			<img class="eins" src= "http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
  			<h1>Titel 1</h1>
  		</a>
    </li>	    
		<li>
      <a href="we.html">
  			<img class="zwei" 
  			src="http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
  			<h1>Titel 2</h1>
  		</a>
		</li>  
		<li>
      <a href="we.html">
  			<img class="drei"
  			src="http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
  			<h1>Titel 3</h1>
  		</a>
		</li>
		<li>
      <a href="we.html">
  			<img class="vier"
  			src="http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
  		</a>
		</li>  
		<li>
      <a href="we.html">
  			<img class="fünf"
  			src="http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
  		</a>
		</li>  
		<li>
      <a href="we.html">
  			<img class="sechs"
  			src="http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
  		</a>
		</li>
		<li>
      <a href="we.html">
  			<img class="sieben"
  			src="http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
  		</a>
		</li>  
		<li>
      <a href="we.html">
  			<img class="acht"
  			src="http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
  		</a>
		</li>  
		<li>
      <a href="we.html">
  			<img class="neun"
  			src="http://imalbum.aufeminin.com/album/D20081015/479385_NHYAZ3DIAL4QCJC8JQCMKEGE5A3XCF_igor_H165337_L.jpg">
 ...

CSS

@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);

/* 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:PT 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 li a img {
	display:block;
	width:100%
}
main ul li a h1 {
	position:absolute;
  top:3vh;
  width:100%;
  text-align:center;
	font-family:PT-Sans;
	color:white;
	font-size:3vw
}

/* footer */
footer {
	color:pink
}

/* 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%
	}
}