Sep

24

Cut’n paste: Three column fluid layout

September 24, 2008

Simply paste the html and css in two seperate notepad files and save as index.html and style.css

Three column fluid layout

HTML

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>3 column fluid layout by Dieter Schneider 2007 | www.csstemplateheaven.com</title>
<link rel=”stylesheet” type=”text/css” title=”My style” media=”screen” href=”style.css” />
</head>

<body>

<div id=”container”>

<div id=”header”>
<h1>This is h1, my main heading</h1>
<h2>This is h2, my subheading</h2>
</div>

<div id=”leftColumn”><p>This is my leftColumn</p></div>

<div id=”rightColumn”><p>This is my rightColumn</p></div>

<div id=”middleContent”>
<h3>This is h3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus dolor ligula, eleifend quis, tincidunt non, aliquet sed, elit. Cras libero dolor, posuere sit amet, vestibulum rutrum, dictum et, dui. Phasellus commodo sollicitudin ligula. Nunc condimentum nunc id velit. Phasellus vestibulum hendrerit eros. Sed commodo. Nunc hendrerit nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque sit amet nulla. Donec non sapien et est ultricies semper. Praesent pede ligula, tempor in, facilisis vel, gravida ac, erat. In a est. Duis cursus cursus eros. Ut sagittis erat. Aliquam euismod sapien non nisl. Etiam purus. Etiam purus diam, adipiscing et, fermentum in, tempor pellentesque, lorem.</p>

<h3>This is also h3</h3>
<p>Ut tincidunt neque ut dui. Sed volutpat tincidunt arcu. Maecenas fermentum, ipsum sit amet accumsan semper, libero ante laoreet felis, nec pulvinar odio libero et metus. Vestibulum in risus. Morbi a enim. Sed consectetuer neque vel orci. Mauris convallis, nulla et aliquam placerat, arcu tortor semper magna, posuere cursus augue sem nec ipsum. Nulla rutrum lacinia arcu. Morbi felis elit, faucibus non, elementum id, porta ac, sapien. Suspendisse volutpat neque non mi. Ut fermentum ullamcorper leo. Aliquam erat volutpat. Pellentesque euismod purus eu risus. Aliquam erat volutpat. Donec lorem.</p>
</div>

<div id=”footer”><p>This is my footertext</p></div>

</div>

</body>
</html>

CSS

/* CSS Document by Dieter Schneider 2007 | www.csstemplateheaven.com */

* {margin: 0; padding: 0;}

#container {width: 99%;
margin: 10px auto;
border: 1px solid black;
}

#header {height: 150px;
background: #99CCFF;}

#leftColumn {width: 200px;
float: left;
background: #FFFFCC;
}

#rightColumn {width: 200px;
float: right;
background: #FFFFCC;
}

#middleContent {margin-left: 210px;
margin-right: 210px;
background: #CCCCCC
}

#footer {clear: both;
background: #99CC99;
}

Sep

18

Cut’n paste: Three column fixed layout

September 18, 2008

Simply paste the html and css in two seperate notepad files and save as index.html and style.css

Three column fixed layout

HTML

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>3 column fixed layout by Dieter Schneider 2007 | www.csstemplateheaven.com</title>
<link rel=”stylesheet” type=”text/css” title=”My style” media=”screen” href=”style.css” />
</head>

<body>

<div id=”container”>

<div id=”header”>
<h1>This is h1, my main heading</h1>
<h2>This is h2, my subheading</h2>
</div>

<div id=”leftColumn”><p>This is my leftColumn</p></div>

<div id=”rightColumn”><p>This is my rightColumn</p></div>

<div id=”middleContent”>
<h3>This is h3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus dolor ligula, eleifend quis, tincidunt non, aliquet sed, elit. Cras libero dolor, posuere sit amet, vestibulum rutrum, dictum et, dui. Phasellus commodo sollicitudin ligula. Nunc condimentum nunc id velit. Phasellus vestibulum hendrerit eros. Sed commodo. Nunc hendrerit nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque sit amet nulla. Donec non sapien et est ultricies semper. Praesent pede ligula, tempor in, facilisis vel, gravida ac, erat. In a est. Duis cursus cursus eros. Ut sagittis erat. Aliquam euismod sapien non nisl. Etiam purus. Etiam purus diam, adipiscing et, fermentum in, tempor pellentesque, lorem.</p>

<h3>This is also h3</h3>
<p>Ut tincidunt neque ut dui. Sed volutpat tincidunt arcu. Maecenas fermentum, ipsum sit amet accumsan semper, libero ante laoreet felis, nec pulvinar odio libero et metus. Vestibulum in risus. Morbi a enim. Sed consectetuer neque vel orci. Mauris convallis, nulla et aliquam placerat, arcu tortor semper magna, posuere cursus augue sem nec ipsum. Nulla rutrum lacinia arcu. Morbi felis elit, faucibus non, elementum id, porta ac, sapien. Suspendisse volutpat neque non mi. Ut fermentum ullamcorper leo. Aliquam erat volutpat. Pellentesque euismod purus eu risus. Aliquam erat volutpat. Donec lorem.</p>
</div>

<div id=”footer”><p>This is my footertext</p></div>

</div>

</body>
</html>

CSS

* {margin: 0; padding: 0;}

#container {width: 750px;
margin: 10px auto;
border: 1px solid black;
}

#header {height: 150px;
background: #99CCFF;}

#leftColumn {width: 150px;
float: left;
background: #FFFFCC;
}

#rightColumn {width: 150px;
float: right;
background: #FFFFCC;
}

#middleContent {margin-left: 152px;
margin-right: 152px;
background: #CCCCCC
}

#footer {clear: both;
background: #99CC99;
}

Sep

18

Cut’n paste: Two column fixed layout

September 18, 2008

Simply paste the html and css in two seperate notepad files and save as index.html and style.css

Two column fixed layout

HTML

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1″>
<title>3 column fixed layout by Dieter Schneider 2007 | www.csstemplateheaven.com</title>
<link rel=“stylesheet” type=“text/css” title=“My style” media=“screen” href=“style.css” />
</head>

<body>

<div id=“container”>

<div id=“header”>
<h1>This is h1, my main heading</h1>
<h2>This is h2, my subheading</h2>

</div>

<div id=“leftColumn”>
<h3>This is h3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus dolor ligula, eleifend quis, tincidunt non, aliquet sed, elit. Cras libero dolor, posuere sit amet, vestibulum rutrum, dictum et, dui. Phasellus commodo sollicitudin ligula. Nunc condimentum nunc id velit. Phasellus vestibulum hendrerit eros. Sed commodo. Nunc hendrerit nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque sit amet nulla. Donec non sapien et est ultricies semper. Praesent pede ligula, tempor in, facilisis vel, gravida ac, erat. In a est. Duis cursus cursus eros. Ut sagittis erat. Aliquam euismod sapien non nisl. Etiam purus. Etiam purus diam, adipiscing et, fermentum in, tempor pellentesque, lorem.</p>

<h3>This is also h3</h3>
<p>Ut tincidunt neque ut dui. Sed volutpat tincidunt arcu. Maecenas fermentum, ipsum sit amet accumsan semper, libero ante laoreet felis, nec pulvinar odio libero et metus. Vestibulum in risus. Morbi a enim. Sed consectetuer neque vel orci. Mauris convallis, nulla et aliquam placerat, arcu tortor semper magna, posuere cursus augue sem nec ipsum. Nulla rutrum lacinia arcu. Morbi felis elit, faucibus non, elementum id, porta ac, sapien. Suspendisse volutpat neque non mi. Ut fermentum ullamcorper leo. Aliquam erat volutpat. Pellentesque euismod purus eu risus. Aliquam erat volutpat. Donec lorem.</p>
</div>

<div id=“rightColumn”><p>This is my rightColumn</p></div>


<div id=“footer”><p>This is my footertext</p></div>

</div>

</body>
</html>

CSS

* {margin: 0; padding: 0;}

#container {width: 750px;
margin: 10px auto;
border: 1px solid black;
}

#header {height: 150px;
background: #99CCFF;}

#leftColumn {width: 580px;
float: left;
background: #CCCCCC;
}

#rightColumn {width: 160px;
float: right;
background: #FFFFCC;
}

#footer {clear: both;
background: #99CC99;
}

Sep

17

Transparent images with CSS

September 17, 2008

Did you know that you can create transparent images and divs very easy just by using CSS?

Here is how to do it:

<img src="yourImage.jpg" width="150" height="150" alt="image"
style="opacity:0.4;filter:alpha(opacity=40)" />

In this example I used a image but you can also do it with divs and text.

Firefox uses “opacity” and IE uses “filter”. This is not a css standard yet but it works fine in every modern browsers.

Sep

10

Easy Jquery tutorial

September 10, 2008

You have probably seen those nice fading boxes and sliding content on modern websites. You can make this kind of stuff your self quite easy with the javascript library Jquery. It looks very stylish and can improve the usability on your site.

The first thing you need is of course the Jquery library which you can download here.

Once you have downloaded it you need to create a html page. You can just create a very simple webpage like this:

<html>
<head>
<title>My webpage</title>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body></body>
</html>

The red line is the code that will connect our html file to the jquery library which you downloaded. Ok, now we should be ready to add som cool stuff into our simple site here.

First thing we need to add a little more code in the head section. Right below your <script> tag add this:

<script type="text/javascript">

$(document).ready(function(){
   // Your code here
 });

<script>

This is what you need to make it work. Now you can add functionality where it says “your code here”. Let’s create a cool easing div:

replace “your code here” with this:

    $("#go1").click(function(){
      $("#block1").animate( { width:"600px" }, { queue:false, duration:500 } )
         .animate( { fontSize:"24px" }, 500 )
         .animate( { borderLeftWidth:"40px" }, 500 )
         .animate( { borderRightWidth:"15px" }, 500);
    });

        $("#go2").click(function(){
      $("div").css({width:"", fontSize:"18", borderWidth:""});


    });

Then you need to add some css between your head tag as well. Right below your second script tag add this:

<style>
    div {
    background-color:yellow;
    width:200px;
    height:1.1em;
    text-align:center;
    border:1px solid green;
    padding: 10px;
    margin:3px;
    font-size:14px;
}
</style>

Now you only need to add some content between your body tags:

<button id="go1" class="buttonstyle">Animate Block1</button>
<div id="block1">Block1</div>
<button id="go2">Reset</button>

That’s all you need to make an easing div. By changing the values in your script and css it’s quite easy to understand how it works. The whole piece of code would look like this:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>

<script>
  $(document).ready(function(){

    $("#go1").click(function(){
      $("#block1").animate( { width:"600px" }, { queue:false, duration:500 } )
         .animate( { fontSize:"24px" }, 500 )
         .animate( { borderLeftWidth:"40px" }, 500 )
         .animate( { borderRightWidth:"15px" }, 500);
    });

        $("#go2").click(function(){
      $("div").css({width:"", fontSize:"18", borderWidth:""});

    });

  });
</script>

<style>
    div {
    background-color:yellow;
    width:200px;
    height:1.1em;
    text-align:center;
    border:1px solid green;
    padding: 10px;
    margin:3px;
    font-size:14px;
}
</style>

</head>
<body>

<button id="go1" class="buttonstyle">Animate Block1</button>
<div id="block1">Block1</div>
<button id="go2">Reset</button>

</body>
</html>

To take it to the next level you should look at the Jquery page. There are a lot of resources and tutorials that are quite easy to understand.

Mar

26

Best Wordpress plugins

March 26, 2008

This site is powered by Wordpress and uses several plugins. I often get e-mail by people wondering which plugins this site uses, so I hope this list can be useful.

  1. Wp-ecommerce
  2. Cforms II
  3. WassUp
  4. Google Analytics
  5. WP-polls
  6. WP-DownloadManager
  7. All in one SEO pack

This site runs on the new Wordpress 2.5 and It seems like every plugin runs smooth. All these Wordpress plugins are easy to use and very useful if you are selling stuff on your website. Note that I also use Gold Cart which you can find at the WP-ecommerce website (paid features)

Mar

19

Elastic css layout

March 19, 2008

I had some questions on how the elastic layout used in the “Summer Romance” template works.

Elastic layouts are cool because they scale perfectly when your visitor want to adjust the font size in his or her browser, even the images scale. It’s not “the perfect solution” but it’s fun to try new things. We are going to use the em unit on everything, even the borders. If you don’t know what I am talking about you should download the template I made for this project. I called it Summer Romance and you can download it here. To see how this works simply open the index page in your browser and change the font size. You should be familiar with Html, Css, basic Photoshop and basic Flash before you start.

To get the basic idea on how this works just open the “Summer Romance” stylesheet called style.css. The only values you need to edit to see how this works is the values of the so called “em”. Try to change the width to 40em in the container element.

#container {
width: 50.5505em;
margin: 1em auto;
border: 0.286em solid #a2ba8c;
background-color: #FFFFFF;
}

As you can see the main page will become smaller. Where we usually use pixel values we now use em values. The easiest way to make a page like this is to simply build it with pixel values first then convert the pixel values to em values. The key to get control over this is to set your body font size to 75%, 87.5% or 100% (small, medium or large)

If you use 75% one pixel would be 0,0833 em
If you use 87.5% one pixel would be 0,0715 em
If you use 100% one pixel would be 0,0625 em

This means if you set your body font size to 87.5% (like in Summer Romance) you have to multiply all of your pixel values by 0.0715. Let’s try to convert the width in the container element to pixels and see if this works. If we divide 50.5505 with 0.0715 we get the value 707 which is our pixel value. Replace the value 50.5505em with 707px and check in your browser if it’s right.

(10px X 0.0715 = 0,715em)

Using the pixel converter that comes with the template makes it easy to convert all of your pixel values, simply choose your body font size and start converting.

Pretty simple but what about the images? we want them to resize as well. It’s very simple, in Summer Romance I have added this css class to the main image (Flash):

.mainimage{ width: 31.746em;
height: 24.024em;
}

The reason I use flash is that jpg’s dosen’t look good when you scale them with html or css. First you need to create an vector image (vector images can be scaled just like you want without the loss of quality). you should actually use illustrator for this and trace the image by hand, however here’s a quicker way (of course the quality is not as good as if you do it by hand, but it works if you don’t know how to make vector images). Open an image in Photoshop and resize it so it fits in your header, save as jpg. open Macromedia flash and create a new document, import your header image and go to modify—> bitmap —-> trace bitmap. Now try different values until you are happy with your vector image (Note, This is a quick solution and do not work very well with all images, but it can actually turn out quite nice with some images, experiment with different images and values). Now you have a simple vector image that can be scaled just like you want without the loss of quality. Export you little flash movie and insert it to your html document like this:

<object type=”application/x-shockwave-flash” data=”images/mainheader.swf” class=”mainimage”>
<param name=”movie” value=”images/mainheader.swf” />
<img src=”images/mainimage.jpg” class=”mainimage” alt=”Summer Romance Template” />
</object>

In Summer Romance this will be in the headerRight div, and as you can see we have used the “mainimage” class to make sure the image will scale properly with the rest of the page.

Spice up your typography as well

<object type=”application/x-shockwave-flash” data=”images/pixel_free.swf” class=”heading”>
<param name=”movie” value=”images/pixel_free.swf” />
<img src=”images/pixel_free_layouts.jpg” class=”heading” alt=”Pixel free layouts” />
</object>
<h1><span>Pixel free layouts</span></h1>

The class used here is

.heading{
width: 25.025em;
height: 2.574em;
margin-bottom: 1em;}

As you can see, it’s done the same way as the other flash images, the only difference is that I have added the H1 which is hidden using this class:

span {text-indent: -2000px;}

Note that this span is a little different than the method used in the Summer Romance. This is simply because this will make it a little more accessible than using display: none;

You can download Summer Romance for free here.

Mar

17

Margin and padding

March 17, 2008

The difference between margin and padding in css can be a bit confusing.

Margin is the space outside an element, while padding is the space inside an element. To illustrate this I have posted this image, which should explain it quite well.

margin and padding

You cannot use negative values with padding, but with margins you can.

Nov

3

Css flyout menu for Delicious Fruit

November 3, 2007

A member asked me for a css flyout menu for Delicious Fruit and I pointed her to Stu Nicholls’s great CSSplay site. The menu she wanted to use was this one

If you are new to css it may be quite hard to adapt this to the template so I made it a bit easier. If you want Delicious Fruit with Stu Nicholls CSS flyout menu just replace index.html and style.css with the content of this zip file

(also note that there is an extra css file, this should be placed in the same folder as index.html and style.css)

Oct

30

4 free css templates

October 30, 2007

Today I made 4 different css templates:

  • 2 Column fixed layout
  • 3 column fixed layout
  • 3 column fluid layout
  • 4 column fluid layout

I thought this would be great for beginners learning css or for those of you who just want some simple “skeletons” to work with. All four templates should be very easy to edit and could even become complete websites with your own custom graphics.

All these templates are zipped into one file and can be used just like you wish, no backlink is required (but of course always appreciated)

Download these templates