Thankfully the W3C seem to be sticking with tables in HTML5 despite all the criticisms. Most, if not all of the old attributes have gone, leaving us with simple tags and the introduction of the summary attribute to the table tag. Presumably this is to overcome the complaints about accessibility. It looks like a good strategy to me. Tables for data are good. Tables for layout, not so good.
See demo.
Below is an example of a HTML5 table:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tables in HTML5</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
table
{
margin:4em;
border:#CCCCCC solid 0.1em;
}
th, td
{
border-bottom:#CCCCCC solid 0.1em;
border-left:#CCCCCC solid 0.1em;
padding:1em;
}
th
{
background:#A7FFFF;
}
</style>
</head>
<body>
<table summary="Everything has a consequence.">
<tr>
<th>Action</th>
<th>Result</th>
</tr>
<tr>
<td>Work</td>
<td>Pay</td>
</tr>
<tr>
<td>Play</td>
<td>Happiness</td>
</tr>
<tr>
<td>Love</td>
<td>Love</td>
</tr>
</table>
</body>
</html>
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
Friday 11 February 2011
Wednesday 2 February 2011
Simple layout #15
Here is another layout which uses jquery corners.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout 15</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<script src="http://www.google.com/jsapi"></script>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
margin:0 auto;
width:800px;
margin-top:100px;
}
header
{
float:left;
color:#FF9200;
}
h1, h2, p
{
font-weight:normal;
}
h1, h2
{
font-family:Georgia, Times New Roman, Times, serif;
text-transform:uppercase;
color:#000000;
}
h1
{
font-size:5em;
}
h2
{
font-size:4em;
}
p
{
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-variant: normal;
letter-spacing:0.1em;
text-align:justify;
}
p
{
font-size: 1.25em;
margin-top: 1.25em;
margin-bottom: 1.25em;
}
header p
{
width:360px;
}
#tl
{
float:right;
width:400px;
height:400px;
background:#FF9200;
color:#FFFFFF;
}
#tl p
{
float:right;
width:280px;
padding-top:160px;
padding-right:20px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$(document).ready(function()
{
$('#tl').corner('tl 400px');
});
</script>
</head>
<body>
<header>
<h1>header 1</h1>
<h2>header 2</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p>
</header>
<div id="tl" class="">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Layout 15</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<script src="http://www.google.com/jsapi"></script>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
margin:0 auto;
width:800px;
margin-top:100px;
}
header
{
float:left;
color:#FF9200;
}
h1, h2, p
{
font-weight:normal;
}
h1, h2
{
font-family:Georgia, Times New Roman, Times, serif;
text-transform:uppercase;
color:#000000;
}
h1
{
font-size:5em;
}
h2
{
font-size:4em;
}
p
{
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-variant: normal;
letter-spacing:0.1em;
text-align:justify;
}
p
{
font-size: 1.25em;
margin-top: 1.25em;
margin-bottom: 1.25em;
}
header p
{
width:360px;
}
#tl
{
float:right;
width:400px;
height:400px;
background:#FF9200;
color:#FFFFFF;
}
#tl p
{
float:right;
width:280px;
padding-top:160px;
padding-right:20px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<script>
$(document).ready(function()
{
$('#tl').corner('tl 400px');
});
</script>
</head>
<body>
<header>
<h1>header 1</h1>
<h2>header 2</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.</p>
</header>
<div id="tl" class="">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</div>
</body>
</html>
Monday 24 January 2011
Four cornered web page
How do you add four different backgrounds as corners to your web page?
The answer is below. It even work in IE. You will have to create your own corner images.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4 corners</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
#topLeft, #topRight, #bottomLeft, #bottomRight
{
position:absolute;
width:100%;
height:100%;
}
#topLeft
{
background:url(topLeftCorner.png) no-repeat left top;
z-index:-10;
}
#topRight
{
background:url(topRightCorner.png) no-repeat right top;
z-index:-9;
}
#bottomLeft
{
background:url(bottomLeftCorner.png) no-repeat left bottom;
z-index:-8;
}
#bottomRight
{
background:url(bottomRightCorner.png) no-repeat right bottom;
z-index:-7;
}
#mainContent, h1
{
padding:2em;
}
</style>
</head>
<body>
<section id="topLeft"></section>
<section id="topRight"></section>
<section id="bottomLeft"></section>
<section id="bottomRight"></section>
<section id="mainContent">
<h1>Hello World!</h1>
</section>
</body>
</html>
The answer is below. It even work in IE. You will have to create your own corner images.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4 corners</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
#topLeft, #topRight, #bottomLeft, #bottomRight
{
position:absolute;
width:100%;
height:100%;
}
#topLeft
{
background:url(topLeftCorner.png) no-repeat left top;
z-index:-10;
}
#topRight
{
background:url(topRightCorner.png) no-repeat right top;
z-index:-9;
}
#bottomLeft
{
background:url(bottomLeftCorner.png) no-repeat left bottom;
z-index:-8;
}
#bottomRight
{
background:url(bottomRightCorner.png) no-repeat right bottom;
z-index:-7;
}
#mainContent, h1
{
padding:2em;
}
</style>
</head>
<body>
<section id="topLeft"></section>
<section id="topRight"></section>
<section id="bottomLeft"></section>
<section id="bottomRight"></section>
<section id="mainContent">
<h1>Hello World!</h1>
</section>
</body>
</html>
Friday 21 January 2011
No I'm not going to title this post less is more
I have started to use less. No, I'm not completely useless. Less from lesscss.org "extends CSS with dynamic behavior such asvariables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js."
So below is an example of how to get started. First, you need to download less.js from lesscss.org. Let's say that we are going to put this .js file, our HTML file and our css file all in the same folder.
Once downloaded, I tend to rename the file less.js.
We then need to create our stylesheet. Our stylesheet can be named however we like but it must have the .less extension, so let's call it style.less. Once created we'll add the following lines:
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
You can see from the lines above, that we have created a variable called @nice-blue and assigned it a value of #5B83AD. We have then created another variable called @light-blue and assigned it the value of @nice-blue + #111. We have then assigned the variable colour of @light-blue to the property color for the selector #header, which we will be using in our HTML page.
As you can imagine, once you've declared your variables this way, it's easier to use them over and over again. An this is just the start. You can also use 'mixins' such as two or more css classes being combined into one greater class. You can add 'Parametric Mixins', allowing you to pass parameters to css classes. There is so much more so go to the website and have a look.
We are now about to create our HTML page. At this stage, I should warn you that it's very important what order you declare the stylesheet and the script tag, otherwise it won't work, so please follow the example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Less example</title>
<link rel="stylesheet/less" type="text/css" href="style.less" />
So below is an example of how to get started. First, you need to download less.js from lesscss.org. Let's say that we are going to put this .js file, our HTML file and our css file all in the same folder.
Once downloaded, I tend to rename the file less.js.
We then need to create our stylesheet. Our stylesheet can be named however we like but it must have the .less extension, so let's call it style.less. Once created we'll add the following lines:
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
You can see from the lines above, that we have created a variable called @nice-blue and assigned it a value of #5B83AD. We have then created another variable called @light-blue and assigned it the value of @nice-blue + #111. We have then assigned the variable colour of @light-blue to the property color for the selector #header, which we will be using in our HTML page.
As you can imagine, once you've declared your variables this way, it's easier to use them over and over again. An this is just the start. You can also use 'mixins' such as two or more css classes being combined into one greater class. You can add 'Parametric Mixins', allowing you to pass parameters to css classes. There is so much more so go to the website and have a look.
We are now about to create our HTML page. At this stage, I should warn you that it's very important what order you declare the stylesheet and the script tag, otherwise it won't work, so please follow the example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>Less example</title>
<link rel="stylesheet/less" type="text/css" href="style.less" />
<script src="less.js"></script>
</head>
<body>
<p id="header">This should now be a nice light blue.</p>
</body>
</html>
<body>
<p id="header">This should now be a nice light blue.</p>
</body>
</html>
Wednesday 8 December 2010
Two equal row layout beginnings
I wanted to get a liquid layout with 2 rows taking up 50% of the browser hight each. I saw this type of layout on a site recently. It was a very minimalistic design. So I started to replicate it and do my own version. I then started to run into difficulties. I did some surfing and couldn't come up with the answer. So then I made a cup of tea, really put my brain into action, solved it, and now I'm sharing it with you.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two equal rows</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
background:#FFFFFF;
}
#top
{
height:auto;
clear:both;
}
#bottom
{
color:#FFFFFF;
position:fixed;
right:0;
bottom:0;
width:100%;
_position: absolute;
background:#FF0000;
height:50%;
}
</style>
</head>
<body>
<section id="top">
Hello
</section>
<section id="bottom">
Hello
</section>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two equal rows</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
background:#FFFFFF;
}
#top
{
height:auto;
clear:both;
}
#bottom
{
color:#FFFFFF;
position:fixed;
right:0;
bottom:0;
width:100%;
_position: absolute;
background:#FF0000;
height:50%;
}
</style>
</head>
<body>
<section id="top">
Hello
</section>
<section id="bottom">
Hello
</section>
</body>
</html>
Thursday 2 December 2010
Complete mess up of the Moodle layout
I have been adding the Google Feed reader to my Moodle setup. One line which has been repeated a few times in the standard CSS makes a real mess of things. The culprit is white-space:nowrap. I shall be avoiding using this line in my own CSS.
Thursday 18 November 2010
Use of Bokeh
Bokeh are those pictures we see of blurred spots of light. They are a very useful texture, common among good web designs. Below is an example of how they can be used.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Use of Bokeh</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
font-size:0.96em;
background:#000000;
color:#CCCCCC;
}
#container
{
margin:0 auto;
width:920px;
}
#navigation, #content, #highlights, #footer
{
display:block;
}
#navigation, #footer
{
height:40px;
}
#navigation
{
text-align:right;
}
#navigation a
{
color:#CCCCCC;
text-align:center;
text-decoration:none;
width:80px;
height:40px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
display: inline-block;
}
#navigation a:hover
{
background:url(http://farm5.static.flickr.com/4081/4995562250_2dfe171a8d_t.jpg) repeat-x;
}
h1, h2
{
font-family: Georgia, Serif;
font-weight:lighter;
font-style:italic;
}
h1
{
font-size:4em;
}
h2
{
text-align:left;
font-size:3em;
}
#content
{
background:#000000 url(http://farm5.static.flickr.com/4153/5000536973_2d2634aba3_b.jpg) no-repeat right top;
margin-left:20px;
margin-right:20px;
padding:10px;
color:#FFFFFF;
}
#content p
{
text-align:justify;
width:400px;
}
#highlights
{
margin-left:10px;
}
.highlight
{
float:left;
width:260px;
margin:20px;
}
.highlight p
{
text-align:justify;
}
#footer
{
clear:both;
}
#footer p
{
text-align:center;
padding-top:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="navigation">
<a href="#" class="subMenu">home</a>
<a href="#" class="subMenu">products</a>
<a href="#" class="subMenu">services</a>
<a href="#" class="subMenu">about</a>
</div>
<div id="content">
<h1>Important Header</h1>
<h2>Less important header</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</div>
<div id="highlights">
<div class="highlight">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="highlight">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="highlight">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<div id="footer"><p>This could be a very long footer.</p></div>
</div>
</body>
</html>
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Use of Bokeh</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
font-size:0.96em;
background:#000000;
color:#CCCCCC;
}
#container
{
margin:0 auto;
width:920px;
}
#navigation, #content, #highlights, #footer
{
display:block;
}
#navigation, #footer
{
height:40px;
}
#navigation
{
text-align:right;
}
#navigation a
{
color:#CCCCCC;
text-align:center;
text-decoration:none;
width:80px;
height:40px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
display: inline-block;
}
#navigation a:hover
{
background:url(http://farm5.static.flickr.com/4081/4995562250_2dfe171a8d_t.jpg) repeat-x;
}
h1, h2
{
font-family: Georgia, Serif;
font-weight:lighter;
font-style:italic;
}
h1
{
font-size:4em;
}
h2
{
text-align:left;
font-size:3em;
}
#content
{
background:#000000 url(http://farm5.static.flickr.com/4153/5000536973_2d2634aba3_b.jpg) no-repeat right top;
margin-left:20px;
margin-right:20px;
padding:10px;
color:#FFFFFF;
}
#content p
{
text-align:justify;
width:400px;
}
#highlights
{
margin-left:10px;
}
.highlight
{
float:left;
width:260px;
margin:20px;
}
.highlight p
{
text-align:justify;
}
#footer
{
clear:both;
}
#footer p
{
text-align:center;
padding-top:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="navigation">
<a href="#" class="subMenu">home</a>
<a href="#" class="subMenu">products</a>
<a href="#" class="subMenu">services</a>
<a href="#" class="subMenu">about</a>
</div>
<div id="content">
<h1>Important Header</h1>
<h2>Less important header</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</div>
<div id="highlights">
<div class="highlight">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="highlight">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<div class="highlight">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
<div id="footer"><p>This could be a very long footer.</p></div>
</div>
</body>
</html>
Tuesday 16 November 2010
Using css3pie with on HTML5 for cross browser effects
I have been using css3pie from http://css3pie.com/ for some time now. In order to run the test below, you will have to download it. You could put it in a scripts folder as I have but it doesn't matter. The example below contains a few elements which will make it work cross browser.
Firstly, I have added the html5.js reference at the top.
Secondly, I have reset the * and body values.
Thirdly, I have use em insted of px.
Finally, I switched the gradient around on the -pie-background call.
Enjoy!
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3pie test</title>
<!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
*
{
margin:0;
padding:0;
border:0;
}
body
{
font-family:Sans-serif;
color:#FFFFFF;
font-size:1em;
line-height:140%;
}
section#borderRadiusExample
{
background:#6BC2E8;
width:10em;
padding:0.62em;
/* rounded corners */
border-radius:0.62em;
-moz-border-radius:0.62em;
-webkit-border-radius:0.62em;
/* Shadow */
box-shadow:0.3em 0.3em 0.3em #CCCCCC;
-moz-box-shadow:0.3em 0.3em 0.3em #CCCCCC;
-webkit-box-shadow:0.3em 0.3em 0.3em #CCCCCC;
/* Linear gradient */
background-image:-moz-linear-gradient(90deg, #6BC2E8, #ABDEF3);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#6BC2E8), to(#ABDEF3));
-pie-background:linear-gradient(90deg, #ABDEF3, #6BC2E8);
behavior:url('scripts/PIE.htc');
}
</style>
</head>
<body>
<section id="borderRadiusExample">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</section>
</body>
</html>
Firstly, I have added the html5.js reference at the top.
Secondly, I have reset the * and body values.
Thirdly, I have use em insted of px.
Finally, I switched the gradient around on the -pie-background call.
Enjoy!
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3pie test</title>
<!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
*
{
margin:0;
padding:0;
border:0;
}
body
{
font-family:Sans-serif;
color:#FFFFFF;
font-size:1em;
line-height:140%;
}
section#borderRadiusExample
{
background:#6BC2E8;
width:10em;
padding:0.62em;
/* rounded corners */
border-radius:0.62em;
-moz-border-radius:0.62em;
-webkit-border-radius:0.62em;
/* Shadow */
box-shadow:0.3em 0.3em 0.3em #CCCCCC;
-moz-box-shadow:0.3em 0.3em 0.3em #CCCCCC;
-webkit-box-shadow:0.3em 0.3em 0.3em #CCCCCC;
/* Linear gradient */
background-image:-moz-linear-gradient(90deg, #6BC2E8, #ABDEF3);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#6BC2E8), to(#ABDEF3));
-pie-background:linear-gradient(90deg, #ABDEF3, #6BC2E8);
behavior:url('scripts/PIE.htc');
}
</style>
</head>
<body>
<section id="borderRadiusExample">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</section>
</body>
</html>
Tuesday 9 November 2010
Pixel to em calculator
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>
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>
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>
Subscribe to:
Posts (Atom)