Web Design Workshop 6 Main Wrapper
The Main Wrapper is styled in function of the content you plan to put on display. The choice of the layout layout depends of your site width, the position of the sidebar and the content. The markup will influence whatever you put into that wrapper subsequently.
Main Wrapper
The main wrapper is the main body container within which is placed everything between header and footer, i.e. the content column and the sidebars. To draw horizontal lines on top and or bottom, 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;
}
Wrapper Top Border
As you see, I have added a 2 pixels wide horizontal line by editing the top border of the wrapper. Without further change, that top border would be glued to the menu above. For this reason we introduce a margin-bottom call to the concerned menu, in my case to the navigation, so that the top-border from the wrapper si shown with a distance (margin) of 2 pixels from the above menu bar.
The margin call could look like this – on my style-sheet line 111 – 120: margin-bottom: 2px; and my navigation block ends up looking 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 background of the main wrapper, which in my case will remain white (#FFFFFF); for easy reading make sure that you have enough contrast between the background color and the font color. Black on white is the easiest to read configuration.
Background
Financial Times
Financial Times
Changing the backgrounds change the look and feel of the site dramatically as it does in printing.
Remember the salmon pink Financial Times?
Cloning a look is not all that difficult for as long as you know the color codes and are in control of layout and style elements as you can see below.
You too can get now the Financial Times look by just changing a few lines of code. (Here I have just changed the backgrounds and increased the title font plus switched the navigation background to red.)
Change the body background color on line 32,
- the header background on line 49 and
- the main wrapper background on line 235 and
- the footer background on line 331 and here you go:
The Power of the Background
The Financial Times look is about universally recognized and associated to financial information, since in many countries financial newspapers have adopted the salmon or coral type of background.
When reaching a FT salmon styled page, we expect information pertaining to finance.
Or, the other way around: when we design a web page containing financial information, we aim to create empathy immediately. Color or image are the fastest way to tell your audience what your site is all about; if you can immediately match expectation, you have taken the first empathy hurdle.
So, why should the Make Money blog not take the Financial Times Look?
Exactly : why not!
More about this Topic
| Author: Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics.
If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription. |
Incoming search terms:
- body background
- border webdesign
- coral border background designs
- how to add a main wrapper to wordpress
- main wrapper
- web background different from main wrapper
- website main wrapper
- what is a mainwrapper in web design
- wordpress mainwrapper
- wordpress mainwrapper background
Related posts:
Second in-depth round and becoming more Fun!
THANK YOU !
Let’s keep the fun levels up!
FUN!