Fixed header/footer issue

February 20, 201214 yr

Hi, I have created a layout for a website but now want to add a fixed header/footer 100% width with the wrapper and its contents staying centred. I have come close to what I thought I was looking for but have now run out of ideas, can somebody please help?

Many thanks

body {
   background-color: #CCC;
   background-image: url(Images/escher.png);
}
#wrapper {
   height: 900px;
   width: 1000px;
   margin-right: auto;
   margin-left: auto;
   position: relative;
   top: -10px;
}
#header {
   height: 150px;
   width: 1000px;
   background-color: rgba(153,153,153, 0.3);

}
#contact_global {
   float: right;
   height: 70px;
   width: 210px;
   position: relative;
   clear: left;
   bottom: 65px;
   right: 25px;
   border-top-width: 1px;
   border-bottom-width: 1px;
   border-top-style: dotted;
   border-bottom-style: dotted;
   border-top-color: 0E0063;
   border-bottom-color: 0E0063;
   padding-top: 5px;
   padding-bottom: 5px;
   font-size: 14px;
   text-align: center;
   font-family: Georgia, "Times New Roman", Times, serif;
   color: #FFF;
   font-style: italic;
}
#sidebar_left {
   height: 750px;
   width: 200px;
   float: left;
}
#main_content {
   float: left;
   height: 450px;
   width: 800px;
}
#sidebar_right {
   float: left;
   height: 700px;
   width: 200px;
}
#footer {
   height: 50px;
   width: 1000px;
   clear: both;
   font-family: Georgia, "Times New Roman", Times, serif;
   color: #FFF;
   font-size: 16px;
   border-top-width: 1px;
   border-top-style: solid;
   border-top-color: #FFF;
}
#navigation {
   height: 100px;
   width: 400px;
   float: left;
   position: relative;
   left: 50px;
}

#navigation ul
{
list-style: none;
padding: 0;
margin: 0;

}

#navigation li
{
list-style: none;
float: left;

}

#navigation li a
{
   height: 20px;
   float: left;
   width: 100px;
   height: 100px;
   display: block;
   color: #3B394B;
   text-decoration: none;
   text-align: center;
}


#logo {
   width: 250px;
   height: 50px;
   float: left;
   position: relative;
   top: 30px;
   left: 25px;
}
#quicklinks {
   height: 300px;
   width: 200px;
   position: relative;
   top: 100px;
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 16px;
   color: #FFF;
}
#slideshow {
   height: 450px;
   width: 600px;
   float: left;
}
#text {
   height: 400px;
   width: 740px;
   float: right;
   font-family:Georgia, "Times New Roman", Times, serif;
   text-align: justify;
   color: #0D1363;
   font-size: 12px;
   position: relative;
   bottom: 70px;
}



#twitter_module {
   float: left;
   height: 300px;
   width: 200px;
   position: relative;
   top: 75px;
}


#social {
   height: 30px;
   width: 100px;
   position: relative;
   float: right;
}

#facebook {
   float: left;
   height: 24px;
   width: 24px;
   position: relative;
   left: 35px;
   top: 3px;

}

#twitter {
   float: right;
   height: 24px;
   width: 24px;
   position: relative;
   top: 3px;

}


a:link {
 color:#999;
 text-decoration:none;
 font-family: Century Gothic, Arial, Helvetica, Verdana;
 font-size: 15px;

} 

a:visited {
 color:#999;
 text-decoration:none;
 font-family: Century Gothic, Arial, Helvetica, Verdana;
 font-size: 15px;

}         
a:hover
{
 color:#FFF;
 text-decoration:none;
 font-family: Century Gothic, Arial, Helvetica, Verdana;


 }

<div id="header">
   <div id="logo"><img src="Images/logo-blue.png" width="250" height="50" alt="my  logo" /></div>
   <div id="navigation">
     <ul>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','Images/home-over.png',1)"><img src="Images/home-up.png" alt="home" name="home" width="100" height="100" border="0" id="home" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('properties','','Images/properties-over.png',1)"><img src="Images/properties-up.png" alt="our properties" name="properties" width="100" height="100" border="0" id="properties" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('edinburgh','','Images/edinburgh-over.png',1)"><img src="Images/edinburgh-up.png" alt="things to do in edinburgh" name="edinburgh" width="100" height="100" border="0" id="edinburgh" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','Images/contact-over.png',1)"><img src="Images/contact-up.png" alt="contact my apartments" name="contact" width="100" height="100" border="0" id="contact" /></a></li>
</ul>
   </div>
   <div id="contact_global"><span style="color: #0D1363;font-weight:bold; font-size: 16px; font-style: italic">Enquiry</span><br />
     <br />

 </div>


 <div id="sidebar_left">
   <div id="quicklinks">
     <div id="content">



   </div>
   </div>
 </div>


<div id="main_content">
   <div id="slideshow">

<div id="container">
       <div id="example">
         <div id="slides">
             <div class="slides_container">                   
                   <a href="http://www..com"  target="_blank"><img src="img/slide-1.jpg" width="730" height="340" alt="Slide 1"></a>
                   <a href="http://www..com"  target="_blank"><img src="img/slide-2.jpg" width="730" height="340" alt="Slide 2"></a>
                   <a href="http://www..com"  target="_blank"><img src="img/slide-3.jpg" width="730" height="340" alt="Slide 3"></a>
                   <a href="http://www..com"  target="_blank"><img src="img/slide-4.jpg" width="730" height="340" alt="Slide 4"></a>
                   <a href="http://www..com"  target="_blank"><img src="img/slide-5.jpg" width="730" height="340" alt="Slide 5"></a>
                   <a href="http://www..com"  target="_blank"><img src="img/slide-6.jpg" width="730" height="340" alt="Slide 6"></a>

       </div>
   </div>
           <img src="img/example-frame.png" width="740" height="400" alt="Example Frame" id="frame">
       </div>
</div>



   </div>
   <div id="text">
     "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>
     <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>
   </div>
 </div>
 <div id="footer">
   <div id="social">
<div id="facebook"><a href="http://www.facebook.com" target="_blank" onmouseover="MM_swapImage('facebook','','Social Network Icons/facebook-over.png',1)" onmouseout="MM_swapImgRestore()"><img src="Social Network Icons/facebook-up.png" alt="find us on facebook" name="facebook" width="24" height="24" border="0" id="facebook2" /></a></div>
<div id="twitter"><a href="http://www.twitter.com" target="_blank" onmouseover="MM_swapImage('twitter','','Social Network Icons/twitter-over.png',1)" onmouseout="MM_swapImgRestore()"><img src="Social Network Icons/twitter-up.png" alt="follow us on twitter" name="twitter" width="24" height="24" border="0" id="twitter2" /></a></div>
</div></div>


</div>
</body>
</html>

February 21, 201214 yr

This works to put a fixed header and footer and centered content, but there are still lots of errors which I haven't edited (CSS is in a head section tag but you should put it in a separate stylesheet):-

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 
charset=utf-8">
<meta name="description" content="Web Development">
<title> Transportation Request For Clinton Public 
Schools</title>
<style type="text/css">
body {
   background-color: #CCC;
   background-image: url(Images/escher.png);
}

#wrapper { 
margin: 150px auto 50px auto;
   height: 900px;
   width: 1000px;
   /*margin-right: auto;
   margin-left: auto;*/
   position: relative;
   /*top: -10px;*/
background: #eee;
}
#header {
width: 100%; 
position: fixed; 
top: 0; 
left: 0;
height: 150px;
       /*width: 1000px;*/
   background-color: rgba(153,153,153, 0.3);
z-index: -1;

}
#contact_global {
   float: right;
   height: 70px;
   width: 210px;
   position: relative;
   clear: left;
   bottom: 65px;
   right: 25px;
   border-top-width: 1px;
   border-bottom-width: 1px;
   border-top-style: dotted;
   border-bottom-style: dotted;
   border-top-color: 0E0063;
   border-bottom-color: 0E0063;
   padding-top: 5px;
   padding-bottom: 5px;
   font-size: 14px;
   text-align: center;
   font-family: Georgia, "Times New Roman", Times, 

serif;
   color: #FFF;
   font-style: italic;
}
#sidebar_left {
   height: 750px;
   width: 200px;
   float: left;
}
#main_content {
   float: left;
   height: 450px;
   width: 800px;
}
#sidebar_right {
   float: left;
   height: 700px;
   width: 200px;
}
#footer {
width: 100%; 
position: fixed; 
bottom: 0; 
left: 0;
background: #ccc; 
height: 50px;
       /*width: 1000px;*/
   /*clear: both;*/
   font-family: Georgia, "Times New Roman", Times, 

serif;
   color: #FFF;
   font-size: 16px;
   border-top-width: 1px;
   border-top-style: solid;
   border-top-color: #FFF;
}
#navigation {
   height: 100px;
   width: 400px;
   float: left;
   position: relative;
   left: 50px;
}

#navigation ul
{
list-style: none;
padding: 0;
margin: 0;

}

#navigation li
{
list-style: none;
float: left;

}

#navigation li a
{
   height: 20px;
   float: left;
   width: 100px;
   height: 100px;
   display: block;
   color: #3B394B;
   text-decoration: none;
   text-align: center;
}


#logo {
   width: 250px;
   height: 50px;
   float: left;
   position: relative;
   top: 30px;
   left: 25px;
}
#quicklinks {
   height: 300px;
   width: 200px;
   position: relative;
   top: 100px;
   font-family: Georgia, "Times New Roman", Times, 

serif;
   font-size: 16px;
   color: #FFF;
}
#slideshow {
   height: 450px;
   width: 600px;
   float: left;
}
#text {
   height: 400px;
   width: 740px;
   float: right;
   font-family:Georgia, "Times New Roman", Times, 

serif;
   text-align: justify;
   color: #0D1363;
   font-size: 12px;
   position: relative;
   bottom: 70px;
}



#twitter_module {
   float: left;
   height: 300px;
   width: 200px;
   position: relative;
   top: 75px;
}


#social {
   height: 30px; 
   width: 100px;
   position: relative;
   float: right;
}

#facebook {
   float: left; 
   height: 24px;
   width: 24px;
   position: relative;
   /*left: 35px;*/
   top: 3px;

}

#twitter {
   float: right; 
   height: 24px;
   width: 24px;
   position: relative;
   top: 3px;

}


a:link {
 color:#999;
 text-decoration:none;
 font-family: Century Gothic, Arial, Helvetica, 

Verdana;
 font-size: 15px;

} 

a:visited {
 color:#999;
 text-decoration:none;
 font-family: Century Gothic, Arial, Helvetica, 

Verdana;
 font-size: 15px;

}         
a:hover
{
 color:#FFF;
 text-decoration:none;
 font-family: Century Gothic, Arial, Helvetica, 

Verdana;


 }
</style>   

</head>

<body>

<div id="header">
   <div id="logo"><img src="Images/logo-blue.png" 

width="250" height="50" alt="my  logo" /></div>
</div>

<div id="wrapper">

   <div id="navigation">
     <ul>
<li><a href="#" onmouseout="MM_swapImgRestore()" 
onmouseover="MM_swapImage('home','','Images/home-
over.png',1)"><img src="Images/home-up.png" alt="home" 
name="home" width="100" height="100" border="0" 
id="home" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" 
onmouseover="MM_swapImage
('properties','','Images/properties-over.png',1)"><img 
src="Images/properties-up.png" alt="our properties" 
name="properties" width="100" height="100" border="0" 
id="properties" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" 
onmouseover="MM_swapImage
('edinburgh','','Images/edinburgh-over.png',1)"><img 
src="Images/edinburgh-up.png" alt="things to do in 
edinburgh" name="edinburgh" width="100" height="100" 
border="0" id="edinburgh" /></a></li>
<li><a href="#" onmouseout="MM_swapImgRestore()" 
onmouseover="MM_swapImage
('contact','','Images/contact-over.png',1)"><img 
src="Images/contact-up.png" alt="contact my apartments" 
name="contact" width="100" height="100" border="0" 
id="contact" /></a></li>
</ul>
   </div>
   <div id="contact_global"><span style="color: 
#0D1363;font-weight:bold; font-size: 16px; font-style: 
italic">Enquiry</span><br />
     <br />

 </div>


 <div id="sidebar_left">
   <div id="quicklinks">
     <div id="content">



   </div>
   </div>
 </div>


<div id="main_content">
   <div id="slideshow">

<div id="container">
       <div id="example">
         <div id="slides">
             <div class="slides_container">            


                   <a href="http://www..com"  

target="_blank"><img src="img/slide-1.jpg" width="730" 
height="340" alt="Slide 1"></a>
                   <a href="http://www..com"  
target="_blank"><img src="img/slide-2.jpg" width="730" 
height="340" alt="Slide 2"></a>
                   <a href="http://www..com"  
target="_blank"><img src="img/slide-3.jpg" width="730" 
height="340" alt="Slide 3"></a>
                   <a href="http://www..com"  
target="_blank"><img src="img/slide-4.jpg" width="730" 
height="340" alt="Slide 4"></a>
                   <a href="http://www..com"  
target="_blank"><img src="img/slide-5.jpg" width="730" 
height="340" alt="Slide 5"></a>
                   <a href="http://www..com"  
target="_blank"><img src="img/slide-6.jpg" width="730" 
height="340" alt="Slide 6"></a>

       </div>
   </div>
           <img src="img/example-frame.png" 
width="740" height="400" alt="Example Frame" 

id="frame">
       </div>
</div>



   </div>
   <div id="text">           <p>
     "At vero eos et accusamus et iusto odio 
dignissimos ducimus qui blanditiis praesentium 
voluptatum deleniti atque corrupti quos dolores et quas 
molestias excepturi sint occaecati cupiditate non 
provident, similique sunt in culpa qui officia deserunt 
mollitia animi, id est laborum et dolorum fuga. Et 
harum quidem rerum facilis est et expedita distinctio. 
Nam libero tempore, cum soluta nobis est eligendi optio 
cumque nihil impedit quo minus id quod maxime placeat 
facere possimus, omnis voluptas assumenda est, omnis 
dolor repellendus. Temporibus autem quibusdam et aut 
officiis debitis aut rerum necessitatibus saepe eveniet 
ut et voluptates repudiandae sint et molestiae non 
recusandae. Itaque earum rerum hic tenetur a sapiente 
delectus, ut aut reiciendis voluptatibus maiores alias 
consequatur aut perferendis doloribus asperiores 
repellat."</p>
     <p>"At vero eos et accusamus et iusto odio 
dignissimos ducimus qui blanditiis praesentium 
voluptatum deleniti atque corrupti quos dolores et quas 
molestias excepturi sint occaecati cupiditate non 
provident, similique sunt in culpa qui officia deserunt 
mollitia animi, id est laborum et dolorum fuga. Et 
harum quidem rerum facilis est et expedita distinctio. 
Nam libero tempore, cum soluta nobis est eligendi optio 
cumque nihil impedit quo minus id quod maxime placeat 
facere possimus, omnis voluptas assumenda est, omnis 
dolor repellendus. Temporibus autem quibusdam et aut 
officiis debitis aut rerum necessitatibus saepe eveniet 
ut et voluptates repudiandae sint et molestiae non 
recusandae. Itaque earum rerum hic tenetur a sapiente 
delectus, ut aut reiciendis voluptatibus maiores alias 
consequatur aut perferendis doloribus asperiores 
repellat."</p>
   </div>
 </div>

</div><!--end of #wrapper-->

 <div id="footer">
   <div id="social">
<div id="facebook"><a href="http://www.facebook.com" 
target="_blank" onmouseover="MM_swapImage
('facebook','','Social Network Icons/facebook-
over.png',1)" onmouseout="MM_swapImgRestore()"><img 
src="Social Network Icons/facebook-up.png" alt="find us 
on facebook" name="facebook" width="24" height="24" 
border="0" id="facebook2" /></a></div>
<div id="twitter"><a href="http://www.twitter.com" 
target="_blank" onmouseover="MM_swapImage
('twitter','','Social Network Icons/twitter-
over.png',1)" onmouseout="MM_swapImgRestore()"><img 
src="Social Network Icons/twitter-up.png" alt="follow 
us on twitter" name="twitter" width="24" height="24" 
border="0" id="twitter2" /></a></div>
</div>
</div>

</body>
</html>

Check errors here http://validator.w3.org/

Edited February 21, 201214 yr by Wickham

February 22, 201214 yr

Author

This works to put a fixed header and footer and centered content, but there are still lots of errors which I haven't edited (CSS is in a head section tag but you should put it in a separate stylesheet):-

Thanks so much, it wasn't exactly what I was looking for but I tweaked it and now have it spot on! : ) I had meant to put the css in a stylesheet and will be checking things with the Firefox developers toolbar W3C add-on...

Cheers

Fixed header/footer issue

Featured Replies

Create an account or sign in to comment

Recently Browsing 0

Member Statistics

Forum Statistics

Join WDF

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)