exercise 1

by luissanchezm86

HTML

<ul class="photo-grid">
	        <li class="photo">
			        <a href="#" class="photo-link">
			            <img src="http://www.mtv.com/movies/a-z/h/hudgens_vanessa/150x200.jpg" class="photo-img"/>
			            <span class="photo-title">a girl</span>
			        </a>
			</li><li class="photo">
			        <a href="#" class="photo-link">
			            <img src="http://i1132.photobucket.com/albums/m566/Feargraphics/Others/150x200.png" class="photo-img"/>
			            <span class="photo-title">bender_wants_to_kill_all_the_people</span>
			        </a>
			 </li><li class="photo">
			 	<a href="#" class="photo-link">
			            <img src="http://familytrees.genopro.com/MrSpock/pictures/200x150.jpg" class="photo-img"/>
			            <span class="photo-title">MrSpock</span>
			        </a>
			 </li><li class="photo">
			 	<a href="#" class="photo-link">
			            <img src="http://simp-tv.at.ua/simp4/20-15s.png" class="photo-img"/>
			            <span class="photo-title">Marge Simpson</span>
			        </a>
			 </li><li class="photo"> 		
			        <a href="#" class="photo-link">
			            <img src="http://www.natalyvoyage.com.ua/assets/images/catalog/eu/swiss/grindenwald/grindenwald.jpg" class="photo-img"/>
			            <span class="photo-title">My future place to live</span>
			        </a>
			 </li><li class="photo">
			        <a href="#" class="photo-link">
			            <img src="http://www.prakse.lv/uploads/myEnterprise/section/40137_1.jpg?cec2be3a97f7ff89612ad39df976b45e" class="photo-img"/>
			            <span class="photo-title">a ship</span>
			        </a>
			 </li><li class="photo">
			        <a href="#" class="photo-link">
			            <img src="http://spoki.tvnet.lv/upload/articles/12/125171/thumbs/200x150Svarigi-Konkurss-uz-1.jpg" class="photo-img"/>
			            <span class="photo-title">BOOOOM</span>
			        </a>
			</li><li class="photo">
			        <a href="#" class="photo-link">
			            <img...

CSS

body {
	max-width: 1200px;
	margin: 0 auto;
}

body ul {
	list-style: none;
}

body ul li {
	float: left;
	width: 250px;
	margin: 5px;
}

body ul li a span {
	display: block;
	padding-top: 5px;
	text-overflow: ellipsis;
	overflow: hidden;
}

li.photo {
	border: solid;
	text-align: center;
	min-height: 250px;
}

a.photo-link {
	height: 250px;
	display: table-cell;
	vertical-align: bottom;
	border: solid;
	width: 250px;
	max-width: 250px;
}