I’ve worked with a ton of programmers in the past, and most of them don’t know a lot about web design. My brother, for example, is an insanely good programmer. However, every time I see his web applications, I have a hard time seeing past how ugly they are (sorry Mark).
I believe this may be an issue with a lot of programmers out there, perhaps most of them. In an effort to help all my colleagues out, I have decided to share a quick tutorial on how create a ’sexy’ layout for your applications without having to be a design guru.
Goal: Create a centered layout with shadowed edges over a tiled background.
Step 1. Get the images
The first thing to get all the graphics you are going to use. Click Here to download the images.
 |
Background Image (must be tileable) |
 |
Wrapper Background (1 pixel tall by 800 pixels wide) This is a thumbnail to demonstrate the transparency. The actual image is in the zipped downloadable file. |
 |
Wrapper Footer Background (35 pixel tall by 800 pixels wide) This is a thumbnail to demonstrate the transparency. The actual image is in the zipped downloadable file. |
Step 2. Create the HTML
The layout will be completely CSS driven. That means no embedded styles. This makes it very easy to maintain the styles within your application because they are all residing in the css files, and not your code.
I will create the HTML layout as myapp.html.
Step 3. Create the CSS
Some notes are worth mentioning for the sake of you CSS newbies out there. Don’t be ashamed. We all have to start somewhere.
In the body tag (lines 1-5), we set the margin and padding both to zero. This is needed to make sure the layout pushes against the top of the window and doesn’t show a gap.
Lines 6-9 set the margin and padding of all the H tags to zero. This is done so that they also don’t push the layout in directions it should not be in. You can limit this to just margin if you want to.
Lines 10-14 set the style for the outer shell of the layout. This is where we center the box (line 11-12) and assign the background.
Lines 15-19 set the style for the contents div within the wrapper. This is where we are going to have the contents of the application. We use this div so we don’t have contents over the top of the shadowed areas in the wrapper.
Line 20-31 are similar in logic to 10-19. The only real difference is that we are not repeating our background (as seen in line 25). This is because we only want the background to appear at the top of the footer.
You can download the completed layout with images and stylesheet here.
