The jQuery plugin below allows you to name an element as a sticky header or footer. You can also set the height, width and background colour. This is similar to those available in Twitter Bootstrap and ZURB Foundation.
First the HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery sticky footer</title>
<style>
body
{
font:90%/1.6 sans-serif;
}
section
{
margin-top:6em;
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Hello, world!</h1>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac pretium velit. Morbi scelerisque vel risus sed ullamcorper. Integer nec dui vel magna malesuada tempus. Vivamus dictum elit sem, at mattis leo volutpat in. Phasellus felis metus, dapibus semper nisi non, sagittis lacinia erat. Fusce in diam et velit commodo rutrum in in dui. Sed imperdiet est non dui molestie consequat. Duis ac ipsum in purus tempor dictum. Curabitur ac neque sed sem semper congue. Pellentesque enim enim, congue sed consequat et, lobortis id tortor. Cras a faucibus sem. Mauris sed enim quam. Aenean sollicitudin posuere mauris. Curabitur sollicitudin orci orci, a sagittis neque feugiat nec.</p>
</section>
<footer>
<p>Hello footer world!</p>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="sticky.plugin.js"></script>
<script>
/* Example parameters
$('header').sticky(
{
position:'top',
height:'10em',
width:'50%',
background:'red'
});
*/
$('header').sticky(
{
position:'top'
});
$('footer').sticky(
{
position:'bottom'
});
</script>
</body>
</html>
Now the jQuery plugin, sticky.plugin.js
(function($)
{
$.fn.extend(
{
sticky:function(options)
{
var defaults =
{
position:'bottom',
height:'4em',
width:'100%',
background:'white'
}
var options = $.extend(defaults, options);
return this.each(function()
{
var o = options;
$(this).css('position','fixed').css('_position','absolute').css(o.position,0).css('background',o.background);
$(this).height(o.height);
$(this).width(o.width);
$(this).css('z-index', 9999);
});
}
});
})(jQuery);
Showing posts with label header. Show all posts
Showing posts with label header. Show all posts
Friday, 6 June 2014
Wednesday, 22 May 2013
Two lines of PHP code which will save your sessions
So you develop PHP applications and use sessions to move data from page to page. You may then also have the problem that session data is not retained, especially if you use a line of code like this:
header('Location:nextpage.php');
Or indeed if the session is not saved on a page refresh.
Enter these 2 lines:
session_regenerate_id(true);
session_write_close();
Put these at the end of your page to save the session data. Also if you use the header function above do something like this.
session_regenerate_id(true);
header('Location:nextpage.php');
session_write_close();
header('Location:nextpage.php');
Or indeed if the session is not saved on a page refresh.
Enter these 2 lines:
session_regenerate_id(true);
session_write_close();
Put these at the end of your page to save the session data. Also if you use the header function above do something like this.
session_regenerate_id(true);
header('Location:nextpage.php');
session_write_close();
Friday, 27 May 2011
Semi opaque header on photographic background
I saw this technique recently on a designer website and thought it was a nice effect.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky footer</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#container
{
padding:6em;
opacity:0.8;
filter:alpha(opacity=80);
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
h1
{
font-size:6em;
color:yellow;
}
</style>
</head>
<body>
<img id="background" src="http://farm5.static.flickr.com/4089/4945221855_b1675bb80a.jpg" alt="Tiffany Camera 2" />
<br /><br />
<div id="container">
<h1>The Header</h1>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky footer</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#container
{
padding:6em;
opacity:0.8;
filter:alpha(opacity=80);
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
h1
{
font-size:6em;
color:yellow;
}
</style>
</head>
<body>
<img id="background" src="http://farm5.static.flickr.com/4089/4945221855_b1675bb80a.jpg" alt="Tiffany Camera 2" />
<br /><br />
<div id="container">
<h1>The Header</h1>
</div>
</body>
</html>
Monday, 16 May 2011
More use of radial gradients
Another very simple example of how to use radial gradients. In this case, to add lighting to your headers and footers.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fading Background</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#topHalf
{
height:50%;
background:#D4E4DF;
}
#bottomHalf
{
height:50%;
clear:both;
background:#B6CAC3;
}
#topContent, #bottomContent
{
margin:0 auto;
width:800px;
min-height:100%;
}
#topContent
{
background:url(images/fadingbgtop.png) no-repeat center top;
}
#bottomContent
{
background:url(images/fadingbgbottom.png) no-repeat center bottom;
}
</style>
</head>
<body>
<div id="topHalf">
<div id="topContent">
<h1>This is a sticky header example</h1>
</div>
</div>
<div id="bottomHalf">
<div id="bottomContent">
<h1>This is a sticky footer example</h1>
</div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fading Background</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#topHalf
{
height:50%;
background:#D4E4DF;
}
#bottomHalf
{
height:50%;
clear:both;
background:#B6CAC3;
}
#topContent, #bottomContent
{
margin:0 auto;
width:800px;
min-height:100%;
}
#topContent
{
background:url(images/fadingbgtop.png) no-repeat center top;
}
#bottomContent
{
background:url(images/fadingbgbottom.png) no-repeat center bottom;
}
</style>
</head>
<body>
<div id="topHalf">
<div id="topContent">
<h1>This is a sticky header example</h1>
</div>
</div>
<div id="bottomHalf">
<div id="bottomContent">
<h1>This is a sticky footer example</h1>
</div>
</div>
</body>
</html>
Saturday, 19 March 2011
Big fonts for header
This is another small post. All I have done is stretched the h2 to match the length of the h1. The effect works very well.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stretch Fonts to Selector</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>
body
{
font-family:Sans-serif;
}
header
{
margin:4em;
width:20em;
text-align:center;
}
h1, h2
{
font-weight:bold;
text-transform:uppercase;
}
h1
{
color:#A5A5A5;
font-size:11em;
}
h2
{
color:#464646;
font-size:6.5em;
margin-top:-0.3em;
}
.i
{
color:#FF0000;
}
</style>
</head>
<body>
<header>
<h1>B<span class="i">i</span>g</h1>
<h2>T<span class="i">i</span>tle</h2>
</header>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stretch Fonts to Selector</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>
body
{
font-family:Sans-serif;
}
header
{
margin:4em;
width:20em;
text-align:center;
}
h1, h2
{
font-weight:bold;
text-transform:uppercase;
}
h1
{
color:#A5A5A5;
font-size:11em;
}
h2
{
color:#464646;
font-size:6.5em;
margin-top:-0.3em;
}
.i
{
color:#FF0000;
}
</style>
</head>
<body>
<header>
<h1>B<span class="i">i</span>g</h1>
<h2>T<span class="i">i</span>tle</h2>
</header>
</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>
Thursday, 18 November 2010
jQuery line to reflect h1 in page title
Quite often you want the title tag of your page to be the same as your title. This little jQuery line will do that for you.
$('title').text($('h1:first').text());
$('title').text($('h1:first').text());
Monday, 15 November 2010
HTML5 tags I am currently using
Why would I write this article?
It's just to give you a flavour of the HTML5 features I have found to be reliable and how I use them. There is a simple template below, but essentially they are <header></header>, <footer></footer>, <section></section>, <article> </article> and <aside></aside>.
Of course, you may be thinking, he's not using proper HTML5 html and meta tags. That's because the new ones are not currently accepted by the W3C Validators.
Of course, you may be thinking, he's not using proper HTML5 html and meta tags. That's because the new ones are not currently accepted by the W3C Validators.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>HTML5 example</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#mainPage, header, footer
{
margin:0 auto;
width:30.8em;
*width:30em;
}
#leftContent
{
float:left;
}
#rightContent
{
float:right;
}
footer
{
clear:both;
}
</style>
<!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
</head>
<body>
<header>
<h1>My header</h1>
</header>
<section id="mainPage">
<section id="leftContent">
<article>Article 1</article>
<article>Article 1</article>
</section>
<aside id="rightContent">Content on the aside</aside>
</section>
<footer>Footer</footer>
</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>
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>
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)