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>
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
Monday 20 September 2010
Friday 17 September 2010
jQuery Pagination
This is a nice, simplified version of a jQuery paginator plugin found at http://plugins.jquery.com/project/jquery-pagination
You should get paginator.js from http://rohitsengar.cueblocks.net/paginator/download.php?f=paginator.js
rather than doing as I have done by referring to it through the download link.
There are many paginator techniques I found this to be the simplest to use and you have more control over the style. Naturally, I kept mine to a minimum to get you started without having to understand all the CSS I've used.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>paginator</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
}
.paginator
{
text-align:center;
}
.paginator .active, .paginator .inactive
{
margin:4px;
text-decoration:none;
}
.paginator .inactive
{
cursor:default;
}
#pages
{
margin:0 auto;
width:200px;
}
#content
{
margin:0 auto;
width:400px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://rohitsengar.cueblocks.net/paginator/download.php?f=paginator.js"></script>
<script>
$(function ()
{
separator = '';
itemsPerPage = 1;
paginatorPosition = 'bottom';
paginatorStyle = 2;
$("#pages").pagination();
});
</script>
</head>
<body>
<div id="content">
<h1>jQuery Pagination</h1>
<p>For further information see <a href="http://plugins.jquery.com/project/jquery-pagination">http://plugins.jquery.com/project/jquery-pagination</a></p>
<div id="pages">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 6</p>
</div>
</div>
</body>
</html>
You should get paginator.js from http://rohitsengar.cueblocks.net/paginator/download.php?f=paginator.js
rather than doing as I have done by referring to it through the download link.
There are many paginator techniques I found this to be the simplest to use and you have more control over the style. Naturally, I kept mine to a minimum to get you started without having to understand all the CSS I've used.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>paginator</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
}
.paginator
{
text-align:center;
}
.paginator .active, .paginator .inactive
{
margin:4px;
text-decoration:none;
}
.paginator .inactive
{
cursor:default;
}
#pages
{
margin:0 auto;
width:200px;
}
#content
{
margin:0 auto;
width:400px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://rohitsengar.cueblocks.net/paginator/download.php?f=paginator.js"></script>
<script>
$(function ()
{
separator = '';
itemsPerPage = 1;
paginatorPosition = 'bottom';
paginatorStyle = 2;
$("#pages").pagination();
});
</script>
</head>
<body>
<div id="content">
<h1>jQuery Pagination</h1>
<p>For further information see <a href="http://plugins.jquery.com/project/jquery-pagination">http://plugins.jquery.com/project/jquery-pagination</a></p>
<div id="pages">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 6</p>
</div>
</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
Drop down menu using jQuery
This is an adaptation on some work done by Myles Angell. I've just simplified the CSS so that you can do more with it. The original is at http://be.twixt.us/jquery/suckerFish.php
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drop Down Menu</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-family:Sans-serif;
}
#container
{
margin:0 auto;
width:800px;
}
.nav, .nav ul, .nav ul
{
list-style: none;
}
.nav, .nav li
{
position: relative;
}
.nav
{
z-index: 100;
}
.nav ul
{
width:100px;
position: absolute;
top: -999em;
left: -1px;
}
.nav ul a
{
width: 80px;
}
.nav li
{
float: left;
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited
{
height:20px;
display: block;
padding:10px;
text-decoration: none;
}
.nav li a:hover, #navigation li:hover a, #navigation li.sfHover a, #navigation li:hover ul a:hover, #navigation li.sfHover ul a:hover, .nav ul a:hover
{
background: #CCCCCC;
color: #000000;
}
#navigation li:hover ul a, #navigation li.sfHover ul a, .nav ul, .nav li a, .nav li a:link, .nav li a:active, .nav li a:visited
{
background: #000000;
color: #FFFFFF;
}
.nav li:hover ul, .nav li.sfHover ul
{
top:40px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$("#navigation li").hover(
function()
{
$("ul", this).fadeIn("fast");
},
function()
{
}
);
if (document.all)
{
$("#navigation li").hoverClass ("sfHover");
}
});
$.fn.hoverClass = function(c)
{
return this.each(function()
{
$(this).hover(
function()
{
$(this).addClass(c);
},
function()
{
$(this).removeClass(c);
}
);
});
};
</script>
</head>
<body>
<div id="container">
<ul id="navigation" class="nav">
<li><a href="#item1">item 1</a>
<ul>
<li><a href="#item1.1">item 1.1</a></li>
<li><a href="#item1.2">item 1.2</a></li>
<li><a href="#item1.3">item 1.3</a></li>
<li><a href="#item1.4">item 1.4</a></li>
</ul>
</li>
<li><a href="#item2">item 2</a>
<ul>
<li><a href="#item2.1">item 2.1</a></li>
<li><a href="#item2.2">item 2.2</a></li>
</ul>
</li>
<li><a href="#item3">item 3</a>
<ul>
<li><a href="#item3.1">item 3.1</a></li>
<li><a href="#item3.2">item 3.2</a></li>
</ul>
</li>
<li><a href="#item4">item 4</a>
<ul>
<li><a href="#item4.1">item 4.1</a></li>
<li><a href="#item4.2">item 4.2</a></li>
<li><a href="#item4.3">item 4.3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drop Down Menu</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-family:Sans-serif;
}
#container
{
margin:0 auto;
width:800px;
}
.nav, .nav ul, .nav ul
{
list-style: none;
}
.nav, .nav li
{
position: relative;
}
.nav
{
z-index: 100;
}
.nav ul
{
width:100px;
position: absolute;
top: -999em;
left: -1px;
}
.nav ul a
{
width: 80px;
}
.nav li
{
float: left;
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited
{
height:20px;
display: block;
padding:10px;
text-decoration: none;
}
.nav li a:hover, #navigation li:hover a, #navigation li.sfHover a, #navigation li:hover ul a:hover, #navigation li.sfHover ul a:hover, .nav ul a:hover
{
background: #CCCCCC;
color: #000000;
}
#navigation li:hover ul a, #navigation li.sfHover ul a, .nav ul, .nav li a, .nav li a:link, .nav li a:active, .nav li a:visited
{
background: #000000;
color: #FFFFFF;
}
.nav li:hover ul, .nav li.sfHover ul
{
top:40px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$("#navigation li").hover(
function()
{
$("ul", this).fadeIn("fast");
},
function()
{
}
);
if (document.all)
{
$("#navigation li").hoverClass ("sfHover");
}
});
$.fn.hoverClass = function(c)
{
return this.each(function()
{
$(this).hover(
function()
{
$(this).addClass(c);
},
function()
{
$(this).removeClass(c);
}
);
});
};
</script>
</head>
<body>
<div id="container">
<ul id="navigation" class="nav">
<li><a href="#item1">item 1</a>
<ul>
<li><a href="#item1.1">item 1.1</a></li>
<li><a href="#item1.2">item 1.2</a></li>
<li><a href="#item1.3">item 1.3</a></li>
<li><a href="#item1.4">item 1.4</a></li>
</ul>
</li>
<li><a href="#item2">item 2</a>
<ul>
<li><a href="#item2.1">item 2.1</a></li>
<li><a href="#item2.2">item 2.2</a></li>
</ul>
</li>
<li><a href="#item3">item 3</a>
<ul>
<li><a href="#item3.1">item 3.1</a></li>
<li><a href="#item3.2">item 3.2</a></li>
</ul>
</li>
<li><a href="#item4">item 4</a>
<ul>
<li><a href="#item4.1">item 4.1</a></li>
<li><a href="#item4.2">item 4.2</a></li>
<li><a href="#item4.3">item 4.3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
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 10 September 2010
Simple layout #4
This is the kind of design which could work as starting position for, as an example, a designer furniture shop. There is a little more code than I would usually try and use on this blog. I wanted to create a gradient using pure CSS rather than an image which meant adding the IE only code. Other than that, it's quite simple.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box design</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
background-color: #F3F3F3;
background-image: -moz-linear-gradient(top, #F3F3F3, #FFFFFF); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #F3F3F3),color-stop(1, #FFFFFF)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#F3F3F3', EndColorStr='#FFFFFF'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#F3F3F3', EndColorStr='#FFFFFF')"; /* IE8 */
}
#container
{
margin:0 auto;
width:800px;
}
h1, h2
{
font-family:Georgia;
font-weight:lighter;
}
h1
{
text-align:center;
font-size:4em;
}
h2
{
text-align:left;
font-size:2em;
margin-left:20px;
margin-top:1em;
}
.box, .twoBox
{
float:left;
min-height:260px;
}
.box
{
width:260px;
}
.twoBox
{
width:520px;
}
#box1
{
background:#77F9CF;
}
#box2
{
background:url(http://farm5.static.flickr.com/4125/4945802498_a53b3eedc5.jpg);
}
#box3
{
background:#7DD0F8;
}
#box4
{
background:#FFA77A;
}
#box5
{
background:#000000;
}
p
{
margin:20px;
text-align:justify;
line-height:140%;
color:#FFFFFF;
}
#footer
{
clear:left;
text-align:center;
color:#A3A3A3;
font-size:0.8em;
}
</style>
</head>
<body>
<h1>The Heading</h1>
<div id="container">
<div id="box1" class="box">
<h2>Sub</h2>
<h2>Heading</h2>
</div>
<div id="box2" class="twoBox">
</div>
<div id="box3" class="box">
</div>
<div id="box4" class="box">
</div>
<div id="box5" class="box">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>
</div>
<div id="footer">This could be quite a long footer</div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box design</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
background-color: #F3F3F3;
background-image: -moz-linear-gradient(top, #F3F3F3, #FFFFFF); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #F3F3F3),color-stop(1, #FFFFFF)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#F3F3F3', EndColorStr='#FFFFFF'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#F3F3F3', EndColorStr='#FFFFFF')"; /* IE8 */
}
#container
{
margin:0 auto;
width:800px;
}
h1, h2
{
font-family:Georgia;
font-weight:lighter;
}
h1
{
text-align:center;
font-size:4em;
}
h2
{
text-align:left;
font-size:2em;
margin-left:20px;
margin-top:1em;
}
.box, .twoBox
{
float:left;
min-height:260px;
}
.box
{
width:260px;
}
.twoBox
{
width:520px;
}
#box1
{
background:#77F9CF;
}
#box2
{
background:url(http://farm5.static.flickr.com/4125/4945802498_a53b3eedc5.jpg);
}
#box3
{
background:#7DD0F8;
}
#box4
{
background:#FFA77A;
}
#box5
{
background:#000000;
}
p
{
margin:20px;
text-align:justify;
line-height:140%;
color:#FFFFFF;
}
#footer
{
clear:left;
text-align:center;
color:#A3A3A3;
font-size:0.8em;
}
</style>
</head>
<body>
<h1>The Heading</h1>
<div id="container">
<div id="box1" class="box">
<h2>Sub</h2>
<h2>Heading</h2>
</div>
<div id="box2" class="twoBox">
</div>
<div id="box3" class="box">
</div>
<div id="box4" class="box">
</div>
<div id="box5" class="box">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</p>
</div>
<div id="footer">This could be quite a long footer</div>
</div>
</body>
</html>
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>
Thursday 2 September 2010
Overlapping logo
I'm often seeing websites where a logo overlaps the navigation bar and sticks out either side. Here is how it's done. You'll need to add your own image in place of mine because flickr didn't seem to accept the transparency behind my silver sticker logo.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Overlapping logo</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#container
{
margin: 0 auto;
width:920px;
border:1px solid #CCCCCC;
}
h1
{
margin-left:120px;
color:#FFFFFF;
}
#nav
{
text-align: center;
background:#000000;
height:40px;
width:100%;
}
#nav a
{
width: 100px;
height:28px;
padding-top:8px;
padding-bottom:4px;
padding-left:30px;
padding-right:30px;
display: inline-block;
letter-spacing: normal;
white-space: normal;
text-align: normal;
vertical-align: middle;
color:#FFFFFF;
text-decoration:none;
}
#nav a:hover
{
background:#FF0000;
}
#nav img
{
float:right;
position:relative;
top:-30px;
right:20px;
}
#content
{
min-height:400px;
}
</style>
</head>
<body>
<br /><br />
<div id="container">
<h1>This is a sticky footer example</h1>
<div id="nav">
<img src="images/silversticker.png" alt="silver sticker" />
<a href="#">First item</a>
<a href="#">Second item</a>
<a href="#">Third item</a>
</div>
<div id="content">
</div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Overlapping logo</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#container
{
margin: 0 auto;
width:920px;
border:1px solid #CCCCCC;
}
h1
{
margin-left:120px;
color:#FFFFFF;
}
#nav
{
text-align: center;
background:#000000;
height:40px;
width:100%;
}
#nav a
{
width: 100px;
height:28px;
padding-top:8px;
padding-bottom:4px;
padding-left:30px;
padding-right:30px;
display: inline-block;
letter-spacing: normal;
white-space: normal;
text-align: normal;
vertical-align: middle;
color:#FFFFFF;
text-decoration:none;
}
#nav a:hover
{
background:#FF0000;
}
#nav img
{
float:right;
position:relative;
top:-30px;
right:20px;
}
#content
{
min-height:400px;
}
</style>
</head>
<body>
<br /><br />
<div id="container">
<h1>This is a sticky footer example</h1>
<div id="nav">
<img src="images/silversticker.png" alt="silver sticker" />
<a href="#">First item</a>
<a href="#">Second item</a>
<a href="#">Third item</a>
</div>
<div id="content">
</div>
</div>
</body>
</html>
Friday 27 August 2010
CSS Box gradient - cross browser
Here is a nice small example of how to get box gradients (using CSS) working across most browsers. Don't be put off by the silly stuff you need for IE. Just replace the colour values.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box gradient</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#container
{
min-height:100px;
width:400px;
background-color: #444444;
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<h1>Box gradient</h1>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box gradient</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#container
{
min-height:100px;
width:400px;
background-color: #444444;
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<h1>Box gradient</h1>
</div>
</body>
</html>
Rotating boxes without images
Most rotating box CSS examples do not work cross browser. I like to try and avoid simulating this with, for example, pictures created at an angle in a good graphics package (like GIMP). Today however, I found this web page http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/. Not all the functionality works at this stage, but enough to get going. You'll need to get hold of the JavaScript libraries first. You can also take off the backgrounds and just use the technique for rotating text. My example below is a simple one.
See demo.
<!DOCTYPE html>
<html lang="ene">
<head>
<meta charset="UTF-8">
<title>Rotate text</title>
<style>
body
{
font-family:Sans-serif;
}
#box1
{
position: absolute;
top: 45px;
left: 45px;
border: solid 1px #CCCCCC;
position: absolute;
width: 100px;
height: 100px;
padding: 10px;
-sand-transform:rotate(45deg);
}
#box2
{
position: absolute;
top: 45px;
left: 160px;
border: solid 1px #CCCCCC;
background:#a3a3a3;
width: 200px;
height: 200px;
padding: 10px;
-sand-transform:rotate(-25deg);
}
</style>
<script src="scripts/EventHelpers.js"></script>
<script src="scripts/cssQuery-p.js"></script>
<script src="scripts/sylvester.js"></script>
<script src="scripts/cssSandpaper.js"></script>
</head>
<body>
<div id="box1" style="-webkit-transform: rotate(45deg); ">
-sand-transform: rotate(45deg);
</div>
<div id="box2" style="-webkit-transform: rotate(-45deg); ">
-sand-transform: rotate(-45deg);
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="ene">
<head>
<meta charset="UTF-8">
<title>Rotate text</title>
<style>
body
{
font-family:Sans-serif;
}
#box1
{
position: absolute;
top: 45px;
left: 45px;
border: solid 1px #CCCCCC;
position: absolute;
width: 100px;
height: 100px;
padding: 10px;
-sand-transform:rotate(45deg);
}
#box2
{
position: absolute;
top: 45px;
left: 160px;
border: solid 1px #CCCCCC;
background:#a3a3a3;
width: 200px;
height: 200px;
padding: 10px;
-sand-transform:rotate(-25deg);
}
</style>
<script src="scripts/EventHelpers.js"></script>
<script src="scripts/cssQuery-p.js"></script>
<script src="scripts/sylvester.js"></script>
<script src="scripts/cssSandpaper.js"></script>
</head>
<body>
<div id="box1" style="-webkit-transform: rotate(45deg); ">
-sand-transform: rotate(45deg);
</div>
<div id="box2" style="-webkit-transform: rotate(-45deg); ">
-sand-transform: rotate(-45deg);
</div>
</body>
</html>
Wednesday 25 August 2010
Simple layout #2
Here is the second design template. There is no real content area. I've left it down to you how you want the main content to display.
See demo.
Well, here goes:
<!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
{
height:70%;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
h1
{
margin-left:120px;
font-size:4em;
font-weight:lighter;
color:#FFFFFF;
}
#footer
{
height:30%;
clear:both;
background:#A3A3A3;
color:#FFFFFF;
opacity:0.6;
filter:alpha(opacity=60);
}
#nav
{
text-align: center;
background:#000000;
height:40px;
width:100%;
opacity:0.9;
filter:alpha(opacity=90);
}
#nav ul
{
margin:0 auto;
width:920px;
}
#nav ul li
{
float:left;
list-style:none;
}
#nav ul li a
{
width: 100px;
height:28px;
padding-top:8px;
padding-bottom:4px;
padding-left:30px;
padding-right:30px;
display: inline-block;
letter-spacing: normal;
white-space: normal;
text-align: normal;
vertical-align: middle;
color:#FFFFFF;
text-decoration:none;
}
#nav ul li a:hover
{
background:#FF0000;
}
</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>
<div id="footer">
<div id="nav">
<ul>
<li><a href="#">First item</a></li>
<li><a href="#">Second item</a></li>
<li><a href="#">Third item</a></li>
</ul>
</div>
</div>
</body>
</html>
See demo.
Well, here goes:
<!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
{
height:70%;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
h1
{
margin-left:120px;
font-size:4em;
font-weight:lighter;
color:#FFFFFF;
}
#footer
{
height:30%;
clear:both;
background:#A3A3A3;
color:#FFFFFF;
opacity:0.6;
filter:alpha(opacity=60);
}
#nav
{
text-align: center;
background:#000000;
height:40px;
width:100%;
opacity:0.9;
filter:alpha(opacity=90);
}
#nav ul
{
margin:0 auto;
width:920px;
}
#nav ul li
{
float:left;
list-style:none;
}
#nav ul li a
{
width: 100px;
height:28px;
padding-top:8px;
padding-bottom:4px;
padding-left:30px;
padding-right:30px;
display: inline-block;
letter-spacing: normal;
white-space: normal;
text-align: normal;
vertical-align: middle;
color:#FFFFFF;
text-decoration:none;
}
#nav ul li a:hover
{
background:#FF0000;
}
</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>
<div id="footer">
<div id="nav">
<ul>
<li><a href="#">First item</a></li>
<li><a href="#">Second item</a></li>
<li><a href="#">Third item</a></li>
</ul>
</div>
</div>
</body>
</html>
Thursday 19 August 2010
How to add interesting fonts to your page
You must have seen websites where the title or main text had a great font and thought, that's what I want for my site. Well here is how to do it.
See demo.
The first thing you need is to find the font that you want to use. I would recommend sites such as http://openfontlibrary.org/ Here at least you shouldn't get into licensing trouble. Once you have identified the font you'd like to use, you need to download it. You will probably get a .ttf file which is fine.
Not all browsers handle fonts in the same way so you need to have multiple formats of the font and the necessary code to embed it in your page reliably. To do this we use fontsquirrel fontface generator at http://www.fontsquirrel.com/fontface/generator. Check the 'Agreement' box first. Click on the 'Add fonts' button and upload your font. You will then be returned with a kit. The kit contains the fonts in all the formats you need and the necessary CSS code you need to embed it in your page.
Here is an example of the results:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Nice fonts</title>
<style type="text/css">
@font-face
{
font-family: 'KarmaRegular';
src: url('fonts/karma-webfont.eot');
src: local('☺'), url('fonts/karma-webfont.woff') format('woff'), url('fonts/karma-webfont.ttf') format('truetype'), url('fonts/karma-webfont.svg#webfont4iIQLJby') format('svg');
font-weight: normal;
font-style: normal;
}
h1
{
font-family: 'KarmaRegular';
font-size:4em;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
See demo.
The first thing you need is to find the font that you want to use. I would recommend sites such as http://openfontlibrary.org/ Here at least you shouldn't get into licensing trouble. Once you have identified the font you'd like to use, you need to download it. You will probably get a .ttf file which is fine.
Not all browsers handle fonts in the same way so you need to have multiple formats of the font and the necessary code to embed it in your page reliably. To do this we use fontsquirrel fontface generator at http://www.fontsquirrel.com/fontface/generator. Check the 'Agreement' box first. Click on the 'Add fonts' button and upload your font. You will then be returned with a kit. The kit contains the fonts in all the formats you need and the necessary CSS code you need to embed it in your page.
Here is an example of the results:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Nice fonts</title>
<style type="text/css">
@font-face
{
font-family: 'KarmaRegular';
src: url('fonts/karma-webfont.eot');
src: local('☺'), url('fonts/karma-webfont.woff') format('woff'), url('fonts/karma-webfont.ttf') format('truetype'), url('fonts/karma-webfont.svg#webfont4iIQLJby') format('svg');
font-weight: normal;
font-style: normal;
}
h1
{
font-family: 'KarmaRegular';
font-size:4em;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Wednesday 18 August 2010
Simple layout #1
Welcome to the first in a series of simple layouts which you I would like to share with you. Do what you will with them, just remember us when you need a new website. We like to keep things simple, fast and readable. Sadly the bottom corners of the right hand div don't display correctly in IE. Not even using CSSPIE, but as this is only an example I though it best not to add any code to work. It would only clutter the important parts up.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple layout 1</title>
<style type="text/css">
body
{
margin:0;
font-family:Georgia, serif;
background:#C23F67;
color:#FFFFFF;
}
#container
{
margin:0 auto;
width:920px;
}
#leftHand, #rightHand
{
float:left;
}
#leftHand
{
width:600px;
}
#rightHand
{
width:320px;
background:#000000;
min-height:400px;
margin-bottom:20px;
position:relative;
border-radius:0 0 20px 20px;
behavior:url(scripts/PIE.htc);
}
#footer
{
clear:left;
width:100%;
min-height:100px;
border-top:1px solid #FFFFFF;
}
#logo
{
font-style:italic;
font-size:20em;
text-align:center;
margin:90px;
}
h1
{
margin-top:40px;
font-size:6em;
font-weight:lighter;
}
p
{
text-align:justify;
margin-right:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="leftHand">
<h1>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="rightHand">
<span id="logo">I</span>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple layout 1</title>
<style type="text/css">
body
{
margin:0;
font-family:Georgia, serif;
background:#C23F67;
color:#FFFFFF;
}
#container
{
margin:0 auto;
width:920px;
}
#leftHand, #rightHand
{
float:left;
}
#leftHand
{
width:600px;
}
#rightHand
{
width:320px;
background:#000000;
min-height:400px;
margin-bottom:20px;
position:relative;
border-radius:0 0 20px 20px;
behavior:url(scripts/PIE.htc);
}
#footer
{
clear:left;
width:100%;
min-height:100px;
border-top:1px solid #FFFFFF;
}
#logo
{
font-style:italic;
font-size:20em;
text-align:center;
margin:90px;
}
h1
{
margin-top:40px;
font-size:6em;
font-weight:lighter;
}
p
{
text-align:justify;
margin-right:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="leftHand">
<h1>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="rightHand">
<span id="logo">I</span>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Making the title overlap the content container
There are times when you would like the content to be contained in a box. Sometimes you would like the header to overlap the top of that box. Here is how to do it. The crucial lines here are position:relative; top:40px; within the h1 CSS reference.
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Header over container</title>
<style type="text/css">
body
{
font-family:Sans-serif;
color:#CCCCCC;
}
h1, #container
{
margin:0 auto;
width:800px;
}
#container
{
margin-top:20px;
border:1px solid #CCCCCC;
}
h1
{
text-align:center;
color:#FF0000;
position:relative;
top:40px;
}
</style>
</head>
<body>
<h1>The title Lorem Ipum</h1>
<div id="container">
<p>Lorem ipsum consetetur...</p>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Header over container</title>
<style type="text/css">
body
{
font-family:Sans-serif;
color:#CCCCCC;
}
h1, #container
{
margin:0 auto;
width:800px;
}
#container
{
margin-top:20px;
border:1px solid #CCCCCC;
}
h1
{
text-align:center;
color:#FF0000;
position:relative;
top:40px;
}
</style>
</head>
<body>
<h1>The title Lorem Ipum</h1>
<div id="container">
<p>Lorem ipsum consetetur...</p>
</div>
</body>
</html>
Tuesday 17 August 2010
Resize Background Image
I've often seen background images being resized on designer websites and wondered, how do they do that? Anyway, here's how.
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Resize Background Image</title>
<style type="text/css">
html, body
{
margin:0;
font-family:Sans-serif;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
#mainContent
{
margin:0 auto;
width:800px;
padding:10px;
background:#FFFFFF;
color:#A3A3A3;
}
</style>
</head>
<body>
<img id="background" src="http://farm5.static.flickr.com/4140/4947943522_5ba46ef4df.jpg" alt="windFarm" />
<br /><br />
<div id="mainContent">
<h1>Hello World!</h1>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Resize Background Image</title>
<style type="text/css">
html, body
{
margin:0;
font-family:Sans-serif;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
#mainContent
{
margin:0 auto;
width:800px;
padding:10px;
background:#FFFFFF;
color:#A3A3A3;
}
</style>
</head>
<body>
<img id="background" src="http://farm5.static.flickr.com/4140/4947943522_5ba46ef4df.jpg" alt="windFarm" />
<br /><br />
<div id="mainContent">
<h1>Hello World!</h1>
</div>
</body>
</html>
Monday 16 August 2010
Fixed body and footer
This example combines a fixed body and footer height. Commonly used on designer websites.
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Fixed body</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
background:#A3A3A3;
}
#container, footer
{
display:block;
font-family:Sans-serif;
}
#container
{
background:#FFFFFF;
color:#A3A3A3;
height:400px;
}
footer
{
height:10em;
background:#A3A3A3;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<h1>This is a sticky footer example</h1>
</div>
<footer>This is my footer</footer>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Fixed body</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
background:#A3A3A3;
}
#container, footer
{
display:block;
font-family:Sans-serif;
}
#container
{
background:#FFFFFF;
color:#A3A3A3;
height:400px;
}
footer
{
height:10em;
background:#A3A3A3;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<h1>This is a sticky footer example</h1>
</div>
<footer>This is my footer</footer>
</body>
</html>
How to make a sticky footer
Sometimes you want the footer of your page to always be available at the same height no matter how much you resize your web browser. This is called a sticky footer. Here is a pretty simple way to code it for your site.
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
{
height:90%;
}
#footer
{
height:10%;
clear:both;
background:#A3A3A3;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<h1>This is a sticky footer example</h1>
</div>
<div id="footer">This is my sticky footer</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
{
height:90%;
}
#footer
{
height:10%;
clear:both;
background:#A3A3A3;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<h1>This is a sticky footer example</h1>
</div>
<div id="footer">This is my sticky footer</div>
</body>
</html>
Subscribe to:
Posts (Atom)