SimplyBlue web layout - Part II at TechnoMono

SimplyBlue web layout - Part II

Published

on September 11, 2007

Coding the layout

In this part we will be looking at the XHTML and CSS. We’ll start with structuring the layout with XHTML. The XHTML acts as the framework for the layout upon which we’ll apply stying using a CSS style sheet. The framework consists of several modules:

xhtml structure

It’s assumed that both the XHTML document and style sheet reside in the same directory, and that all images used by the layout reside in a subdirectory called ‘images’ (in which the images we created in Part I are saved).

XHTML

(Save the following in a text file called ‘SimplyBlue.html’)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>  
    <title>SimplyBlue web layout</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
 
    <link rel="stylesheet" type="text/css" href="styles.css" />  
  </head>
  <body>
 
    <!-- HEADER -->
    <div id="header">
 
      <!-- This is the header where your logo will go -->
 
      <a href="http://www.technomono.com">    
      <img src="images/logo.jpg" style="width:280px; height:142px;" alt="TechnoMono.com" /></a>
 
    </div>
    <!-- /HEADER -->
 
    <!-- WRAPPER -->
    <div id="wrapper">
      <!-- CONTENT -->
      <div id="content">      
 
        <h2>Content</h2>
        <p>This is where you'll place your main content</p>
 
      </div>
      <!-- /CONTENT -->
 
      <!-- MAIN NAV -->
      <div id="subContent">      
 
        <h2>Navigation</h2>
        <p>Place your site navigation here along with additional links/info</p>
 
      </div>
      <!-- /MAIN NAV -->
 
      <!-- FOOTER -->
      <div id="footer">
 
        <!-- The footer can contain contact/copyright info -->
        <p>&copy; your site 2007</p>
 
      </div>
      <!-- /FOOTER -->
    </div>
    <!-- /WRAPPER -->
 
  </body>
</html>

The XHTML links to an external style sheet called ’styles.css’.

CSS

You’ll notice that we’ve centered the text within the body using text-align: center. We’ve done this to bypass a problem with IE 5.x and IE 6 (they don’t honor auto margins in quirks mode). IE misunderstands text-align: center; it actually centers everything, including the wrapper. Of course, it also centers the text within the wrapper, which is easily overcome with text-align: left.

Since the header isn’t in the wrapper, it spans the length of the page. The content area and navigation are floated right and left, respectively. The footer sits at the bottom of the wrapper, clearing the floats above it with clear: both.

Also, a couple of classes are provided for floating images. Here’s the CSS in it’s entirety:

(Save the following in a text file called ’styles.css’)

* {
  /* This is the universal selector: It allows us to style every element
      on a page. In this case, we remove the default browser padding 
      and margin on every element */
  margin: 0;
  padding: 0;
  }
 
body {
  /* Styles applying to the entire page */
  font: 11px/1.5 Verdana, Sans;
  color: #f8f8f8;
  background: #292929;
  text-align: center;
  }
 
#header {
  /* To the header we apply a background image which tiles horizontally */
  height: 168px;
  text-align: left;
  background: url('images/headerBG.jpg') repeat-x top left;
  }
 
#wrapper {
  /* The wrapper contains the content area, navigation and footer.
    It's positioned in the center of the page using auto margins */
  width: 780px;
  margin: 0 auto;
  text-align: left;
  }
 
#content, #subContent {
  /* Both the content area and navigation share the same background color */
  background: #3c4040;
  }  
 
#content h2, #subContent h2 {
  /* Section headers share the same tiled background image and font */
  background: #0290fc url('images/smallHeaderBG.jpg') repeat-x top left;  
  font: bold 14px/28px Sans;
  text-indent: 1em;
  }  
 
#content {
  /* The content area is positioned to the right using a right float */
  float: right;
  width: 560px;
  }
 
#subContent {
  /* The navigation is positioned to the left using a left float */
  float: left;
  width: 210px;
  }
 
  /* The following styles apply to lists and links within the navigation */ 
#subContent ul {
  list-style: none;
  margin: 1em;
  }
 
#subContent a {
  color: #ccc;
  font: bold 1.1em Sans-Serif;
  text-decoration: none;
  }
 
#subContent a:hover {
  color: #f0f0f0;
  text-decoration: underline;
  }
 
  /* The following styles apply to the footer and it's contents */
#footer {
  clear: both;
  text-align: center;
  padding: 10px;
  font: 0.8em Sans-Serif;
  }  
 
#footer a {
  color: #27aefe;
  }
 
#footer a:hover {
  color: #FFF;
  }    
 
  /* General styles */  
img {
  border: none;
  }
 
img.left {
  float: left;
  margin: 1em 1em 1em 0;
  }
 
img.right {
  float: right;  
  margin: 1em 0 1em 1em;
  }  
 
p, h3, h4 {
  margin: 11px;
  }

Resources for learning XHTML/CSS

Websites

Books

I hope you enjoyed this tutorial as much as I enjoyed making it. If you have any questions, don’t hesitate to leave a comment. Have fun!

Feel free to link to our content. However, we do not permit any copying.

40 Responses to “SimplyBlue web layout - Part II”

Feed for this Entry Trackback Address

1 Andrico
Sep 18th, 2007 at 4:57 pm

Hey, nice man, I love the gimp and do web design myself. However, I’m wondering if this will have issues when viewed in different resolutions. I’ve run across websites that don’t work with 800×600, though never one that doesn’t work with regular resolutions. Of course, that might only be with IE, cuz IE sucks. I only read the first part though, so maybe you have something to avoid that in this one?
2 TechnoMono
Sep 19th, 2007 at 8:15 am

@Andrico

Well, this layout is 800×600 friendly and has been tested in IE6 (and in quirks mode) and works flawlessly.
3 Robert Larrabee
Nov 6th, 2007 at 5:09 pm

Somehow I got lost starting on Part II of this tutorial. I did everything in Part I, and somehow I got lost starting Part II… Can you help me figure out what I might have done wrong?
4 TechnoMono
Nov 7th, 2007 at 8:29 pm

@Robert Larrabee

Sure, I’ll be happy to help.

What is it your having difficulty with?
5 D4v1d
Nov 14th, 2007 at 4:54 pm

I have a question about coding layouts a person makes for themselves. Like after you made a layout, how do you code it? I have dreamweaver but I’m confuse on how to code it. I assume I have to insert the image in dreamweaver but I don’t know what to do after that.
6 James
Nov 17th, 2007 at 2:54 am

Thankyou for a brilliant tutorial. I have been looking for a tutorial helping me to make a web layout with Gimp for some time, and yours is excellent. I hope you decide to make more, and go more indepth.

Thanks!
James
7 Tommy
Nov 18th, 2007 at 8:51 am

You’re surely brought my day some fun =)
I’ve been looking for a way to do a web page in gimp and this is just awesome.
Thanks for taking the time to make this.
8 damon
Nov 22nd, 2007 at 10:44 pm

sorry but what do i do with this now lol
9 TechnoMono
Dec 5th, 2007 at 6:08 am

@D4v1d

You can use a simple text editor such as gedit or notepad to write the XHTML/CSS. I’m not familiar with dreamweaver, I usually hand code my layouts so can’t help you there.

Just do a simple search for dreamweaver tutorials in your preferred search engine to get started.

@damon

All you need to do is upload your files to a web server. You will need a web host that can provide you with the use of a server, just do a google search for free web hosting.

Hope this helps
10 Jord
Dec 23rd, 2007 at 3:41 pm

Hey, I got some free hosting but now where do I upload the documents to?
11 Mepislinux
Feb 1st, 2008 at 1:29 pm

Very nice tutorial. Well done. An asset to the web community.
12 Tim
Feb 19th, 2008 at 12:24 pm

Excellent tut!! I hope that you continue to make some more!

I have one issue in IE7. In Firefox everything works flawlessly, however, in IE7 my small header picture is not displayed (smallHeaderBG.jpg) in the “content” section, nor is that text formatted for the header. The SubContent headers diplay fine however? Any ideas?
13 Mark
Feb 26th, 2008 at 3:37 pm

i followed the tut but i ended up with this when i was done.. did i do something wrong?

http://i31.tinypic.com/24gva5d.png
14 Mark
Feb 26th, 2008 at 3:43 pm

never mind.. i saved it as style.css not styles.css lol thanks XD
15 jay
Mar 1st, 2008 at 10:52 pm

what did you save the template as in part 1 to get it to the web eiditor?
16 thedarktiger
Apr 1st, 2008 at 9:25 pm

http://www.alsiclub.com/test/simplyblue.html

All very basic, but the background isnt coming up, the thing u saved as SimplyBlue.xcf, i saved as that and as a .jpg file, my directory for this is alsiclub.com/text where the styles.css and simplyblue.html are stored and the images are stored in alsiclub.com/test/images
What did u save the main background as? Simplyblue.xcf wont work online…
17 TechnoMono
Apr 2nd, 2008 at 2:58 am

@Tim (sorry about the late reply)

I have no problems with IE7, are you still having problems?

@jay

This layout is hand coded, no layout editor here.

@thedarktiger

What do you mean by ‘main background’?

I noticed your h2 background image doesn’t have the stripes on them, is that what you meant?
18 thedarktiger
Apr 2nd, 2008 at 4:30 pm

no I realized what i needed to fix, sorry, I meant the simplyblue.xcf we saved in the last tutorial, i thought that we needed that, so I accidentally saved that as headerBG and the whole thing went bam! also it has stripes, just the opacity it very low, for some reason 6% and 8% werent the best to use, thanks for the reply, awesome tutorial, i wish to see more like this! btw I do have a request, if you go to http://www.endless-online.com/
you will notice that there web layout is all fitted into one round rectangle, could you please make a tutorial, in your own style, on how to make a layout like that? that would be lovely, keep up the awesome work!
19 TechnoMono
Apr 4th, 2008 at 2:36 am

@thedarktiger

Glad you liked the tutorial and found it useful
As for the tutorial request, sure, I’ll make a start this weekend
20 thedarktiger
Apr 19th, 2008 at 10:54 am

@Tehcno
Thanks for taking my request, btw after reading your tutorials, and a few others, I have gotten fairly adequet with GIMP, and can write some of my own tutorials as well. Would you like me to help out with GIMP tutorials? I can email you the tutorial in a doc file, and then you can upload necessary pictures and set it up. Also any ideas when the tutorial will be done?
21 Ashmoo
Apr 19th, 2008 at 8:34 pm

Thanks you so much for the tut… most tutorials don’t give you the info on coding, just how to plan the page. This has made my ability to get my site up so much easier… and I finished within a few hours.
Final product (before putting in text): http://www.freewebs.com/hauntedcaveatlewisburg

And again, thank you soooo much. Seriously. ^^. You Rock.
22 absolut-desing
Apr 30th, 2008 at 12:52 am

that is a very great totorial
compliments for your works
23 Zydoon
May 9th, 2008 at 12:33 am

Thank you very much, you “demistified” me before The GIMP

I’d like to know, if possible, how to “smooth” the highlight on the header and make it less “straight”.

anyway, thank you for this tutorial,
Zydoon.
24 Drew Douglass
Jun 7th, 2008 at 1:50 am

I know this comment is a little late, but just had to say thanks for a great tutorial. I am new to GIMP but was able to follow every instruction, and once the images were complete, setting up the CSS is a breeze. Thanks again for your great work, its much appreciated!

Regards,

Drew
25 Trayvon
Jul 5th, 2008 at 6:42 pm

I made my own layout following your directions on it and as soon as i go to part two i get completely lost and dotn know what to do.

need of assistance.
26 TechnoMono
Jul 15th, 2008 at 9:14 am

@Trayvon

You need to copy & paste the HTML code into a text file and save it as ‘SimplyBlue.html’, then copy the CSS code into a text file and save it as ’styles.css’.

You should have the ‘SimplyBlue.html’ file, ’styles.css’ file & the images folder (that we done in part 1) all in the same folder.

Then open the ‘SimplyBlue.html’ file with your browser to view it.
27 Celine
Sep 15th, 2008 at 11:59 pm

Great tutorial; I loved my final product.

Keep up the great work!
28 Alastair
Oct 9th, 2008 at 9:01 am

I am curious how I would change the color of linked text within the content area. I have posted a few links within the content area and they appear blue, unless you recently visited the site and then it appears a garish purple which is hard on the eyes. Is there a way to change that colour? I am still very new to CSS, so I am unsure of how to do this. Thanks for the great tut!
29 TechnoMono
Oct 9th, 2008 at 9:59 am

Hi Alastair

it’s nice and simple, just add the following to the stylesheet.

#content a {
/* This is the link color normally */
color: #7db8ff;
}

#content a:hover {
/* This is the link color when moused over */
color: #bedbff;
}

#content a:visited {
/* This is the link color when link has been visited */
color: #c7a6f4;
}
30 Azara Gore
Oct 18th, 2008 at 7:23 am

Ok, I know where to put all the codes and images in the first code (XHTML) but I have no clue what to do with the style sheet, I’ve had this problem with my other layout when I used Adobe dreamweaver, and my friend won’t help me with the problem can you explain where I would put it? And if it is because I am using piczo as a site creator please tell me a different site creator I can use without having to pay.
31 lag man
Oct 31st, 2008 at 3:46 pm

Hi, ur tutorial is pretty cool, needs more details in my opinion but it’s ok in general.
I have a question about the licence, I’m very bad in making web layouts, and my work (or future work) is to make them (or to make web sites in general), so can I use ur web layout for commercial web sites ?(without mentioning that is u who maked the thing), I prefered to question u before using it (I didn’t see a notice about licence).
Note:this will help me a lot.
32 TechnoMono
Nov 3rd, 2008 at 1:44 am

@lag man,

you may use this layout for personal/commercial use.

though I would appreciate a credit link, it is not required.

All the best
33 lag man
Nov 3rd, 2008 at 4:51 am

@TechnoMono

Thanks a lot.
34 t2t
Dec 5th, 2008 at 8:06 am

thanks for the tut! am going to do it right away… have no problem with gimp and graphics,,,, am currently mistified about css and html.

seems like everyone got a lot out of it….. will get back to you!

thanks for all your hard work

t2t
35 :(
Feb 24th, 2009 at 8:36 am

Every time I try a HTML coding tutorial and I follow every single instruction it comes up with no pictures, pictures squashed in together, some pictures not there or just a blank screen.
But anyways, thanks for the imaging tutorial! I can just write the text for my website in there. Thanks!
36 Jordan
Mar 2nd, 2009 at 10:28 pm

Excellent excellent tutorial. If you have more, please direct me to them. A pleasure to read and to follow.
37 Jordan
Mar 2nd, 2009 at 11:09 pm

Sorry to double post, but I had a question come up. I’m quite capable with gimp and followed all of that perfectly. But html, and especially css is quite new to me. Anyone have an example of the code for adding extra modules on the left hand side like the example of this template showed? I tried and couldn’t quite get it to float right or go where I wanted it to.
38 Jeff
Mar 20th, 2009 at 6:02 am

Fantastic Tutorial, thank you very much for this!
Just one addition if I may
To centre your page in Firefox you need to add
margin:0 auto; in your wrapper div
Jeff