Design your own CSS website Part 1: The Wrapper

Posted September 28, 2004

When I first started disecting CSS websites, which is sometimes the best way to learn, I found that each site has a “wrapper”. This not really a jargon term, but I found it showing up time and time again in designers CSS style sheets as the first layer entry. When I started to read tutorials and explanations on the internet I found out that the “wrapper” contains all of your content. See my entry below for more information.

So knowing now what the most basic building block was, I started as I usually do, in Macromedia Fireworks.

By laying out my sites, meaning, designing the front page of the site down to the pixel, I then have the roadmap for everything I am going to need when building my site. I have exact dimensions, I have color codes to pull from, and I have already created the images so all I need to do is crop them into their own seperate files, export them, and start making my site.

One of my goals with this site was to have a cool looking background. Originally I had this gradient in Purple and Blue, but for some reason, it seemed too overpowering to me and not what I had originally pictured my blog to look like.

I have always been a strong advocate of detail. Detail is what will set you apart from the crop. When I started to design my background I made the image that you see repeated at about 400 x 400 pixels and shrunk it down. In fact, here is the base pattern;

I tried to draw on other websites, logos I had found, and even a little Art Noveau to come up with my idea. Now, you may saw, why design it so huge when it will be so small and most of that detail will be lost. I say because it is that consideration of the detail that most users won’t pick up, but at the same time they won’t pause and go, “Gosh, that looks kind of funny.” Remember, everything looks that much better reduced when it was created a million times larger.

I then created a orange to red gradient, repeated the symbol pattern at a set height, {in this case the background image is 40px wide by 1350px high} and set my blending mode on the background pattern to multiply. Check out this link to see the background alone. Finally, in the Body selector I set up the background image and the repeat declaration;

Body {

background-image:url(http://www.rotheblog.com/images/background5.jpg);

background-repeat:repeat-x;

margin:0px;

padding:0px;

background-color:#960E0E;

}

Remember for the background-repeat declaration, repeat-x will repeat horizontally. I also set the margin and the padding to 0 in the Body so that my website butted right up against the sides of the browser. Finally, I set the background color to the same as the bottom of the image so that the pattern faded into a solid color. I didn’t want to have to plan for how tall my pages could get with however many entries, so I limited the height of my background pattern and had it fade out.

With my site designed in Fireworks, I can now make the declaration for my “wrapper” div block because I have the defined width of the site.

I know that most of this doesn’t apply to CSS, but this is the basis for my site. Tune in for Part 2 of my series when I get into how I made the second step of the website, the header and maybe even in part 2, the navigation.