Web Design Workshop 6 Main Wrapper

by Yorgo Nestoridis

The Main Wrap­per is styled in func­tion of the con­tent you plan to put on dis­play. The choice of the lay­out lay­out depends of your site width, the posi­tion of the side­bar and the con­tent. The markup will influ­ence what­ever you put into that wrap­per subsequently.

The main wrap­per is the main body con­tainer within which is placed every­thing between header and footer, i.e. the con­tent col­umn and the side­bars. To draw hor­i­zon­tal lines on top and or bot­tom, just edit border-top and border-bottom calls

#mainwrapper {
float: left;
width: 100%;
padding: 10px 0 0px 0;
margin: 0;
border-top: 2px solid #000000;
/*border-left: 2px solid #FFFFFF;
border-right: 2px solid #FFFFFF;*/
border-bottom: 2px solid #B30000;
background: #FFFFFF;
}

Wrap­per Top Border

As you see, I have added a 2 pix­els wide hor­i­zon­tal line by edit­ing the top bor­der of the wrap­per. With­out fur­ther change, that top bor­der would be glued to the menu above. For this rea­son we intro­duce a margin-bottom call to the con­cerned menu, in my case to the nav­i­ga­tion, so that the top-border from the wrap­per si shown with a dis­tance (mar­gin) of 2 pix­els from the above menu bar.

The mar­gin call could look like this – on my style-sheet line 111 – 120: margin-bottom: 2px; and my nav­i­ga­tion block ends up look­ing like this:

#navigation {
clear: left;
background: #222222 /*url(images/nav.png) repeat*/;
float: left;
width: 100%;
z-index: 50;
position: relative;
margin-top: 2px;
margin-bottom: 2px;
}

Finally you can edit the back­ground of the main wrap­per, which in my case will remain white (#FFFFFF); for easy read­ing make sure that you have enough con­trast between the back­ground color and the font color. Black on white is the eas­i­est to read configuration.

Back­ground

Finan­cial Times

Chang­ing the back­grounds change the look and feel of the site dra­mat­i­cally as it does in print­ing.
Remem­ber the salmon pink Finan­cial Times?
Cloning a look is not all that dif­fi­cult for as long as you know the color codes and are in con­trol of lay­out and style ele­ments as you can see below.
You too can get now the Finan­cial Times look by just chang­ing a few lines of code. (Here I have just changed the back­grounds and increased the title font plus switched the nav­i­ga­tion back­ground to red.)

Change the body back­ground color on line 32,
– the header back­ground on line 49 and
– the main wrap­per back­ground on line 235 and
– the footer back­ground on line 331 and here you go:

The Finan­cial Times look is about uni­ver­sally rec­og­nized and asso­ci­ated to finan­cial infor­ma­tion, since in many coun­tries finan­cial news­pa­pers have adopted the salmon or coral type of background.

When reach­ing a FT salmon styled page, we expect infor­ma­tion per­tain­ing to finance.

Or, the other way around: when we design a web page con­tain­ing finan­cial infor­ma­tion, we aim to cre­ate empa­thy imme­di­ately. Color or image are the fastest way to tell your audi­ence what your site is all about; if you can imme­di­ately match expec­ta­tion, you have taken the first empa­thy hurdle.

So, why should the Make Money blog not take the Finan­cial Times Look?

Exactly : why not!

• Web Design Work­shop 11 Background
• Web Design Work­shop 12 Block­quotes and Pullquotes
• Web Design Work­shop 10 Con­tent Fonts
• Web Design Work­shop 9 Left Content
• Web Design Work­shop 8 Footer

• main wrap­per
• body back­ground
• bor­der webdesign
• coral bor­der back­ground designs
• how to add a main wrap­per to wordpress
• #main­wrap­per
• web back­ground dif­fer­ent from main wrapper
• web­site main wrapper
• what is a main­wrap­per in web design
• what is a wrap­per in web design

Related posts:

1. Web Design Work­shop 4 – Navigation
2. Web Design Work­shop 5 – Sub-Navigation
3. Web Design Work­shop 5 Sub-navigation
4. Web Design Work­shop Navigation
5. Web Design Work­shop 2

Tags: Background Color, Layout, Web Design Background, Web Design Colors, Web Design CSS, Web Design Layouts, Web Design Main Wrapper, Web Design Workshop, Yorgo Nestoridis

This entry was posted on September 12, 2009 at 6:48 am and is filed under Web Design, Yorgo Nestoridis. You can follow any responses to this entry through the RSS 2.0 feed.