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.
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