This layout has started to appear in many websites these days. I haven't added any clever graphics, but it is very flexible in that regard. In my own version it's black with a red radial aligned to the centre which fades to transparency. I tried adding to to flickr, but flickr is not good with such subtleties. I also didn't bother with any changes to hover over the navigation in an attempt to keep the code as small as possible. Anyway, enjoy playing!
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout 5</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
}
#container
{
margin:0 auto;
width:920px;
}
#navigation, #header, #content, #highlights, #footer
{
display:block;
}
#navigation, #footer
{
background:#000000;
color:#FFFFFF;
height:40px;
}
#header, #highlights
{
height:200px;
}
#navigation
{
text-align:right;
}
#navigation a
{
color:#FFFFFF;
text-align:center;
text-decoration:none;
width:80px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
display: inline-block;
}
h1, img
{
float:right;
}
h1
{
margin-top:60px;
}
#content
{
clear:right;
height:80px;
padding-left:20px;
padding-right:20px;
border-bottom:1px solid #000000;
}
.highlight
{
float:left;
width:260px;
margin:20px;
}
.highlight p
{
text-align:justify;
}
#footer
{
clear:left;
}
#footer p
{
text-align:center;
padding-top:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="navigation">
<a href="#" class="subMenu">home</a>|
<a href="#" class="subMenu">products</a>|
<a href="#" class="subMenu">services</a>|
<a href="#" class="subMenu">about</a>
</div>
<div id="header"><img src="http://farm5.static.flickr.com/4084/4989747012_e306b1cc6e.jpg" alt="bigImageLabel" /><h1>Important Header</h1>
</div>
<div id="content">
<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. Mauris placerat eleifend leo.</p>
</div>
<div id="highlights">
<div class="highlight">
<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. Mauris placerat eleifend leo.</p>
</div>
<div class="highlight">
<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. Mauris placerat eleifend leo.</p>
</div>
<div class="highlight">
<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. Mauris placerat eleifend leo.</p>
</div>
</div>
<div id="footer"><p>This could be quite a long footer</p></div>
</div>
</body>
</html>
No comments:
Post a Comment