Categories Learning Guides Forum

Code

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 cleanand simple XHTML and CSS. This tutorial is aimed at beginners, and anyone lookingto improve the accessibility of their web designs.

Tutorial DetailsDifficulty: EasyEstimated Completion Time: 1.5-2hrs

Step 1So our example web page is going to be based on a simple blog theme, with aWordPress blog-like structure similar to that of the nettuts homepage. It's going to looksomething like this:

H T M L & C S S

How to Design and Code aFlexible Websiteby Tessa Thornton 1 Sep 2009 161 Comments

converted by Web2PDFConvert.com

The idea here is not for you to reproduce my example, but for you to be able to followalong and apply the techniques to your own designs, hopefully learning a thing or twoabout the underlying concepts.

Step 2 - PhotoshopWe're going to keep the Photoshop use here to a bare minimum, Usually I mockup anentire design in Photoshop before coding, but here I'm just going to generate a basiclayout, and worry about the content later. This is an example of a different workflow, itwill 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 allwe're using is basic shapes and gradients.

Page Layout

I decided to make the page 900px wide, so my document is 1000px wide and 1200pxlong (don't know why I gave myself so little room, make yours wider if you like). Placeguides at 50px and 950px to get a 900px wide area. We're going to have a contentarea and a sidebar, and the content area is going to be 600px wide, so place anotherguide at 650px.

Backgrounds

The header background is just three rectangles for the top links, main header, and

converted by Web2PDFConvert.com

navigation area. I used shape layers and added gradients to the layer styles. There arealso 1px borders between the top bar and header area, and between the header andnavigation area.

The footer background is another gradient, but this time with a 2px border at the top.

converted by Web2PDFConvert.com

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

converted by Web2PDFConvert.com

Type Tool

Next we Grab the type tool (T) and add in a logo and tagline, and some basicnavigation links. Fonts:

Blog Title:

Font: Myriad ProSize: 48ptColor: #ffffff (white)

Blog Description:

Font: Myriad ProSize: 24ptColor: #ffffff

Main Navigation Links:

Font: ArialSize: 18ptColor: #2b2b2b

"welcome, guest" and "stay updated":

Font: ArialSize: 12ptColor: #fffff

converted by Web2PDFConvert.com

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

Color: #a5bf8dStyle: underline

Content

We're only going to include one sample "post" in our Photoshop mockup, because Ifind working with type in Photoshop is a real pain, but we'll get into more detail aboutstyling the content section later. The fonts I'm using for the dummy post are:

Post Title:

Font: ArialSize: 24ptColor: #3c3f40Style: 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 andsave 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 getthe right parts. The slices I cut are about 5px wide, but the width isn't terribly importantat this point.

converted by Web2PDFConvert.com

Select 'File/Save for web and devices...' Hold down "shift" and click to select eachslice. From the dropdown menu "presets" select "jpeg . Uncheck "convert to sRGB"" (Ifind 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.

converted by Web2PDFConvert.com

GIMP users: I'm not sure if gimp has a tool like slice, but you just need to makerectangular selections, save them to separate documents, crop them down, and savethem as optimized jpegs.

For a more in depth look at the slicing and saving process, see My previous tutorial.

Step 3 - HTML SetupIf 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 meaningfuland semantic. That being said, to maintain a flexible, resizable layout, we need toenclose 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 thecontent area. The footer is going to contain an inner div for the written content.

Top Bar

The background of the blue bar at the top stretches the entire width of the page, but thetwo text areas need to be within the 900px of the page. To achieve this, we need thecontent 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 forthe subscription options. Since they're going to be floated, each needs to be given aunique id. Actually, if we wanted to be totally semantic, we could code these twoparagraphs as an unordered list with two list items. Try it both ways, see if you canmake it work.

010203040506070809101112131415161718192021222324252627282930

<!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><!-- end top bar --> <div id="header"> </div><!-- end header --> <div id="content"> </div><!-- end content --> </div><!-- end main --> <div id="footer"> <div id="footer_content"> </div><!-- end footer content --> </div><!-- end footer --> </body></html>

converted by Web2PDFConvert.com

Step 5 - HeaderWe face the same issue here as we did with the last step, the background imageneeds to stretch out indefinitely. To contain the content, we need to place it withinanother div. Since the header will also be within our centered, 900px wide page, wecan 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.

Navigation

Also inside the header is the navigation menu, which will be wrapped in an unorderedlist 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.

We're writing the navigation links in lowercase here, but in our CSS file we willtransform them to uppercase. You could write them in capitals here, but my caps lockkey is broken, and this way makes for cleaner markup.

Step 6 - ContentThe content area doesn't have a background image or color, so we don't need toenclose 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 blogposts, and one for the sidebar.

01020304050607080910111213141516

<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><!-- end bar container --> </div><!-- end top bar --> <div id="header"> </div><!-- end header --> <div id="content"> </div><!-- end content --> </div><!-- end main -->

123456

<div id="header"> <div id="branding" class="container"> <h1>My Blog</h1> <p id="desc">Description of My Blog</p> </div><!-- end branding --></div><!-- end header -->

0102030405060708091011121314151617

<div id="header"> <div id="branding" class="container"> <h1>My Blog</h1> <p class="desc">Description of My Blog</p> </div><!-- end branding --> <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><!-- end navigation --> </div><!-- end header -->

converted by Web2PDFConvert.com

When designing a blog, we need to take into account the fact that the content is goingto change, and may include any number of elements, including lists, images, quotes,headings and emphasized text. To prepare, we need to style every possible elementthat might appear., so our sample content needs to include Everything. This issometimes called the "Sandbox method." To get dummy content, I suggest visitingHTML Ipsum.

We're going to separate our sample content into a couple different posts, with titleswrapped in <h2> tags. Each post will also have standard information about date,author, etc, contained within a <small> tag.

Step 7 - SidebarIn a typical blog, the sidebar holds various widgets, which display links to other pagesor articles, and each widget is usually an unordered list of anchor tags. Here, we'regoing to have "categories", "recent posts" and "archives" widgets. So our sidebar divwill contain three lists, each with a title wrapped in an <h3> tag.

01020304050607080910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455

<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 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. <a href="#">Read More</a></p> <h2>Alien Spacecraft found in New Mexico</h2> <small>on July 01 in <a href="#">General</a> tagged <a href="#">petitions</a> by < <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> <small>on July 01 in <a href="#">General</a> tagged <a href="#">petitions</a> by < <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, condimentum sed, < 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> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </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> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ul> <ol> <li>Lorem ipsum dolor sit amet</li> <li>Consectature vestiblum</li> </ol> </div><!-- end posts --> </div><!-- end content -->

converted by Web2PDFConvert.com

Step 8 - FooterThe footer will work like the top bar, header, and navigation worked, with an outer div tohold a repeating background, and an inner div to centre the content and contain it withinthe 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 subscriptionoptions. Each will have to be contained within its own div.

Okay, we're done our markup! Lets take a look in the browser (I'm using Safari 4, which

0102030405060708091011121314151617181920212223242526272829303132

<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><!-- end sidebar --> </div><!-- end content --> </div><!-- end main -->

01020304050607080910111213141516171819202122232425262728293031

<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><!-- end footer content --> </div><!-- end footer -->

converted by Web2PDFConvert.com

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'simportant that an un-styled web page contains all the information needed for a reader tobe able to understand and navigate the page easily. This ensures that anyone browsingwith CSS disabled, or using a specialized browser (like a screen reader for visuallyimpaired people), will still be able to access and understand content. Keeping this inmind will also ensure a logical layout, which will be easier to modify later.

Step 9 - CSSNow comes the fun part: giving our page some style. Prepare yourself - to achieve thelayout we want, we're going to have to face some confusing little CSS headaches. I'mgoing to try to explain the underlying concepts that lead to these problems, so that younot only learn how to solve them, but also gain a better understanding of how CSS

converted by Web2PDFConvert.com

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:

Step 10 - Basic Clean-upFirst off, we need to know what we're working with, which means getting rid of defaultbrowser styles.

We're going to use a simple css reset to get rid of those pesky margins and styles:

We also have the wrong font for our whole page, lets fix that:

The next step is kinda neat: remember how we added the "container" class to all divsthat had text content? It's time to get that container to contain our content! Like I saidbefore, we're making our page 900px wide, and we need out content to be centered.

And just like that, we have a nice 900px wide, centered webpage.

Step 11 - Starting at the TopWe're going to start at the top with the small blueish bar containing the subscription andlogin links. Okay, the first thing we notice about our two paragraphs at the top is thatthey're supposed to be beside each other, not on top. To do this, we need to float theelements.

How floats work

When we look at our webpage in the browser, we see a bunch of elements of differentwidths and heights. The browser, however, sees only a bunch of boxes stacked on topof one another, with each element taking up the entire width of the container. Thewebpage has a very simple "flow": each element is pushed down the page by theelement 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 directlyoccupies, allowing the elements below it to move up beside.

Lets try it with our two little paragraphs:

12345

<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>

123

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, img, form, fieldset, blockquote { margin:0px; padding:0px; border:0px; }

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

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

converted by Web2PDFConvert.com

Take a look in the browser, and we have a problem! The h1 logo has moved itself upbetween 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 thesetwo paragraphs, and these two paragraphs ONLY, are allowed to break the rules, soafter the floated elements, the normal flow is restored. To do this, we need to add a ruleto the parent div of the two floated elements, which lets the two paragraphs inside itfloat without affecting the rest of the page.

To do this, we need to add a property to the containing div of "overflow" and set thevalue to "hidden".

It's not terribly important to understand what's overflowing, or where it's hiding, so longas you understand that the overflow: hidden rule controls the behavior of floats within thediv. Now, I don't want to confuse or scare anybody, but this technique doesn't alwayswork in all browsers. It works here, but always test in IE for your own designs. There area number of other techniques worth noting, all of them have their advantages. Peter-Paul Koch describes a method similar to the one I use here in his article Clearingfloats. Steve Smith describes his method of "Floating (Nearly) Anything" in his postClearing Floats: The FnE Method. Also, it's a bit more of an advanced technique, butTony Aslett has pioneered a rather ingenious and devious technique, described in thearticle How To Clear Floats Without Structural Markup. Choose the method that worksbest for you, and remember to test your browsers!

One more important thing about floats is that you should always specify a width. YourCSS will still validate if you don't (you will get a warning) but it's best practice and yousometimes 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 thewidth. Because we've given it so much space, the subscribe paragraph has moved tothe left. We can get it to stick to the right again by specifying text-align: right.

Styling the paragraphs

Before adding a background image, I like to style the fonts so that I can see how muchspace I have to deal with.

Font sizes using ems

We want to make our web page as accessible and flexible as possible, to reach thelargest possible audience, right? That includes allowing readers to resize text to acomfortable size. Now, different browsers deal with resizing in different ways, but as

123

p#login {float: left; } p#subscribe {float: right; }

1 #top_bar {overflow: hidden; }

123

p#login {float: left; width: 50%;} p#subscribe {float: right; width: 50%; text-align: right; }

converted by Web2PDFConvert.com

usual, the problem browser is IE/Win. In Internet Explorer, if your text size is set inpixels, you can't resize it, so your reader is stuck with whatever font size you'vespecified. That's not very nice, especially for readers with poor vision. To correct thisproblem, 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 isspecified. The default size set by browsers is 16px, so 1em would equal a font-size of16px.

To make our web page fully scalable, we can convert all our font sizes to ems. An easyway 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 arerelative to the default font-size of the page, if we change the default, the em values willbe different.

To make the math easier, we can give ourselves a base of 10, by setting the default fontto 10px instead of 16. To do this, we just specify in our CSS file that we want our fontsto be 62.5% of the default.

Now we just need to divide each font size in pixels by 10, and we have our em value. Tostart, the font size for our two <p> tags at the top of the page is 12px, which works out to1.2ems.

Expandable backgrounds

Next, we add in the repeating background image we sliced from our PSD:

We need to add a bit of padding to the top and bottom of the paragraphs to make theimage stretch to its full height. To get the right values, we need to go back to our PSDand 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 add7px of padding to the top, and 7px to the bottom. (These values are sometimes off by apixel or two, but are a good place to start, just keep checking in your browser)

We could also get the div to stretch to its full height by specifying a height of 26px, butyou should always avoid specifying a height for your elements as much as possible, toallow for maximum flexibility. If you restrict your element to a specific height, you aren'tallowing for larger text or additional content.

Check it out, it looks just like our PSD. But here's where things get tricky: try re-sizingthe text in your browser. When we increase the size of the text, the ratios change, we

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

123

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

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

123456

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

converted by Web2PDFConvert.com

lose our bottom padding, and the text eventually overflows beyond its background. Tomake a more "indestructible" web site, we need to get the background to stretch as thetext grows or as more content is added, so that there is always 7px of padding at thetop and bottom, no matter how big the text is. Since our background image is only 26pxtall, we need to have something else to stretch out further. What we're going to do isbasically put a solid color behind the image, so that when the text gets bigger and theimage can't contain it, the color behind it shows through. The color at the bottom of ourgradient is #08413c. So lets add that to our background. To specify that we want theimage to always stick to the top of the element, so that the color stretches out from thebottom, we add a background-position value after the image url.

Now try resizing the text: the background grows with it, and it looks pretty much thesame as it gets bigger. This also lets us know that if we wanted to add a second line ofcontent later on, we wouldn't have to change anything in our css. The ability of anelement to expand for more or larger text is often overlooked in web development, andthis causes pages to break down when text is resized. Just check out my University'sHomepage, 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:

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

Step 12 - HeaderSince we're going to be making the text of our blog name and description white, letsadd in the background first. We probably won't need this image to stretch out, but just incase, we'll repeat the same process of adding a background color and position:

Now lets do our font styles:

Alright, so now we need to get our description out beside our logo. This can beachieved by floating, but I tried it and ran into problems with specifying widths, and Imanaged to get a much better result using absolute positioning. Plus it gives me achance to explain an important concept!

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

1 border-bottom: 1px solid #7ab7b7;

123

#header { background: #01835f url(images/header_slice2.jpg) top repeat-x; }

01020304050607080910111213

h1 { font-family: "Myriad Pro", arial, sans-serif; color: #fff; font-weight: normal; font-size: 4.8em; padding-top: 25px; } p.desc { font-family: "Myriad Pro", arial, sans-serif; color: #fff; font-size: 2.4em; }

converted by Web2PDFConvert.com

Absolute Positioning

If we want to position an element outside the "flow" of the page without using floats, wecan use absolute positioning, which basically allows you to position an elementanywhere within a div regardless of other elements within the div. This means that whenyou specify a position of, say, left: 10px, it will position the element 10px to the left of theside 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 theparent div to relative, because the absolute positioned element is positioned relative tothe parent div.

Now we can set the absolute position of our description. When position: absolute isused, 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 topof the header, so lets specify that:

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 eventuallyoverlap it, so scrap that method. We get the same problem with percentages, only notas dramatically. The best thing to do is position it with ems, which as you remember getbigger as text size gets bigger, so the space between the h1 and description willremain when the text is resized.

And it looks great!

Step 13 - NavigationLets clean up this navigation menu, and get rid of the list style and text decoration, andadd font styles.

12345

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

1234567

p.desc { font-family: "Myriad Pro", arial, sans-serif; color: #fff; font-size: 2.4em; position: absolute; top: 50%; }

12

position: absolute; top: 50%; left: 8em;

12345678

ul#menu {list-style: none; } ul#menu li a { font-size: 1.8em; text-decoration: none; color: #2b2b2b; text-transform: uppercase;}

converted by Web2PDFConvert.com

To get our links to line up horizontally, we're going to set the list items to float: left, sothat each list item is "stuck" to the one to its left.

We of course wind up with the same problem as with all floats, but all we have to do isadd 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.

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

The shorthand for padding (and margins) is the values for top-right-bottom-left all in oneline. I find the best way to remember the order is to think of the compass directions: n-e-s-w.

Next, lets add the background image, employing the same technique as before toensure our background stretches when text is resized:

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: 40-18=22px.

To move our navigation menu down a bit, the easiest thing to do is just add a margin tothe bottom of the branding div.

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

That's it! We're done with the header! Let's take a look:

Step 14 - ContentThe first thing we need to do here is to create the two columns - one for the posts, one

1 ul#menu li {float: left; }

1234

ul#menu li { float: left; padding-right: 45px; }

1 padding: 11px 45px 11px 0px;

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

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

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

1 border-top: 1px solid #9cebda;

converted by Web2PDFConvert.com

for the sidebar. By now this should be simple: just float one to the left, one to the right.

And... Nothing happened. At least it looks that way, scroll down and you'll find yoursidebar stuck to the right side beneath the posts. Before the sidebar can move inbeside the posts, we need to specify how much space the posts div can take up, andspecify a width for the sidebar as well. Again, we're going to use percentages insteadof pixels, so that if the text is resized, the sidebar stays at the side.

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

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

Step 15 - Styling the PostsSince we used a CSS reset, the content of our post section has no style at all, and weneed to go through the tedious task of styling every single possible element. Myworkflow is a bit different for this than with the rest of the page, as I don't really refer tothe Photoshop document. I find font styling in Photoshop to be a real pain, so I usuallyskip it. To get the styles for my posts, I go through a process of trial and error. I usuallystart with settings similar to default browser styles, which you can find at This Link, andtweak them to my liking. I'm not going to go through the whole process step by step, butthis is what I came up with in the end:

123

#posts {float: left; } #sidebar {float: right; }

123

#posts {float: left; width: 67%; } #sidebar {float: right; width: 33%; }

1 #content {overflow: hidden; }

converted by Web2PDFConvert.com

Which should look something like this:

Now there's about 35px at the top of our post section, but our h2 tags already have amargin of 7px at the top, so lets add a margin of 28px to the top of the posts div.

01020304050607080910111213141516171819202122232425

#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; }

converted by Web2PDFConvert.com

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

Step 16 - SidebarFirst off, lets add in that background color:

And fix the font styles:

We also need to push the sidebar down by 25px (35px - the 10px margin at the top ofthe h3 tags). This time, however, we can't use the margin-top property, because this willmove the entire sidebar, including the background, down the page. We want thebackground to start right beneath the navigation bar, but the content to start 35px belowthat, 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 paddingvalue:

But oh no! Our sidebar is no longer at the side! This is because we added padding tothe sides of the sidebar. When you add padding to an element, you are actually makingit bigger. We just made our sidebar 50px wider, so now the widths of the floatedelements add up to more than 100%. To fix this, lets first convert our 25px of padding toa percentage of 900px. It works out to about 2.7%, but I'm rounding up to 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 issubtract the 6% from the original 33%

I thought the sidebar looked a bit wide at this point, so I reduced it to 25%.

12345

#posts { float: left; width: 67%; margin-top: 28px; }

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

0102030405060708091011

#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; }

123456

#sidebar { float: right; background: #d8ddd1; padding: 25px; width: 33%;}

1 padding: 25px 3%;

1 width: 27%;

converted by Web2PDFConvert.com

The important thing to remember is that all the padding, margin, and even bordervalues add to the width of the element, so you need to adjust the width property tocompensate 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 excessivelyplain sidebar, but I'm not going to bother styling it any more, just because its not reallyimportant to the goals of this tutorial.

Step 17 - FooterFirst lets make the font a bit bigger and add some styles:

Next we can add in our background image:

And since we want it to be able to stretch, we can add in the color at the bottom of thegradient to our background value just like we did before:

Next add in that 2px border at the top:

1234567

#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; }

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

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

1 border-top: 2px solid #1e956c;

converted by Web2PDFConvert.com

Lets add a margin and some padding to the top and bottom:

Next, we're going to create three columns by floating. Floating three elements workspretty much the same as floating two, we're going to float each column to the left. Weneed to declare the widths of each element being floated, using percentage values toallow for expansion.

Just remember that we have to set the overflow to hidden in the parent div.

At this point, I decided that it would actually look better if the links and RSS divs camefirst, and the copyright info was at the far right, so I changed the order of the divs, andset the copyright div to float: right, and aligned the text to the right as well.

And there we have it, we're done coding and styling our page!

Advertisement

Step 18 - Accesibility testingThrougout the tutorial, I've been testing my page in Safari 4. Since Safari 4 is probablythe most standards-compliant and modern browser, it displays web pages the mostpredictably. If only everyone used a standards-compliant browser... Unfortunately, there

1234567

#footer { font-size: 1.2em; background: #093b2b url(images/footer_slice.jpg) top repeat-x; margin-top: 30px; padding-top: 20px; padding-bottom: 20px; }

12345

#copyright {float: left; width: 20%; } #links {float: left; width: 40%; } #feeds {float: left; width: 40%; }

1 #footer {overflow: hidden;}

12345

#copyright { float: right; text-align: right; width: 20%; }

converted by Web2PDFConvert.com

Advertisement

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, andhave yet to find an effective (free) way to test my web pages in Internet Explorer. Ifanyone 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 InternetExplorer 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 alsotested this page in Firefox, Opera and Camino. I had trouble installing Google Chromeon the PC, so I couldn't tell you if it works, but I think it should, bceause of the simplicityof the markup and style.

ConclusionThat's it! Hopefully you've learned a thing or two about coding flexible websites. Checkit out in any browser, make the text bigger, make it smaller, and our layout adapts justfine. Disable CSS, and it still makes sense! I hope you can see how easy it is to makeyour websites less fallible! This page was very simple, without many complicatedchallenges. When your layouts get more complicated, it will be a bit tougher to maintainflexibility.

Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for more daily webdevelopment tuts and articles.

Difficulty:IntermediateCategories:

HTML & CSS Web Development CSS HTML

Translations:

Tuts+ tutorials are translated into other languages by our community members—you can be involved too!

Translate this post Powered by

About Tessa Thornton

converted by Web2PDFConvert.com

Advertisement

Suggested Tuts+ Course

Related Tutorials

+ Expand Bio

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 webdeveloper at The Phuse.

Introduction to WordPress Plugin Development $15

Fast Web UI With WebknifeCode

Building HTML Page Structure With SkeletonWeb Design

Creating a Web App From Scratch Using Python Flask and MySQL

converted by Web2PDFConvert.com

20,309 Tutorials 605 Video Courses

Envato Market Item

What Would You Like to Learn?

Suggest an idea to the content editorial team at Tuts+.

Advertisement

Code

Teaching skills to millions worldwide.

Follow Us

Help and Support

converted by Web2PDFConvert.com

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

Help and Support

FAQTerms of UseContact SupportAbout Tuts+AdvertiseTeach at Tuts+Translate for Tuts+Meetups

Email Newsletters

Get Tuts+ updates, news, surveys &offers.

Email Address

Subscribe

Privacy Policy

© 2015 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.

converted by Web2PDFConvert.com