Mick Redman: three

Friday, 24 September 2010

Simple layout #12

This design puts to earlier blog posts together. Simple layout #11 and Static Image Overlay.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #12</title>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
font-family:Sans-serif;
}
.contentHolder
{
margin:0 auto;
width:800px;
}
#topPart, #middlePart, #bottomPart
{
display:block;
}
#topPart, #bottomPart, #overlayedText
{
color:#FFFFFF;
}
#bottomPart, #overlayedText
{
background:#000000;
}
#topPart
{
height:200px;
background:#73C2FF;
}
h1
{
font-size:4.4em;
}
#topPart h1
{
padding-top:136px;
}
#middlePart
{
height:400px;
}
#overlayedText, #bottomPart h1
{
position:relative;
}
#overlayedText
{
clear:both;
top:-144px;
font-size:2em;
height:84px;
padding-top:80px;
opacity:0.6;
filter:alpha(opacity=60);
}
h1, #overlayedText
{
padding-left:10px;
}
#middlePart h1
{
float:left;
color:#FF0000;
width:360px;
}
#middlePart img
{
float:right;
}
#bottomPart
{
min-height:200px;
}
#bottomPart h1
{
top:-10px;
}
</style>
</head>
<body>
<div id="topPart">
<div class="contentHolder">
<h1>MY TITLE</h1>
</div>
</div>
<div id="middlePart">
<div class="contentHolder">
<h1>The stuff which really matters</h1>
<img src="http://farm5.static.flickr.com/4145/5020151472_5651a1321d.jpg" alt="girl" />
<div id="overlayedText">My overlayed text</div>
</div>
</div>
<div id="bottomPart">
<div class="contentHolder">
<h1>Goodbye</h1>
</div>
</div>
</body>
</html>