Afternoon: the header.
This tutorial only works for the Afternoon style sheet!
What size should the header be?
The header you see in the Afternoon layout is in fact a background image in the header-menu. Its size is 527x200px. Of course, once you customize the layout and change the width of the body, the padding and all that, the size will change. So how do you determine the size of the header?
1. To get the same padding effect as in the Afternoon style:
A. For geeks.
If you want to get the same padding effect as in the Afternoon style, you have to calculate the size of your header, but first you have to determine its position within the header-menu. To do that, you have to look at the settings of the header-menu links and the header-menu itself:
- left padding of the header-menu: 7px.
- width of the header-menu link block: 120px.
- padding of the header-menu link block: 5px. (padding is on both sides: 10px)
To give the impression there's also padding after the link block, we add 7px.
You add them up: 7 + 120 + 10 + 7 = 144
.header-menu {
background-color: transparent;
background-image: url(http://yoururl/header.jpg);
background-repeat: no-repeat;
background-position: 144px 7px;
padding: 7px;
margin-top: 10px;
height: 200px;
border: 1px solid #CCCCCC;
}
Determining the vertical position for the header is much simpler. Just enter the same amount as for the header-menu padding: 7px.
background-position: 144px 7px;
To determine the size of your header
The size of your header will depend on the settings you have for the body and the pageheaderblock.
- width of the body: 700px.
- padding of the pageheaderblock: 10px.
header-menu = 700 - (10 + 10)
header-menu = 680
Now that you've determined the width of the header-menu, we know that the header won't show where there's a border, so we substract 2px (because one border on the left plus one border on the right). The width is now 678px. You have to substract from it, the following numbers:
- left padding of the header-menu: 7px.
- width of the header-menu link block: 120px.
- padding of the header-menu link block: 5px. (padding is on both sides: 10px)
- illusion of padding on the right of the links: 7px
aka the number of pixels for the background position: 144px.
- right padding of the header-menu: 7px.
678 - (144 + 7) = 527
The width of your header will be 527px. As for the height, it will be the value you set for the height of the header-menu. Here: 200px.
B. For lazy geeks.
Now I'm going to tell you the easy way to achieve the same padding effect as above. You can have a header which covers the whole background of the header-menu: 678x200px. (Note: this can also be customized and therefore is subject to change depending on the changes you make.) This way you don't have to code the positioning of the header image in the css -- you just leave it to 0px 0px. You can achieve the padding effect by positioning your 527x200 image on a 678x200 white canvas in your graphics program.
2. No padding effect:
However, if you decide to use a 678x200 header, you can also decide to incorporate the links in the graphics. There are tons of possibilities on how to do that.
To sum up:
The part of the code which defines the look of the menu is:
/* TYPO - Links */
.header-menu a, .header-menu a:visited {
color: #8C0200;
background-color: #D0EFA6;
line-height: 12px;
padding: 5px;
margin-bottom: 5px;
display: block;
width: 120px;
}
.header-menu a:hover {
color: #FFFFFF;
background-color: #CCCCCC;
line-height: 12px; padding: 5px;
margin-bottom: 5px;
display: block;
width: 120px;
}
The part of the code which defines the menu position, and the header image height, position and url is:
/* HEADER AND FOOTER */
.header-menu {
background-color: transparent;
background-image: url(http://yoururl/header.jpg);
background-repeat: no-repeat;
background-position: 144px 7px;
padding: 7px;
margin-top: 10px;
height: 200px;
border: 1px solid #CCCCCC;
}
.header-menu li {
display: list;
list-style: none;
margin: 0;
padding: 0;
}
.header-menu ul {
margin: 0;
padding: 0;
}
Click on the thumbs to view.
a - header
b - header in situ
description
a
b
Kate Winslet
Size: 678 x 200
Sidebar: left.
Css: see the changes.
a
b
Matthew Fox
Size: 678 x 214
Sidebar: left or right.
Css: see the changes.
a
b
Jared Padalecki
Size: 678 x 214
Sidebar: left or right.
Css: see the changes.
a
b
J. Flanigan. D. Hewlett.
Size: 678 x 100
Sidebar: left.
Css: see the changes.
What size should the header be?
The header you see in the Afternoon layout is in fact a background image in the header-menu. Its size is 527x200px. Of course, once you customize the layout and change the width of the body, the padding and all that, the size will change. So how do you determine the size of the header?
1. To get the same padding effect as in the Afternoon style:
A. For geeks.
If you want to get the same padding effect as in the Afternoon style, you have to calculate the size of your header, but first you have to determine its position within the header-menu. To do that, you have to look at the settings of the header-menu links and the header-menu itself:
- left padding of the header-menu: 7px.
- width of the header-menu link block: 120px.
- padding of the header-menu link block: 5px. (padding is on both sides: 10px)
To give the impression there's also padding after the link block, we add 7px.
You add them up: 7 + 120 + 10 + 7 = 144
.header-menu {
background-color: transparent;
background-image: url(http://yoururl/header.jpg);
;){kind=link}
background-repeat: no-repeat;
background-position: 144px 7px;
padding: 7px;
margin-top: 10px;
height: 200px;
border: 1px solid #CCCCCC;
}
Determining the vertical position for the header is much simpler. Just enter the same amount as for the header-menu padding: 7px.
background-position: 144px 7px;
To determine the size of your header
The size of your header will depend on the settings you have for the body and the pageheaderblock.
- width of the body: 700px.
- padding of the pageheaderblock: 10px.
header-menu = 700 - (10 + 10)
header-menu = 680
Now that you've determined the width of the header-menu, we know that the header won't show where there's a border, so we substract 2px (because one border on the left plus one border on the right). The width is now 678px. You have to substract from it, the following numbers:
- left padding of the header-menu: 7px.
- width of the header-menu link block: 120px.
- padding of the header-menu link block: 5px. (padding is on both sides: 10px)
- illusion of padding on the right of the links: 7px
aka the number of pixels for the background position: 144px.
- right padding of the header-menu: 7px.
678 - (144 + 7) = 527
The width of your header will be 527px. As for the height, it will be the value you set for the height of the header-menu. Here: 200px.
B. For lazy geeks.
Now I'm going to tell you the easy way to achieve the same padding effect as above. You can have a header which covers the whole background of the header-menu: 678x200px. (Note: this can also be customized and therefore is subject to change depending on the changes you make.) This way you don't have to code the positioning of the header image in the css -- you just leave it to 0px 0px. You can achieve the padding effect by positioning your 527x200 image on a 678x200 white canvas in your graphics program.
2. No padding effect:
However, if you decide to use a 678x200 header, you can also decide to incorporate the links in the graphics. There are tons of possibilities on how to do that.
To sum up:
The part of the code which defines the look of the menu is:
/* TYPO - Links */
.header-menu a, .header-menu a:visited {
color: #8C0200;
background-color: #D0EFA6;
line-height: 12px;
padding: 5px;
margin-bottom: 5px;
display: block;
width: 120px;
}
.header-menu a:hover {
color: #FFFFFF;
background-color: #CCCCCC;
line-height: 12px; padding: 5px;
margin-bottom: 5px;
display: block;
width: 120px;
}
The part of the code which defines the menu position, and the header image height, position and url is:
/* HEADER AND FOOTER */
.header-menu {
background-color: transparent;
background-image: url(http://yoururl/header.jpg);
background-repeat: no-repeat;
background-position: 144px 7px;
padding: 7px;
margin-top: 10px;
height: 200px;
border: 1px solid #CCCCCC;
}
.header-menu li {
display: list;
list-style: none;
margin: 0;
padding: 0;
}
.header-menu ul {
margin: 0;
padding: 0;
}
Click on the thumbs to view.
a - header
b - header in situ
description
a
b
Kate Winslet
Size: 678 x 200
Sidebar: left.
Css: see the changes.
a
b
Matthew Fox
Size: 678 x 214
Sidebar: left or right.
Css: see the changes.
a
b
Jared Padalecki
Size: 678 x 214
Sidebar: left or right.
Css: see the changes.
a
b
J. Flanigan. D. Hewlett.
Size: 678 x 100
Sidebar: left.
Css: see the changes.