css great book

8/3/2019 CSS Great Book

1/25

Colored boxes one method of building full CSS layouts

Date: 13 January 2004

Author: Russ Weakley

How do you go about building a full CSS layout? Is there an overall method that can be

used for any layout?

This article explains one method of building a full CSS layout from start to finish. The method,

based on positioning colored boxes and testing across a range of browsers, can be used to build

a wide range of full-CSS layouts.

Introduction

We will start with a basic graphic mockup and convert it into a working (x)html page. The aim is

not to focus on this particular example, but the overall process used.

ed boxes one method of building full CSS layouts | Max Design http://www.maxdesign.com.au/articles

5 2/24/2012 1


2/25

Some guidelines before starting:

Build one step at a time and test each step across a range of browsers

It is quite easy to start building a layout and come to a problem half way through. To avoid this, try

building your layout in small steps and test each step across a range of browsers. This means

you can see exactly how the layout is progressing and there is no need for backtracking if you run

into problems.

Build for modern browsers then work backwards

It is better to start by building for standards-compliant browsers and then do work-arounds such

as hiding (via @import) for older browsers.

Validate your HTML code and CSS

Validate your HTML and CSS frequently. Many layouts problems can be fixed with a quick

validation check.

WC3 HTML validator

WC3 CSS validator


5 2/24/2012 1


3/25

Step 1. Decide on a level of browser support

Before starting to build a CSS-based layout, you should decide which browsers to support and to

what level you intend to support them. To help you decide, talk to clients and sample users as

well as examining existing log files if they are available.

Levels of support

Full CSS support the browser is served all CSS rules and should display the layout in a

reasonably accurate manor. If you intend to provide full support to older browsers, you may need

to use very basic CSS and avoid complex CSS positioning.

Partial CSS support certain CSS rules are hidden from a particular browser. This generally

means that the browser may not display the layout accurately, but it will still display some degree

of the overall presentation. For example, this could mean that the fonts and colors are rendered

correctly but certain aspects of positioning are not.

Unstyled contentmeans you hide all styles from a particular browser.

BROWSER SUPPORT OPTIONS

Modern Browsers Modern Browsers Recent Browsers Older Browsers

Option 1. Full CSS support Full CSS support Full CSS support

Option 2. Full CSS support Full CSS support Partial CSS support

Option 3. Full CSS support Full CSS support Unstyled content

Option 4. Full CSS support Partial CSS support Unstyled content

For this example, we will use option 2.

Step 2. Look for containers

To position elements on the page, the overall containers need to be established. Look at your

design (which could be in the form of a digital mockup, a sketch on paper or an existing

site/template) and work out the main containers on the page.


5 2/24/2012 1


4/25

Step 3. Name the containers

These containers will become the main elements that will hold your content, so you

should give them names that have semantic meaning rather than names that describe theirappearance. For this example the main containers will be called:

container

header

mainnav

menu

contents

footer

If the containers are unique to a page, use IDs rather than classes. This may be important when

styling other elements on the page. If conflicts occur, rules that use IDs will override rules that use

classes.


5 2/24/2012 1


5/25

Step 4. Creating the mark-up

Start with a Doctype in this case we will use HTML 4.10 strict

Next, add the document head information, including Character encoding and a link to a stylesheet

called styles.css:

Page title


6/25

we decided on above. For example:

Skip to content


7/25

Ut wisi enim ad minim veniam, quis nostrud exe

Comments (4)

Pingbacks (1)

Category: CSS

Copyright Sitename 2004

Step 6. Positioning the overall containers

These main containers must now be styled with a positioning method. To do this, we will add a

series of CSS rules into the styles.css file. When we are happy with the overall position of

containers, we will come back and add more detailed CSS into the file.

body

{

margin: 0;

padding: 0;background: #ddd;

}

#container

{

margin: 1em auto;

width: 650px;

background: #fff;

}

#header { background: #CF3; }#mainnav { background: #9F3; }

#menu

{

float: right;

width: 165px;

background: #6F9;

}


5 2/24/2012 1


8/25

#contents

{

float: left;

width: 440px;

background: #9FC;

margin: 0 0 0 20px;

}

#footer{

clear: both;

background: #FF9;

}


5 2/24/2012 1


9/25

Step 7. Any problems?

While this layout works well in most browsers, Internet Explorer 6 shows a worrying issue.


5 2/24/2012 1


10/25

The left margin on the content container is too wide. This is caused by an IE6 double margin float

bug and can be resolved by setting the #content with display: inline.

#contents

{

float: left;

width: 440px;

background: #9FC;

margin: 0 0 0 20px;


25 2/24/2012 1


11/25

display: inline;

}

As this declaration is only needed for IE6, it is best moved to a separate style sheet just for this

browser. This new style sheet can be placed inside a conditional comment so that only the

relevant browser sees these styles.

Page title

Step 8. Detailed styling

When the containers have been positioned correctly and render correctly across all target

browsers we can begin more detailed styling.

/* ------------------------------

global styles

------------------------------ */

body{

margin: 0;

padding: 0;

font: 85% arial, hevetica, sans-serif;

text-align: center;

color: #333;

background: #ddd url(img_39.gif) repeat 0 0;

}

a:link { color: #B52C07; }

a:visited { color: #b93411; }a:focus { color: #000; }

a:hover { color: #7d8206; }

a:active { color: red; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; }

h2

{

color: #B52C07;

font: 140% georgia, times, "times new roman", serif;


25 2/24/2012 1


12/25

}

h2 a { text-decoration: none; }

h3

{

color: #7d8206;

font: 110% georgia, times, "times new roman", serif;

}

/* ------------------------------

container styles

------------------------------ */

#container

{

margin: 1em auto;

width: 650px;

text-align: left;

background: #fff;border: 1px solid #676767;

}

/* ------------------------------

header styles

------------------------------ */

#header

{

height: 45px;

width: 100%;

position: relative;

background: url(header.jpg) no-repeat 0 0;

border-bottom: 1px solid #fff;

}

#header h1

{

position: absolute;

left: -500em;

}

#skipmenu

{

position: absolute;

left: 0;

top: 5px;

width: 645px;

text-align: right;

}


25 2/24/2012 1


13/25

#skipmenu a

{

color: #555;

text-decoration: none;

}

/* ------------------------------

mainnav styles

------------------------------ */

#mainnav

{

background: #9FA41D;

color: #272900;

padding: 2px 0;

margin-bottom: 22px;

}

#mainnav ul

{margin: 0 0 0 20px;

padding: 0;

list-style-type: none;

border-left: 1px solid #C4C769;

}

#mainnav li

{

display: inline;

padding: 0 10px;

border-right: 1px solid #C4C769;

}

#mainnav li a

{


color: #272900;

}

#mainnav li a:hover

{


color: #fff;

background-color: #272900;

}

/* ------------------------------

menu styles

------------------------------ */

#menu


25 2/24/2012 1


14/25

{

float: right;

width: 165px;

border-left: 1px solid #C5C877;

padding-left: 15px;

}

#menu ul

{margin: 1em 0;

padding: 0;

}

#menu ul li

{

margin: 0 0 1em;

padding: 0;


}

/* ------------------------------

contents styles

------------------------------ */

#contents

{

float: left;

width: 430px;

margin: 0 0 0 20px;

}

#contents p { line-height: 165%; }

.blogentry { border-bottom: 1px solid #C5C877; }

.blogentry ul

{

text-align: right;

margin: 1em 0;

padding: 0;

font-size: 95%;

}

.blogentry li

{


display: inline;

margin: 0;

padding: 0 0 0 7px;

}

.imagefloat


25 2/24/2012 1


15/25

{

float: right;

padding: 2px;

border: 1px solid #9FA41D;

margin: 0 0 10px 10px;

}

/* ------------------------------

footer styles------------------------------ */

#footer

{

clear: both;

color: #272900;

text-align: right;

font-size: 90%;

background: #9FA41D;

padding: 5px;

}

Step 9. Print CSS

Finally, we need to prepare the layout for printing. If you want to faithfully reproduce the

on-screen layout, you could change the links to your external style sheets so that they can be

accessed by printers. There are many ways to do this including media="all" and

media="screen, print" .

If you want to give the user a print-friendly page you can do the following.

1. Duplicate your main css file (styles.css) and keep the backup copy. We will now work in

styles.css and convert it to a print style sheet. As far as the browser is concerned, it is still a

screen style sheet. This means we can work on the file and preview it in a range of browsers

without having to go to print preview at every step.

When we are finished, we simply change the name of the file to print.css, and put a new link in

the head of the document pointing to this file.

2. Look at the layout and decide what is necessary for the print version.

3. For this example, we will remove the header graphic, mainnav and right menu, as well as

removing all colors and underline links.

Hide any containers you dont need using display: none;

Change all colors to black or grayscale colors.

Change links using a { text decoration: none;}

Remove font sizing and allow the default font-sizing to be used.


25 2/24/2012 1


16/25

body

{

margin: 0;

padding: 0;

font: 100% arial, hevetica, sans-serif;

color: #000;

background-color: #fff;

}

a

{

color: #000;


}

#header { border-bottom: 1px solid #999; }

#header h1 { color: #000; }

#mainnav, #menu, .imagefloat, #skipmenu { display: none; }

#menu ul

{

margin-left: 0;

padding-left: 0;


line-height: 165%;

}

#contents p { line-height: 165%; }

.blogentry { border-bottom: 1px solid #999; }

.blogentry ul

{


text-align: right;

margin: 1em 0;

padding: 0;

font-size: 95%;

}

.blogentry li

{

display: inline;

padding: 0 0 0 7px;

}

#footer

{

clear: both;

color: #000;

text-align: right;


25 2/24/2012 1


17/25

padding: 5px;

font-size: 90%;

border-top: 1px solid #999;

margin-top: 2em;

}

4. Change the file name and bring back the dupl icated version. Then, add a new link in the head

of your document:

Colored boxes Finished!

We now have one HTML file that:

renders correctly in modern browsers


25 2/24/2012 1


18/25

renders reasonably well in recent browsers (small bug in Win/IE5)

renders acceptably in old browsers (there is some style and all content is accessible)

renders a different layout for printers

This article is also avaialable in:

German, thanks to Andreas Kalt.

French, thanks to Lo en Folie.Spanish, thanks to Ayuda WordPress.

Brazilian-Portuguese, thanks to Mauricio Samy Silva.

Comments so far

imran

February 12, 2010 at 5:06 am

Fantastic tutorial for newbies. Very, very, very useful for new beginners.

Russ


Thanks for the feedback, Imran

Assekops

February 12, 2010 at 8:00 pm

Thanks. This was helpful for me and I hope it will help others too.

Russ


@Assekops thank you.

John


Awesomely clear instructions. Thanks so much.


25 2/24/2012 1


19/25

Paullo Cezar


Muito bom, agora entendo um pouco mais os codigos CSS sem dificuldades. Proveitosa

aula.

Russ


@Paullo: Obrigado para seu comentrio

Sandy


As a newbie to CSS I found this very helpful. One thing; however, I copied and pasted the

code into my editor and could not get the page to show with the styles. I found that your

link code for the CSS page is wrong.

PeterMarch 1, 2010 at 1:59 am

Really a very well run website on CSS. I prefer to write everything down and then enter

everything in to the pages manually. Im using Dreamweaver and notepad. Now all I need

do is go into Photoshop and make the graphics.

Do find it helps to name my closing divs with comments (!header close) etc.

Keep up the good work. Peter

MMP 240 Web Design Class on 3.1.10 Layout with Box Model and Float

March 2, 2010 at 6:54 am

[...] Well take a look at this link quickly:http://www.maxdesign.com.au/articles/process/ [...]


25 2/24/2012 1


20/25


21/25

Peter Shearer

March 16, 2010 at 8:37 am

thanks again. Nice tutorial.

sorry to be picky but was unable to display the sitename because of the H1 style left:

-500em;. works fine with 500em;

cheers

Russ

March 16, 2010 at 9:57 am

@peter: This design is based on hiding the heading and using a background image to

display the site name.

However, you do not need to use this method at all. If you want, you can leave the site

name in place and avoid using the left: -500em all together.

Bruno Santana

March 25, 2010 at 4:29 am

Nossa muito obrigado! se essa aula fosse cobrada, ainda seria pouco!!!

Muito obrigado mesmo!

A Basic 2 Column Website with Divs & CSS Cesar Chavez

March 26, 2010 at 12:51 pm

[...] the different types of website layouts using CSS & divs was MaxDesign. In particular

the colored boxes method of building full CSS layouts helped me see how the sites canbe created by sections. Possibly related posts: (automatically [...]

Riddhi

March 31, 2010 at 3:49 pm

Realy nice one.


25 2/24/2012 1


22/25

And its help me a lot

Thank you

mukhemodhu

April 7, 2010 at 3:54 pm

I am really grateful to you. I was searching and searching and eventually I have found your

wonderful site.

Thanks and Regards

Mukhe Modhu

asasass

April 8, 2010 at 9:57 am

asas

Wais

April 15, 2010 at 2:13 am

Thanks. for all the support you gave it to me as been part of new in a world of designer

peoples.Please,why not trying also one for javascript.

I hop you got in mind to start one soon.

bye.

Guide till att brja skriva CSS Supermumin

April 15, 2010 at 10:08 am

[...] Max Design r bttre p att frklara hur man anvnder frger [...]

Rene

April 17, 2010 at 5:55 am

Nice work @Russ,

I was just searching for (how do I use) background images with css in the navigation. I


25 2/24/2012 1


23/25

found the answer in your css and then I read the tutorial good stuff thx

Elvis

April 26, 2010 at 2:05 am

This Tutorial is awesomei didnt understand how div works,, but now i have mastered it through this tutorial.

Well Done.!!

Cheers,

Elvis

Tania

May 5, 2010 at 11:22 pm

awesome, thanks! AS computing just got a whole pile easier!

yuen

May 6, 2010 at 12:13 am

absolutely useful tutorial. Good article!!!

Steve

May 7, 2010 at 8:07 am

Thank you for writing this up in such detail. This will be useful for my next design project.

pardall

May 12, 2010 at 3:14 am

Great tutorial, I was wondering if we can find somewhere in some of these pre-formated

CSS for a complete site, where it already has boxes for text with corners and colors, etc.

Here is an example of a simple but good looking boxed content diagram site.

http://softoem-buy.ru/


25 2/24/2012 1


24/25

If you can send me an email referencing a link, I would appreciate.

Regards.

modern furniture

May 12, 2010 at 4:04 am

Cool article with easy to understand instructions. I have been trying to understand how to

build CSS layouts and get away from using tables. This helps me a lot. I will use this for a

furniture website design project. Thank you.

Preston Racette

May 12, 2010 at 5:28 am

GREAT! Very Usefull! Keep it up!

Futons

May 15, 2010 at 5:28 pm

Well done! The tutorial is laid out so a newbie can even understand it. Thanks for providing

this great information.

CPCMAN

May 25, 2010 at 4:04 am

Ive been studing web design for several weeks now. Layouts have been my biggest

chalenge so far. Your tutorial has brought quite a bit of light to me. Hope to see motre

tutorials from yu. Thanks.

stephen

June 14, 2010 at 2:29 pm

Russ, you published it six yrs ago. but i still benifit from this tuto thnk u very much


25 2/24/2012 1


25/25

Salah

July 7, 2010 at 4:52 pm

Thanks very much for these information

Our details

Phone:

612 9410 2521

Mobile:

0403 433 980

Address:

19 Hawthorne Avenue

Chatswood WestNSW 2067 Australia


css great book

Documents