TDD's Web Design Journal Thread

Okay, so i've gone a little bit insane lately and have a strange urge to code this one particular design of mine, so I thought why not! I'm going to put a post here daily showing my progress.

The Design:


Day 1:
-Planned out how it's going to happen.
-Fixed the design in photoshop to help make coding easier...
-...?

 

Instead of finding the easy way around with coding and compromising the design, learn and mentally map out how to code it. The page you have showing there would be quite easy, slice it up good enough to get the best results. If it is still to hard then just try to make it easier and the design the same state or even better.

Can't think of anything else right now....

 

It is going to be a table-less layout.

 

My point still stands

When i went through the basics, I really never used tables, there quite annoying and you can do so much more when the placement is free and not in tables.

 

That would be easy to code, but hard to make tiling images for. You'll probably have a hard time working with the background image

 

Day 2:
-Began cutting the images up
-Starting work on the background
-With some help from sUffer, coded up the background to work, and vertically aligned everything properly.

Day 2 Picture:

 

Day 3:
-Got the content working
-Nav Bar working , not positioned
-Logo positioned center properly...
-working identically in IE, FF and Opera

Day 3 Pic:

 

Day 4:
Finished coding the home page





only have to code the other pages now...

http://tdd-designs.com/cream/

 

Wow this looks really good!
Background image shouldnt have been too hard...
did you tile it?
If you did, you did it horizontal, right?

 

there's two halves to the background, the cream one is a tiled image that covers the screen, the brown is another tiled background that start at the bottom and goes to 50% of the screen.

body, html { height: 100%;
width: 100%;
background-image: url(images/background.jpg);
background-repeat: repeat;
padding: 0;
margin: 0;
font-family: Arial, Tahoma, sans-serif;
font-size: smaller;
}
#bgimage {
background-image: url(images/background2.jpg);
background-repeat: repeat-x center bottom;
position: absolute;
bottom: 0%;
width: 100%;
height: 50%;

}