Code Tutsplus Com

Code
Categories
H T M L
&
Learning Guides
Forum
C S S
How to Design and Code a

Flexible Website
by Tessa Thornton
1 Sep 2009
161 Comments

In this tutorial, we're going to be designing and coding a simple blog-style web-page.
We'll pay special attention to making our design flexible and accessible by using clean
and simple XHTML and CSS. This tutorial is aimed at beginners, and anyone looking
to improve the accessibility of their web designs.
Tutorial Details
Difficulty: Easy
Estimated Completion Time: 1.5-2hrs
Step 1
So our example web page is going to be based on a simple blog theme, with a
WordPress blog-like structure similar to that of the nettuts homepage. It's going to look
something like this:
converted by Web2PDFConvert.com
The idea here is not for you to reproduce my example, but for you to be able to follow
along and apply the techniques to your own designs, hopefully learning a thing or two
about the underlying concepts.
Step 2 - Photoshop
We're going to keep the Photoshop use here to a bare minimum, Usually I mockup an
entire design in Photoshop before coding, but here I'm just going to generate a basic
layout, and worry about the content later. This is an example of a different workflow, it
will make more sense as we go along.
Note: Some readers have asked about using the GIMP. I haven't used it personally,
but I'm sure you can accomplish the following steps in GIMP just as easily, because all
we're using is basic shapes and gradients.
Page Layout
I decided to make the page 900px wide, so my document is 1000px wide and 1200px
long (don't know why I gave myself so little room, make yours wider if you like). Place
guides at 50px and 950px to get a 900px wide area. We're going to have a content
area and a sidebar, and the content area is going to be 600px wide, so place another
guide at 650px.
Backgrounds
The header background is just three rectangles for the top links, main header, and
navigation area. I used shape layers and added gradients to the layer styles. There are
also 1px borders between the top bar and header area, and between the header and
navigation area.
The footer background is another gradient, but this time with a 2px border at the top.
Next add a background for the sidebar, I chose #d8ddd1.
Type Tool
Next we Grab the type tool (T) and add in a logo and tagline, and some basic
navigation links. Fonts:
Blog Title:
Font: Myriad Pro
Size: 48pt
Color: #ffffff (white)
Blog Description:
Font: Myriad Pro
Size: 24pt
Color: #ffffff
Main Navigation Links:
Font: Arial
Size: 18pt
Color: #2b2b2b
"welcome, guest" and "stay updated":
Font: Arial
Size: 12pt
Color: #fffff
"login, Sign Up" and "subscribe via...":

Color: #a5bf8d
Style: underline
Content
We're only going to include one sample "post" in our Photoshop mockup, because I
find working with type in Photoshop is a real pain, but we'll get into more detail about
styling the content section later. The fonts I'm using for the dummy post are:
Post Title:
Font: Arial
Size: 24pt
Color: #3c3f40
Style: Bold
Date, category and author info:
Size: 11pt
Paragraphs:
Size: 12pt
Okay, we're pretty much done with our mockup. All we need to do now is slice it up and
save for the web.
Select the slice tool (C) and cut out skinny slices of each of the background rectangles:
the top bar, the header area, the navigation, and the footer. Don't include the borders,
we're going to add those in with CSS. Try zooming in really close to make sure you get
the right parts. The slices I cut are about 5px wide, but the width isn't terribly important
at this point.
Select 'File/Save for web and devices...' Hold down "shift" and click to select each
slice. From the dropdown menu "presets" select "jpeg . Uncheck "convert to sRGB"" (I
find that the conversion dulls the colors). All other settings should be left at defaults.
Click "Save." In the popup window, make sure "selected slices" is displayed in the
"slices" dropdown menu, and click save.
GIMP users: I'm not sure if gimp has a tool like slice, but you just need to make
rectangular selections, save them to separate documents, crop them down, and save
them as optimized jpegs.
For a more in depth look at the slicing and saving process, see My previous tutorial.
Step 3 - HTML Setup

If you're unfamiliar with the process of organizing files and folders for a webpage,
again, see my other tutorial linked above.
Open up your favorite code editor, and create a new file called index.html.
We're going to try to use as few div tags as possible to keep our markup meaningful
and semantic. That being said, to maintain a flexible, resizable layout, we need to
enclose some elements in multiple divs. More on that later.
All elements in our page will be contained within two divs, called "main" and "footer".
Within the "main" div, we're going to have a divs for the top bar, the header, and the
content area. The footer is going to contain an inner div for the written content.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Blog</title>
</head>
<body>
<div id="main">
<div id="top_bar">
</div>
<div id="header">
</div>
<div id="content">
</div>
</div>
<div id="footer">
<div id="footer_content">
</div>
</div>
</body>
</html>
Top Bar
The background of the blue bar at the top stretches the entire width of the page, but the
two text areas need to be within the 900px of the page. To achieve this, we need the
content to be contained within another div, which will have a class of "container".
Within our bar at the top, we're going to have two paragraphs, one for the login, one for
the subscription options. Since they're going to be floated, each needs to be given a
unique id. Actually, if we wanted to be totally semantic, we could code these two
paragraphs as an unordered list with two list items. Try it both ways, see if you can
make it work.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
<div id="main">
<div id="top_bar">
<div class="container">
<p id="login">Welcome, Guest <a href="#">Login</a> <a href="#">Sign Up</a></
<p id="subscribe"> Stay Updated: <a href="#">Subscribe via RSS</a> <a href="#"
</div>
</div>
<div id="header">
<div id="content">
Step 5 - Header
We face the same issue here as we did with the last step, the background image
needs to stretch out indefinitely. To contain the content, we need to place it within
another div. Since the header will also be within our centered, 900px wide page, we
can re-use the "container" class. The title of the blog will be wrapped in an <h1> tag,
and the description/tagline will be a paragraph with a unique id.
1
2
3
4
5
6
<div id="header">
<div id="branding" class="container">
<h1>My Blog</h1>
<p id="desc">Description of My Blog</p>
</div>
Navigation
Also inside the header is the navigation menu, which will be wrapped in an unordered
list with the id of "menu", which will all be wrapped within another div with the id of
"navigation".
Because we want the navigation menu to be centered, we can add our "container"
class to the ul as well.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
<div id="header">
<div id="branding" class="container">
<h1>My Blog</h1>
<p class="desc">Description of My Blog</p>
</div>
<div id="navigation">
<ul id="menu" class="container">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
We're writing the navigation links in lowercase here, but in our CSS file we will
transform them to uppercase. You could write them in capitals here, but my caps lock
key is broken, and this way makes for cleaner markup.
Step 6 - Content
The content area doesn't have a background image or color, so we don't need to
enclose it in an additional div. To center it, we can give the content div a class of
"container" as well. Inside the content div, we have two more divs, one for the blog
posts, and one for the sidebar.
When designing a blog, we need to take into account the fact that the content is going
to change, and may include any number of elements, including lists, images, quotes,
headings and emphasized text. To prepare, we need to style every possible element
that might appear., so our sample content needs to include Everything. This is
sometimes called the "Sandbox method." To get dummy content, I suggest visiting
HTML Ipsum.
We're going to separate our sample content into a couple different posts, with titles
wrapped in <h2> tags. Each post will also have standard information about date,
author, etc, contained within a <small> tag.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<div id="content" class="container">

<div id="posts">
<h2>Don't Cancel Chuck!</h2>
<small>on July 01 in <a href="#">General</a> tagged <a href="#">petitions</a> by <
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p><blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue.
Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus,
at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
<a href="#">Read More</a></p>
<h2>Alien Spacecraft found in New Mexico</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.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<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>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</
<h2>Ghostly Goo in your Kitchen Sink?</h2>

<p><strong>Pellentesque habitant morbi tristique</strong> 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.
<em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, c
ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <
<h4>Header Level 4</h4>
<ol>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue.
Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus,
at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
</ul>
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectature vestiblum</li>
</ol>
</div>
Step 7 - Sidebar
In a typical blog, the sidebar holds various widgets, which display links to other pages
or articles, and each widget is usually an unordered list of anchor tags. Here, we're
going to have "categories", "recent posts" and "archives" widgets. So our sidebar div
will contain three lists, each with a title wrapped in an <h3> tag.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div id="sidebar">
<h3>Categories</h3>
<ul>
<li><a href="#">General</a></li>
<li><a href="#">Ghost Sightings</a></li>
<li><a href="#">UFO Crashes</a></li>
<li><a href="#">Government Coverups</a></li>
<li><a href="#">International Conspiracies</a></li>
</ul>
<h3>Recent Posts</h3>
<ul>
<li><a href="#">Ghost Sighting in Mansion</a></li>
<li><a href="#">UFO picked up by satelites</a></li>
<li><a href="#">Mutants amoung us?</a></li>
<li><a href="#">Bigfoot: Fact or Fiction?</a></li>
</ul>
<h3>Archives</h3>
<ul>
<li><a href="">June 2008</a></li>
<li><a href="">May 2008</a></li>
<li><a href="">April 2008</a></li>
<li><a href="">March 2008</a></li>
</ul>
</div>
Step 8 - Footer
The footer will work like the top bar, header, and navigation worked, with an outer div to
hold a repeating background, and an inner div to centre the content and contain it within
the 900px of our page. To do this, we just need to add the "container" class to our
"footer content" div.
Our footer is going to have three columns: copyright info, links, and subscription
options. Each will have to be contained within its own div.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="footer">
<div id="footer_content" class="container">
<div id="copyright">
<p>Copyright 2009.<br /> All Rights Reserved.</p>
</div>
<div id="links">
<h4>Links</h4>
<ul>
<li><a href="#">PSDtuts - Photosohp tutorials</a></li>
<li><a href="#">NetTtuts - Web development and design tutorials</a></li>
<li><a href="#">VectorTuts - Illustrator and vector tutorials</a></li>
<li><a href="#">FlashTuts - Adobe Flash tutorials</a></li>
</ul>
</div>
<div id="feeds">
<h4>Follow our updates</h4>
<ul>
<li><a href="#">Subscribe to RSS Feed</a></li>
<li><a href="#">What is RSS?</a></li>
<li><a href="#">Email Updates</a></li>
</ul>
</div>
</div>
</div>
Okay, we're done our markup! Lets take a look in the browser (I'm using Safari 4, which
is awesome, by the way)
It doesn't look like much, but it has all our content laid out in a logical, readable way. It's
important that an un-styled web page contains all the information needed for a reader to
be able to understand and navigate the page easily. This ensures that anyone browsing
with CSS disabled, or using a specialized browser (like a screen reader for visually
impaired people), will still be able to access and understand content. Keeping this in
mind will also ensure a logical layout, which will be easier to modify later.
Step 9 - CSS
Now comes the fun part: giving our page some style. Prepare yourself - to achieve the
layout we want, we're going to have to face some confusing little CSS headaches. I'm
going to try to explain the underlying concepts that lead to these problems, so that you
not only learn how to solve them, but also gain a better understanding of how CSS
works and how to deal with any problems you might come up against. Let's get started!
Create a new document "style.css" and link to it in the head of your html document:
1
2
3
4
5
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Blog</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
Step 10 - Basic Clean-up

First off, we need to know what we're working with, which means getting rid of default
browser styles.
We're going to use a simple css reset to get rid of those pesky margins and styles:
1
2
3
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, img, form, fieldset, blockquote {
margin:0px; padding:0px; border:0px;
}
We also have the wrong font for our whole page, lets fix that:
1
body {font-family: Arial, helvetica, sans-serif; }
The next step is kinda neat: remember how we added the "container" class to all divs
that had text content? It's time to get that container to contain our content! Like I said
before, we're making our page 900px wide, and we need out content to be centered.
1
.container {width: 900px; margin: 0 auto; }
And just like that, we have a nice 900px wide, centered webpage.
Step 11 - Starting at the Top

We're going to start at the top with the small blueish bar containing the subscription and
login links. Okay, the first thing we notice about our two paragraphs at the top is that
they're supposed to be beside each other, not on top. To do this, we need to float the
elements.
How floats work

When we look at our webpage in the browser, we see a bunch of elements of different
widths and heights. The browser, however, sees only a bunch of boxes stacked on top
of one another, with each element taking up the entire width of the container. The
webpage has a very simple "flow": each element is pushed down the page by the
element above it.
To get two elements to sit next to each other, we need to take them out of the normal
"flow" of the page.
When an element is floated, a few things happen: it gets stuck to the side of the page
(or another element) and it is removed from the normal flow of elements - that is,
instead of taking up the entire width of the page, it only takes up the space it directly
occupies, allowing the elements below it to move up beside.
Lets try it with our two little paragraphs:
1
2
3
p#login {float: left; }

p#subscribe {float: right; }
Take a look in the browser, and we have a problem! The h1 logo has moved itself up
between the two floated items. When you float elements, it's like you're telling them to
"break the rules", the only problem is, when you let some elements break the rules,
other elements start doing it too! What we need is a way to tell the browser that these
two paragraphs, and these two paragraphs ONLY, are allowed to break the rules, so
after the floated elements, the normal flow is restored. To do this, we need to add a rule
to the parent div of the two floated elements, which lets the two paragraphs inside it
float without affecting the rest of the page.
To do this, we need to add a property to the containing div of "overflow" and set the
value to "hidden".
1
#top_bar {overflow: hidden; }
It's not terribly important to understand what's overflowing, or where it's hiding, so long
as you understand that the overflow: hidden rule controls the behavior of floats within the
div. Now, I don't want to confuse or scare anybody, but this technique doesn't always
work in all browsers. It works here, but always test in IE for your own designs. There are
a number of other techniques worth noting, all of them have their advantages. PeterPaul Koch describes a method similar to the one I use here in his article Clearing
floats. Steve Smith describes his method of "Floating (Nearly) Anything" in his post
Clearing Floats: The FnE Method. Also, it's a bit more of an advanced technique, but
Tony Aslett has pioneered a rather ingenious and devious technique, described in the
article How To Clear Floats Without Structural Markup. Choose the method that works
best for you, and remember to test your browsers!
One more important thing about floats is that you should always specify a width. Your
CSS will still validate if you don't (you will get a warning) but it's best practice and you
sometimes wind up with unexpected results in some browsers if you don't.
Since we want our layout to be easily resizable, we're not going to use pixel values,
we'll use percentages instead. We may as well let each element take up 50% of the
width. Because we've given it so much space, the subscribe paragraph has moved to
the left. We can get it to stick to the right again by specifying text-align: right.
1
2
3
p#login {float: left; width: 50%;}

p#subscribe {float: right; width: 50%; text-align: right; }
Styling the paragraphs

Before adding a background image, I like to style the fonts so that I can see how much
space I have to deal with.
Font sizes using ems

We want to make our web page as accessible and flexible as possible, to reach the
largest possible audience, right? That includes allowing readers to resize text to a
comfortable size. Now, different browsers deal with resizing in different ways, but as
usual, the problem browser is IE/Win. In Internet Explorer, if your text size is set in
pixels, you can't resize it, so your reader is stuck with whatever font size you've
specified. That's not very nice, especially for readers with poor vision. To correct this
problem, we need to use a different unit - ems.
Ems are a relative size unit - it means the width of the "m" in whatever font-size is
specified. The default size set by browsers is 16px, so 1em would equal a font-size of
16px.
To make our web page fully scalable, we can convert all our font sizes to ems. An easy
way to do this is with the web application Em Calculator (works best in FireFox).
However, to avoid doing any confusing math, there's an easier way. Since ems are
relative to the default font-size of the page, if we change the default, the em values will
be different.
To make the math easier, we can give ourselves a base of 10, by setting the default font
to 10px instead of 16. To do this, we just specify in our CSS file that we want our fonts
to be 62.5% of the default.
1
body {font-family: Arial, helvetica, sans-serif; font-size: 62.5%; }
Now we just need to divide each font size in pixels by 10, and we have our em value. To
start, the font size for our two <p> tags at the top of the page is 12px, which works out to
1.2ems.
1
2
3
#top_bar p {font-size: 1.2em; color: #ebf0e8;}

#top_bar a {font-size: 1.2em; color: #a5bf8d;}
Expandable backgrounds
Next, we add in the repeating background image we sliced from our PSD:
1
#top_bar {overflow: hidden; background: url(images/bar_slice.jpg) repeat-x; }
We need to add a bit of padding to the top and bottom of the paragraphs to make the
image stretch to its full height. To get the right values, we need to go back to our PSD
and measure the height of the bar with the ruler tool: mine turns out to be 26px tall.
Since our text is 12px tall, the total padding will be 26-12 or 14px. This means we add
7px of padding to the top, and 7px to the bottom. (These values are sometimes off by a
pixel or two, but are a good place to start, just keep checking in your browser)
1
2
3
4
5
6
#top_bar {
overflow: hidden;
background: url(images/bar_slice.jpg) repeat-x;
padding-top: 7px;
padding-bottom: 7px;
}
We could also get the div to stretch to its full height by specifying a height of 26px, but
you should always avoid specifying a height for your elements as much as possible, to
allow for maximum flexibility. If you restrict your element to a specific height, you aren't
allowing for larger text or additional content.
Check it out, it looks just like our PSD. But here's where things get tricky: try re-sizing
the text in your browser. When we increase the size of the text, the ratios change, we
lose our bottom padding, and the text eventually overflows beyond its background. To
make a more "indestructible" web site, we need to get the background to stretch as the
text grows or as more content is added, so that there is always 7px of padding at the
top and bottom, no matter how big the text is. Since our background image is only 26px
tall, we need to have something else to stretch out further. What we're going to do is
basically put a solid color behind the image, so that when the text gets bigger and the
image can't contain it, the color behind it shows through. The color at the bottom of our
gradient is #08413c. So lets add that to our background. To specify that we want the
image to always stick to the top of the element, so that the color stretches out from the
bottom, we add a background-position value after the image url.
1
background: #08413c url(images/bar_slice.jpg) top repeat-x;
Now try resizing the text: the background grows with it, and it looks pretty much the
same as it gets bigger. This also lets us know that if we wanted to add a second line of
content later on, we wouldn't have to change anything in our css. The ability of an
element to expand for more or larger text is often overlooked in web development, and
this causes pages to break down when text is resized. Just check out my University's
Homepage, try making the text one step bigger, and you lose a navigation link!
One more thing, we just need to add that 1px border to the bottom of our bar:
1
border-bottom: 1px solid #7ab7b7;
So here's where we're at so far:
Step 12 - Header
Since we're going to be making the text of our blog name and description white, lets
add in the background first. We probably won't need this image to stretch out, but just in
case, we'll repeat the same process of adding a background color and position:
1
2
3
#header {
background: #01835f url(images/header_slice2.jpg) top repeat-x;
}
Now lets do our font styles:

01
02
03
04
05
06
07
08
09
10
11
12
13
h1 {
font-family: "Myriad Pro", arial, sans-serif;
color: #fff;
font-weight: normal;
font-size: 4.8em;
padding-top: 25px;
}
p.desc {
color: #fff;
font-size: 2.4em;
}
Alright, so now we need to get our description out beside our logo. This can be
achieved by floating, but I tried it and ran into problems with specifying widths, and I
managed to get a much better result using absolute positioning. Plus it gives me a
chance to explain an important concept!
Absolute Positioning
If we want to position an element outside the "flow" of the page without using floats, we
can use absolute positioning, which basically allows you to position an element
anywhere within a div regardless of other elements within the div. This means that when
you specify a position of, say, left: 10px, it will position the element 10px to the left of the
side of the div, whether or not there is another element there.
First, in order to absolutely position an element, we need to set the position of the
parent div to relative, because the absolute positioned element is positioned relative to
the parent div.
1
2
3
4
5
#branding {
overflow: hidden;
margin-bottom: 30px;
position: relative;
}
Now we can set the absolute position of our description. When position: absolute is
used, we can specify its position in terms of left, right, top and bottom, using pixels,
percentages or ems. First, the top - the description is almost exactly 50% from the top
of the header, so lets specify that:
1
2
3
4
5
6
7
p.desc {
color: #fff;
font-size: 2.4em;
position: absolute;
top: 50%;
}
Now we need to push it out to the right, by giving it a value for left:
if we use pixels, then when the text is resized, it will get closer to the h1, and eventually
overlap it, so scrap that method. We get the same problem with percentages, only not
as dramatically. The best thing to do is position it with ems, which as you remember get
bigger as text size gets bigger, so the space between the h1 and description will
remain when the text is resized.
1
2
position: absolute;
top: 50%; left: 8em;
And it looks great!
Step 13 - Navigation
Lets clean up this navigation menu, and get rid of the list style and text decoration, and
add font styles.
1
2
3
4
5
6
7
8
ul#menu {list-style: none; }

ul#menu li a {
font-size: 1.8em;
text-decoration: none;
color: #2b2b2b;
text-transform: uppercase;
}
To get our links to line up horizontally, we're going to set the list items to float: left, so
that each list item is "stuck" to the one to its left.
1
ul#menu li {float: left; }
We of course wind up with the same problem as with all floats, but all we have to do is
add in overflow: hidden to the navigation div, and we're good to go.
Each list item is about 45px apart, so lets add 45px of padding to the right of each item.
1
2
3
4
ul#menu li {
float: left;
padding-right: 45px;
}
Note: All these padding values can be written shorthand as:

1
padding: 11px 45px 11px 0px;
The shorthand for padding (and margins) is the values for top-right-bottom-left all in one
line. I find the best way to remember the order is to think of the compass directions: n-es-w.
Next, lets add the background image, employing the same technique as before to
ensure our background stretches when text is resized:
1
#navigation {background: #8ec196 url(images/nav_slice.jpg) top repeat-x; overflow: hidden
To find the padding value, once again just measure the height of the bar (mine is 40px)
and subtract the size of the text (18px) to get the total padding, and divide by two: 4018=22px.
1
ul#menu li {float: left; padding-top: 11px; padding-bottom: 11px; }
To move our navigation menu down a bit, the easiest thing to do is just add a margin to
the bottom of the branding div.
1
#branding {overflow: hidden; margin-bottom: 30px; }
And finally, the 1px border at the top of the bar:

1
border-top: 1px solid #9cebda;
That's it! We're done with the header! Let's take a look:
Step 14 - Content
The first thing we need to do here is to create the two columns - one for the posts, one
for the sidebar. By now this should be simple: just float one to the left, one to the right.
1
2
3
#posts {float: left; }

#sidebar {float: right; }
And... Nothing happened. At least it looks that way, scroll down and you'll find your
sidebar stuck to the right side beneath the posts. Before the sidebar can move in
beside the posts, we need to specify how much space the posts div can take up, and
specify a width for the sidebar as well. Again, we're going to use percentages instead
of pixels, so that if the text is resized, the sidebar stays at the side.
1
2
3
#posts {float: left; width: 67%; }

#sidebar {float: right; width: 33%; }
And we need to hide the overflow of our containing div:

1
#content {overflow: hidden; }
Great, we have a nice little two-column layout!
Step 15 - Styling the Posts

Since we used a CSS reset, the content of our post section has no style at all, and we
need to go through the tedious task of styling every single possible element. My
workflow is a bit different for this than with the rest of the page, as I don't really refer to
the Photoshop document. I find font styling in Photoshop to be a real pain, so I usually
skip it. To get the styles for my posts, I go through a process of trial and error. I usually
start with settings similar to default browser styles, which you can find at This Link, and
tweak them to my liking. I'm not going to go through the whole process step by step, but
this is what I came up with in the end:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#posts h2 {margin: 7px 0 4px 0; font-size: 2.4em; }

#posts h2, h3, h4, h5, h6 {color: #3c3f40; }
#posts p {line-height: 1.3em; padding: 7px 0; font-size: 1.2em; }
#posts small {font-size: 1.1em; }
#posts a {color: #327800; font-weight: bold; text-decoration: none; }
#posts blockquote {margin: 0.7em 3em; border-left: 2px solid #327800; padding-left
#posts ol, ul, dl {font-size: 1.2em; margin: 4px 0 4px 40px; }
#posts h3, h4, h5, h6 {padding: 4px 0; }
#posts strong {font-weight: bolder; }
#posts em {font-style: italic; }
#posts code {font-size: 1.2em; }
#posts h3 {font-size: 1.8em;}
#posts h4 {font-size: 1.4em; }
Which should look something like this:
Now there's about 35px at the top of our post section, but our h2 tags already have a
margin of 7px at the top, so lets add a margin of 28px to the top of the posts div.
1
2
3
4
5
#posts {
float: left;
width: 67%;
margin-top: 28px;
}
And that's about it for the posts section. On to the sidebar!
Step 16 - Sidebar
First off, lets add in that background color:
1
#sidebar {float: right; background: #d8ddd1;}
And fix the font styles:

01
02
03
04
05
06
07
08
09
10
11
#sidebar h3 {
font-size: 1.6em;
color: #3c3f40;
margin-top: 10px
}
#sidebar ul {list-style: none; margin-left: 20px; }
#sidebar ul li {font-size: 1.2em; }
#sidebar ul li a {text-decoration: none;color: #525254; }
We also need to push the sidebar down by 25px (35px - the 10px margin at the top of
the h3 tags). This time, however, we can't use the margin-top property, because this will
move the entire sidebar, including the background, down the page. We want the
background to start right beneath the navigation bar, but the content to start 35px below
that, so we need to use the padding-top property. We also need padding on the left,
right and bottom, and 25px sounds about right, so we can declare it all in one padding
value:
1
2
3
4
5
6
#sidebar {
float: right;
background: #d8ddd1;
padding: 25px;
width: 33%;
}
But oh no! Our sidebar is no longer at the side! This is because we added padding to
the sides of the sidebar. When you add padding to an element, you are actually making
it bigger. We just made our sidebar 50px wider, so now the widths of the floated
elements add up to more than 100%. To fix this, lets first convert our 25px of padding to
a percentage of 900px. It works out to about 2.7%, but I'm rounding up to 3%.
1
padding: 25px 3%;
Note: this is another shorthand value, it means that the top and bottom are both 25px,
and that the left and right are both 3%.
Our sidebar is now 33+6% wide, so it's still too wide, but all we need to do now is
subtract the 6% from the original 33%
1
width: 27%;
I thought the sidebar looked a bit wide at this point, so I reduced it to 25%.
The important thing to remember is that all the padding, margin, and even border
values add to the width of the element, so you need to adjust the width property to
compensate every time you add padding, margins or borders.
And there we go, no matter how big you make the text, our sidebar stays at the side,
and the ratio between the post area and sidebar remain the same. It's an excessively
plain sidebar, but I'm not going to bother styling it any more, just because its not really
important to the goals of this tutorial.
Step 17 - Footer
First lets make the font a bit bigger and add some styles:
1
2
3
4
5
6
7
#footer p {color: #a5bf8d;}

#footer h4 {color: #a5bf8d; font-size: 1.4em; padding-top: 0; }
#footer ul {list-style: none; margin-left: 0; }
#footer ul li a {text-decoration: none; color: #fff; }
Next we can add in our background image:

1
#footer {font-size: 1.2em; background: url(images/footer_slice.jpg) repeat-x; }
And since we want it to be able to stretch, we can add in the color at the bottom of the
gradient to our background value just like we did before:
1
background: #093b2b url(images/footer_slice.jpg) top repeat-x;
Next add in that 2px border at the top:

1
border-top: 2px solid #1e956c;
Lets add a margin and some padding to the top and bottom:
1
2
3
4
5
6
7
#footer {
font-size: 1.2em;
background: #093b2b url(images/footer_slice.jpg) top repeat-x;
margin-top: 30px;
padding-top: 20px;
padding-bottom: 20px;
}
Next, we're going to create three columns by floating. Floating three elements works
pretty much the same as floating two, we're going to float each column to the left. We
need to declare the widths of each element being floated, using percentage values to
allow for expansion.
1
2
3
4
5
#copyright {float: left; width: 20%; }

#links {float: left; width: 40%; }
#feeds {float: left; width: 40%; }
Just remember that we have to set the overflow to hidden in the parent div.
1
#footer {overflow: hidden;}
At this point, I decided that it would actually look better if the links and RSS divs came
first, and the copyright info was at the far right, so I changed the order of the divs, and
set the copyright div to float: right, and aligned the text to the right as well.
1
2
3
4
5
#copyright {
float: right;
text-align: right;
width: 20%;
}
And there we have it, we're done coding and styling our page!
Advertisement
Step 18 - Accesibility testing

Througout the tutorial, I've been testing my page in Safari 4. Since Safari 4 is probably
the most standards-compliant and modern browser, it displays web pages the most
predictably. If only everyone used a standards-compliant browser... Unfortunately, there
are still people out there using outdated browsers, and we need to prepare for that.
Let's start with the most problematic browser first: Internet Explorer 6. I use a mac, and
have yet to find an effective (free) way to test my web pages in Internet Explorer. If
anyone reading this knows of some sort of magical technique, please, let me know.
Anyways, time to haul out the ol' family Dell. To install multiple versions of Internet
Explorer at once, google "Multiple IE" and download the .zip file.
Surprisingly, it works out just fine in IE6! IE7 is okay too. Text is resizeable! I also
tested this page in Firefox, Opera and Camino. I had trouble installing Google Chrome
on the PC, so I couldn't tell you if it works, but I think it should, bceause of the simplicity
of the markup and style.
Conclusion
That's it! Hopefully you've learned a thing or two about coding flexible websites. Check
it out in any browser, make the text bigger, make it smaller, and our layout adapts just
fine. Disable CSS, and it still makes sense! I hope you can see how easy it is to make
your websites less fallible! This page was very simple, without many complicated
challenges. When your layouts get more complicated, it will be a bit tougher to maintain
flexibility.
Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for more daily web
development tuts and articles.
Advertisement
Difficulty:
Intermediate
Categories:
HTML & CSS
Web Development
CSS
HTML
Translations:
Tuts+ tutorials are translated into other languages by our community membersyou can be involved too!
Translate this post
Powered by
About Tessa Thornton
Tessa taught herself to design and build websites in her spare time while studying humanities at the University of Toronto, and has been coding ever since.
When she's away from her laptop, Tessa can be found cycling, knitting, and searching for Toronto's best shot of espresso. She works as a front-end web
developer at The Phuse.
+ Expand Bio
Advertisement
Suggested Tuts+ Course
Introduction to WordPress Plugin Development
$15
Related Tutorials
Fast Web UI With Webknife
Code
Building HTML Page Structure With Skeleton

Web Design
Creating a Web App From Scratch Using Python Flask and MySQL
Code
Envato Market Item
What Would You Like to Learn?

Suggest an idea to the content editorial team at Tuts+.
Advertisement
Teaching skills to millions worldwide.

20,309 Tutorials
605 Video Courses
Follow Us
Help and Support

Help and Support

FAQ
Terms of Use
Contact Support
About Tuts+
Advertise
Teach at Tuts+
Translate for Tuts+
Meetups
Email Newsletters
Get Tuts+ updates, news, surveys &
offers.
Email Address
Subscribe
Privacy Policy
Custom digital services like logo design, WordPress installation, video production and more.
Check out Envato Studio
Build anything from social networks to file upload systems. Build faster with pre-coded PHP scripts.
Browse PHP on CodeCanyon
2015 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.

Code Tutsplus Com

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Code Tutsplus Com

Diunggah oleh

Hak Cipta:

Format Tersedia

Code

How to Design and Code a

Next add a background for the sidebar, I chose #d8ddd1.

"login, Sign Up" and "subscribe via...":

Step 3 - HTML Setup

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<div id="content" class="container">

<h2>Ghostly Goo in your Kitchen Sink?</h2>

is awesome, by the way)

Step 10 - Basic Clean-up

body {font-family: Arial, helvetica, sans-serif; }

.container {width: 900px; margin: 0 auto; }

Step 11 - Starting at the Top

How floats work

p#login {float: left; }

#top_bar {overflow: hidden; }

p#login {float: left; width: 50%;}

Styling the paragraphs

Font sizes using ems

body {font-family: Arial, helvetica, sans-serif; font-size: 62.5%; }

#top_bar p {font-size: 1.2em; color: #ebf0e8;}

#top_bar {overflow: hidden; background: url(images/bar_slice.jpg) repeat-x; }

background: #08413c url(images/bar_slice.jpg) top repeat-x;

border-bottom: 1px solid #7ab7b7;

So here's where we're at so far:

Now lets do our font styles:

And it looks great!

ul#menu {list-style: none; }

ul#menu li {float: left; }

Note: All these padding values can be written shorthand as:

padding: 11px 45px 11px 0px;

#navigation {background: #8ec196 url(images/nav_slice.jpg) top repeat-x; overflow: hidden

ul#menu li {float: left; padding-top: 11px; padding-bottom: 11px; }

#branding {overflow: hidden; margin-bottom: 30px; }

And finally, the 1px border at the top of the bar:

border-top: 1px solid #9cebda;

#posts {float: left; }

#posts {float: left; width: 67%; }

And we need to hide the overflow of our containing div:

#content {overflow: hidden; }

Great, we have a nice little two-column layout!

Step 15 - Styling the Posts

#posts h2 {margin: 7px 0 4px 0; font-size: 2.4em; }

Which should look something like this:

And that's about it for the posts section. On to the sidebar!

#sidebar {float: right; background: #d8ddd1;}

And fix the font styles:

padding: 25px 3%;

#footer p {color: #a5bf8d;}

Next we can add in our background image:

#footer {font-size: 1.2em; background: url(images/footer_slice.jpg) repeat-x; }

background: #093b2b url(images/footer_slice.jpg) top repeat-x;

Next add in that 2px border at the top:

border-top: 2px solid #1e956c;

#copyright {float: left; width: 20%; }

#footer {overflow: hidden;}

Step 18 - Accesibility testing

Translate this post

About Tessa Thornton

Suggested Tuts+ Course

Introduction to WordPress Plugin Development

Building HTML Page Structure With Skeleton

Envato Market Item

What Would You Like to Learn?