These days we need to use the most flexible means of sizing elements in our web content. Our websites have to cope with different devices, different resolutions, different user preferences, accessibility, etc...
Step forward em. This can, not only be used for font sizes, but layout too. We are used to sizing elements of our pages using pixels. To be more flexible, and get in the swing of thinking about em instead of pixels, in the early stages we need a converter. Now of course, IE certainly early versions of it need to be covered, if we want our pages to be rendered consistently. For this we should put an * before our properties.
The example below, provides you with a converter and an example of how to use it.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pixel to em calculator</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#mainPage
{
margin:0 auto;
width:30.8em;
*width:30em;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
jQuery(function( $ )
{
$("#button").click(function()
{
$('#emlVal').val(parseFloat($('#pixelVal').val()*0.0625).toFixed(2));
$('#emForIEval').val(parseFloat($('#emlVal').val()*1.1).toFixed(2));
});
});
</script>
</head>
<body>
<div id="mainPage">
Pixel value<br /><input type="text" name="pixelVal" id="pixelVal" /><br />
Em value<br /><input type="text" name="emVal" id="emlVal" /><br />
Em for IE value<br /><input type="text" name="emForIEval" id="emForIEval" /><br />
<input type="submit" value="Submit" id="button" />
</div>
</body>
</html>
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
Tuesday 9 November 2010
Monday 8 November 2010
jQuery to split your strings into classes
This next example simplifies, but pays reference to some excellent work done on http://daverupert.com/2010/09/lettering-js/. I have taken this idea but used it to create the same class across all the letters in my title. You'll be able to see why when you copy the code into a file of your own. Essentially , in this case, I have put boxes around each letter to give you an idea as to what you can do.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Splitting Letters</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$.fn.spanTheChars = function()
{
var returnString = '';
$(this.text().split('')).each(function()
{
returnString += '<span class="chars">'+this+'</span>';
});
$(this).empty().append(returnString);
}
jQuery(function( $ )
{
$('h1').spanTheChars();
});
</script>
<style type="text/css">
body
{
font-family:Sans-serif;
font-size:62.5%;
}
h1
{
text-align:center;
font-size:2em;
text-transform:uppercase;
color:#FFFFFF;
}
.chars
{
display:block;
float:left;
width:2.8em;
min-height:2em;
background:#5CCCCC;
margin:0.2em;
padding-top:1em;
}
</style>
</head>
<body>
<h1>Split Title</h1>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Splitting Letters</title>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$.fn.spanTheChars = function()
{
var returnString = '';
$(this.text().split('')).each(function()
{
returnString += '<span class="chars">'+this+'</span>';
});
$(this).empty().append(returnString);
}
jQuery(function( $ )
{
$('h1').spanTheChars();
});
</script>
<style type="text/css">
body
{
font-family:Sans-serif;
font-size:62.5%;
}
h1
{
text-align:center;
font-size:2em;
text-transform:uppercase;
color:#FFFFFF;
}
.chars
{
display:block;
float:left;
width:2.8em;
min-height:2em;
background:#5CCCCC;
margin:0.2em;
padding-top:1em;
}
</style>
</head>
<body>
<h1>Split Title</h1>
</body>
</html>
Font combinations test #2
As promised the example below is a good way to test out which web safe font combinations are going to work. You simply need to comment out the fonts you don't want to use from the font-family tags in the CSS. In the case of the headers, you should also consider changing the font-weight to bold. Once you are happy. You need to think about colours. I get my colour combinations from the excellent http://colorschemedesigner.com.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font Combination #2</title>
<style>
body
{
/* font-size:62.5%; */
font-size:80%;
}
h1, h2, h3, h4
{
font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family:'Times New Roman', Times, serif;
font-family: Georgia, Serif;
font-family:‘Lucida Console’, Monaco, monospace;
font-family:'Courier New', Courier, monospace;
font-weight:normal;
}
h1, h2
{
text-transform:uppercase;
}
h1
{
font-size:5em;
}
h2
{
font-size:4em;
}
h3
{
font-size:3em;
}
h4
{
font-size:2em;
}
p, blockquote, strong, ul, ol, input, small, span
{
font-family:Impact, Charcoal, sans-serif;
font-family:Tahoma, Geneva, sans-serif;
font-family:Century Gothic, sans-serif;
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family:'Arial Black', Gadget, sans-serif;
font-family:'Arial Narrow', sans-serif;
font-family:Verdana, Geneva, sans-serif;
font-family:Copperplate / Copperplate Gothic Light, sans-serif;
font-family:Gill Sans / Gill Sans MT, sans-serif;
font-family:'Trebuchet MS', Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
font-family:‘Lucida Console’, Monaco, monospace;
font-family:'Courier New', Courier, monospace;
font-style:normal;
font-variant:normal;
font-weight:normal;
letter-spacing:0.1em;
}
blockquote
{
text-indent:-0.8em;
font-size:1.5em;
}
p
{
font-size:1.25em;
margin-top:1.25em;
margin-bottom:1.25em;
}
input
{
font-size:1.0em;
}
small
{
font-size:0.75em;
}
span
{
font-style:italic;
}
strong
{
font-variant:small-caps;
}
p.justified
{
text-align:justify;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>Paragraph. 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>
<blockquote>Blockquote. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</blockquote>
<strong>Strong. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</strong>
<ul>
<li>Unordered list. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<ol>
<li>Ordered list. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
<input type="text" name="name" id="name" value="input" tabindex="1" /><br />
<small>Small. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</small>
<span>Span. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span>
<p class="justified">Paragraph justified. 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>
</body>
</html>
Font combinations test #1
The example below is a good way to test out which web safe font combinations are going to work. You simply need to comment out the fonts you don't want to use from the font-family tags in the CSS. In the case of the headers, you should also consider changing the font-weight to bold. Once you are happy. You need to think about colours. I get my colour combinations from the excellent http://colorschemedesigner.com. I'm going to follow this blog up with a similar example, this time reversing the sans-serif and serif fonts.
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Font Combination #1</title>
<style>
body
{
/* font-size:62.5%; */
font-size:80%;
}
h1, h2, h3, h4
{
font-family:Impact, Charcoal, sans-serif;
font-family:Tahoma, Geneva, sans-serif;
font-family:Century Gothic, sans-serif;
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family:'Arial Black', Gadget, sans-serif;
font-family:'Arial Narrow', sans-serif;
font-family:Verdana, Geneva, sans-serif;
font-family:Copperplate / Copperplate Gothic Light, sans-serif;
font-family:Gill Sans / Gill Sans MT, sans-serif;
font-family:'Trebuchet MS', Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
font-family:‘Lucida Console’, Monaco, monospace;
font-family:'Courier New', Courier, monospace;
font-weight:normal;
}
h1, h2
{
text-transform:uppercase;
}
h1
{
font-size:5em;
}
h2
{
font-size:4em;
}
h3
{
font-size:3em;
}
h4
{
font-size:2em;
}
p, blockquote, strong, ul, ol, input, small, span
{
font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family:'Times New Roman', Times, serif;
font-family: Georgia, Serif;
font-family:‘Lucida Console’, Monaco, monospace;
font-family:'Courier New', Courier, monospace;
font-style:normal;
font-variant:normal;
font-weight:normal;
letter-spacing:0.1em;
}
blockquote
{
text-indent:-0.8em;
font-size: 1.5em;
}
p
{
font-size:1.25em;
margin-top:1.25em;
margin-bottom:1.25em;
}
input
{
font-size:1.0em;
}
small
{
font-size:0.75em;
}
span
{
font-style:italic;
}
strong
{
font-variant:small-caps;
}
p.justified
{
text-align:justify;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>Paragraph. 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>
<blockquote>Blockquote. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</blockquote>
<strong>Strong. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</strong>
<ul>
<li>Unordered list. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<ol>
<li>Ordered list. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
<input type="text" name="name" id="name" value="input" tabindex="1" /><br />
<small>Small. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</small>
<span>Span. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span>
<p class="justified">Paragraph justified. 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>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Font Combination #1</title>
<style>
body
{
/* font-size:62.5%; */
font-size:80%;
}
h1, h2, h3, h4
{
font-family:Impact, Charcoal, sans-serif;
font-family:Tahoma, Geneva, sans-serif;
font-family:Century Gothic, sans-serif;
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family:'Arial Black', Gadget, sans-serif;
font-family:'Arial Narrow', sans-serif;
font-family:Verdana, Geneva, sans-serif;
font-family:Copperplate / Copperplate Gothic Light, sans-serif;
font-family:Gill Sans / Gill Sans MT, sans-serif;
font-family:'Trebuchet MS', Helvetica, sans-serif;
font-family:Arial, Helvetica, sans-serif;
font-family:‘Lucida Console’, Monaco, monospace;
font-family:'Courier New', Courier, monospace;
font-weight:normal;
}
h1, h2
{
text-transform:uppercase;
}
h1
{
font-size:5em;
}
h2
{
font-size:4em;
}
h3
{
font-size:3em;
}
h4
{
font-size:2em;
}
p, blockquote, strong, ul, ol, input, small, span
{
font-family:'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family:'Times New Roman', Times, serif;
font-family: Georgia, Serif;
font-family:‘Lucida Console’, Monaco, monospace;
font-family:'Courier New', Courier, monospace;
font-style:normal;
font-variant:normal;
font-weight:normal;
letter-spacing:0.1em;
}
blockquote
{
text-indent:-0.8em;
font-size: 1.5em;
}
p
{
font-size:1.25em;
margin-top:1.25em;
margin-bottom:1.25em;
}
input
{
font-size:1.0em;
}
small
{
font-size:0.75em;
}
span
{
font-style:italic;
}
strong
{
font-variant:small-caps;
}
p.justified
{
text-align:justify;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>Paragraph. 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>
<blockquote>Blockquote. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</blockquote>
<strong>Strong. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</strong>
<ul>
<li>Unordered list. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<ol>
<li>Ordered list. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
<input type="text" name="name" id="name" value="input" tabindex="1" /><br />
<small>Small. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</small>
<span>Span. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</span>
<p class="justified">Paragraph justified. 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>
</body>
</html>
Wednesday 3 November 2010
jQuery Google Feed Plugin
This plugin provides a nice easy way for developers to implement the Google Feeds API in their site. In the example below, I've also added some ugly style elements to help show how the appearance can be manipulated.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Google Feed Plugin</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
font-family:Sans-serif;
font-size:62.5%;
}
#feeds
{
margin:0 auto;
width:80em;
background:#CCCCCC;
}
.gfc-control
{
width:40em;
font-size:1.2em;
}
.gfc-tabsArea
{
background:#FF9200;
}
.gfc-tabHeader.gfc-tabhActive
{
font-weight:bold;
}
.gfc-tabHeader.gfc-tabhInactive
{
font-style:italic;
}
.gfc-resultsbox-visible
{
background:#D3EDFC;
}
.gf-title
{
font-weight:bold;
text-decoration:none;
color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://jquery.malsup.com/gfeed/jquery.gfeed.js"></script>
<script>
$(document).ready(function()
{
$('a.feed').gFeed(
{
target:'#feeds',
max:3,
tabs:true
});
});
</script>
</head>
<body>
<div id="feeds">
<a class="feed" href="http://jquery.com/blog/feed/">jQuery Blog</a>
<a class="feed" href="http://www.learningjquery.com/feed/">Learning jQuery</a>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Google Feed Plugin</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
font-family:Sans-serif;
font-size:62.5%;
}
#feeds
{
margin:0 auto;
width:80em;
background:#CCCCCC;
}
.gfc-control
{
width:40em;
font-size:1.2em;
}
.gfc-tabsArea
{
background:#FF9200;
}
.gfc-tabHeader.gfc-tabhActive
{
font-weight:bold;
}
.gfc-tabHeader.gfc-tabhInactive
{
font-style:italic;
}
.gfc-resultsbox-visible
{
background:#D3EDFC;
}
.gf-title
{
font-weight:bold;
text-decoration:none;
color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://jquery.malsup.com/gfeed/jquery.gfeed.js"></script>
<script>
$(document).ready(function()
{
$('a.feed').gFeed(
{
target:'#feeds',
max:3,
tabs:true
});
});
</script>
</head>
<body>
<div id="feeds">
<a class="feed" href="http://jquery.com/blog/feed/">jQuery Blog</a>
<a class="feed" href="http://www.learningjquery.com/feed/">Learning jQuery</a>
</div>
</body>
</html>
Tuesday 2 November 2010
Three equal height columns using jQuery
I've seen lots of CSS solutions to this. They all seemed a little over the top and unreliable to me. So I decided to write my own solution using jQuery. There may be a better way to go about this using jQuery and I'd love to simplify what I've done, but it does work.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three Equal Columns using jQuery</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
font-family:Sans-serif;
margin:0 auto;
width:800px;
font-size:62.5%;
color:#FFFFFF;
}
#column1, #column2, #column3
{
float:left;
padding:10px;
font-size:1.2em;
}
#column1, #column2
{
width:180px;
}
#column1
{
background:#FF0000;
}
#column2
{
background:#000000;
}
#column3
{
background:#CCCCCC;
width:380px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$.fn.getBiggest = function(param, biggest)
{
if($(param).height() > biggest) return $(param).height();
else return biggest;
}
var currentlyBiggest = 0;
$(document).ready(function()
{
$('div').each(function(index)
{
currentlyBiggest = $(document).getBiggest($(this), currentlyBiggest);
});
$('div').height(currentlyBiggest);
});
</script>
</head>
<body>
<div id="column1"><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="column2"><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="column3"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three Equal Columns using jQuery</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
font-family:Sans-serif;
margin:0 auto;
width:800px;
font-size:62.5%;
color:#FFFFFF;
}
#column1, #column2, #column3
{
float:left;
padding:10px;
font-size:1.2em;
}
#column1, #column2
{
width:180px;
}
#column1
{
background:#FF0000;
}
#column2
{
background:#000000;
}
#column3
{
background:#CCCCCC;
width:380px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$.fn.getBiggest = function(param, biggest)
{
if($(param).height() > biggest) return $(param).height();
else return biggest;
}
var currentlyBiggest = 0;
$(document).ready(function()
{
$('div').each(function(index)
{
currentlyBiggest = $(document).getBiggest($(this), currentlyBiggest);
});
$('div').height(currentlyBiggest);
});
</script>
</head>
<body>
<div id="column1"><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="column2"><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="column3"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
</body>
</html>
Cross-browser minimum-height
Of course, so many things require hacks to work on all browsers. It's been the way of the web world for years. Actually since the emergence of IE. The example also points to a new trend in my designs to use em for sizing things other than just fonts.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cross-browser minimum-height</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
section
{
margin:0 auto;
width:50em;
background:#FF0000;
color:#FFFFFF;
/* The minimum height stuff */
min-height:10em;
height:auto !important;
height:10em;
}
</style>
</head>
<body>
<section>
<h1>Hello World!</h1>
</section>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cross-browser minimum-height</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
section
{
margin:0 auto;
width:50em;
background:#FF0000;
color:#FFFFFF;
/* The minimum height stuff */
min-height:10em;
height:auto !important;
height:10em;
}
</style>
</head>
<body>
<section>
<h1>Hello World!</h1>
</section>
</body>
</html>
Monday 25 October 2010
Centre a DIV, interpret font sizes and snipplr
I have been subscribed to http://snipplr.com recently. It's very good. It's a sort of social networking site for coders. Below are a couple examples of things I got from the site this morning contained in the same page. The first technique is how to centre a DIV inside another DIV. Very useful.
The second technique is to set the font size within the body CSS body reference to 62.5%. The result is that when you apply font-size:1em later, this translates to 10px. font-size1.2em is equal to 12px etc. Very useful too.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Centre a DIV inside a DIV</title>
<style type="text/css">
body
{
font-family:Sans-serif;
font-size:62.5%;
}
#outer
{
margin:0 auto;
width:800px;
background:#000000;
}
#inner
{
width:50%;
margin:auto;
background:#FF0000;
}
p
{
font-size:1.2em;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"><p>Hello World!</p></div>
</div>
</body>
</html>
The second technique is to set the font size within the body CSS body reference to 62.5%. The result is that when you apply font-size:1em later, this translates to 10px. font-size1.2em is equal to 12px etc. Very useful too.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Centre a DIV inside a DIV</title>
<style type="text/css">
body
{
font-family:Sans-serif;
font-size:62.5%;
}
#outer
{
margin:0 auto;
width:800px;
background:#000000;
}
#inner
{
width:50%;
margin:auto;
background:#FF0000;
}
p
{
font-size:1.2em;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"><p>Hello World!</p></div>
</div>
</body>
</html>
Thursday 21 October 2010
Using jQuery corners and simple grids to begin interesting layouts
Here, I have taken techniques from 2 of my previous posts to create a layout. It doesn't look great, but you should be able to see the potential. I have once again, used the jQuery rounded corners plugin at http://jquery.malsup.com/corner/
See demo.
Copy and paste the code into a HTML file...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #14</title>
<script src="http://www.google.com/jsapi"></script>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
margin:0 auto;
width:800px;
margin-top:100px;
color:#FFFFFF;
}
.twoCol
{
float:left;
width:398px;
}
.boundry
{
height:100px;
}
.content
{
height:200px;
}
.left
{
background:#FF9200;
}
.right
{
background:#000000;
}
.first
{
margin-left:0;
clear:left;
}
h1, p
{
padding-left:20px;
padding-right:20px;
}
h1
{
font-size:5em;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$(document).ready(function()
{
$('#tl').corner('cc:#FF9200 tl 100px');
$('#br').corner('cc:#000000 br 100px');
});
</script>
</head>
<body>
<div class="left twoCol first boundry"></div><div id="tl" class="right twoCol boundry"></div>
<div class="left twoCol first content">
<h1>This is my title</h1>
</div>
<div class="right twoCol content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div id="br" class="left twoCol first boundry"></div><div class="right twoCol boundry"></div>
</body>
</html>
See demo.
Copy and paste the code into a HTML file...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #14</title>
<script src="http://www.google.com/jsapi"></script>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
margin:0 auto;
width:800px;
margin-top:100px;
color:#FFFFFF;
}
.twoCol
{
float:left;
width:398px;
}
.boundry
{
height:100px;
}
.content
{
height:200px;
}
.left
{
background:#FF9200;
}
.right
{
background:#000000;
}
.first
{
margin-left:0;
clear:left;
}
h1, p
{
padding-left:20px;
padding-right:20px;
}
h1
{
font-size:5em;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$(document).ready(function()
{
$('#tl').corner('cc:#FF9200 tl 100px');
$('#br').corner('cc:#000000 br 100px');
});
</script>
</head>
<body>
<div class="left twoCol first boundry"></div><div id="tl" class="right twoCol boundry"></div>
<div class="left twoCol first content">
<h1>This is my title</h1>
</div>
<div class="right twoCol content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div id="br" class="left twoCol first boundry"></div><div class="right twoCol boundry"></div>
</body>
</html>
jQuery Text Shadows
The latest text-shadow attributes of course, don't work in IE. There is a way of producing text shadows without using images and that is through a jQuery plugin. You can get the plugin from here http://justinshearer.com/solidShadow/
It's not subtle. There is no opacity, but if you are careful about the width, direction and colours of your shadow, the appearance is very useable. Here is an example of how to use it...
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Shadows</title>
<style type="text/css">
h1
{
text-align: center;
font-size: 8em;
}
</style>
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://justinshearer.com/solidShadow/jquery.solidShadow.js"></script>
<script>
$(document).ready(function()
{
$('h1').solidShadow('inline','#000000','#CCCCCC','right',3);
});
</script>
</head>
<body>
<h1>Header 2</h1>
</body>
</html>
It's not subtle. There is no opacity, but if you are careful about the width, direction and colours of your shadow, the appearance is very useable. Here is an example of how to use it...
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Shadows</title>
<style type="text/css">
h1
{
text-align: center;
font-size: 8em;
}
</style>
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://justinshearer.com/solidShadow/jquery.solidShadow.js"></script>
<script>
$(document).ready(function()
{
$('h1').solidShadow('inline','#000000','#CCCCCC','right',3);
});
</script>
</head>
<body>
<h1>Header 2</h1>
</body>
</html>
jQuery rounded corners
Until recently I had been using CSS3 Pie from http://css3pie.com/ to add such things as rounded corners and drop shadows to elements of my pages. I was adding some rounded corners today to boxes on a website. I checked that they would be working in IE and D'oh! No rounded corners. So, I went in search of something which would work and after several tests of different hacks, plugins and scripts, I finally found this one at http://jquery.malsup.com/corner/ which works very well, so I'm sticking with it for now....
See demo.
Below is an example of how to use it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Corners</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
.myBox
{
background:#FF0000;
width:200px;
margin:10px;
padding:10px;
color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$(document).ready(function()
{
$('.myBox').corner();
});
</script>
</head>
<body>
<div class="myBox">
<h1>Hello World!</h1>
</div>
</body>
</html>
See demo.
Below is an example of how to use it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Corners</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
.myBox
{
background:#FF0000;
width:200px;
margin:10px;
padding:10px;
color:#FFFFFF;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$(document).ready(function()
{
$('.myBox').corner();
});
</script>
</head>
<body>
<div class="myBox">
<h1>Hello World!</h1>
</div>
</body>
</html>
Wednesday 20 October 2010
Basic font stack
Here is an example of a basic font stack using tried and tested design principles. They are a great start to a web design. Essentially, all you would need to do for your own site is change the font-family references with the CSS to fonts you like and you are away. Then you can start addressing colour, but the sizes are a good idea to keep, maybe just play with the overall font-size within the body declaration. Have fun!
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font stack Using Design Principles</title>
<style type="text/css">
body
{
margin:0 auto;
width:800px;
line-height:140%;
font-size:85%;
}
h1, h2, h3, h4
{
font-family:Georgia, Times New Roman, Times, serif;
font-weight:normal;
}
h1, h2
{
text-transform:uppercase;
}
h1
{
font-size:5em;
}
h2
{
font-size:4em;
}
h3
{
font-size:3em;
}
h4
{
font-size:2em;
}
p, blockquote, strong, ul, ol, input, small, span
{
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-variant: normal;
font-weight:normal;
letter-spacing:0.1em;
}
blockquote
{
text-indent: -0.8em;
font-size: 1.5em;
}
p
{
font-size: 1.25em;
margin-top: 1.25em;
margin-bottom: 1.25em;
}
input
{
font-size: 1.0em;
}
small
{
font-size: 0.75em;
}
span
{
font-style: italic;
}
strong
{
font-variant:small-caps;
}
p.justified
{
text-align:justify;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>Pellentesque habitant morbi <small>tristique senectus et netus et malesuada</small> 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>
<p class="justified">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <strong>Vestibulum tortor quam,</strong> 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>
<blockquote>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</blockquote>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font stack Using Design Principles</title>
<style type="text/css">
body
{
margin:0 auto;
width:800px;
line-height:140%;
font-size:85%;
}
h1, h2, h3, h4
{
font-family:Georgia, Times New Roman, Times, serif;
font-weight:normal;
}
h1, h2
{
text-transform:uppercase;
}
h1
{
font-size:5em;
}
h2
{
font-size:4em;
}
h3
{
font-size:3em;
}
h4
{
font-size:2em;
}
p, blockquote, strong, ul, ol, input, small, span
{
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-variant: normal;
font-weight:normal;
letter-spacing:0.1em;
}
blockquote
{
text-indent: -0.8em;
font-size: 1.5em;
}
p
{
font-size: 1.25em;
margin-top: 1.25em;
margin-bottom: 1.25em;
}
input
{
font-size: 1.0em;
}
small
{
font-size: 0.75em;
}
span
{
font-style: italic;
}
strong
{
font-variant:small-caps;
}
p.justified
{
text-align:justify;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>Pellentesque habitant morbi <small>tristique senectus et netus et malesuada</small> 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>
<p class="justified">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <strong>Vestibulum tortor quam,</strong> 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>
<blockquote>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</blockquote>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
</body>
</html>
Simple Grid Layout #2
I have extended the simple grid layout here to include rows of differing sizes within columns.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Grid Layout 2</title>
<style type="text/css">
body
{
margin:0 auto;
width:800px;
font-family:sans-serif;
}
.oneCol, .twoCol, .threeCol
{
float:left;
margin-left:20px;
}
.oneCol
{
width:780px;
}
.twoCol
{
width:380px;
}
.threeCol
{
width:247px;
}
.threeCol.first
{
width:246px;
}
.first
{
margin-left:0;
clear:left;
}
.row
{
background:#CCCCCC;
margin-bottom:20px;
height:20px;
}
.twoRowHeight
{
height:60px;
}
.threeRowHeight
{
height:100px;
}
</style>
</head>
<body><br />
<div class="twoCol first">
<div class="row">Column 1 of 2 columns. Row 1.
</div>
<div class="row">Column 1 of 2 columns. Row 2.
</div>
</div>
<div class="twoCol">
<div class="row">Column 2 of 2 columns. Row 1.
</div>
<div class="row">Column 2 of 2 columns. Row 2.
</div>
</div>
<div class="oneCol first">
<div class="row">Column 1 of 1 column. Row 1.
</div>
</div>
<div class="threeCol first">
<div class="row">Column 1 of 3 columns. Row 1.
</div>
<div class="row">Column 1 of 3 columns. Row 2.
</div>
<div class="row">Column 1 of 3 columns. Row 3.
</div>
</div>
<div class="threeCol">
<div class="row">Column 2 of 3 columns. Row 1.
</div>
<div class="row twoRowHeight">Column 2 of 3 columns. Row 2.
</div>
</div>
<div class="threeCol">
<div class="row threeRowHeight">Column 3 of 3 columns. Row 1.
</div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Grid Layout 2</title>
<style type="text/css">
body
{
margin:0 auto;
width:800px;
font-family:sans-serif;
}
.oneCol, .twoCol, .threeCol
{
float:left;
margin-left:20px;
}
.oneCol
{
width:780px;
}
.twoCol
{
width:380px;
}
.threeCol
{
width:247px;
}
.threeCol.first
{
width:246px;
}
.first
{
margin-left:0;
clear:left;
}
.row
{
background:#CCCCCC;
margin-bottom:20px;
height:20px;
}
.twoRowHeight
{
height:60px;
}
.threeRowHeight
{
height:100px;
}
</style>
</head>
<body><br />
<div class="twoCol first">
<div class="row">Column 1 of 2 columns. Row 1.
</div>
<div class="row">Column 1 of 2 columns. Row 2.
</div>
</div>
<div class="twoCol">
<div class="row">Column 2 of 2 columns. Row 1.
</div>
<div class="row">Column 2 of 2 columns. Row 2.
</div>
</div>
<div class="oneCol first">
<div class="row">Column 1 of 1 column. Row 1.
</div>
</div>
<div class="threeCol first">
<div class="row">Column 1 of 3 columns. Row 1.
</div>
<div class="row">Column 1 of 3 columns. Row 2.
</div>
<div class="row">Column 1 of 3 columns. Row 3.
</div>
</div>
<div class="threeCol">
<div class="row">Column 2 of 3 columns. Row 1.
</div>
<div class="row twoRowHeight">Column 2 of 3 columns. Row 2.
</div>
</div>
<div class="threeCol">
<div class="row threeRowHeight">Column 3 of 3 columns. Row 1.
</div>
</div>
</body>
</html>
Wednesday 13 October 2010
Simple Grid Layout
I've avoided using grids in CSS layouts for the most part. Whenever, looked into them, it always seemed more prescriptive than it should be. Below is an example of a grid system using the div tag which I hope, seems relatively straight forward. All columns are floated to the left. The '.first' class clears left so that it moves to a new row. I made a slight adjustment to the three column row so that it would be pixel perfect with the others by using the first column 1 pixel shorter. This is something which you need to take into account with columns which don't divide to a whole number.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Grid Layout</title>
<style type="text/css">
body
{
margin:0 auto;
width:800px;
font-family:sans-serif;
}
.oneCol, .twoCol, .threeCol
{
float:left;
margin-left:20px;
margin-bottom:10px;
background:#CCCCCC;
}
.oneCol
{
width:780px;
}
.twoCol
{
width:380px;
}
.threeCol
{
width:247px;
}
.threeCol.first
{
width:246px;
}
.first
{
margin-left:0;
clear:left;
}
</style>
</head>
<body><br />
<div class="twoCol first">
Two col
</div>
<div class="twoCol">
Two col
</div>
<div class="oneCol first">
One col
</div>
<div class="threeCol first">
Three col
</div>
<div class="threeCol">
Three col
</div>
<div class="threeCol">
Three col
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Grid Layout</title>
<style type="text/css">
body
{
margin:0 auto;
width:800px;
font-family:sans-serif;
}
.oneCol, .twoCol, .threeCol
{
float:left;
margin-left:20px;
margin-bottom:10px;
background:#CCCCCC;
}
.oneCol
{
width:780px;
}
.twoCol
{
width:380px;
}
.threeCol
{
width:247px;
}
.threeCol.first
{
width:246px;
}
.first
{
margin-left:0;
clear:left;
}
</style>
</head>
<body><br />
<div class="twoCol first">
Two col
</div>
<div class="twoCol">
Two col
</div>
<div class="oneCol first">
One col
</div>
<div class="threeCol first">
Three col
</div>
<div class="threeCol">
Three col
</div>
<div class="threeCol">
Three col
</div>
</body>
</html>
Using overflow hidden to better align text and images into columns
I can't take credit for this. Credit must go to Soh Tanaka for this blog post
http://www.sohtanaka.com/web-design/css-overflow-property-quick-tip/
I just tweak it a little so that it would work well within the context of this blog. Essentially it is a nice simple way of aligning text next to images without wrapping.
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Overflow Hidden</title>
<style type="text/css">
body
{
margin:0 auto;
width:600px;
font-family:sans-serif;
}
.thumb
{
float:left;
margin-top:20px;
margin-right:20px;
padding:5px;
border:1px solid #CCCCCC;
background:#F0F0F0;
}
.description
{
overflow:hidden;
}
</style>
</head>
<body>
<img src="http://farm3.static.flickr.com/2160/2271589215_935b5bc2ce_m.jpg" class="thumb" />
<div class="description">
<h3>Heading 1</h3>
<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>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<hr />
<img src="http://farm3.static.flickr.com/2411/2214360006_32d25b3df6_m.jpg" class="thumb" />
<div class="description">
<h3>Heading 2</h3>
<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>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</body>
</html>
http://www.sohtanaka.com/web-design/css-overflow-property-quick-tip/
I just tweak it a little so that it would work well within the context of this blog. Essentially it is a nice simple way of aligning text next to images without wrapping.
See demo.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Overflow Hidden</title>
<style type="text/css">
body
{
margin:0 auto;
width:600px;
font-family:sans-serif;
}
.thumb
{
float:left;
margin-top:20px;
margin-right:20px;
padding:5px;
border:1px solid #CCCCCC;
background:#F0F0F0;
}
.description
{
overflow:hidden;
}
</style>
</head>
<body>
<img src="http://farm3.static.flickr.com/2160/2271589215_935b5bc2ce_m.jpg" class="thumb" />
<div class="description">
<h3>Heading 1</h3>
<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>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<hr />
<img src="http://farm3.static.flickr.com/2411/2214360006_32d25b3df6_m.jpg" class="thumb" />
<div class="description">
<h3>Heading 2</h3>
<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>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</body>
</html>
Friday 24 September 2010
Simple layout #12
This design puts to earlier blog posts together. Simple layout #11 and Static Image Overlay.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #12</title>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
font-family:Sans-serif;
}
.contentHolder
{
margin:0 auto;
width:800px;
}
#topPart, #middlePart, #bottomPart
{
display:block;
}
#topPart, #bottomPart, #overlayedText
{
color:#FFFFFF;
}
#bottomPart, #overlayedText
{
background:#000000;
}
#topPart
{
height:200px;
background:#73C2FF;
}
h1
{
font-size:4.4em;
}
#topPart h1
{
padding-top:136px;
}
#middlePart
{
height:400px;
}
#overlayedText, #bottomPart h1
{
position:relative;
}
#overlayedText
{
clear:both;
top:-144px;
font-size:2em;
height:84px;
padding-top:80px;
opacity:0.6;
filter:alpha(opacity=60);
}
h1, #overlayedText
{
padding-left:10px;
}
#middlePart h1
{
float:left;
color:#FF0000;
width:360px;
}
#middlePart img
{
float:right;
}
#bottomPart
{
min-height:200px;
}
#bottomPart h1
{
top:-10px;
}
</style>
</head>
<body>
<div id="topPart">
<div class="contentHolder">
<h1>MY TITLE</h1>
</div>
</div>
<div id="middlePart">
<div class="contentHolder">
<h1>The stuff which really matters</h1>
<img src="http://farm5.static.flickr.com/4145/5020151472_5651a1321d.jpg" alt="girl" />
<div id="overlayedText">My overlayed text</div>
</div>
</div>
<div id="bottomPart">
<div class="contentHolder">
<h1>Goodbye</h1>
</div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #12</title>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
font-family:Sans-serif;
}
.contentHolder
{
margin:0 auto;
width:800px;
}
#topPart, #middlePart, #bottomPart
{
display:block;
}
#topPart, #bottomPart, #overlayedText
{
color:#FFFFFF;
}
#bottomPart, #overlayedText
{
background:#000000;
}
#topPart
{
height:200px;
background:#73C2FF;
}
h1
{
font-size:4.4em;
}
#topPart h1
{
padding-top:136px;
}
#middlePart
{
height:400px;
}
#overlayedText, #bottomPart h1
{
position:relative;
}
#overlayedText
{
clear:both;
top:-144px;
font-size:2em;
height:84px;
padding-top:80px;
opacity:0.6;
filter:alpha(opacity=60);
}
h1, #overlayedText
{
padding-left:10px;
}
#middlePart h1
{
float:left;
color:#FF0000;
width:360px;
}
#middlePart img
{
float:right;
}
#bottomPart
{
min-height:200px;
}
#bottomPart h1
{
top:-10px;
}
</style>
</head>
<body>
<div id="topPart">
<div class="contentHolder">
<h1>MY TITLE</h1>
</div>
</div>
<div id="middlePart">
<div class="contentHolder">
<h1>The stuff which really matters</h1>
<img src="http://farm5.static.flickr.com/4145/5020151472_5651a1321d.jpg" alt="girl" />
<div id="overlayedText">My overlayed text</div>
</div>
</div>
<div id="bottomPart">
<div class="contentHolder">
<h1>Goodbye</h1>
</div>
</div>
</body>
</html>
Static Image Overlay
Here is how to put those descriptions placed at the bottom of your images with a semi-opaque background.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Image Overlay</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
}
#mainContent
{
margin:0 auto;
width:800px;
padding:10px;
}
.imgHolder p, .imgHolder img
{
display:block;
width:100px;
}
.imgHolder p
{
position:relative;
top:-46px;
background:#000000;
color:#FFFFFF;
font-size:0.8em;
height:24px;
padding-top:8px;
text-align:center;
opacity:0.6;
filter:alpha(opacity=60);
}
</style>
</head>
<body>
<div id="mainContent">
<h1>Static Image Overlay</h1>
<div class="imgHolder"><img src="http://farm5.static.flickr.com/4092/5019367535_053592b411_t.jpg" alt="red ring" /><p>red ring</p></div>
<div class="imgHolder"><img src="http://farm5.static.flickr.com/4083/5019367559_f575c61142_t.jpg" alt="tea pot" /><p>tea pot</p></div>
<div class="imgHolder"><img src="http://farm5.static.flickr.com/4086/5019973694_8dd67f644d_t.jpg" alt="fruit basket" /><p>fruit basket</p></div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Static Image Overlay</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
}
#mainContent
{
margin:0 auto;
width:800px;
padding:10px;
}
.imgHolder p, .imgHolder img
{
display:block;
width:100px;
}
.imgHolder p
{
position:relative;
top:-46px;
background:#000000;
color:#FFFFFF;
font-size:0.8em;
height:24px;
padding-top:8px;
text-align:center;
opacity:0.6;
filter:alpha(opacity=60);
}
</style>
</head>
<body>
<div id="mainContent">
<h1>Static Image Overlay</h1>
<div class="imgHolder"><img src="http://farm5.static.flickr.com/4092/5019367535_053592b411_t.jpg" alt="red ring" /><p>red ring</p></div>
<div class="imgHolder"><img src="http://farm5.static.flickr.com/4083/5019367559_f575c61142_t.jpg" alt="tea pot" /><p>tea pot</p></div>
<div class="imgHolder"><img src="http://farm5.static.flickr.com/4086/5019973694_8dd67f644d_t.jpg" alt="fruit basket" /><p>fruit basket</p></div>
</div>
</body>
</html>
Thursday 23 September 2010
Simple layout #11
This layout shows how to put your backgrounds across the screen at a width of 100%, take up 100% of the height, but centre the content within the page with uniformity.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #11</title>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
font-family:Sans-serif;
}
.contentHolder
{
margin:0 auto;
width:800px;
border-left:10px dotted #69FFBF;
border-right:10px dotted #69FFBF;
padding:10px;
}
#topPart, #middlePart, #bottomPart
{
display:block;
}
#topPart, #bottomPart
{
color:#FFFFFF;
}
#topPart
{
height:200px;
background:#73C2FF;
}
#middlePart
{
height:400px;
}
#bottomPart
{
background:#000000;
min-height:200px;
}
</style>
</head>
<body>
<div id="topPart">
<div class="contentHolder">
<h1>Hello</h1>
</div>
</div>
<div id="middlePart">
<div class="contentHolder">
<h1>The stuff which really matters</h1>
</div>
</div>
<div id="bottomPart">
<div class="contentHolder">
<h1>Goodbye</h1>
</div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #11</title>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
font-family:Sans-serif;
}
.contentHolder
{
margin:0 auto;
width:800px;
border-left:10px dotted #69FFBF;
border-right:10px dotted #69FFBF;
padding:10px;
}
#topPart, #middlePart, #bottomPart
{
display:block;
}
#topPart, #bottomPart
{
color:#FFFFFF;
}
#topPart
{
height:200px;
background:#73C2FF;
}
#middlePart
{
height:400px;
}
#bottomPart
{
background:#000000;
min-height:200px;
}
</style>
</head>
<body>
<div id="topPart">
<div class="contentHolder">
<h1>Hello</h1>
</div>
</div>
<div id="middlePart">
<div class="contentHolder">
<h1>The stuff which really matters</h1>
</div>
</div>
<div id="bottomPart">
<div class="contentHolder">
<h1>Goodbye</h1>
</div>
</div>
</body>
</html>
Prettier scrollbars
This demo offers a starting point to having prettier scrollbars for your web page. I am using jScrollPane at
http://jscrollpane.kelvinluck.com/
Naturally in this instance, I am referring to a CSS file on the jScrollPane website, but you should download a copy of this and make the colours work for your theme.
The page layout is a bit like the old Microsoft Word for DOS. Sorry about all the text, you need that to show how the scrollbar looks for real.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prettier Scrollbars</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin' rel='stylesheet' type='text/css'>
<link href='http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
background:#000000;
color:#FFFFFF;
font-family: 'Droid Sans', arial, serif;
font-size:1.2em;
}
#container
{
margin:0 auto;
width:920px;
}
#contentWindow, #navigation
{
display:block;
margin-top:20px;
}
#contentWindow
{
background:#0000FF;
color:#FFFFFF;
font-family: 'Droid Sans', arial, serif;
border:2px solid #FFFFFF;
font-size:0.8em;
height:602px;
width:876px;
padding:20px;
}
#navigation, #navigation a
{
height:100px;
text-decoration:none;
text-align:center;
}
#navigation
{
margin-left:80px;
}
#navigation a
{
float:left;
width:180px;
color:#CCCCCC;
}
#navigation a:hover
{
font-weight:bold;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<script>
$(function()
{
$('.scroll-pane').jScrollPane();
});
</script>
</head>
<body>
<div id="container">
<div id="contentWindow" class="scroll-pane">
<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><br /><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><br /><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><br /><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><br /><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><br /><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="navigation">
<a href="#">home</a>
<a href="#">products</a>
<a href="#">services</a>
<a href="#">contact</a>
</div>
</div>
</body>
</html>
http://jscrollpane.kelvinluck.com/
Naturally in this instance, I am referring to a CSS file on the jScrollPane website, but you should download a copy of this and make the colours work for your theme.
The page layout is a bit like the old Microsoft Word for DOS. Sorry about all the text, you need that to show how the scrollbar looks for real.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Prettier Scrollbars</title>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin' rel='stylesheet' type='text/css'>
<link href='http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
background:#000000;
color:#FFFFFF;
font-family: 'Droid Sans', arial, serif;
font-size:1.2em;
}
#container
{
margin:0 auto;
width:920px;
}
#contentWindow, #navigation
{
display:block;
margin-top:20px;
}
#contentWindow
{
background:#0000FF;
color:#FFFFFF;
font-family: 'Droid Sans', arial, serif;
border:2px solid #FFFFFF;
font-size:0.8em;
height:602px;
width:876px;
padding:20px;
}
#navigation, #navigation a
{
height:100px;
text-decoration:none;
text-align:center;
}
#navigation
{
margin-left:80px;
}
#navigation a
{
float:left;
width:180px;
color:#CCCCCC;
}
#navigation a:hover
{
font-weight:bold;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<script>
$(function()
{
$('.scroll-pane').jScrollPane();
});
</script>
</head>
<body>
<div id="container">
<div id="contentWindow" class="scroll-pane">
<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><br /><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><br /><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><br /><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><br /><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><br /><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="navigation">
<a href="#">home</a>
<a href="#">products</a>
<a href="#">services</a>
<a href="#">contact</a>
</div>
</div>
</body>
</html>
Wednesday 22 September 2010
Simple layout #10
Yes, we're into double figures this latest layout sports 100% height, 100% width, a background belt and 3 rows.
I also used gimp to create a sort of blue gel cats eye in neon for fun.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #10</title>
<link href='http://fonts.googleapis.com/css?family=Cuprum&subset=latin' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
background:url(images/bigBlackLine.png) repeat-x 0px 400px;
color:#FFFFFF;
}
#container
{
margin:0 auto;
width:920px;
min-height:100%;
}
#topPart
{
height:400px;
background:#73C2FF;
}
h1
{
font-family: 'Cuprum', arial, serif;
font-size:6em;
width:600px;
padding:20px;
}
#middlePart
{
height:200px;
background:url(http://farm5.static.flickr.com/4091/5014384774_918902e791_z.jpg) no-repeat center center;
}
#bottomPart
{
background:#69FFBF;
}
</style>
</head>
<body>
<div id="container">
<div id="topPart">
<h1>One of those new fangled big fonts</h1>
</div>
<div id="middlePart">
</div>
<div id="bottomPart">
</div>
</div>
</body>
</html>
I also used gimp to create a sort of blue gel cats eye in neon for fun.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout #10</title>
<link href='http://fonts.googleapis.com/css?family=Cuprum&subset=latin' rel='stylesheet' type='text/css'>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
background:url(images/bigBlackLine.png) repeat-x 0px 400px;
color:#FFFFFF;
}
#container
{
margin:0 auto;
width:920px;
min-height:100%;
}
#topPart
{
height:400px;
background:#73C2FF;
}
h1
{
font-family: 'Cuprum', arial, serif;
font-size:6em;
width:600px;
padding:20px;
}
#middlePart
{
height:200px;
background:url(http://farm5.static.flickr.com/4091/5014384774_918902e791_z.jpg) no-repeat center center;
}
#bottomPart
{
background:#69FFBF;
}
</style>
</head>
<body>
<div id="container">
<div id="topPart">
<h1>One of those new fangled big fonts</h1>
</div>
<div id="middlePart">
</div>
<div id="bottomPart">
</div>
</div>
</body>
</html>
Subscribe to:
Posts (Atom)