Menu
My problem is the footer won’t stay at the bottom of the page.
I did try adding height:100% to the body of the css code, but no luck.
The page is at: [url]http://dustbear.awardspace.com/
If you have Firebug or something similar, you can view the css code.
I’d really appreciate any tips.
[CODE]#sidecontainer {
[COLOR="Red"]float:left[/COLOR];
margin: 0px;
[COLOR="Red"]width: 210px[/COLOR];
height: auto;
padding: 1em 0;
font: 12px Verdana, sans-serif;
text-align: center;
}[/CODE] Note I also changed the width spec - the % width causes the menu to be too narrow for text on smaller screens.My problem is the footer won't stay at the bottom of the page.
I did try adding height:100% to the body of the css code, but no luck.
The page is at:http://dustbear.awardspace.com/
If you have Firebug or something similar, you can view the css code.
I'd really appreciate any tips.[/QUOTE]
body, html{height:100%}[/QUOTE]first, but the footer didn't move down.?
[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" type="text/css" media="screen, print, handheld">
<title>Car Stuff Just For Girls</title>
<meta name="Description" content="How to maintain your car or truck for as long as you own it. For girls of
all ages; girls who drive a car or truck. It is not how to change the oil, it's knowing when to change it
that's important. A useful place to find out more about your car. Definitions, parts, schedules and the
owner's manual. To provide information about the vehicle you own, so you can make an informed decision about
maintaining it. This website is for girls who drive a car and want it to last longer and run efficiently.">
</head>
<body>
<div id="wrapper">
<h1>Car Stuff Just For Girls</h1>
<ul id="navcontainer">
<li><a href="index.html" class="current">Home</a></li>
<li><a href="sitemap.html">Sitemap</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="guestbook.html">Guestbook</a></li>
<li><a href="abtus.html">About Us</a></li>
</ul>
<ul id="navlist">
<li id="active"><a href="maintmain.html" id="current" title="schedules,checklist,owner's manual">Maintenance</a></li>
<li><a href="glossarymain.html" title="abbreviations,definitions,labels">Glossary</a></li>
<li><a href="partinfomain.html" title="how to change a car tire,wiper blades...">Part Information</a></li>
<li><a href="engmain.html" title="fluids,filters,hoses">The Engine</a></li>
<li><a href="shop/shopmain.html" title="repairs,work orders,second opinions">Shops</a></li>
<li><a href="safemain.html" title="car checklist what to carry">Safety</a></li>
<li><a href="diduknowmain.html" title="statistics,how your car is put together">Did you know</a></li>
<li><a href="moremain.html" title="recalls,used car purchase checklist">More...</a></li>
</ul>
<div id="content">
<h2>Objective of this Web site:</h2>
<ul>
<li>To show you what your car needs to be maintained properly</li>
<li>To plan a maintenance schedule</li>
<li>To understand the information provided with each car and truck</li>
<li>Checking of fluid levels</li>
</ul>
</div>
</div>
<div id="footer">
Copyright © Carstuffjustforgirls2004
</div>
</body>
</html>[/CODE][CODE]/* body styles */
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body
{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color: #fff;
color: #000088;
}
#wrapper {
min-height: 100%;
}
* html #wrapper {
height: 100%;
}
/*header styles */
h1 {
display: block;
height: 113px;
font-size: 1px;
text-indent: -1000px;
background-image: url(logo.jpg);
background-repeat: no-repeat;
background-position: 6px 10px;
}
/* content styles */
#content
{
position:relative;
background: #fff;
color: #000088;
margin-left: 235px;
margin-right: 20px;
padding: 15px 15px 30px 5px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 15px;
text-align:justify;
}
#content h2 {
font-size: 30px;
margin: 1ex 0;
}
#content ul {
text-indent: 20px;
list-style-position: inside;
}
a img{border:none;}
.left
{
float: left;
clear: both;
}
/* partglossary content styles*/
/* sidecontainer styles */
#sidecontainer
{
float:left;
margin: 0px;
width: 210px;
height: auto;
padding: 1em 0;
font: 12px Verdana, sans-serif;
text-align: center;
}
#navlist
{
text-align: left;
list-style: none;
margin: 15px 0 0 30px;
float: left;
display: inline;
}
#navlist li
{
display: inline;
}
#navlist a
{
display: block;
padding: 0.5em 0 0.5em 2em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #448;
text-decoration: none;
background: #dde;
width: 10em;
font: 12px Verdana, sans-serif;
}
#navlist #active a
{
color: #448;
}
#navlist a:hover, #navlist #active a:hover
{
color: #448;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}
/* tabbed styles */
#navcontainer {
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
padding-left: 200px;
height: 21px;
overflow: visible;
}
#navcontainer li {
list-style: none;
display: inline;
}
#navcontainer a {
padding: 0 0.5em;
margin-left: 3px;
border: 1px solid #778;
background: #DDE;
text-decoration: none;
display: block;
height: 20px;
line-height: 20px;
float: left;
}
* html #navcontainer a {
border-bottom: 0;
}
#navcontainer a:link {color: #448;}
#navcontainer a:visited {color: #667;}
#navcontainer a:hover {color: #000; background: #AAE; border-color: #227;}
#navcontainer .current, #navcontainer .current:hover {
border-bottom-color: #DDE;
background-color: #DDE;
}
/* footer styles */
#footer
{
clear: both;
width: 95%;
text-align: left;
padding: 5px 0 0 5px;
border-top: 1px dashed #778;
color: #000088;
background: #fff;
font-size: 8px;
height: 20px;
margin: -26px auto 0;
}
[/CODE][CODE]<h1>Car Stuff Just For Girls - Home Page</h1>
<a href="index.html" title="back to the Site Home Page" id="homelink">Home page link</a>[/CODE]I changed the <h1> text to label the actual page better - this can be different for each page and have no effect on the graphic displayed in its place. The link has actual text for the benefit of non-visual browsers, and a title lets the user know what the link is when they mouse over the logo.[CODE]h1 {
display: block;
height: 123px;
font-size: 1px;
text-indent: -1000px;
background-image: url(logo.jpg);
background-repeat: no-repeat;
background-position: 10px 5px;
}
#homelink {
position: absolute;
top: 5px;
left: 10px;
width: 161px;
height: 113px;
font-size: 1px;
color: #03076B;
}[/CODE]Here the link is absolutely positioned over top of the logo graphic - the location being set by the top and left co-ordinates, and the width and height matches the logo graphic (or part section of the graphic if desired). The text treatment shows another method of hiding the link text - reducing it to 1px high and then colouring it to match the background colour. Negative text indent can be used to hide it if you prefer - your choice. This then puts a transparent link "box" over top of the h1 graphic, and can be positioned and sized to only link a smaller area of the graphic if you like.[CODE]#homelink {
position: absolute;
top: 0;
left: 0;
width: 161px;
height: 113px;
font-size: 1px;
color: #03076B;
}[/CODE][CODE]#footer
{
clear: both;
text-align: left;
padding: 5px 0 0 5px;
border-top: 1px dashed #778;
color: #000088;
font-size: 8px;
height: 20px;
margin: -26px auto 0;
}[/CODE][CODE] <h1>Car Stuff Just For Girls</h1>
<a href="index.html" title="back to the Site Home Page" id="homelink">Home page link</a>
<ul id="navcontainer">
<li><a href="index.html" class="current">Home</a></li>
<li><a href="sitemap.html">Sitemap</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="guestbook.html">Guestbook</a></li>
<li><a href="abtus.html">About Us</a></li>
</ul>
<ul id="navlist">
<li id="active"><a href="maintmain.html" id="current" title="schedules,checklist,owner's manual">Maintenance</a></li>
<li><a href="glossarymain.html" title="abbreviations,definitions,labels">Glossary</a></li>
<li><a href="partinfomain.html" title="how to change a car tire,wiper blades...">Part Information</a></li>
<li><a href="engmain.html" title="fluids,filters,hoses">The Engine</a></li>
<li><a href="shop/shopmain.html" title="repairs,work orders,second opinions">Shops</a></li>
<li><a href="safemain.html" title="car checklist what to carry">Safety</a></li>
<li><a href="diduknowmain.html" title="statistics,how your car is put together">Did you know</a></li>
<li><a href="moremain.html" title="recalls,used car purchase checklist">More...</a></li>
</ul>[/CODE]can be clipped out of the main file and put into a separate file named, say, "menus.html", and this file included in each page. This separate file should include [B]ONLY[/B] the clipped code, no doctype, no html, head or body tags, [B]just[/B] the code. If your server supports php, then the external file can be included by using [CODE]<?php include('menus.html'); ?>[/CODE] in the pages at the location the code was cut from. The pages will then have to be renamed with .php file extensions instead of .html (and the links in the menu itself will have to be updated to use .php file extensions). For local testing you have have to install a web server locally on your computer (I use [CODE]http://localhost/foldername/pagename[/CODE]0.1.9 — BETA 5.19