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>
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>
Subscribe to:
Posts (Atom)