Mick Redman: 100

Showing posts with label 100. Show all posts

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>

Thursday, 23 September 2010

Simple layout #11

This layout shows how to put your backgrounds across the screen at a width of 100%, take up 100% of the height, but centre the content within the page with uniformity.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #11</title>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
font-family:Sans-serif;
}
.contentHolder
{
margin:0 auto;
width:800px;
border-left:10px dotted #69FFBF;
border-right:10px dotted #69FFBF;
padding:10px;
}
#topPart, #middlePart, #bottomPart
{
display:block;
}
#topPart, #bottomPart
{
color:#FFFFFF;
}
#topPart
{
height:200px;
background:#73C2FF;
}
#middlePart
{
height:400px;
}
#bottomPart
{
background:#000000;
min-height:200px;
}
</style>
</head>
<body>
<div id="topPart">
<div class="contentHolder">
<h1>Hello</h1>
</div>
</div>
<div id="middlePart">
<div class="contentHolder">
<h1>The stuff which really matters</h1>
</div>
</div>
<div id="bottomPart">
<div class="contentHolder">
<h1>Goodbye</h1>
</div>
</div>
</body>
</html>

Wednesday, 22 September 2010

Simple layout #10

Yes, we're into double figures this latest layout sports 100% height, 100% width, a background belt and 3 rows.
I also used gimp to create a sort of blue gel cats eye in neon for fun.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #10</title>
<link href='http://fonts.googleapis.com/css?family=Cuprum&subset=latin' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
background:url(images/bigBlackLine.png) repeat-x 0px 400px;
color:#FFFFFF;
}
#container
{
margin:0 auto;
width:920px;
min-height:100%;
}
#topPart
{
height:400px;
background:#73C2FF;
}
h1
{
font-family: 'Cuprum', arial, serif;
font-size:6em;
width:600px;
padding:20px;
}
#middlePart
{
height:200px;
background:url(http://farm5.static.flickr.com/4091/5014384774_918902e791_z.jpg) no-repeat center center;
}
#bottomPart
{
background:#69FFBF;
}
</style>
</head>
<body>
<div id="container">
<div id="topPart">
<h1>One of those new fangled big fonts</h1>
</div>
<div id="middlePart">
</div>
<div id="bottomPart">
</div>
</div>
</body>
</html>

Monday, 20 September 2010

Three column 100% height layout

I may create a more designer version of this later in the series. I just wanted to demonstrate how to create a multi column 100% height layout. Most examples I had seen on the web required a wrapper and lots of coding. I couldn't see why. No by doing it without lots of code and wrappers, I still can't.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three Columns</title>
<style type="text/css">
* html body
{
height:100%;
}
*
{
margin:0;
padding:0;
height: 100%;
}
body
{
font-family:Sans-serif;
}
#column1, #column2, #column3
{
float:left;
min-height: 100%;
}
#column1, #column2
{
width:200px;
}
#column1
{
background:#FF0000;
}
#column2
{
background:#000000;
}
#column3
{
background:#CCCCCC;
width:400px;
}
</style>
</head>
<body>
<div id="column1"></div>
<div id="column2"></div>
<div id="column3"></div>
</body>
</html>