Needs no introduction.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 23</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#F2F2F2;
}
body, #picture img, nav a:hover
{
width:100%;
}
header, #picture, #text, footer, nav a
{
padding:1em;
}
header
{
padding-top:2em;
background:#000000;
}
nav a
{
display:block;
width:4em;
width:3em;
text-decoration:none;
text-align:left;
color:#000000;
}
nav a:hover
{
background:#0000FF;
color:#FFFFFF;
}
footer, header
{
height:8em;
}
#content, #picture, #text, nav
{
background:#FFFFFF;
}
#picture, nav
{
float:left;
width:20%;
}
#picture
{
min-height:10em;
text-align:center;
}
#text
{
overflow:hidden;
}
footer
{
clear:left;
}
header h1, header h2, header h3
{
color:#FFFFFF;
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
<h2>Sub header</h2>
<h2>Sub sub header</h2>
</header>
<section id="content">
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<article id="picture">
<img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" alt="Pretty picture" />
</article>
<aside id="text">
<p><strong>Pellentesque habitant morbi tristique</strong> 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. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
</section>
<footer>Footer</footer>
</body>
</html>
Showing posts with label layout. Show all posts
Showing posts with label layout. Show all posts
Tuesday 15 February 2011
Mobile friendly liquid layout #2
Needs no introduction.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 22</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#F2F2F2;
}
body, #picture img
{
width:100%;
}
header, #picture, #text, footer, nav a
{
padding:1em;
}
header, nav
{
padding-top:2em;
}
#top
{
background:#000000;
}
nav
{
height:3em;
}
nav a
{
display:block;
width:3em;
text-decoration:none;
float:left;
text-align:center;
}
nav a:hover
{
background:#0000FF;
}
#top, footer
{
height:8em;
}
header
{
float:left;
width:50%;
}
#content
{
min-height:8em;
}
#content, #picture, #text
{
background:#FFFFFF;
}
#picture
{
float:left;
width:33%;
min-height:8em;
text-align:center;
}
#text
{
overflow:hidden;
}
footer, #content
{
clear:left;
}
header h1, header h2, header h3, nav a
{
color:#FFFFFF;
}
</style>
</head>
<body>
<section id="top">
<header>
<h1>Header</h1>
<h2>Sub header</h2>
<h2>Sub sub header</h2>
</header>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
</section>
<section id="content">
<article id="picture">
<img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" alt="Pretty picture" />
</article>
<aside id="text">
<p><strong>Pellentesque habitant morbi tristique</strong> 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. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
</section>
<footer>Footer</footer>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 22</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#F2F2F2;
}
body, #picture img
{
width:100%;
}
header, #picture, #text, footer, nav a
{
padding:1em;
}
header, nav
{
padding-top:2em;
}
#top
{
background:#000000;
}
nav
{
height:3em;
}
nav a
{
display:block;
width:3em;
text-decoration:none;
float:left;
text-align:center;
}
nav a:hover
{
background:#0000FF;
}
#top, footer
{
height:8em;
}
header
{
float:left;
width:50%;
}
#content
{
min-height:8em;
}
#content, #picture, #text
{
background:#FFFFFF;
}
#picture
{
float:left;
width:33%;
min-height:8em;
text-align:center;
}
#text
{
overflow:hidden;
}
footer, #content
{
clear:left;
}
header h1, header h2, header h3, nav a
{
color:#FFFFFF;
}
</style>
</head>
<body>
<section id="top">
<header>
<h1>Header</h1>
<h2>Sub header</h2>
<h2>Sub sub header</h2>
</header>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
</section>
<section id="content">
<article id="picture">
<img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" alt="Pretty picture" />
</article>
<aside id="text">
<p><strong>Pellentesque habitant morbi tristique</strong> 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. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
</section>
<footer>Footer</footer>
</body>
</html>
Monday 14 February 2011
Mobile friendly liquid layout
This layout works well on most devices. I think it's fair to say that you can do a lot with it. I also discovered a small, but annoying, technical anomaly with webkit browsers while creating it. Using the example below, If I had set the #text element to 'float:left;', this element would have shifted beneath the #picture element. Given the webkit browser is used in many mobile browsers, this becomes more important.
One thing you'll notice from this layout is that I haven't done much with the fonts, but that's just to keep the code slim.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 21</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#F2F2F2;
}
body, #picture img
{
width:100%;
}
header, #picture, #text, footer, nav a
{
padding:1em;
}
nav
{
background:#000000;
height:3em;
}
nav a
{
display:block;
width:3em;
text-decoration:none;
float:right;
text-align:center;
color:#FFFFFF;
}
nav a:hover
{
background:#0000FF;
}
header, footer
{
height:8em;
}
header
{
clear:right;
}
#content
{
min-height:8em;
}
#content, #picture, #text
{
background:#FFFFFF;
}
#picture
{
float:left;
width:33%;
min-height:8em;
text-align:center;
}
#text
{
overflow:hidden;
}
footer
{
clear:left;
}
</style>
</head>
<body>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<header>
<h1>Header</h1>
</header>
<section id="content">
<article id="picture">
<img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" alt="Pretty picture" />
</article>
<aside id="text">
<p><strong>Pellentesque habitant morbi tristique</strong> 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. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
</section>
<footer>Footer</footer>
</body>
</html>
One thing you'll notice from this layout is that I haven't done much with the fonts, but that's just to keep the code slim.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 21</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#F2F2F2;
}
body, #picture img
{
width:100%;
}
header, #picture, #text, footer, nav a
{
padding:1em;
}
nav
{
background:#000000;
height:3em;
}
nav a
{
display:block;
width:3em;
text-decoration:none;
float:right;
text-align:center;
color:#FFFFFF;
}
nav a:hover
{
background:#0000FF;
}
header, footer
{
height:8em;
}
header
{
clear:right;
}
#content
{
min-height:8em;
}
#content, #picture, #text
{
background:#FFFFFF;
}
#picture
{
float:left;
width:33%;
min-height:8em;
text-align:center;
}
#text
{
overflow:hidden;
}
footer
{
clear:left;
}
</style>
</head>
<body>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<header>
<h1>Header</h1>
</header>
<section id="content">
<article id="picture">
<img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" alt="Pretty picture" />
</article>
<aside id="text">
<p><strong>Pellentesque habitant morbi tristique</strong> 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. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
</section>
<footer>Footer</footer>
</body>
</html>
Wednesday 2 February 2011
Simple layout #15
Here is another layout which uses jquery corners.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout 15</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<script src="http://www.google.com/jsapi"></script>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
margin:0 auto;
width:800px;
margin-top:100px;
}
header
{
float:left;
color:#FF9200;
}
h1, h2, p
{
font-weight:normal;
}
h1, h2
{
font-family:Georgia, Times New Roman, Times, serif;
text-transform:uppercase;
color:#000000;
}
h1
{
font-size:5em;
}
h2
{
font-size:4em;
}
p
{
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-variant: normal;
letter-spacing:0.1em;
text-align:justify;
}
p
{
font-size: 1.25em;
margin-top: 1.25em;
margin-bottom: 1.25em;
}
header p
{
width:360px;
}
#tl
{
float:right;
width:400px;
height:400px;
background:#FF9200;
color:#FFFFFF;
}
#tl p
{
float:right;
width:280px;
padding-top:160px;
padding-right:20px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$(document).ready(function()
{
$('#tl').corner('tl 400px');
});
</script>
</head>
<body>
<header>
<h1>header 1</h1>
<h2>header 2</h2>
<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.</p>
</header>
<div id="tl" class="">
<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.</p>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout 15</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<script src="http://www.google.com/jsapi"></script>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
margin:0 auto;
width:800px;
margin-top:100px;
}
header
{
float:left;
color:#FF9200;
}
h1, h2, p
{
font-weight:normal;
}
h1, h2
{
font-family:Georgia, Times New Roman, Times, serif;
text-transform:uppercase;
color:#000000;
}
h1
{
font-size:5em;
}
h2
{
font-size:4em;
}
p
{
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-variant: normal;
letter-spacing:0.1em;
text-align:justify;
}
p
{
font-size: 1.25em;
margin-top: 1.25em;
margin-bottom: 1.25em;
}
header p
{
width:360px;
}
#tl
{
float:right;
width:400px;
height:400px;
background:#FF9200;
color:#FFFFFF;
}
#tl p
{
float:right;
width:280px;
padding-top:160px;
padding-right:20px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$(document).ready(function()
{
$('#tl').corner('tl 400px');
});
</script>
</head>
<body>
<header>
<h1>header 1</h1>
<h2>header 2</h2>
<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.</p>
</header>
<div id="tl" class="">
<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.</p>
</div>
</body>
</html>
Wednesday 12 January 2011
Semi-liquid Layout
The layout below offers 2 things. A liquid layout for the main content and a sticky header and footer. It works well across multiple screen resolutions including phones.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semi-liquid Layout</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
border:0;
}
body
{
background:#C23F67;
color:#FFFFFF;
}
hgroup, nav, footer
{
font-family:Helvetica, Verdana, Arial, sans-serif;
}
h1,h2
{
font-weight:lighter;
margin-left:0.2em;
}
h1
{
font-size:4em;
margin-top:0.5em;
}
h2
{
font-size:3em;
}
nav
{
text-transform:lowercase;
text-align:right;
border-bottom:0.1em solid #FFFFFF;
position:fixed;
right:0;
top:0;
width: 100%;
_position: absolute;
height:2em;
background:#000000;
}
nav a
{
margin-left:0.25em;
margin-right:0.25em;
text-decoration:none;
}
#mainContent
{
height:auto;
padding-bottom:2em;
clear:both;
}
#mainContent p
{
font-family: 'Droid Serif', arial, serif;
font-size:0.95em;
line-spacing:0.5em;
padding:0.5em;
text-align:justify;
}
img
{
margin:0.5em;
width:11em;
min-height:11em;
border-top:0.1em solid #FFFFFF;
float:right;
}
footer
{
border-top:0.1em solid #FFFFFF;
position:fixed;
right:0;
bottom:0;
width: 100%;
_position: absolute;
height:2em;
background:#000000;
}
nav p, footer p
{
margin:0.25em;
}
</style>
</head>
<body>
<section id="container">
<nav>
<p>
<a>Home</a>
<a>Help</a>
<a>About</a>
</p>
</nav>
<hgroup>
<h1 >header</h1>
<h2>sub-header</h2>
</hgroup>
<section id="mainContent"><img />
<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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
</section>
<footer><p>Contact information</p></footer>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semi-liquid Layout</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
border:0;
}
body
{
background:#C23F67;
color:#FFFFFF;
}
hgroup, nav, footer
{
font-family:Helvetica, Verdana, Arial, sans-serif;
}
h1,h2
{
font-weight:lighter;
margin-left:0.2em;
}
h1
{
font-size:4em;
margin-top:0.5em;
}
h2
{
font-size:3em;
}
nav
{
text-transform:lowercase;
text-align:right;
border-bottom:0.1em solid #FFFFFF;
position:fixed;
right:0;
top:0;
width: 100%;
_position: absolute;
height:2em;
background:#000000;
}
nav a
{
margin-left:0.25em;
margin-right:0.25em;
text-decoration:none;
}
#mainContent
{
height:auto;
padding-bottom:2em;
clear:both;
}
#mainContent p
{
font-family: 'Droid Serif', arial, serif;
font-size:0.95em;
line-spacing:0.5em;
padding:0.5em;
text-align:justify;
}
img
{
margin:0.5em;
width:11em;
min-height:11em;
border-top:0.1em solid #FFFFFF;
float:right;
}
footer
{
border-top:0.1em solid #FFFFFF;
position:fixed;
right:0;
bottom:0;
width: 100%;
_position: absolute;
height:2em;
background:#000000;
}
nav p, footer p
{
margin:0.25em;
}
</style>
</head>
<body>
<section id="container">
<nav>
<p>
<a>Home</a>
<a>Help</a>
<a>About</a>
</p>
</nav>
<hgroup>
<h1 >header</h1>
<h2>sub-header</h2>
</hgroup>
<section id="mainContent"><img />
<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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
</section>
<footer><p>Contact information</p></footer>
</body>
</html>
Smartphone and upwards
This layout works on the basis that smartphones have a minimum width of 480px or 30em. And so, this layout will happily work on anything greater than that. The result, no need to check which device is accessing it.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Smartphone and upwards</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
border:0;
}
body
{
background:#C23F67;
color:#FFFFFF;
}
#mainContent, hgroup, footer p, nav p
{
margin:0 auto;
width:30em;
}
hgroup, nav, footer
{
font-family:Helvetica, Verdana, Arial, sans-serif;
}
h1,h2
{
font-weight:lighter;
}
h1
{
font-size:4em;
margin-top:0.5em;
}
h2
{
font-size:3em;
}
nav
{
text-transform:lowercase;
text-align:right;
border-bottom:0.1em solid #FFFFFF;
position:fixed;
right:0;
top:0;
width: 100%;
_position: absolute;
height:2em;
background:#000000;
}
nav a
{
margin-left:0.25em;
margin-right:0.25em;
text-decoration:none;
}
#mainContent
{
height:auto;
padding-bottom:2em;
clear:both;
}
#mainContent p
{
width:18.5em;
float:left;
font-family: 'Droid Serif', arial, serif;
font-size:0.95em;
line-spacing:0.5em;
padding:0.5em;
text-align:justify;
}
img
{
margin-top:0.5em;
width:11em;
min-height:11em;
border-top:0.1em solid #FFFFFF;
}
footer
{
border-top:0.1em solid #FFFFFF;
position:fixed;
right:0;
bottom:0;
width: 100%;
_position: absolute;
height:2em;
background:#000000;
}
nav p, footer p
{
margin-top:0.25em;
}
</style>
</head>
<body>
<section id="container">
<nav>
<p>
<a>Home</a>
<a>Help</a>
<a>About</a>
</p>
</nav>
<hgroup>
<h1 >header</h1>
<h2>sub-header</h2>
</hgroup>
<section id="mainContent">
<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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<img />
</section>
</section>
<footer><p>Contact information</p></footer>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Smartphone and upwards</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
border:0;
}
body
{
background:#C23F67;
color:#FFFFFF;
}
#mainContent, hgroup, footer p, nav p
{
margin:0 auto;
width:30em;
}
hgroup, nav, footer
{
font-family:Helvetica, Verdana, Arial, sans-serif;
}
h1,h2
{
font-weight:lighter;
}
h1
{
font-size:4em;
margin-top:0.5em;
}
h2
{
font-size:3em;
}
nav
{
text-transform:lowercase;
text-align:right;
border-bottom:0.1em solid #FFFFFF;
position:fixed;
right:0;
top:0;
width: 100%;
_position: absolute;
height:2em;
background:#000000;
}
nav a
{
margin-left:0.25em;
margin-right:0.25em;
text-decoration:none;
}
#mainContent
{
height:auto;
padding-bottom:2em;
clear:both;
}
#mainContent p
{
width:18.5em;
float:left;
font-family: 'Droid Serif', arial, serif;
font-size:0.95em;
line-spacing:0.5em;
padding:0.5em;
text-align:justify;
}
img
{
margin-top:0.5em;
width:11em;
min-height:11em;
border-top:0.1em solid #FFFFFF;
}
footer
{
border-top:0.1em solid #FFFFFF;
position:fixed;
right:0;
bottom:0;
width: 100%;
_position: absolute;
height:2em;
background:#000000;
}
nav p, footer p
{
margin-top:0.25em;
}
</style>
</head>
<body>
<section id="container">
<nav>
<p>
<a>Home</a>
<a>Help</a>
<a>About</a>
</p>
</nav>
<hgroup>
<h1 >header</h1>
<h2>sub-header</h2>
</hgroup>
<section id="mainContent">
<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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<img />
</section>
</section>
<footer><p>Contact information</p></footer>
</body>
</html>
Wednesday 8 December 2010
Two equal row layout beginnings
I wanted to get a liquid layout with 2 rows taking up 50% of the browser hight each. I saw this type of layout on a site recently. It was a very minimalistic design. So I started to replicate it and do my own version. I then started to run into difficulties. I did some surfing and couldn't come up with the answer. So then I made a cup of tea, really put my brain into action, solved it, and now I'm sharing it with you.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two equal rows</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
background:#FFFFFF;
}
#top
{
height:auto;
clear:both;
}
#bottom
{
color:#FFFFFF;
position:fixed;
right:0;
bottom:0;
width:100%;
_position: absolute;
background:#FF0000;
height:50%;
}
</style>
</head>
<body>
<section id="top">
Hello
</section>
<section id="bottom">
Hello
</section>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two equal rows</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
background:#FFFFFF;
}
#top
{
height:auto;
clear:both;
}
#bottom
{
color:#FFFFFF;
position:fixed;
right:0;
bottom:0;
width:100%;
_position: absolute;
background:#FF0000;
height:50%;
}
</style>
</head>
<body>
<section id="top">
Hello
</section>
<section id="bottom">
Hello
</section>
</body>
</html>
Thursday 2 December 2010
Complete mess up of the Moodle layout
I have been adding the Google Feed reader to my Moodle setup. One line which has been repeated a few times in the standard CSS makes a real mess of things. The culprit is white-space:nowrap. I shall be avoiding using this line in my own CSS.
Thursday 21 October 2010
Using jQuery corners and simple grids to begin interesting layouts
Here, I have taken techniques from 2 of my previous posts to create a layout. It doesn't look great, but you should be able to see the potential. I have once again, used the jQuery rounded corners plugin at http://jquery.malsup.com/corner/
See demo.
Copy and paste the code into a HTML file...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #14</title>
<script src="http://www.google.com/jsapi"></script>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
margin:0 auto;
width:800px;
margin-top:100px;
color:#FFFFFF;
}
.twoCol
{
float:left;
width:398px;
}
.boundry
{
height:100px;
}
.content
{
height:200px;
}
.left
{
background:#FF9200;
}
.right
{
background:#000000;
}
.first
{
margin-left:0;
clear:left;
}
h1, p
{
padding-left:20px;
padding-right:20px;
}
h1
{
font-size:5em;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$(document).ready(function()
{
$('#tl').corner('cc:#FF9200 tl 100px');
$('#br').corner('cc:#000000 br 100px');
});
</script>
</head>
<body>
<div class="left twoCol first boundry"></div><div id="tl" class="right twoCol boundry"></div>
<div class="left twoCol first content">
<h1>This is my title</h1>
</div>
<div class="right twoCol 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="br" class="left twoCol first boundry"></div><div class="right twoCol boundry"></div>
</body>
</html>
See demo.
Copy and paste the code into a HTML file...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #14</title>
<script src="http://www.google.com/jsapi"></script>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
margin:0 auto;
width:800px;
margin-top:100px;
color:#FFFFFF;
}
.twoCol
{
float:left;
width:398px;
}
.boundry
{
height:100px;
}
.content
{
height:200px;
}
.left
{
background:#FF9200;
}
.right
{
background:#000000;
}
.first
{
margin-left:0;
clear:left;
}
h1, p
{
padding-left:20px;
padding-right:20px;
}
h1
{
font-size:5em;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$(document).ready(function()
{
$('#tl').corner('cc:#FF9200 tl 100px');
$('#br').corner('cc:#000000 br 100px');
});
</script>
</head>
<body>
<div class="left twoCol first boundry"></div><div id="tl" class="right twoCol boundry"></div>
<div class="left twoCol first content">
<h1>This is my title</h1>
</div>
<div class="right twoCol 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="br" class="left twoCol first boundry"></div><div class="right twoCol boundry"></div>
</body>
</html>
Wednesday 20 October 2010
Simple Grid Layout #2
I have extended the simple grid layout here to include rows of differing sizes within columns.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Grid Layout 2</title>
<style type="text/css">
body
{
margin:0 auto;
width:800px;
font-family:sans-serif;
}
.oneCol, .twoCol, .threeCol
{
float:left;
margin-left:20px;
}
.oneCol
{
width:780px;
}
.twoCol
{
width:380px;
}
.threeCol
{
width:247px;
}
.threeCol.first
{
width:246px;
}
.first
{
margin-left:0;
clear:left;
}
.row
{
background:#CCCCCC;
margin-bottom:20px;
height:20px;
}
.twoRowHeight
{
height:60px;
}
.threeRowHeight
{
height:100px;
}
</style>
</head>
<body><br />
<div class="twoCol first">
<div class="row">Column 1 of 2 columns. Row 1.
</div>
<div class="row">Column 1 of 2 columns. Row 2.
</div>
</div>
<div class="twoCol">
<div class="row">Column 2 of 2 columns. Row 1.
</div>
<div class="row">Column 2 of 2 columns. Row 2.
</div>
</div>
<div class="oneCol first">
<div class="row">Column 1 of 1 column. Row 1.
</div>
</div>
<div class="threeCol first">
<div class="row">Column 1 of 3 columns. Row 1.
</div>
<div class="row">Column 1 of 3 columns. Row 2.
</div>
<div class="row">Column 1 of 3 columns. Row 3.
</div>
</div>
<div class="threeCol">
<div class="row">Column 2 of 3 columns. Row 1.
</div>
<div class="row twoRowHeight">Column 2 of 3 columns. Row 2.
</div>
</div>
<div class="threeCol">
<div class="row threeRowHeight">Column 3 of 3 columns. Row 1.
</div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Grid Layout 2</title>
<style type="text/css">
body
{
margin:0 auto;
width:800px;
font-family:sans-serif;
}
.oneCol, .twoCol, .threeCol
{
float:left;
margin-left:20px;
}
.oneCol
{
width:780px;
}
.twoCol
{
width:380px;
}
.threeCol
{
width:247px;
}
.threeCol.first
{
width:246px;
}
.first
{
margin-left:0;
clear:left;
}
.row
{
background:#CCCCCC;
margin-bottom:20px;
height:20px;
}
.twoRowHeight
{
height:60px;
}
.threeRowHeight
{
height:100px;
}
</style>
</head>
<body><br />
<div class="twoCol first">
<div class="row">Column 1 of 2 columns. Row 1.
</div>
<div class="row">Column 1 of 2 columns. Row 2.
</div>
</div>
<div class="twoCol">
<div class="row">Column 2 of 2 columns. Row 1.
</div>
<div class="row">Column 2 of 2 columns. Row 2.
</div>
</div>
<div class="oneCol first">
<div class="row">Column 1 of 1 column. Row 1.
</div>
</div>
<div class="threeCol first">
<div class="row">Column 1 of 3 columns. Row 1.
</div>
<div class="row">Column 1 of 3 columns. Row 2.
</div>
<div class="row">Column 1 of 3 columns. Row 3.
</div>
</div>
<div class="threeCol">
<div class="row">Column 2 of 3 columns. Row 1.
</div>
<div class="row twoRowHeight">Column 2 of 3 columns. Row 2.
</div>
</div>
<div class="threeCol">
<div class="row threeRowHeight">Column 3 of 3 columns. Row 1.
</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>
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>
Thursday 16 September 2010
Simple layout #9
This one is very similar to Simple layout #8 (hope it's not a trend), but for 2 major differences. I have included a background image and colour in the header. I have increased and broadened the font of the header. These 2 small differences are to fall in line with current website trends.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #9</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:light' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
font-size:0.96em;
background:#708090;
color:#CCCCCC;
}
#container
{
margin:0 auto;
width:920px;
}
#navigation, #content, #highlights, #footer
{
display:block;
}
#navigation, #footer
{
height:40px;
}
#navigation
{
text-align:right;
}
#navigation a
{
color:#CCCCCC;
text-align:center;
text-decoration:none;
width:80px;
height:40px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
display: inline-block;
}
#navigation a:hover
{
background:url(http://farm5.static.flickr.com/4081/4995562250_2dfe171a8d_t.jpg) repeat-x;
}
h1
{
font-family: 'Yanone Kaffeesatz', arial, serif;
font-size:4em;
}
h2
{
text-align:left;
font-family: 'Yanone Kaffeesatz', arial, serif;
font-size:3.4em;
}
#content
{
background:#000000 url(http://farm5.static.flickr.com/4145/4991020425_220a3fe3c4.jpg) no-repeat right top;
margin-left:20px;
margin-right:20px;
padding:10px;
}
#content p
{
text-align:justify;
width:400px;
}
#highlights
{
margin-left:10px;
}
.highlight
{
float:left;
width:260px;
margin:20px;
}
.highlight p
{
text-align:justify;
}
#footer
{
clear:both;
}
#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="content">
<h1>Important Header</h1>
<h2>Less important header</h2>
<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.</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 a very long footer.</p></div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #9</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:light' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
font-size:0.96em;
background:#708090;
color:#CCCCCC;
}
#container
{
margin:0 auto;
width:920px;
}
#navigation, #content, #highlights, #footer
{
display:block;
}
#navigation, #footer
{
height:40px;
}
#navigation
{
text-align:right;
}
#navigation a
{
color:#CCCCCC;
text-align:center;
text-decoration:none;
width:80px;
height:40px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
display: inline-block;
}
#navigation a:hover
{
background:url(http://farm5.static.flickr.com/4081/4995562250_2dfe171a8d_t.jpg) repeat-x;
}
h1
{
font-family: 'Yanone Kaffeesatz', arial, serif;
font-size:4em;
}
h2
{
text-align:left;
font-family: 'Yanone Kaffeesatz', arial, serif;
font-size:3.4em;
}
#content
{
background:#000000 url(http://farm5.static.flickr.com/4145/4991020425_220a3fe3c4.jpg) no-repeat right top;
margin-left:20px;
margin-right:20px;
padding:10px;
}
#content p
{
text-align:justify;
width:400px;
}
#highlights
{
margin-left:10px;
}
.highlight
{
float:left;
width:260px;
margin:20px;
}
.highlight p
{
text-align:justify;
}
#footer
{
clear:both;
}
#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="content">
<h1>Important Header</h1>
<h2>Less important header</h2>
<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.</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 a very long footer.</p></div>
</div>
</body>
</html>
Simple layout #8
Just for fun, on this one I've used a slate background. The difference with this particular layout is the use of the central graphic between the 2 items of content, which are padded from the top to provide balance.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #8</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
font-size:0.96em;
background:#708090;
color:#CCCCCC;
}
#container
{
margin:0 auto;
width:920px;
}
#navigation, #content, #highlights, #footer
{
display:block;
}
#navigation, #footer
{
height:40px;
}
#header, #highlights
{
height:340px;
}
#navigation
{
text-align:right;
}
#navigation a
{
color:#CCCCCC;
text-align:center;
text-decoration:none;
width:80px;
height:40px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
display: inline-block;
}
#navigation a:hover
{
background:url(http://farm5.static.flickr.com/4081/4995562250_2dfe171a8d_t.jpg) repeat-x;
}
h1
{
float:left;
margin-left:20px;
font-family: 'Yanone Kaffeesatz', arial, serif;
font-size:3.4em;
}
#content
{
margin-left:20px;
margin-right:20px;
margin-top:60px;
}
#content p
{
text-align:justify;
}
h2
{
text-align:left;
font-family: 'Yanone Kaffeesatz', arial, serif;
font-size:2.4em;
}
#highlights
{
border-bottom:1px solid #CCCCCC;
}
.highlight
{
float:left;
width:260px;
margin:20px;
}
.highlight p
{
padding-top:80px;
text-align:justify;
}
#footer
{
clear:both;
}
#footer p
{
text-align:center;
padding-top:10px;
}
</style>
</head>
<body>
<div id="container">
<h1>Important Header</h1>
<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="content">
<h2>Less important header</h2>
<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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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">
<img src="http://farm5.static.flickr.com/4145/4995561662_1cd41c7302.jpg" alt="phone" >
</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 a very long footer.</p></div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #8</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
font-size:0.96em;
background:#708090;
color:#CCCCCC;
}
#container
{
margin:0 auto;
width:920px;
}
#navigation, #content, #highlights, #footer
{
display:block;
}
#navigation, #footer
{
height:40px;
}
#header, #highlights
{
height:340px;
}
#navigation
{
text-align:right;
}
#navigation a
{
color:#CCCCCC;
text-align:center;
text-decoration:none;
width:80px;
height:40px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
display: inline-block;
}
#navigation a:hover
{
background:url(http://farm5.static.flickr.com/4081/4995562250_2dfe171a8d_t.jpg) repeat-x;
}
h1
{
float:left;
margin-left:20px;
font-family: 'Yanone Kaffeesatz', arial, serif;
font-size:3.4em;
}
#content
{
margin-left:20px;
margin-right:20px;
margin-top:60px;
}
#content p
{
text-align:justify;
}
h2
{
text-align:left;
font-family: 'Yanone Kaffeesatz', arial, serif;
font-size:2.4em;
}
#highlights
{
border-bottom:1px solid #CCCCCC;
}
.highlight
{
float:left;
width:260px;
margin:20px;
}
.highlight p
{
padding-top:80px;
text-align:justify;
}
#footer
{
clear:both;
}
#footer p
{
text-align:center;
padding-top:10px;
}
</style>
</head>
<body>
<div id="container">
<h1>Important Header</h1>
<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="content">
<h2>Less important header</h2>
<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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</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">
<img src="http://farm5.static.flickr.com/4145/4995561662_1cd41c7302.jpg" alt="phone" >
</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 a very long footer.</p></div>
</div>
</body>
</html>
Simple layout #7
Another commonly used layout. This time using a graphic as a sort of underline. Also, a navigation bar which I've seen on many designer websites.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #7</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
font-family:Sans-serif;
color:#CCCCCC;
background:#000000 url(http://farm5.static.flickr.com/4150/4992675995_fb299546f0_b.jpg) no-repeat left bottom;
}
#nav, #content, #footer
{
width:920px;
margin-left:20px;
}
#nav, #footer
{
height:100px;
}
#nav a
{
display:block;
float:left;
width:100px;
color:#CCCCCC;
text-decoration:none;
border-right:1px solid #CCCCCC;
padding-right:40px;
padding-left:8px;
padding-bottom:60px;
margin-left:-4px;
}
#nav a:hover
{
background:#A3A3A3;
color:#FFFFFF;
}
#content
{
min-height:360px;
}
h1
{
font-family:'Yanone Kaffeesatz', arial, serif;
font-size:3em;
margin-bottom:20px;
}
</style>
</head>
<body>
<div id="nav">
<a href="#">home</a>
<a href="#">products</a>
<a href="#">services</a>
<a href="#">about</a>
</div>
<div id="content">
<h1>A Pretty Big Header</h1>
<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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div id="footer"></div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #7</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
font-family:Sans-serif;
color:#CCCCCC;
background:#000000 url(http://farm5.static.flickr.com/4150/4992675995_fb299546f0_b.jpg) no-repeat left bottom;
}
#nav, #content, #footer
{
width:920px;
margin-left:20px;
}
#nav, #footer
{
height:100px;
}
#nav a
{
display:block;
float:left;
width:100px;
color:#CCCCCC;
text-decoration:none;
border-right:1px solid #CCCCCC;
padding-right:40px;
padding-left:8px;
padding-bottom:60px;
margin-left:-4px;
}
#nav a:hover
{
background:#A3A3A3;
color:#FFFFFF;
}
#content
{
min-height:360px;
}
h1
{
font-family:'Yanone Kaffeesatz', arial, serif;
font-size:3em;
margin-bottom:20px;
}
</style>
</head>
<body>
<div id="nav">
<a href="#">home</a>
<a href="#">products</a>
<a href="#">services</a>
<a href="#">about</a>
</div>
<div id="content">
<h1>A Pretty Big Header</h1>
<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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div id="footer"></div>
</body>
</html>
Wednesday 15 September 2010
Simple layout #6
In this layout I've tried to gain a clean look using green. I've also tried to use an image to separate the navigation from the content and provide a footer with the same graphic. Normally, I would have used a different font for the header. Still, you can take it apart and supply your own elements.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>green wave</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
background:#FFFFFF;
}
#waveHolder, #container
{
margin:0 auto;
}
#waveHolder
{
width:920px;
background:url(http://farm5.static.flickr.com/4150/4992713040_90495781a7_b.jpg) no-repeat top left;
min-height:600px;
}
#container
{
float:left;
width:580px;
min-height:600px;
background:url(http://farm5.static.flickr.com/4083/4992103573_f90491d9b8_m.jpg) no-repeat top right;
}
h1
{
text-align:right;
padding-top:80px;
margin-right:28px;
font-size:2em;
font-weight:lighter;
color:#00c600;
}
span#heading
{
color:#000000;
}
#mainContent
{
width:500px;
margin-top:100px;
margin-left:60px;
padding-right:40px;
}
#mainContent p
{
font-size:0.9em;
text-align:justify;
line-height:160%;
color:#6d6d6d;
}
#nav
{
float:left;
text-align:left;
height:224px;
width:200px;
margin-left:80px;
padding-top:200px;
font-size:1.2em;
}
#nav a.subMenu
{
display:block;
text-decoration: none;
width:100px;
height:40px;
padding-top:8px;
padding-left:10px;
padding-right:4px;
color:#00c600;
}
#nav a.subMenu:hover
{
background:url(http://farm5.static.flickr.com/4149/4992711584_49616c74dc_t.jpg) no-repeat;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="waveHolder">
<div id="nav">
<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="container">
<h1>welcome to the <span id="heading">green wave</span></h1>
<div id="mainContent">
<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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>green wave</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
background:#FFFFFF;
}
#waveHolder, #container
{
margin:0 auto;
}
#waveHolder
{
width:920px;
background:url(http://farm5.static.flickr.com/4150/4992713040_90495781a7_b.jpg) no-repeat top left;
min-height:600px;
}
#container
{
float:left;
width:580px;
min-height:600px;
background:url(http://farm5.static.flickr.com/4083/4992103573_f90491d9b8_m.jpg) no-repeat top right;
}
h1
{
text-align:right;
padding-top:80px;
margin-right:28px;
font-size:2em;
font-weight:lighter;
color:#00c600;
}
span#heading
{
color:#000000;
}
#mainContent
{
width:500px;
margin-top:100px;
margin-left:60px;
padding-right:40px;
}
#mainContent p
{
font-size:0.9em;
text-align:justify;
line-height:160%;
color:#6d6d6d;
}
#nav
{
float:left;
text-align:left;
height:224px;
width:200px;
margin-left:80px;
padding-top:200px;
font-size:1.2em;
}
#nav a.subMenu
{
display:block;
text-decoration: none;
width:100px;
height:40px;
padding-top:8px;
padding-left:10px;
padding-right:4px;
color:#00c600;
}
#nav a.subMenu:hover
{
background:url(http://farm5.static.flickr.com/4149/4992711584_49616c74dc_t.jpg) no-repeat;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="waveHolder">
<div id="nav">
<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="container">
<h1>welcome to the <span id="heading">green wave</span></h1>
<div id="mainContent">
<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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</div>
</div>
</body>
</html>
Tuesday 14 September 2010
Simple layout #5
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>
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>
Friday 3 September 2010
Simple layout #3
For this one, I have used the approach of having the header, contained in the footer. I have also created quite a lot of space around the navigation.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jo's Orange ring photographed by Cath</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#container
{
height:70%;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
h1
{
text-align:right;
margin-right:120px;
color:#FFFFFF;
font-size:3em;
}
#footer
{
height:30%;
clear:both;
background:#A3A3A3;
color:#FFFFFF;
opacity:0.6;
filter:alpha(opacity=60);
}
#nav
{
text-align:left;
height:224px;
width:200px;
margin-left:80px;
font-size:1.2em;
position:relative;
border-radius:6px;
behavior: url(scripts/PIE.htc);
background:#A3A3A3;
color:#FFFFFF;
opacity:0.6;
filter:alpha(opacity=60);
}
#nav a.subMenu
{
display:block;
text-decoration: none;
width:180px;
height:40px;
padding-top:16px;
padding-left:16px;
padding-right:4px;
color:#FFFFFF;
}
#nav a.subMenu:hover
{
background:#000000;
color:#FFFFFF;
}
.menuSelected
{
background:#CCCCCC;
color:#FFFFFF;
}
</style>
</head>
<body>
<img id="background" src="http://farm4.static.flickr.com/3216/2329105730_265bae807a.jpg" alt="orangering4" />
<br /><br />
<div id="container">
<div id="nav">
<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>
<div id="footer">
<h1>Orange Ring 4</h1>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jo's Orange ring photographed by Cath</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#container
{
height:70%;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
h1
{
text-align:right;
margin-right:120px;
color:#FFFFFF;
font-size:3em;
}
#footer
{
height:30%;
clear:both;
background:#A3A3A3;
color:#FFFFFF;
opacity:0.6;
filter:alpha(opacity=60);
}
#nav
{
text-align:left;
height:224px;
width:200px;
margin-left:80px;
font-size:1.2em;
position:relative;
border-radius:6px;
behavior: url(scripts/PIE.htc);
background:#A3A3A3;
color:#FFFFFF;
opacity:0.6;
filter:alpha(opacity=60);
}
#nav a.subMenu
{
display:block;
text-decoration: none;
width:180px;
height:40px;
padding-top:16px;
padding-left:16px;
padding-right:4px;
color:#FFFFFF;
}
#nav a.subMenu:hover
{
background:#000000;
color:#FFFFFF;
}
.menuSelected
{
background:#CCCCCC;
color:#FFFFFF;
}
</style>
</head>
<body>
<img id="background" src="http://farm4.static.flickr.com/3216/2329105730_265bae807a.jpg" alt="orangering4" />
<br /><br />
<div id="container">
<div id="nav">
<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>
<div id="footer">
<h1>Orange Ring 4</h1>
</div>
</body>
</html>
Subscribe to:
Posts (Atom)