Friday 10 September 2010

Simple layout #4

This is the kind of design which could work as starting position for, as an example, a designer furniture shop. There is a little more code than I would usually try and use on this blog. I wanted to create a gradient using pure CSS rather than an image which meant adding the IE only code. Other than that, it's quite simple.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box design</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
background-color: #F3F3F3;
background-image: -moz-linear-gradient(top, #F3F3F3, #FFFFFF); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #F3F3F3),color-stop(1, #FFFFFF)); /* Saf4+, Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#F3F3F3', EndColorStr='#FFFFFF'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#F3F3F3', EndColorStr='#FFFFFF')"; /* IE8 */
}
#container
{
margin:0 auto;
width:800px;
}
h1, h2
{

font-family:Georgia;
font-weight:lighter;
}
h1
{
text-align:center;
font-size:4em;
}
h2
{
text-align:left;
font-size:2em;
margin-left:20px;
margin-top:1em;
}
.box, .twoBox
{
float:left;
min-height:260px;
}
.box
{
width:260px;
}
.twoBox
{
width:520px;
}
#box1
{
background:#77F9CF;
}
#box2
{
background:url(http://farm5.static.flickr.com/4125/4945802498_a53b3eedc5.jpg);
}
#box3
{
background:#7DD0F8;
}
#box4
{
background:#FFA77A;
}
#box5
{
background:#000000;
}
p
{
margin:20px;
text-align:justify;
line-height:140%;
color:#FFFFFF;
}
#footer
{
clear:left;
text-align:center;
color:#A3A3A3;
font-size:0.8em;
}
</style>
</head>
<body>
<h1>The Heading</h1>
<div id="container">
<div id="box1" class="box">
<h2>Sub</h2>
<h2>Heading</h2>
</div>
<div id="box2" class="twoBox">
</div>
<div id="box3" class="box">
</div>
<div id="box4" class="box">
</div>
<div id="box5" class="box">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>
</div>
<div id="footer">This could be quite a long footer</div>
</div>
</body>
</html>

No comments:

Post a Comment