clean web 2.0 style web design from photoshop

Coding a Clean Web 20 Style Web Design from Photoshop

Six Revisions

Home All Articles Tutorials Freebies About Contact Follow on Twitter

Subscribe RSS Feed | Email

Coding a Clean Web 20 Style Web Design from PhotoshopMay 29th 2009 by Jacob Gube |

89 Comments |

Stumble It

Delicious

In this web development tutorial yoursquoll learn how to build a web page template from a

Photoshop mock-up from a previous tutorial called How to Create a Clean Web 20 Style

Web Design in Photoshop using HTMLCSS and the jQuery library

This is the second part of a two-part series that will teach you how to create the layout

in Photoshop and then how to convert it to a standards-compliant (X)HTML web design

Final ResultClick on the figure below to see the live demonstration of the web design that yoursquoll be

creating in this tutorial

Sponsors

-10-2009 002308]httpsixrevisionscomtutorialsweb-development-tutorialscoding-a-clean-web-20-style-web-design-from-photoshop (1 of 61) [25


DownloadJan Cavan who wrote the first part of this tutorial has provided us with a Photoshop

source file that wersquoll use to build the site template The following download contains the

Photoshop file and all of the examples that are used in this tutorial

clean-web-20-sourcezip (ZIP 34 MB)

IntroductionIn this tutorial wersquoll create a fixed-width web layout using some basic coding techniques

Towards the end wersquoll enhance the design with a bit of jQuery

Though probably not the most efficient way for instructional purposes wersquore going to

work our way from top to bottom ndash that is ndash wersquore going to start from the header all the

way down to the footer Preview the examples when they are available to make sure that

you are keeping up with the progress

Prepare for a long journey and make sure you have your favorite caffeinated drink handy

because this tutorial will be a very long one Letrsquos begin

Subscribers

Search

Topics AJAX

CSS

Design Showcase Inspiration

Flash

Freebies

Graphic Design

JavaScript

Photoshop

Project Management

Resources

Tools

Tutorials-10-2009 002308]httpsixrevisionscomtutorialsweb-development-tutorialscoding-a-clean-web-20-style-web-design-from-photoshop (2 of 61) [25


Setting up the file structure1 Create a folder in your local machine for our template files and call it web2 This will be

our working directory

2 Inside the web2 folder create the following

img folder ndash will contain all images used in the tutorial indexhtml ndash our site template stylescss ndash our stylesheet javascriptjs ndash this will contain our JavaScript

3 Open indexhtml and stylescss in your favorite text editor (wersquoll deal with

javascriptjs later) Also open the PSD file in Photoshop itrsquos inside the clean-web-20-

sourcezip archive and itrsquos called web2-mockup-psdpsd

With our file structure set up and all our files opened wersquore ready to slice dice and code

Creating the diagonal background4 In Photoshop turn off all the layers of web2-mockup-psd except for the bottom two

layers bg and diagonal lines

Usability Accessibility

User Interface

Web Applications

Web Design

Web Development

Web Standards

WordPress

Recent Favorites from the Feeds 08

Leafrsquod 10 Free High-Res Photoshop Leaf Brushes

Create a Clean Business Web Template Design in Photoshop

35 Creative Twitter User Profile Designs

How to Create Remarkable 3D Text in Photoshop

Friends 1stwebdesigner

BlogSpoonGraphics

Burbia

Chris Wallace

Css Globe

Design Bump

DesignMag

fudgegraphics

Function

InstantShift



5 Create exactly a 20px wide selection using the Rectangular Marquee Tool (M) starting

from the left side of the canvas with the selectionrsquos height spanning the full height of the

document

LaptopLogiccom

Naldz Graphics

NETTUTS

Noupe

psdfancom

PSDVIBE

[Re]Encodedcom

Smashing Apps

Smashing Magazine

Stylegala

Stock Footage - Foto Search

Stylized Web

TheBestDesignscom

Vandelay Design

Walyou

Web Designer Help

Webdesigner Depot

Web Design Ledger

WPBeginner



6 Make sure the diagonal lines layer is active use Edit gt Copy Merged (Ctrl + Shift + C)

to copy the area inside the 20px wide selection Create a new document and paste (Ctrl +

V) the copied selection into the new document Save this inside the img folder under the

name bg_bodyjpg



Setting up the HTML and CSS files7 Head over to indexhtml The first thing we want to do is reference stylecss and

javascriptjs in the ltheadgt of our HTML document

ltheadgt ltlink href=stylescss rel=stylesheet type=textcss gt ltscript type=textjavascript src=javascriptjsgtltscriptgt ltheadgt

8 Letrsquos head on over to stylescss and put in some basic style rules Wersquore going to take

a shortcut and use the Universal Selector marginpadding CSS reset to zero out all the

elementsrsquo margins and paddings This works a majority of the time but itrsquos often better

to invest some time learning about more robust CSS Reset techniques Head on over to



my article called Resetting Your Styles with CSS Reset to learn more about CSS Reset

Here is the style rule declaration for resetting the margins and paddings

CSS Reset margin0 padding0

Implementing the diagonal background9 Wersquore going to repeat the 20px background we created (body_bgjpg) horizontally

Wersquore going to set it as the ltbodygt background

body background59d3fa url(imgbody_bgjpg) repeat-x 0 0

Awesome Letrsquos preview how the background looks In Example 1 below yoursquoll see our

diagonal background in action

Example 1 Diagonal lines set as the body elementrsquos background

Setting up the layoutrsquos container div10 Letrsquos move into some HTML Wersquoll contain our layout in a 1024px wide container div

called container

ltbodygt ltdiv id=containergt lt-- content goes here --gt ltdivgt ltbodygt

11 Wersquoll give container a width of 1024px and center it using the margin property

container width1024px margin0 auto



Creating the logo12 Letrsquos cut up the stuff wersquoll need for our header starting with the logo Head over to

the Photoshop file Turn on all the layers Create a selection around the logo that is

exactly 320px and 125px wide using the Rectangular Marquee Tool (M) Use Photoshop

Guides (View gt Show gt Guides) to make this easier and more precise The reason you

have to be exact is due to the diagonal lines in the background everything has to align

properly

13 Copy Merge (Ctrl + Shift + C) with the highest layer selected and then paste the logo

in a new document

14 Wersquore going to make this into a CSS background sprite so that when users hover over

it we can show them a rollover effect Increase the canvas size Image gt Canvas Size

(Ctrl + Alt + C) Double the height of the canvas by entering 250px in the height

Change the Anchor to the top middle position



15 Duplicate Layer 1 then move it down to the bottom using the Move Tool (V)

16 With the duplicated layer active (Layer 1 copy) use Image gt Adjustments gt Replace

Colorhellip Make sure the Image radio box is selected Click the Color box to change the



selection color and sample somewhere towards the bottom portion of the logo

(e2e2e2) Play around with the Hue Saturation and Lightness values until you get an

effect that you like In the following figure yoursquoll see the settings I used

17 Save the file for the web File gt Save for Web (Alt + Shift + Ctrl + S) as logojpg in

our img folder From now on use the same settings for saving these files I used the

JPEG Very High but feel free to change these settings If you change the default

settings be sure to save it the same way every time to provide consistency in the images

5-10-2009 002308]httpsixrevisionscomtutorialsweb-development-tutorialscoding-a-clean-web-20-style-web-design-from-photoshop (10 of 61) [2


Creating the navigation menu18 Just like with the logo create a selection exactly 640px by 125px

19 Copy the selection (Copy Merged) and then paste it into a new document

20 Just like in step 14 double the height of the canvas to 250px Image gt Canvas Size

(Ctrl + Alt + C) and donrsquot forget to change the Anchor to top middle Then again

duplicate Layer 1 and move it down to the bottom using the Move Tool (V)

21 Follow step 16 to replace the color for the bottom layer I used the same setting for

the selection color e2e2e2



22 Save the file as menujpg inside the img folder

Coding the Headerrsquos HTML markup23 Letrsquos switch to our HTMLCSS First wersquoll start with the markup Inside the

container div we use another div to create our header section ndash wersquoll call it header

You may want to use a more structural naming convention though like branding thatrsquos

up to you If you want to learn more about structural naming conventions take a

breather from our tutorial and read through my article on Structural Naming Convention

in CSS



For our logo wersquoll use a lth1gt heading element Our navigation will be a standard

unordered list item Each list itemrsquos ltagt element needs an ID for the CSS rollover and

because they have different widths

ltdiv id=containergt ltdiv id=headergt lth1gtlta href=gtCreativoltagtlth1gt ltulgt ltli id=homegtlta href=gtHomeltagtltligt ltli id=aboutgtlta href=gtAboutltagtltligt ltli id=workgtlta href=gtWorkltagtltligt ltli id=contactgtlta href=gtContactltagtltligt ltulgt ltdivgt ltdivgt

Styling the Logo24 First letrsquos style header We need to give it a top margin property so that we have

some space at the top of the web page just like our mockup Since our content area is

960px wersquoll give header a width of 960px This will give us ample room on either side

of the layout for scroll bars and so that when the user minimizes the web browser therersquos

still a bit of margin on the left and rigth and our content is not right at the edges of the

view port (making the content hard to read) We also have to center it using the auto for

the right and left margins Below I used the margin property shorthand and for

beginners the numbers correspond to top (90px) right (auto) bottom (0) and left

(auto) margin

header height125px width960px margin90px auto 0 auto

25 Letrsquos work on the logorsquos style first We transform our lth1gt element into a block

element we float it to the left so that our logo and menu are side-by-side We use the

logo we created earlier (step 17) as the background and finally indent the text to the left

where it canrsquot be seen to hide our text This method of replacing text with a background



image is called CSS Background Image Replacement

header h1 displayblock floatleft width320px height125px backgroundurl(imglogojpg) no-repeat 0 0 text-indent-10000px

26 To make the logo clickable we also need the ltagt element inside the lth1gt element to

be a block element and give it the same width and height at lth1gt

header h1 a displayblock width100 height100

27 To enable the rollover effect we change the background position of ahover

header h1 ahover



backgroundurl(imglogojpg) no-repeat 0 -125px

Styling the navigation menu28 Onto the primary navigation We also need to convert it to a block element and float it

to the right of the logo Then we set the background to menujpg and remove the list

item bullets

header ul displayblock floatright width640px height125px backgroundurl(imgmenujpg) no-repeat 0 0 list-stylenone

29 For the list items wersquoll make them into block elements as well then float them to the

right so that they display side by side Then just like the logo we use text-indent to

hide the text

header ul li displayblock floatleft height125px text-indent-10000px

30 We need to set custom widths for each list item so that the clickable area of each

menu item will be accurate

home width160px about width137px work width129px contact



width210px

31 We set the children ltagt elements of our list items to display block with a width and

height equal to their parents

header ul li a displayblock width100 height100

32Finally for the hover we adjust the background-position property of the menujpg

sprite

home ahover backgroundurl(imgmenujpg) no-repeat 0 -125px about ahover backgroundurl(imgmenujpg) no-repeat -160px -125px work ahover backgroundurl(imgmenujpg) no-repeat -297px -125px contact ahover backgroundurl(imgmenujpg) no-repeat -426px -125px

33 Preview your work in a web browser Check out Example 2 below to see where we

are Hover over the logo and the menu items they should change colors

Example 2 The header section completed

Creating the Featured Area backgroundLetrsquos call the part of the mockup with the monitor screen text that says Web build

websiteshellip and Learn More button mdash Featured Area



34 In the featuredarea folder in the Layers palette turn off all the layers except for the

sub-title and main-heading layers so that the Learn More button and the Apple

monitor on the right isnrsquot showing



35 Create a selection that is exactly 960px by 360px around the Featured Area

section

36 Copy this into a new document and then save it as featured_bgjpg inside the img

folder



Creating the Featured Area button37 Letrsquos slice out the Learn More button Turn on the learnmore folder in the Layers

palette itrsquos inside the taglines folder

38 Create a selection around the button thatrsquos exactly 280px by 60px

39 Copy the selection to a new document Wersquore going to make a rollover CSS sprite for

this one as well Double the height of the canvas duplicate Layer 1 move the duplicate

down to the bottom just like in steps 14 through 17 For the selection color I used 5-10-2009 002308]httpsixrevisionscomtutorialsweb-development-tutorialscoding-a-clean-web-20-style-web-design-from-photoshop (19 of 61) [2


0a72a6 The only Replacement value I changed was the Hue setting and I set that to

+10 Save it as learnmorejpg inside the you guessed it the img folder

Creating the Monitor image40 The monitor on the right of the layout will just be an image The more industrious

individuals reading this tutorial will try to use that monitor as a cool little slideshow where

the monitor changes content ndash wersquore not going to cover that here today Turn on the rest

of the featuredarea folder

41 Create a selection around the monitor exactly 375px by 370px

42 Copy it to a new document then save it as monitorjpg



Coding the Featured AreaNow wersquore going to work on the Featured Area HTML and CSS So head on over to

indexhtml

43 For the Featured Area wersquore going to use a block-displayed ltpgt element You can

certainly use a div for this but I chose to go with a paragraph The Learn More button is

an ltagt element and the monitor screen is just an image inside the paragraph

Herersquos the markup

ltp id=featuredTextgtWe build websites that blow you away[] lta href= id=learnMoreButtongtlearn moreltagt ltimg id=monitor src=imgmonitorjpg width=375 height=370 alt=scrn gtltpgt

44 Letrsquos style the paragraph which acts effectively as our container We need to set the

position property to relative so that (later on) our monitor whorsquoll be absolutely-

positioned will position itself relative to the featuredText paragraph and not the body

of the web page We set featured_bgjpg as the background and indent the text to the

left just like in previous examples

pfeaturedText displayblock positionrelative floatleft width100 height375px backgroundurl(imgfeatured_bgjpg) no-repeat 0 0 text-indent-10000px

45 Next we style the Learn More button We use learnmorejpg as the background

We declare a hover style rule so that we can get the CSS rollover effect just like in the

logo Wersquoll also absolutely-position the monitor on the top right of the featuredText

container



alearnMoreButton displayblock width280px height60px backgroundurl(imglearnmorejpg) no-repeat 0 0 margin200px 0 0 132px ahoverlearnMoreButton background-position0 -60px monitor position absolute top0 right0

Featured Area is done Check out the preview of both the header and the Featured Area

finished (Example 3)

Example 3 Header and Featured Area completed5-10-2009 002308]httpsixrevisionscomtutorialsweb-development-tutorialscoding-a-clean-web-20-style-web-design-from-photoshop (22 of 61) [2


Creating the rounded corner boxes46 The next step is creating the rounded corner boxes The mockup uses a non-web-safe

for the font so wersquore going to replace it later on with a web-safe font (Verdana) Wersquoll cut

up each box one at a time First turn off the text layers inside the box box 2 and box

3 folders in the Layers palette in Photoshop

47 Create a selection around the first box that is exactly 320px by 185px Use Copy

Merged then paste it into another document Save it as box1jpg in the img folder



48 Repeat 47 for the second box and the third box Save them inside the img folder as

box2jpg and box3jpg accordingly

Coding the boxes49 Head over to indexhtml We will create a containing div for the boxes called

boxContainer Inside this div wersquoll create three boxes with a class of box So that we

can set the appropriate CSS background we double-declare the class property of the

boxes with client work and book

Here is the markup

ltdiv id=boxContainergt ltdiv class=box clientgt lth2gtClient listlth2gt ltpgtWe have a wide range of clients from []ltpgt ltdivgt ltdiv class=box workgt lth2gtOur worklth2gt ltpgtCheck out the work we have done for our various []ltpgt ltdivgt ltdiv class=box bookgt lth2gtBook nowlth2gt ltpgt[] Click here to get a ltstronggtfree quoteltstronggtltpgt ltdivgt



Styling the boxes50 We float the box divs to the left so that theyrsquore displayed next to each other We give

the lth2gt element an uppercase value for its text-transform property so that it is in all

caps just like the mock-up Then for the client work and book style rules we set

the appropriate background for each of the boxes

box width320px height185px floatleft box h2 fontbold 20px Verdana Geneva sans-serif color0f83bc text-transformuppercase margin35px 0 0 140px box p fontnormal 12px18px Verdana Geneva sans-serif color0c3b4a margin0 30px 0 140px client backgroundurl(imgbox1jpg) no-repeat 0 0 work backgroundurl(imgbox2jpg) no-repeat 0 0 book backgroundurl(imgbox3jpg) no-repeat 0 0

Preview your work in the browser It should look like Example 4

Example 4 Boxes completed

Coding and Styling the left column51 Below the boxes therersquos a content area that has a heading of Need we say more

Wersquoll call this left column and put that text inside a div called leftCol




ltdiv id=leftColgt lth2gtNeed us say morelth2gt ltpgtCreativo is a Web Design and Development[]ltpgt ltdivgt

52 Wersquoll give leftCol a width the is equal to the width of the two boxes above to give

the design a bit of symmetry We have to give it a left margin to align it with the edge of

the first box above a top margin to give the boxes a bit of room below Then we give the

text inside the column some styles

leftCol width640px floatleft margin20px 0 0 10px leftCol h2 fontbold 20px24px Verdana Geneva sans-serif color094e64 leftCol p fontnormal 14px20px Arial Helvetica sans-serif color094e64 margin-top10px

Herersquos a preview of the design with the left column in place (Example 5)

Example 5 left column incorporated into the design

Creating the Newsletter web form53 In Photoshop turn off all the layers inside the more folder except for the layers that

show the background the Go button and the input field



54 Create a selection around the newsletter area using the Rectangular Marquee Tool (M)

that is exactly 320px by 110px

55 Copy the selection (use Copy Merged) paste it onto a new document Save it as

newsletter_bgjpg

56 Create a selection around the Go button copy it and then paste it into another

document Save it as gojpg



Coding the Newsletter web form57 For the web form we use a ltformgt element a label for the text a text input and a

submit button

ltform id=newsletter action= method=getgt ltlabel for=emailInputgtSign Up for Our Monthly Newsletter ltlabelgt ltinput id=emailInput name=emailInput type=text gt ltinput id=submitButton name=submitButton value=Go type=image src=imggojpg gt ltformgt

58 We give the form a relative position so that we can absolutely-position the input and

Go button We hide the border for the text input emailInput by giving the border

property a value of none We give the form a top margin to align the top portion of the

form to the left column and a bottom margin to give it space from the footer

newsletter positionrelative width320px height110px floatleft backgroundurl(imgnewsletter_bgjpg) no-repeat 0 0 margin20px 0 50px 0 newsletter label fontbold 16px Verdana Geneva sans-serif letter-spacing-1px margin-top26px width100 displayblock colorfff text-aligncenter emailInput positionabsolute top51px left5px width200px margin0px 0 0 30px fontbold 20px Verdana Geneva sans-serif color999 border0 background-colortransparent bordernone



submitButton positionabsolute top43px right27px width50px height40px margin-top5px padding0

Check your work against Example 6 below to make sure yoursquore still in the same page Try

typing something in the text field

Example 6 Newsletter form complete

Coding the footerWersquore going to reduce the footer content from the mockup by not including the telephone

number image on the right hand side Our footer will be pure HTML and CSS

Herersquos the markup for the footer

ltdiv id=footergt ltpgtCreativo Design amp169 2009 All Rights Reserved ltpgt ltdivgt

Here is the CSS

footer clearboth width940px border-top1px dashed 094e64 footer p margin15px 0 fontbold 12px Arial Helvetica sans-serif color094e64

Example 7 Footer compleste



Some jQuery GoodnessWersquore going to add a JavaScript-based animation effect for the logorsquos rollover using the

jQuery library Wersquoll use the Google AJAX Libraries API web service to do the heavy-lifting

and use their infrastructure to serve the jQuery library

Wersquore going to give the logo (header h1 a) a cool fade in and out effect Wersquore going to

manipulate the DOM to insert a span gt a element with a class of logoHover which will

have the rollover state as its background When the user hovers over the logo we will

insert logoHover inside header h1 and then fade it in When the user hover out we fade

out logoHover and then remove it from the DOM

You can apply this to other elements in the web design ndash but Irsquoll get you started with the

logo

59 To start include the jQuery Library and javascriptjs in the head of the HTML

document

ltheadgt ltscript type=textjavascriptsrc=httpajaxgoogleapiscomajaxlibsjquery132jqueryminjsgtltscriptgt ltscript type=textjavascript src=javascriptjsgtltscriptgt ltheadgt

60 Letrsquos place the following styles in our stylescss

spanlogoHover displayblock width100 height100 backgroundccc url(imglogojpg) no-repeat 0 -125px spanlogoHover a displayblock width100 height100

61 Letrsquos place the following script inside javascriptjs Read the comments to gain an

understanding of whatrsquos going on



$(document)ready(function() Remove CSS style of hover $(header h1 ahover)css(backgroundnone) Bind a mouseenter event to header gt h1 gt a element $(header h1 a) bind(mouseenterfunction() Insert a span gt a element in DOM that we will fade in with class name logoHover $(this) before(ltspan class=logoHovergtlta href=gthomeltagtltspangt) Hide new DOM element immediately then fade it in $(logoHover) hide()fadeIn() When mouse leaves logoHover fade out on complete remove from DOM bind(mouseleave function() $(this)fadeOut(normal function() $(this)remove() ) ) ) )

Finished

Congratulations for sticking through this tutorial ndash yoursquore a champ I hope you learned a



few tips and tricks on converting a design mockup to an HTML template

The Clean Web 20 Style Web Design SeriesThis article is part two of a two-part series that shows you how to create a design in

Photoshop then how to code it into a valid (X)HTML web design If yoursquore interested in

more tutorials like this you should definitely subscribe to the RSS feed

Part 1 How to Create a Clean Web 20 Style Web Design in Photoshop

Part 2 Coding a Clean Web 20 Style Web Design from Photoshop

CreditThe awesome icons used in the web layout (and which have been mentioned in the first

part of this two-part series) are from Wilson Ink on DeviantArt ndash the icon set is called the

Green and Blue Icon Set

QuestionsPlease feel free to ask questions in the comments I along with the passionate and

experienced readers of Six Revisions will try to help you as best as we can Also please

share your thoughts opinions and mistakes that you find in the tutorial

Related content

Create a Slick and Accessible Slideshow Using jQuery

How to Create a ldquoWorn Paperrdquo Web Layout Using Photoshop

How to Create a Slick and Clean Button in Photoshop

Using XAMPP for Local WordPress Theme Development

Related categories Tutorials and Web Development

People whorsquove helped improve this tutorial

Dean Duncan Jones Suggests to use a container width of 1000px to avoid horizontal scrolling for some smaller monitors instead of 1024px in step 11



keyser soze notes that in step 11 there was an error in the height of the menursquos li which was correct in the example

Dave Read Caught a mistake on step 23 where the id should be on the parent li and not in the a elements (it was correct in the example but not in the tutorial) He also noted that the style rule for the monitor wasnrsquot shown in the tutorial which Irsquove added on step 45

89 Comments

Roseli A BakarMay 29th 2009

This is an awesome post Jacob

Thanks for sharing

Kawsar AliMay 29th 2009

Nicely coded I like the big web 20 buttons

maryMay 29th 2009

Awesome just skimmed through and this looks like a great walk through thoroughly

explained Canrsquot wait to work through it

Matthew HeidenreichMay 29th 2009

great tutorial thanks



pavsMay 29th 2009

Can someone explain to me what does ldquoweb 20 stylerdquo mean I mean I actually like this

portfolio design and I appreciate the effort that went to making the design possible

But what constitutes a ldquoweb 20 stylerdquo design The way I understand web 20 is the

concept of user-generated collaboration How does portfolio design fit into ldquouser

generated collaborationrdquo

Thanks

httpenwikipediaorgwikiWeb_20

Jacob GubeMay 29th 2009

Thanks for the feedback everyone

mary Awesome when yoursquore done with the walkthrough ndash be sure to post your

thoughts afterward (and any questions or parts of the text that were confusing) Irsquom

looking for feedback because wersquore trying to improve the tutorials you see here on Six

Revisions and all of you are very important in this process of improvement

mdashmdashmdashmdashndash

General questions Irsquod like to ask those that have read the tutorial

1) What can we do to improve this format

2) What do you think about the length and detail Need more too much or just right

3) For longer tutorials ndash should we paginate them (split them up into multiple pages)

or is it better to have the entire tutorial in one page

4) Syntax highlighting for code My intention for not using syntax-coloring is to force

you to read the code more carefully I highlight the important parts of the code in

green for things you should really pay attention to I got the inspiration from IBM

developerWorks where I had to read the code listings more carefully because I didnrsquot



get the help of syntax colorization Did I achieve this intent

Any and all feedback appreciated thanks guys


pavs First of all Jan and I both know what ldquoWeb 20Prime means What we refer to is

the general newer design themes that the second generation of web applications

embodied simpler slicker more intuitive layouts gradients and drop-shadows glossy

text weird names like ldquoFlickrrdquo and ldquoYouTuberdquo Along with concepts such as responsive

applications empowered by a better understanding of client-sideserver-side

asynchronous communication collaborative content creation user-driven content

networking ndash therersquos also a general theme a general style to what we consider a ldquoWeb

20 apprdquo

Look at this collection of Web 20 sites yoursquod be lying if you said you couldnrsquot discern a

stylistic pattern there httpwwwgo2web20net

Dean Duncan JonesMay 29th 2009

Great tutorial One thing I noticed though is that yoursquore building your container div

width 1024px For a 1024times768 resolution (or bigger) build yoursquoll want to use a max

width of 1000px If you donrsquot yoursquoll get that annoying little horizontal scroll bar that

slides the page back and forth at 1024by766 resolution Yoursquore not accounting for the

vertical scroll bar width or the window borders in your dimension

Your live demo shows what I mean Resize your window to 1024 by 768 and yoursquoll see

the horizontal scroll

1000px will keep you good for most browsers and user settings



CiscoMay 29th 2009

pavs I think what people mean when they use ldquoWeb 20Prime in terms of design style I

believe that it ties into the trend of the more user-centered ldquofriendlyrdquo style of interface

Some of what you see are the clean layout big type chunky buttons ldquofunrdquo colors

gradients textured backgrounds and the ever-popular reflective surface There are

many more characteristics Those are just a few


Oh sorry one more thing

In step eight you show the star selector hack to reset padding and margins in your css

If yoursquore really going to teach about web 20 you should enforce standards and

promote the usage of a resetcss file which will reset all html elements to ldquobaselinerdquo

and keep your code valid (the star selector hack isnrsquot valid CSS code)

Eric Meyerrsquos came up with the original if you want to search his latest version or you

can download my slightly modified version here httpwwwtmprodcomstylesreset

css

But again great article for beginners


Dean Duncan Jones RE CSS Reset I chose to take a shortcut for the sake of

brevity This tutorial covers Photoshop HTMLCSS and jQuery mdash so I tried to be as

terse as possible I did say and encourage the use of a more robust CSS Reset solution

when I say ldquoThis works a majority of the time but itrsquos often better to invest some time

learning about more robust CSS Reset techniques Head on over to my article called

ldquoResetting Your Styles with CSS Resetrdquo to learn more about CSS Resetrdquo5-10-2009 002308]httpsixrevisionscomtutorialsweb-development-tutorialscoding-a-clean-web-20-style-web-design-from-photoshop (36 of 61) [2


The article I linked to (which I also wrote) is a big discussion on CSS Reset and those

that would like to learn more can swap out the Universal marginpadding reset to a

more robust one I donrsquot want to drown people with too much information but I did

offer an alternative to those that are interested to learn more (and have more time to

invest in this tutorial)

fredMay 29th 2009

Awesome tut Jacob Really nice design well done on the coding as well Nothing else

to say except keep lsquoem coming

MusiceMay 29th 2009

OMG itrsquos pretty well explained but it looks too hard for me (

Irsquoll try to follow it when I end my exams thank you

JesseMay 29th 2009

Thanks for the commented jquery explanation that helps Sprites are fun My only

qualm is what happens when images are disabled ndash oops there goes the website ndash but

thatrsquos another story Jacob Irsquod have to say the level of detail is just right so keep at

it )


Jesse Glad you liked it and thanks for the feedback About CSS images disabled Irsquoll

be covering that in an upcoming tutorial progressively-enhanced navigation bar that



takes into account text-based gt CSS onimages off gt CSS onimages on gt and JS on I

hope you stick around for that Irsquove been working on that tutorial on and off for about a

month hope to finish it soon

MegastarmediaMay 29th 2009

this is a great idea for quick and simple landing pages

for larger sites you should code in Dreamweaver

this is a very clean and easy to use tutorial btw

thanks so much

sandy

JanMay 29th 2009

Very thoroughly explained Jacob Thank you )

Zach StowellMay 29th 2009

Great article series Great design great transfer to a working site

One question though ndash when yoursquore saving off the logonavetc images you keep the

blue background as a part of all of them Wouldnrsquot saving the images with transparent

backgrounds be better for future refreshes of the design You could then simply reuse

the images you have and be able to reposition them anywhere in the design and not

worry about background issues with the gradientsdiagonals

Other than that little thing I think itrsquos a great set of articles and many people can learn

from these techniques Keep them coming



Tips for Website DesignMay 30th 2009

Thanks for a fantastic tutorial Itrsquos very clearly written and easy to follow Irsquom looking

forward to your navigation bar tutorial it sounds interesting

keyser sozeMay 30th 2009

Irsquove reached ldquoExample 2Prime after 33 steps and the menu isnrsquot working (the blocks are a

bit moved)

After going through the code step-by-step I adjusted the CSS in step 29

I made the height 125px (instead of 95) and deleted the margin entry

This is what you have in the added style sheet


Zach Stowell If you donrsquot care about IE6 and below you can save them as

transparent PNGrsquos (or install a PNG fix for alpha transparency support for legacy

browsers)

debMay 30th 2009

Thanks for the JQuery part specifically Though i understood after sometime with the

help of comments a lil bit of more explanation would not hurt )

PS The last blue color box can have that book class written for it in CSS

As you have asked for suggestions I feel the Javascript parts can come with a bit more

explanation in future Any any tut longer than this one can be in 23 pages though

either ways does not bother me much5-10-2009 002308]httpsixrevisionscomtutorialsweb-development-tutorialscoding-a-clean-web-20-style-web-design-from-photoshop (39 of 61) [2


I like the way the code is shown as of now readable i do not need syntax highlighting

Canrsquot suggest anything else you are a better blogger than me )


keyser soze You rock thanks for noticing that I updated the code for the example

but failed to do it in the tutorialrsquos text If you notice the previous code listing (step 28)

the style rule for the ul has the height at 125px and no margins In any event I fixed

step 29 thanks

deb Thank you for your wonderful insight very helpful feedback With regards to the

JavaScript explanation Irsquoll keep that in mind looking at this now I did skim through

the last section (rsquojQuery Goodnessrsquo) The only reason was at that point I was at the

9th hour of writing this tutorial and I was so tired that I just wanted to finish it I will

sometime update that section to provide a better explanation of whatrsquos going on more

than in the comments of the code

RahulMay 30th 2009

Great work man Really appreciate it

Dave ReadMay 30th 2009

Loved loved loved the tutorial ndash I learned a lot about CSS amp element interactions just

by tweaking the code as I went Kudos for a great learning experience

Two small errors in the tutoral which could potentially be frustrating for the novice

Part 2 (Coding) Step 23 those ID tags should be in the tag not in the ltagt tag (this is 5-10-2009 002308]httpsixrevisionscomtutorialsweb-development-tutorialscoding-a-clean-web-20-style-web-design-from-photoshop (40 of 61) [2


correct in the actual css document but incorrect on the page here

ie

Part 2 (Coding) Step 45 the css code for including the ldquomonitorrdquo graphic is not

mentioned in the tutorial although it exists in the sample css file

add to step 45

monitor

position absolute

top0

right0

It took me six hours to put this all together (all my graphics were sized differently from

the example which meant lots of integer tweaking) but it was exactly what I was

looking for to get me off WYSIWYG site building and into hand-building Thanks so

much Keep them coming


rrrrr no tags in comments

step 23 needs the id tag in the ldquolirdquo tag not the ldquoardquo tag

loved the length amp detail and having a large part of the tut all on one page is great ndash

no clicking back through history to check previous steps

the code commenting was awesome too ndash the green color means an important piece of

code to be noticed ndash very useful convention

keep up the awesome work



MaverickMay 31st 2009

wooooooooooooow it is so very well explained great tutorial thanks a ton Jacob

gaus surahmanMay 31st 2009

Mostly relied on images is only perfect for portfolio or company profile I guess Yet a

very comprehensive tutorial Irsquove read about web 20 style thanks

JakeMay 31st 2009

Amazing tutorial definitely useful for anybody beginning web design and needing to

learn about how to create one from start to finish

I have created a post similar to this creating a web 20 template-seller mockup in

Photoshop similar to Template Monster

Penelope ElseMay 31st 2009

Looks fantastic Havenrsquot worked through it yet but yoursquore helping me to understand

things that go over my head when reading reference pages

Am working on a new website soon ndash I think itrsquoll be using lots of the things in here

JaanJune 1st 2009

Fantabulous job jacobhelliphellip

This is the kind of articlersquos the userrsquos expect



Jacob GubeJune 1st 2009

Dave Read You are amazing thank you so much for catching those Irsquove updated

the tutorial

Irsquom also adding a section called ldquoPeople whorsquove helped improve this tutorialrdquo and linking

to all of your wonderful comments because you guys and gals truly help me improve

stuff here on Six Revisions

DesignerJune 1st 2009

There are many tutorials out their But this is something else some thing professional

LyskeSparkJune 1st 2009

This is a great tutorial I have one question though When I click on the buttons in

demopage it will show a border from the left side and around the button I click How

do you avoid this It completly ruins the design


LyskeSpark One way to remove it is using outline none in steps 25 and 26

(for the logo and menu) This however makes it hard to see what is the focused

element is when users use the Tab key to navigate through the web page

SarahJune 1st 2009



Thank you so much for this- Irsquom a complete beginner with minimal experience with

Photoshop and zero experience with coding but I still made it through this tutorial The

only trouble Irsquom having right now is with the alignment of the newsletter box Itrsquos

aligning on the left side underneath the ldquoNeed us say morerdquo part rather than next to

it I donrsquot know code well enough to find where the problem is

SarahJune 1st 2009

Also when Irsquom looking at it in IE the whole page aligns to the left side Why does it do

that in IE but not in Firefox or Chrome

Jack RugileJune 1st 2009

Jacob

Ah finally finished and it was a success I have been wanting to get into PSD to xhtml

for a long time now and this was a great tutorial to help me get started

The tutorial for the most part was easy to follow however there are a few things that

threw me off

- I think that everything in the final product that you link to should be included in the

tutorial That includes the DOCTYPE declaration and the title tag for the page When

beginners (me) see code in the source of the final that is not in the tutorial it can

sometimes be confusing

- I had the guides and snapping on in the Photoshop document but they would

consistently snap to about 1 pixel off when I was selecting the particular elements

Donrsquot know if there is a fix for this but just wanted to point it out

- The closing tag for the boxContainer div is missing in the tutorial text



- I found it strange that all the content of the site was contained in the header div Why

not make a separate content container that also has a width of 960px

- I know that this is just a mockup but I felt that you should have included the links

that the three boxes would have Maybe just a color change effect with CSS on the box

titles (client list our work book now)

- The width for leftCol is 630px in the final product but it says 640px in the tutorial

which causes the newsletter to wrap

- The icon for ldquobook nowrdquo has the wrong icon in the final product

Ok I think that is it ) Thank you for your time and thanks for this awesome tutorial

Looking forward to more of them

- Jack Rugile

NickJune 1st 2009

Why would you change fonts Couldnt you leave the font as-is and just render the

round-corner boxes as jpgs preserving the fonts within the image

Im learning and just want to understand thanks

djakaJune 2nd 2009

great tutorial

step 52

leftCol

width -gt should be 630px instead of 640px as the newsletter box would be forced to go

below the text

thank you )



Jacob GubeJune 2nd 2009

Jack Rugile First Irsquom so happy the end-result was a success both tutorials took

Jan and I a very long time to write and if it helps even just 1 person that time is more

than worth it Second Irsquoll be updating the tutorial based on your corrections thank you

(Irsquoll of course place you under the people whorsquove made the tutorial better section)

Nick You could leave them as-is but thatrsquod make the entire web page just a

Photoshop file sliced up I believe in using plain text on content thatrsquos long I donrsquot

mind quite as much with headings that are CSS image text replaced but for anything

thatrsquos a paragraph or so Irsquod go with just HTML

djaka Ah great catchJack Rugile caught that too ndash Irsquoll update the tutorial with

both of your corrections Thank you

Matt ReadJune 5th 2009

Well Irsquom up to about step 45hellipSpent many many hours on this Irsquom a complete beginner

(well pretty much) and doing this for one of my internet class assignments This is my

pretty much finished Photoshop ndash httptinyurlcommattie47site (and Irsquom aware I

spelt tutorials wrong) Just canrsquot wait to get it done Irsquoll post back here when Irsquove

finished it and uploaded it online =) Irsquoll just add that your tutorial is pretty easy to

follow but since Irsquom not following it completely (having changed stuff) Irsquove found it

quite hard - anyhow =)

Jacob GubeJune 5th 2009

Matt Read Wonderful Itrsquos getting there Irsquom excited to see the final product and I

hope this tutorial enhances your knowledge in how HTMLCSS works



flashfsJune 5th 2009

Thanks for this step-by-step tutorial

Is it possible to use jQueryrsquos hover() instead of bind(rsquomouseenterrsquo)


flashfs I havenrsquot tried it or anything but yes it should work with the hover()

method instead of bind()


Many hours later Irsquom still working on the front page -) This is my progress thus far ndash

httptinyurlcommattie47testsite Itrsquos 3am NZDT so time for bed =) Also Irsquom not

related to the ldquoDave Readrdquo in the comments above although my father does share the

same name -)

MikeJune 9th 2009

Jacob I canrsquot imagine how long this tutorial must have taken you to write This is

absolutely awesome Great job buddy

ndashmike

John Arthur GurondianoJune 9th 2009

Very nice



I would like to ask what kind of software that are used in creating the final valid xhtml

and css codes

Thank you and more power

PFJune 10th 2009

Very nice tutorial Thank you for spending your time building something like this

Jon EdwardsJune 11th 2009

Absolutely fantastic tutorial

I am essentially a PHP coder at heart and anything graphics or CSS related generally

sends shivers up my spine to such an extent that for the past almost five years my

website has been surviving on tweaked free web templates as can probably be seen

this is the first time I have seen a tutorial that goes in small enough steps and covers

graphics in photoshop as well as CSS and web design (I didnrsquot know you could make

rollovers that way ndash really clever) I canrsquot imagine how long it took you to create this

But I think it was well worth the effort I am actually thinking about putting my own

template together for my site as a result of this tutorial I hope you write many more of

them in this type of style

Yes I was caught out by the leftCol width as well 640px causes the form to drop below

the text but 630px as in the CSS file works fine please keep up the great work Jacob

Thank you for introducing me to graphics in a gentle baby steps way I have learned so

much just from this one tutorial




Oh I forgot to mention I have uploaded my attempt at your tutorial to

httpwwweuadvantagecomw2tut

I hope I have done it justice

Juan GoacutemezJune 12th 2009

Hmmmhellip those looks like my icons A little credit would be good


Sorry i just saw the other post ) thanks D


Juan Goacutemez Oops Irsquom sorry about that that was my oversight Yes the credit is on

the other post and I am very strict about giving credit to designers who release stuff for

free I am updating this post as well to note that we are using your beautiful icons


I would like to ask for some tips can you give at least one example of content

management system for this tutorial

Thank you and God bless

sonnydesign5-10-2009 002308]httpsixrevisionscomtutorialsweb-development-tutorialscoding-a-clean-web-20-style-web-design-from-photoshop (49 of 61) [2


June 15th 2009

another excellent tutorial Im looking forward for joomla template tutorial soon Like

how to convert psd to joomla template Thank you again

FluxJune 25th 2009

Great tutorial My main reason for stopping by was to see how (a man of your

exceptional skill) codes the newsletter subscription form im still unsure how it works

where does the email address entered go I wanted to add this simple but useful

feature to my site but never sure what is the bestsecurest way of doing it

FluxJune 25th 2009

Also thought id mention this tut has inspired me to start trying the rsquospritersquo route

instead of seperate images it has previously seemed far too complicated but now it all

makes perfect sense

SimukisJune 26th 2009

i have to tell that some images like body_bgjpg is better to save as GIF it takes less

space and quality is better

MattJune 27th 2009

First I have to admit that I am a newbie at all of this while I have been working with

websites for over 10 years now I have generally stuck with templates and tweaked

what I needed This was my first attempt at doing everything from scratch Also a

Photoshop newbie as well so hopefully that sets the tone (though I do pick things up



pretty easily)

I did what the tutorial said (though it does seem to miss a few things so filled in the

blanks as best I could) and got everything all sliced diced and coded My site looks fine

in Firefox but not in IE The logo seems to disappear (except when hovered over) and

the boxes all disappear Granted the sizes of everything I did came out different but I

adjusted in the csshtml to compensate Would anybody mind taking a quick look and

see what the problem might be I do see the demo page works fine so must just be

something I did wronghellip

httpwwwupliftinghostcom

Thanks And THANKS for such an awesome tutorial I made it through everything in

about 10 hours or so and now feel a little more daring to try some original designs

PS ndash Was there ever anything to do with boxContainer I see it in the HTML code

but nothing in the CSS for it

MattJune 27th 2009

Irsquoll probably try playing around with jQuery Stylish Select as well to clean up how the

domain TLD select box looks across each OSbrowser

httpwwwscottdarbycom200905jquery-plugin-stylish-select-unobstrusive-select-

box-replacement

JoelJune 28th 2009

Hey thanks for an awesome tutorial helped me finally put together my website It

worked great excepthellip

I used this menu technique (with some slightly different images) and I retooled it a



little bit to just make separate images for the regular menu and the hover menu and it

doesnrsquot seem to work The list items arenrsquot clickable for me although if I take out the

doctype header (thus invoking quirks mode or something I believehellip) it works on Safari

As far as I can tell I did this exactly like the tutorial but my images arenrsquot clickable Can

anyone help me Thanks a lot


Joel Any chance we can see a live demo Are your list items structured so that

theyrsquore links ie ltligt ltagt

JoelJune 28th 2009

Great thanks for responding

Yeshelliplive demo is at httpwwwjoelstranscriptioncomtest

The menu shows up but itrsquos not clickable and the items donrsquot change when I hover

Weird


Joel OK first you should use pixel units on your widths For example

home width144

Should be

home



width144px

Second because of CSSrsquos top-down order this

menu ul li a displayblock width100 height100

Should be below the home contact etc so that the 100 width will equal to the

widths that you declare

I tested these changes and it worked on my end

JoelJune 29th 2009

Awesome That worked perfectly thank you for the help I knew order mattered in

HTML but had no idea it made a difference in CSS Thanks for the help

George L SmythJuly 1st 2009

Very good article well explained and presented Thanks so much I learned a few

things

RomainJuly 1st 2009

Humm I need one more tutorial for jQuery

I think a word is missing step 52

rdquo Wersquoll give leftCol a width the is equal to the widthhelliprdquo

Why do you choose not to use the css documents of 960gs



Jacob GubeJuly 1st 2009

Romain I didnrsquot want to ldquocomplicaterdquo the tutorial by introducing the 960 Grid

System ndash though in the future I think it would be a great tutorial to have (a practical

tutorial on using the Grid System by doing a PSD -gt HTML series centered around 960

GS) Thanks for the note

ElizabethJuly 7th 2009

Thanks for this awesome tutorial Irsquom still a newbie in the web design and thanks to

this tut ndash Irsquove managed to see a perfect final result

There is a mistake in step 29 you are saying that we will float the list elements RIGHT

and yoursquore writing in the code LEFT Can you please fix that )

I have a question regarding the jQuery when I open the final result with Firefox the

logo fades in and out just as yoursquove described but when I open it with Internet

Explorer and I go with the mouse over the logo ndash the faded logo appears beneath the

original logo(so Irsquom seeing two logos) Can you please tell me how can I fix that

Many thanks in advance

Irsquom looking forward to more tuts like this They are really helpful )

BR

Elizabeth

JayJuly 8th 2009



Hi I was wondering how I can move the text in the rounded corner boxes to the left

or right This is because I made the icon small and it has a space in-between Thank

you

kidkJuly 12th 2009

This tutorial is rubbish I am a begginner and it has taught me nothing except how to

parrot your instructions There is no explanation of why you enter this code and the

effect it has

nadiaJuly 14th 2009

Have you guys tried sitegrinder

AlexJuly 17th 2009

Hi nice tutorial but I havenrsquot been able to cross the first obstacle yet ( FOr some

reason my background image bg_bodyjpg is not loading I have followed the

instructions word for word Anyone know why Thanks

MihaiJuly 28th 2009

Isnrsquot this menu consider by Google Spam I mean the text-indent-10000px is Spam

and is Ban for your website )Replay me on twitter at mihaicoman and please correct

me if i am wrong although this is a great tutorial Thanks

HaakonAugust 6th 2009



Great two-series tutorial

Irsquove experienced some challenges when using the 960gs when I just as in your

example from part 1 aligned my boxes to the grid ndash but the drop shadow is in the col

margin

My problem is how to style the margin of each col with a background-image On my

site I ended up hacking and chopping the 960gs making that cols width +20px and

removing the margins of that col with -20px

However there must be an easier way rather than hacking the 960gs

Jacob GubeAugust 6th 2009

Haakon The biggest downside of CSS frameworks is that yoursquore confined to a set

way of doing things For server-sideclient-side scripting thatrsquos alright because itrsquos

complicated and there are certain things you want to standardize but in my opinion

CSS frameworks are too restrictive because yoursquore supposed to be working with styling

Typically I would advise never to modify framework source files or else it makes them

harder to maintain ndash so the proper way would be to create another stylesheet (say for

example customcss) include it at the bottom of your 960gs stylesheet reference so

that your customcss takes precedence and then write styles that overwrite the styles

that you need to modify in the 960gs stylesheet

Hope that helps ndash does my suggestion make sense Let me know


Thanks for the quick reply Jacob Yea you absolutley makes sense I actually did it by

using new classes only for the specific divs I had to alter so I didnt touch the 960gs

stylesheet



I was a bit vague in my problem description let me rephrase

In the first series of this tutorial you used the 960 grid when designing the website in

Photoshop

You aligned one the ldquocall-to-actionrdquo box (httpimagessixrevisionscom20090517-

32_clean_web2_design_13jpg) with the grid ndash however the drop shadow of the box

was outside the grid (in terms of the 960 css the drop shadow was in the margin of the

4th column)

What I couldnrsquot figure out was how to put the shadow in the ldquocolumn margin areardquo

without removing the margin and adding width respectivley

The reason for me doing it this way is afaik that you cant bleed the background

(where the shadow starts) outside the div ndash and I couldnrsquot figure out any other smarter

way to achieve it

However there has to be a way to achieve this drop shadow without overriding the

rules of the 960gs Do you have any idea

But I sure agree with you css frameworks are too restrictive and should be limited to

prototyping (httpnettutspluscomtutorialshtml-css-techniquesprototyping-with-

the-grid-960-css-framework)hellip

FlaAugust 10th 2009

Hi

Brilliant tutorial thanks a million for putting it together Irsquove played around with it to

make a new site for myself but irsquove hit a big snag amp was wondering if you could help

I canrsquot get the featured_bg amp monitor to line up properly Been playing around with it

but couldnrsquot get it working



Also some other things are not centering for me

A demo can be found here httpwwwthesprayartistcomClean_Web-TEMPindex

html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi

I managed to fix the problem i was having where featured_bg amp monitor did not line

up I had a few rsquos where they shouldnrsquot have been

I still have 3 problems though If you can help it would be great

1-featured_bg is now blank amp i want to have a text box with featured_bg as the

background

2-My social links buttons at the bottom are slightly misaligned

3-I need my copyright notice at the bottom to be centered

Any help or suggestions you can give will be much appreciated

Fla

CharleyAugust 13th 2009

Hi

In httpsixrevisionscomdemoweb2_layoutindexhtml yoursquove set twice



Matti VAugust 21st 2009

Hmm A good layout indeed but funny that you donrsquot make any comment on the

diagonal body background which is unimplementable and even in the final result here

is not shown correctlyhellip Too proud and friendly to confess that maybe the psd phase

wasnrsquot really thought through )

A typical example of what happens when the graphic designer doesnrsquot think about the

tech constraints A minor detail but being a tutorial it would add value to point it out

It is made for learning anyway and not showing off mad skillz

Of course making the background image hugely wide would be an option but then

comes the question ldquois it worth the bandwidthrdquo

FlaAugust 24th 2009

So therersquos no way to write text over the featured_bg area

MarionSeptember 2nd 2009

Very good Im a designer relatively new to coding but tutorials like this are really

helpful Can you do an all inclusive tutorial psd to html with jquery slider Something

that shows how to use javascript in a project from scratch

thanks

MeineckeSeptember 3rd 2009

Thanks Champ

Very helpful



worplerSeptember 8th 2009

enjoyed following this through Had trouble aligning the bottom two rows with the top

row

I think the problem is that the container is a different width to the top nav bar which

everything else is to be aligned tohellipso just had to bumb boxcontainer etc across a

little Not sure if this is an ideal solution thoughhellip

adamSeptember 12th 2009

Cool tut I have been using Fireworks to slice my mockups but decided to try it out in

PS Seems to work well though lacks some of the precision of FW whose properties

panel enables you to be very exact To anyone thinking about using the FW export CSS

amp Images feature think twice Adobe CSS is as messy as it gets Donrsquot get me talking

about the export to html amp images The result is close to criminal )

One suggestion for the tut For beginners the business of creating new psd files for the

slices can be confusing They need to understand that any new file should be either

created with a transparent bg or trimmed to top left pixel Else they will be looking at

a mess when they call the file via css and look at the result in a browser

libertySeptember 15th 2009

I lsquov learned so much as irsquom new in css and psThanks a lotVery good tutorial

tomssonOctober 5th 2009

First of all- thanks for the tutorial Irsquove learned some cool tricks and techniques )



There is a problem with JQuery logo in IE 6 When You hover your mouse over it- 2

logos are showing

Simply adding overflow hidden for header h1 solves this problem

Leave a Comment Name (required)

email (will not be published) used for Gravatars (required)

Website

Subscribe to the comments on this article

copy2009 Six Revisions All Rights Reserved Theme Design by Jacob Gube Six Revisions mobile version by Mobify


sixrevisionscom


CMACJDPKGMFJFDIPEJODHFLMOGOLAKOK

form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6


DownloadJan Cavan who wrote the first part of this tutorial has provided us with a Photoshop

source file that wersquoll use to build the site template The following download contains the

Photoshop file and all of the examples that are used in this tutorial

clean-web-20-sourcezip (ZIP 34 MB)

IntroductionIn this tutorial wersquoll create a fixed-width web layout using some basic coding techniques

Towards the end wersquoll enhance the design with a bit of jQuery

Though probably not the most efficient way for instructional purposes wersquore going to

work our way from top to bottom ndash that is ndash wersquore going to start from the header all the

way down to the footer Preview the examples when they are available to make sure that

you are keeping up with the progress

Prepare for a long journey and make sure you have your favorite caffeinated drink handy

because this tutorial will be a very long one Letrsquos begin

Subscribers

Search

Topics AJAX

CSS

Design Showcase Inspiration

Flash

Freebies

Graphic Design

JavaScript

Photoshop

Project Management

Resources

Tools

Tutorials-10-2009 002308]httpsixrevisionscomtutorialsweb-development-tutorialscoding-a-clean-web-20-style-web-design-from-photoshop (2 of 61) [25













User Interface

Web Applications

Web Design

Web Development

Web Standards

WordPress







BlogSpoonGraphics

Burbia

Chris Wallace

Css Globe

Design Bump

DesignMag

fudgegraphics

Function

InstantShift





document

LaptopLogiccom

Naldz Graphics

NETTUTS

Noupe

psdfancom

PSDVIBE

[Re]Encodedcom

Smashing Apps

Smashing Magazine

Stylegala


Stylized Web

TheBestDesignscom

Vandelay Design

Walyou

Web Designer Help

Webdesigner Depot

Web Design Ledger

WPBeginner






name bg_bodyjpg






















called container











properly


in a new document




































in CSS















(auto) margin














header h1 ahover






item bullets




hide the text







width210px





sprite















section


folder





















indexhtml















container






















Here is the markup































newsletter_bgjpg






submit button

















Here is the CSS














logo


document









Finished
















Related content












89 Comments



Thanks for sharing



maryMay 29th 2009







pavsMay 29th 2009






Thanks






























20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6













User Interface

Web Applications

Web Design

Web Development

Web Standards

WordPress







BlogSpoonGraphics

Burbia

Chris Wallace

Css Globe

Design Bump

DesignMag

fudgegraphics

Function

InstantShift





document

LaptopLogiccom

Naldz Graphics

NETTUTS

Noupe

psdfancom

PSDVIBE

[Re]Encodedcom

Smashing Apps

Smashing Magazine

Stylegala


Stylized Web

TheBestDesignscom

Vandelay Design

Walyou

Web Designer Help

Webdesigner Depot

Web Design Ledger

WPBeginner






name bg_bodyjpg






















called container











properly


in a new document




































in CSS















(auto) margin














header h1 ahover






item bullets




hide the text







width210px





sprite















section


folder





















indexhtml















container






















Here is the markup































newsletter_bgjpg






submit button

















Here is the CSS














logo


document









Finished
















Related content












89 Comments



Thanks for sharing



maryMay 29th 2009







pavsMay 29th 2009






Thanks






























20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6




document

LaptopLogiccom

Naldz Graphics

NETTUTS

Noupe

psdfancom

PSDVIBE

[Re]Encodedcom

Smashing Apps

Smashing Magazine

Stylegala


Stylized Web

TheBestDesignscom

Vandelay Design

Walyou

Web Designer Help

Webdesigner Depot

Web Design Ledger

WPBeginner






name bg_bodyjpg






















called container











properly


in a new document




































in CSS















(auto) margin














header h1 ahover






item bullets




hide the text







width210px





sprite















section


folder





















indexhtml















container






















Here is the markup































newsletter_bgjpg






submit button

















Here is the CSS














logo


document









Finished
















Related content












89 Comments



Thanks for sharing



maryMay 29th 2009







pavsMay 29th 2009






Thanks






























20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6





name bg_bodyjpg






















called container











properly


in a new document




































in CSS















(auto) margin














header h1 ahover






item bullets




hide the text







width210px





sprite















section


folder





















indexhtml















container






















Here is the markup































newsletter_bgjpg






submit button

















Here is the CSS














logo


document









Finished
















Related content












89 Comments



Thanks for sharing



maryMay 29th 2009







pavsMay 29th 2009






Thanks






























20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6





















called container











properly


in a new document




































in CSS















(auto) margin














header h1 ahover






item bullets




hide the text







width210px





sprite















section


folder





















indexhtml















container






















Here is the markup































newsletter_bgjpg






submit button

















Here is the CSS














logo


document









Finished
















Related content












89 Comments



Thanks for sharing



maryMay 29th 2009







pavsMay 29th 2009






Thanks






























20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6







properly


in a new document




































in CSS















(auto) margin














header h1 ahover






item bullets




hide the text







width210px





sprite















section


folder





















indexhtml















container






















Here is the markup































newsletter_bgjpg






submit button

















Here is the CSS














logo


document









Finished
















Related content












89 Comments



Thanks for sharing



maryMay 29th 2009







pavsMay 29th 2009






Thanks






























20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6































in CSS















(auto) margin














header h1 ahover






item bullets




hide the text







width210px





sprite















section


folder





















indexhtml















container






















Here is the markup































newsletter_bgjpg






submit button

















Here is the CSS














logo


document









Finished
















Related content












89 Comments



Thanks for sharing



maryMay 29th 2009







pavsMay 29th 2009






Thanks






























20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6














(auto) margin














header h1 ahover






item bullets




hide the text







width210px





sprite















section


folder





















indexhtml















container






















Here is the markup































newsletter_bgjpg






submit button

















Here is the CSS














logo


document









Finished
















Related content












89 Comments



Thanks for sharing



maryMay 29th 2009







pavsMay 29th 2009






Thanks






























20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6








header h1 ahover






item bullets




hide the text







width210px





sprite















section


folder





















indexhtml















container






















Here is the markup































newsletter_bgjpg






submit button

















Here is the CSS














logo


document









Finished
















Related content












89 Comments



Thanks for sharing



maryMay 29th 2009







pavsMay 29th 2009






Thanks






























20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6





item bullets




hide the text







width210px





sprite















section


folder





















indexhtml















container






















Here is the markup































newsletter_bgjpg






submit button

















Here is the CSS














logo


document









Finished
















Related content












89 Comments



Thanks for sharing



maryMay 29th 2009







pavsMay 29th 2009






Thanks






























20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6


width210px





sprite















section


folder





















indexhtml















container






















Here is the markup































newsletter_bgjpg






submit button

















Here is the CSS














logo


document









Finished
















Related content












89 Comments



Thanks for sharing



maryMay 29th 2009







pavsMay 29th 2009






Thanks






























20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6








section


folder





















indexhtml















container






















Here is the markup































newsletter_bgjpg






submit button

















Here is the CSS














logo


document









Finished
















Related content












89 Comments



Thanks for sharing



maryMay 29th 2009







pavsMay 29th 2009






Thanks






























20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6




















indexhtml















container






















Here is the markup































newsletter_bgjpg






submit button

















Here is the CSS














logo


document









Finished
















Related content












89 Comments



Thanks for sharing



maryMay 29th 2009







pavsMay 29th 2009






Thanks






























20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6





















Here is the markup































newsletter_bgjpg






submit button

















Here is the CSS














logo


document









Finished
















Related content












89 Comments



Thanks for sharing



maryMay 29th 2009







pavsMay 29th 2009






Thanks






























20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6





























newsletter_bgjpg






submit button

















Here is the CSS














logo


document









Finished
















Related content












89 Comments



Thanks for sharing



maryMay 29th 2009







pavsMay 29th 2009






Thanks






























20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6



submit button

















Here is the CSS














logo


document









Finished
















Related content












89 Comments



Thanks for sharing



maryMay 29th 2009







pavsMay 29th 2009






Thanks






























20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6










Here is the CSS














logo


document









Finished
















Related content












89 Comments



Thanks for sharing



maryMay 29th 2009







pavsMay 29th 2009






Thanks






























20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6











logo


document









Finished
















Related content












89 Comments



Thanks for sharing



maryMay 29th 2009







pavsMay 29th 2009






Thanks






























20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6



Finished
















Related content












89 Comments



Thanks for sharing



maryMay 29th 2009







pavsMay 29th 2009






Thanks






























20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6














Related content












89 Comments



Thanks for sharing



maryMay 29th 2009







pavsMay 29th 2009






Thanks






























20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6




89 Comments



Thanks for sharing



maryMay 29th 2009







pavsMay 29th 2009






Thanks






























20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6


pavsMay 29th 2009






Thanks






























20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6












20 apprdquo














CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6


CiscoMay 29th 2009














css















fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6







fredMay 29th 2009



MusiceMay 29th 2009



JesseMay 29th 2009




it )













thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6









thanks so much

sandy

JanMay 29th 2009


















bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6







bit moved)







browsers)

debMay 30th 2009














step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6








step 29 thanks







RahulMay 30th 2009









ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6



ie



add to step 45

monitor

position absolute

top0

right0




















JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6







JakeMay 31st 2009









JaanJune 1st 2009







the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6




the tutorial














SarahJune 1st 2009








SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6







SarahJune 1st 2009




Jacob




threw me off





















- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6












- Jack Rugile

NickJune 1st 2009




djakaJune 2nd 2009

great tutorial

step 52

leftCol


below the text

thank you )





































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6




































same name -)

MikeJune 9th 2009



ndashmike


Very nice




and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6



and css codes


PFJune 10th 2009





































June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6




















June 15th 2009



FluxJune 25th 2009





FluxJune 25th 2009



makes perfect sense




MattJune 27th 2009







pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6


pretty easily)













MattJune 27th 2009




box-replacement

JoelJune 28th 2009














JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6










JoelJune 28th 2009




Weird



home width144

Should be

home



width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6


width144px






JoelJune 29th 2009





things

RomainJuly 1st 2009























BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6


















BR

Elizabeth

JayJuly 8th 2009





you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6




you

kidkJuly 12th 2009



effect it has

nadiaJuly 14th 2009


AlexJuly 17th 2009




MihaiJuly 28th 2009










margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6





margin



















stylesheet





Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6




Photoshop




4th column)





way to achieve it






FlaAugust 10th 2009

Hi









html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6




html

Thanks in advance

Fla

FlaAugust 12th 2009

Hi





background




Fla


Hi














FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6












FlaAugust 24th 2009






thanks


Thanks Champ

Very helpful





row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6




row





















logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6



logos are showing




Website




sixrevisionscom



form1

x

f1

f2

f3

f4

f7 937

f5 Submit Comment

f6

form2

x

f1 008464900305171405174ldjkjnuhubm

f2 FORID10

f3 UTF-8

f4

f5 Search

f6

clean web 2.0 style web design from photoshop

Documents