Design your header

|
header2If you have read my previous tutorial, you should already have a header image, so now just left the header position and background colour to go! After finished reading this tutorial, you will have learnt another technique in web design which help you to make money online.

First of all,go to Layout>Edit HTML



#header-wrapper {
width:200px;
height:70px;
margin:0px auto 0px;
background:#FFFFFF;
}

Adjust the height and width until the image does not crash with your content.
The "margin:0px auto 0px;" set the header to be in middle of blog.
To set the margin to the left of your blog,just delete the "margin",
More info about margin visit w3schools.

After you have set the header wrapper,
usually you need to adjust the other wrapper until for cleanage.
For refering,you may take a glimpse on how I make it.
To find the wrapper position,use CTRL+F.

/* Outer-Wrapper
----------------------------------------------- */
#content-wrapper{
width:900px;
background:#fff1ff;
margin:0 auto;
}

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
background:#FFffff;
}

#main-wrapper {
width: 560px;
margin: 0px 10px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
background:#ffffff;
padding-left:20px;
padding-right:20px;
}
#sidebar-wrapper {
width: 230px;
margin-right:10px;
padding-left:20px;
padding-right:20px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float*/
background:#ffffff;
}

Padding means the extra space of the wrapper.
You have to change the width of those wrapper according to your needs,
Notice that: width of outer-wrapper > content-wrapper > the other 2 wrappers
(width + padding of sidebar-wrapper)+(width + padding of main-wrapper) should smaller or equal to the content wrapper.
header
Now you should already have a good looking header!
Enjoy designing your website to increase your customer return rate for SEO. I'm sure this have helped you to make money online.

No comments:

Post a Comment

 

About Me

I'm a professional online money earner.I currently use my ASUS F81Series to online and earn money via Internet.I'm here to guide the one who are willing to learn only.

Video

Webmaster's Desert