вот css сайта из вашей ссылки, и посмотрите как они сделали вывод хейдера и футера:
body, html {
margin: 0;
padding: 0;
font: 11px Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background: #f0f4ed;
color:#4a4a4a;
}
img {border: 0;}
* {
margin: 0;
padding: 0;
}
a { color: #1e5678; text-decoration: underline; background-color: inherit; }
a:visited { color: #91908d; text-decoration:underline; background-color: inherit;}
a:active { color: #8aa12d; background-color: inherit; }
a:hover { color: #747474; background-color: inherit; }
hr{
color: #f0f4ed;
size: 1px;
}
.apage{
color:#59a219;
}
.epicture{
padding:4px 4px 0px 4px;
border:solid #daded8 1px;
}
.circle{
width:29px;
height:29px;
text-align:center;
padding-top:3px;
background:url(../images/circle.jpg) no-repeat 0px 0px;
}
.eheader{
padding-top:5px;
padding-left:10px;
}
.page {
margin: 0 auto;
text-align:center;
min-width:1200px;
background:url(../images/header_left_clouds2.jpg) no-repeat top left;
width:100%;
float:left;
}
.page-in {
background:url(../images/header_right_clouds.jpg) no-repeat top right;
width:100%;
margin: 0 auto;
}
h1 {
font-size: 16px;
}
h3 {
font-size: 13px;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin: 0.0em 0;
}
.left{
float:left;
width:11%;
}
.right{
float:right;
width:89%;
margin: 0 auto;
}
.right_i{
width:994px;
margin: 0 auto;
padding:0;
}
.footer {
position:relative;
height:186px;
width:100%;
background:white;
clear:both;
background: transparent url(../images/footer_bg.jpg) bottom center repeat-x;
min-width:1200px;
z-index: 5;
}
.footer_left{
float:left;
width:14%;
height:149px;
position:relative;
z-index: 5;
background:url(../images/leaf.jpg) no-repeat bottom left;
}
.footer_right{
float:right;
width:86%;
margin: 0 auto;
text-align:left;
min-height:55px;
/*background:url(../images/home_footer.gif) no-repeat center right;*/
padding-top:90px;
color: #7e7e7e;
z-index: 5;
position:relative;
}
#rightcut {
width:391px;
height:167px;
background:url(../images/home_footer.gif) no-repeat top left;
position: absolute;
bottom: 50px;
right: 0px;
z-index: 55;
}
.header {
height:130px;
background:url(../images/header_right_clouds.jpg) no-repeat top right;
text-align:left;
overflow:visible;
float:left;
width:100%;
}
.header_i {
height:130px;
text-align:left;
float:left;
width:100%;
position:relative;
}
.body {
width:100%;
clear:both;
}
.left_column {
width:210px;
float:left;
}
.right_column{
width:auto;
text-align:left;
margin-left:210px;
position:relative;
z-index:1;
}
.content{
text-align:left;
line-height:14pt;
font-family:arial;
font-size:9pt;
color: #4a4a4a;
padding-top:30px;
padding-left:20px;
width:862px;
float:left;
background:#F0F4ED;
overflow:hidden;
}
.content p, .content2 p { margin-left: 25px; }
.content2{
text-align:left;
line-height:14pt;
font-family:arial;
font-size:9pt;
color: #4a4a4a;
padding-top:30px;
padding-left:20px;
overflow:hidden;
float:left;
}
.content h3,.content2 h3 {
color:#8a9466;
font-size:17px;
line-height:22px;
margin:0px;
padding:0px;
}
.line {
width:25%;
height:103px;
position:absolute;
top:439px;
background:#d0eab9;
min-width:157px;
left:0px;
}
.line2 {
width:30%;
height:276px;
position:absolute;
top:130px;
z-index:0;
background:#ebefd3;
min-width:157px;
right:0px;
background: #ebefd3 url(../images/leaf2.jpg) no-repeat top right;
text-align:right;
}
.logo {
margin-top:15px;
margin-left:-60px;
float:left;
z-index:5;
position:relative;
}
.language {
margin-top:55px;
margin-left:150px;
float:left;
}
.language a, language a:visited {
color: #006fae;
}
.language a:hover {
color: #59a219;
}
.contakts {
float:left;
color:#3d3d3d;
margin-left:250px;
padding-left:15px;
padding-top:50px;
width:170px;
height:85px;
font-size:18px;
font-family:Helvetica;
background:url(../images/contakts.gif) no-repeat top left;
line-height:17px;
}
/*.title {
height: 50px;
background: #d0eab9 url(../images/title.gif) no-repeat top left;
text-align:left;
font-size:16pt;
font-family:Arial;
padding-top:21px;
padding-left:18px;
overflow:hidden;
line-height:22pt;
}
*/
.title {
height: 71px;
background: #d0eab9 url(../images/title.gif) no-repeat top left;
text-align:left;
overflow: hidden;
font-size:16pt;
font-family:Arial;
padding-left:18px;
line-height:71px;
position:relative;
}
.title h1{
font-weight:normal;
font-size:16pt;
color:#3d3d3d;
}
.green_block{
width:182px;
height:71px;
background: #d0eab9 url(../images/green_block.gif) no-repeat top left;
clear:both;
text-align:left;
color:#3d3d3d;
font-size:11px;
font-weight: bold;
text-transform:uppercase;
line-height: 18px;
}
.b {
line-height:70px;
}
.green_block a, .green_block a:visited{
color:#3d3d3d;
text-decoration:none;
}
.green_block a:hover {
text-decoration:underline;
}
.green {
color: #59a219;
}
.small_grey {
color:#969895;
font-size:11px;
padding-left:60px;
}
.main_menu {
height:237px;
float:left;
width:210px;
background:url(../images/menu_bg.gif) no-repeat top left;
margin-bottom:22px;
text-align:left;
padding-left:20px;
line-height:25px;
color:#4a4a4a;
overflow:hidden;
margin-top:50px;
font-size:12px;
}
.main_menu a, .main_menu a:visited{
color: #006fae;
}
.main_menu a:hover {
color: #59a219;
}
.main_menu ul {
list-style:none;
}
.main_menu ul, .main_menu li {
display:block;
}
.main_menu li {
padding-left:16px;
}
.active, .active a, .active a:visited {
text-decoration:none;
color:#4a4a4a;
}
.active {
padding-left:16px;
background:url(../images/menu_active.gif) no-repeat center left;
}
.country {
clear:both;
background: #d0eab9 url(../images/country.jpg) no-repeat top left;
width:339px;
height:103px;
margin-left:-165px;
margin-bottom:13px;
position:relative;
z-index:5;
overflow:hidden;
text-align:left;
font-size:9px;
line-height:10px;
padding-left:10px;
text-transform: uppercase;
}
#canada { position: absolute; z-index:6; top: 12px; left: 65px; }
#greenland { position: absolute; z-index:6; top: 31px; left: 37px; }
#norway { position: absolute; z-index:6; top: 50px; left: 50px; }
#finland { position: absolute; z-index:6; top: 12px; right: 72px;}
#shweden { position: absolute; z-index:6; top: 31px; right: 72px; }
#denmark { position: absolute; z-index:6; top: 50px; right: 72px; }
#choise {}
.country a, .country a:visited{
color:#646f34;
text-decoration:none;
background: none;
}
.country a:hover{
text-decoration:underline;
}
.r {
float:left;
position:relative;
z-index:6;
left:45px;
line-height:19px;
margin-top:6px;
}
.l {
margin-top:6px;
float:left;
overflow:hidden;
line-height:19px;
position:relative;
z-index:6;
left:140px;
}
.our_advantages {
width:182px;
height:258px;
overflow:hidden;
color:#646f34;
}
.our_advantages a, .our_advantages a:visited {
color:#646f34;
text-decoration:underline;
}
.our_advantages a:hover{
color:#3d3d3d;
text-decoration:none;
}
.our_advantages_header {
width:182px;
height:38px;
background: #eaefd3 url(../images/our_advantages_header.gif) no-repeat top left;
margin-bottom:8px;
font-size:13px;
line-height:26px;
}
.our_advantages_1, .our_advantages_2, .our_advantages_3, .our_advantages_4 {
height:36px;
margin-bottom:8px;
padding-left:60px;
text-align:left;
overflow:hidden;
padding-top:6px;
float:left;
font-size:12px;
}
.our_advantages_1 {
background: url(../images/our_advantages_1.gif) no-repeat top left;
}
.our_advantages_2 {
background: url(../images/our_advantages_2.gif) no-repeat top left;
}
.our_advantages_3 {
background: url(../images/our_advantages_4.gif) no-repeat top left;
}
.fourth {
color:#3d3d3d;
font-family:arial;
font-size:9px;
position:absolute;
z-index:6;
left:202px;
top:76px;
width: 150px;
}
.blocks {
height:104px;
width:97%;
margin-top:30px;
margin-left:7px;
}
.green_block2{
width:240px;
height:103px;
background: #d0eab9 url(../images/green_block2.gif) no-repeat top left;
text-align:left;
color:#3d3d3d;
font-size:13px;
float:left;
margin-right:4px;
margin-left:4px;
color:#59a219;
font-family:arial;
}
.green_block2 a, .green_block2 a:visited{
color:#3d3d3d;
text-decoration:none;
font-size:14px;
font-weight: bold;
text-transform: uppercase;
}
.green_block2 a:hover {
text-decoration:underline;
}
.change {
position:relative;
z-index:10;
float:right;
right:-40px;
top:20px;
}
.main_image {
background: url(../images/pr_info.png) no-repeat top left;
left:0px;
top:40px;
height: 90px;
width: 189px;
padding-top:30px;
padding-left: 1px;
position: absolute;
z-index: 91;
position:absolute;
}
.output {
border: 2px solid #000;
border-collapse:collapse;
border-style:solid;
border-color:#c0c0c0;
}
.output td {
border-width:2px;
border-color:#000;
border-style:solid;
padding: 4px;
border-color:#c0c0c0;
}
.prinfo {
border: 2px solid #000;
border-collapse:collapse;
border-style:solid;
border-color:#c0c0c0;
font-size:15px;
}
.prinfo td {
border-width:2px;
border-color:#000;
border-style:solid;
padding: 4px;
border-color:#c0c0c0;
}
.outputdiv { border-left:2px solid #C0C0C0; border-right:2px solid #C0C0C0; border-top:2px solid #C0C0C0;
width:264px; float:left; clear:both;
overflow: hidden;
}
.squareval {
padding-left: 4px;
float: left;
}
#dom {
height:276px;
width: 761px;
background-color: #F0F4ED;
position:relative; z-index:1;
}
.square {float:left; overflow: hidden; height:25px; width:178px; padding:4px; font-size:11pt; line-height:25px; color:#4A4A4A; border-right:2px solid #C0C0C0;}
.output { float:left; clear:both; }
.char { height:25px; width:300px; padding:4px; padding-left: 15px; font-size:11pt; line-height:25px; color:#4A4A4A; font-weight:bold; border-right:0px solid #C0C0C0;}
.project_list { padding-left: 140px; }
.project_list li { list-style:none; float:left; margin-left: 15px; margin-right: 15px;}
.img {margin-left: 10px;}
.search { float:right; margin-right:20 px; font-size: 14; left:320px; position:absolute; top:0; z-index:5;}
и сделайте по аналогии.
Оратите внимание на эти участки кода: .page { margin: 0 auto; text-align:center; min-width:1200px; background:url(../images/header_left_clouds2.jpg) no-repeat top left; width:100%; float:left; } .page-in { background:url(../images/header_right_clouds.jpg) no-repeat top right; width:100%; margin: 0 auto; } и на эти: .footer { position:relative; height:186px; width:100%; background:white; clear:both; background: transparent url(../images/footer_bg.jpg) bottom center repeat-x; min-width:1200px; z-index: 5; } .footer_left{ float:left; width:14%; height:149px; position:relative; z-index: 5; background:url(../images/leaf.jpg) no-repeat bottom left; } .footer_right{ float:right; width:86%; margin: 0 auto; text-align:left; min-height:55px; /*background:url(../images/home_footer.gif) no-repeat center right;*/ padding-top:90px; color: #7e7e7e; z-index: 5; position:relative; }
