 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
quartzy
Joined: 26 Dec 2007
Posts: 405
|
 Posted: Wed Feb 27, 2008 5:14 am footer had misplaced itself |
 |
|
|
I have a site that the footer, does not align down the bottom, this site was finished but now it is causing me problems, cannot figure out why it is doing this. The footer is putting itself in the main div. I had the css optimised and I think its caused me more problems than before. Also the header is showing the link colour around iteself. Here is the css
| Code: |
html {height: 100%;}
* {margin: 0; padding: 0;}
body {background-image: url('images/bgstripe.jpg'); repeat: no-repeat; font-size:.88em; font-family:helvicta, sans-serif;height: auto;text-align: center;}
#container {height: 100%;padding: 0;background: #fff; text-align: left; border: 2px solid #fff; margin: 5px auto; width: 750px;
height: auto;}
#header {margin: 0;padding: 0;width: 750px; background: url('images/stripe.gif') repeat; height: 113px;}
#date { padding: 0; color: #666;font-style: italic;font-size: 0.75em;height: 17px; width: 156px;margin: 0;float: right;}
#search {margin-left: 2px;margin-bottom: 5px;}
.vmenu {font: bold 12px Verdana;}
.vmenu ul {padding: 0; background: white url('images/indentbg.gif') repeat-x center;.margin: 0;float: right;}
.vmenu ul {width: 750px;}
.vmenu ul li {display: inline; display: block;}
.vmenu ul li a {color: #666666; text-transform: uppercase; padding: 4px 8px;border-right: 1px solid #666666;float: right;text-decoration: none;}
.vmenu ul li a:visited {color: #666;}
.vmenu ul li a:hover {color: gray; background: white; padding-top: 5px; padding-bottom: 5px; text-decoration: none;}
height: 100%; color: #000;text-align: center;}
#footer {text-align: center; background-color: #ECECFF; height: 40px; font-size: 0.66em; clear:both;}
#footer p {padding-top: 10px;}
#menu a {color: #666;font-size: 0.75em;margin: 0;}
#menu {background: no-repeat 2.0em 50%; list-style-image: url('images/arrow.gif'); padding-left: 20px;margin: 0;width: 100%;}
#menu a {border-bottom: 1px solid #3c9; padding: 3px; font-weight: normal; display: block;}
#menu a:hover {color: #666; text-decoration: none;background: #ebebeb;}
size: 0.75em;font-style: italic;}
#content {margin-top: 5px;width: 100%;}
#navigation {width: 137px;float: left;margin-top: 5px;margin-left: 2px;}
#centercontent {width: 435px; margin: 35px 5px 0 10px; padding: 0 0 0 5px;float: left;height: 1%;display: inline;}
#rightcontent { background: url('images/longbox.gif') no-repeat; width: 127px; height: 1020px; margin: 2px;float: right;}
#rightcontent2 {width: 121px; height: 1020px; margin-top: 24px;border: 1px solid #3c9; padding: 2px;font-size: 0.75em;}
#smallbox2 {width: 122px; height: 691px; margin-top: 25px;border: 1px solid #3c9; padding: 2px;font-size: 0.75em;}
#smallbox {background: url('images/smallbox.gif') no-repeat top center; width: 128px;height: 720px;float: left;margin: 7px;}
#rightarea {margin: 7px;float: left;width: 130px;height: 1%;display: inline;}
#leftarea {margin: 5px; float: left; width: 130px;position: relative;}
#rightareasecond {margin: 5px;width: 165px;float: left;}
#leftareasecond {width: 165px;margin: 5px;float: left;}
#centerarea {width: 128px;margin: 5px;float: left;}
ul {list-style-type: none;}
a:link {text-decoration: none;color: #666699; font-weight: bold;}
a:active {text-decoration: none;}
a:visited {text-decoration: none;color: #666;}
a:hover {text-decoration: none;}
ol.links {list-style-type: none;}
#form {background: #f8f8f8; padding: 30px;}
h1 {text-decoration: none; padding-bottom: 0; margin-bottom: 0;}
h2 {font-size: 1.50em; color: #666699;
hr {1px solid #666699; margin: 10px;}
h3 {color: #14523e; font-size: 1.00em;}
img {border: none;}
img.floatcenter {margin-left: 150px;}
img.floatright {margin: 10px;float: right;}
img.floatleft {float: left;margin: 10px;}
img.decoration {text-decoration: none;}
img.center {margin-left: 13px;}
p.blue {color: blue;}
p.search {padding-top: 0; padding-bottom: 0;}
p.heading {font: 0.88em arial; background: #9cf; width: 200px;}
p.textindent {font: 0.75em arial;text-indent: 15px;}
p.shaded {font: 0.75em arial;background: #bfdfff;}
p.text {font: 0.75em arial;}
p.right {float: right;}p.heading {text-align: center;}
p.donate {text-align: center; padding: 0;}
p { margin-bottom: 10px;}
ol.paragraph {font: 0.75em arial;list-style-type: decimal; padding: 15px;margin: 10px;}
table.text {font-size: 0.88em;}
.odd {background: #EEE;}
.listing {color: #000; background: #f4f4f4; list-style-position: inside;width: 380px; list-style-type: square; padding-left: 5px;margin: 10px;}
.desktoplist {color: #000;background: #f4f4f4; list-style-position: inside;padding: 5px; list-style-type: circle;}
.tutorials {list-style-type: none;background: #f4f4f4;} |
|
|
quartzy
Joined: 26 Dec 2007
Posts: 405
|
| Posted: Wed Feb 27, 2008 5:16 am re |
|
|
|
an example of one of the pages.
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="Content-Language" content="en-gb">
<meta name="ROBOTS" content="NOARCHIVE">
<meta name="keywords" content="access information">
<meta name="description" content="Access information">
<title>Access information</title>
<link rel="stylesheet" type="text/css" href="stylessheet.css">
<link rel="shortcut icon" href="/images/favicon.ico">
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="http://www.bytesizeoffice.co.uk">
<img src="images/logo.gif" width="300" height="90" alt="bytesizeoffice/logo"></a></h1>
<div class="vmenu">
<ul>
<li><a href="sitemap.htm">sitemap</a></li>
<li><a href="privacy.htm">privacy</a></li>
<li><a href="about.htm">about</a></li>
<li><a href="vassistant.htm">v.assistant</a></li>
<li><a href="tutorials.htm">tutorials</a></li>
<li><a href="contacts.htm">contacts</a></li>
<li><a href="index.htm">home</a></li>
</ul>
</div>
</div>
<div id="date">
<script type="text/javascript"><!--
var now = new Date(); var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
var months = new Array('January','February','March','April','May','June','July','August','September',
'October','November','December'); var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
function fourdigits(number) { return (number < 1000) ? number + 1900 : number;
}today = days[now.getDay()] + ", " + months[now.getMonth()] + " " +
date + ", " + (fourdigits(now.getYear())) ; document.write(today);
//--></script>
</div>
<div id="navigation">
<div id="search">
<p class="search"></p>
<form action="http://www.google.com/cse" id="searchbox_003119959939038504956:xrke8d9eiyi">
<p class="search">
<input type="hidden" name="cx" value="003119959939038504956:xrke8d9eiyi">
</p>
<p class="search"><input type="text" name="q" size="20"></p>
<p class="search"><input type="submit" name="sa" value="Search"><img src="images/search.gif" width="20" height="20" alt="image of search icon"></p>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_003119959939038504956%3Axrke8d9eiyi〈=en"></script>
</div>
<ol id="menu">
<li><a href="tutorials.htm">tutorials</a></li>
<li><a href="shortcuts.htm">shortcut keys</a></li>
<li><a href="office.htm">about office </a></li>
<li><a href="vassistant.htm">virtual assistant</a></li>
<li><a href="desktop.htm">desktop publishing</a></li>
<li><a href="wordprocessing.htm">word processing</a></li>
<li><a href="spreadsheets.htm">spreadsheets</a></li>
<li><a href="presentationer.htm">presentations</a></li>
<li><a href="webdesign.htm">web design</a></li>
<li><a href="blog.htm">blog articles</a></li>
<li><a href="careers.htm">career links</a></li>
<li><a href="reviews.htm">reviews</a></li>
</ol>
<div id="smallbox">
<div id="smallbox2">
<p><a href="accesssc.htm">Access Shortcut Keys</a><br>
<a href="access2000.htm">Access Tutorials</a></p>
<p>
<img src="images/j0422593.jpg" alt="image of students and teacher on PC's" width="113" height="76"></p>
</div>
</div>
</div>
<div id="centercontent">
<h2>Access Information</h2>
<p>Access is a Relational Database, it is a tool for collecting and organising
information. For Business or Personal uses. </p>
<p>A Database contains Tables, Forms, Reports, Macros and Modules. Databases
have the file extension .mdb but the
<img class="floatleft" src="images/typist.gif" alt="image of a typist" width="100" height="75">newer
Office 2007 version has filenames .accdb. You can Query a Database to gain
information from it, you can also use Macros and Modules for the same purpose.
</p>
<p>Access is a very powerful and complete application with data retrieval
that is virtually foolproof. Because it is a Relational Database, you only
need to update in one place. This makes it ideal for Complex Management
Inventories yet it can also be used for a Simple Contacts </p>
<p>Access can be used as a Web Based Database, SQL or ASP as long as they
are ODBC Compliant. Access can work well with other applications.</p>
<p>The first version of Access was Access 1.1 for Windows in 1992</p>
<p>Information source <a href="http://www.wikipedia.com">Wikipedia</a></p>
<p>
<img class="floatleft" src="images/office2007_icon_access.jpg" alt="** MS Office 2007 logo **" width="50" height="50">Access
2007 New Icon</p>
<script type="text/javascript">
var sid = '9487';
var title_color = '000000';
var description_color = '646360';
var link_color = '7FBE00';
var background_color = 'FFFFFF';
var border_color = '646360';
</script>
<script type="text/javascript" src="http://www.mediagridwork.com/mx.js"></script>
</div>
<div id="rightcontent">
<div id="rightcontent2">
CTRL D to Bookmark
<a href="http://www.addthis.com/bookmark.php" onclick="addthis_url = location.href; addthis_title = document.title; return addthis_click(this);" name="target_url">
<img src="http://s9.addthis.com/button1-bm.gif" style="border: medium none;" alt="AddThis Social Bookmark Button" height="16" width="125"></a>
<script type="text/javascript">var addthis_pub = 'quartzy';</script>
<script type="text/javascript" src="http://s9.addthis.com/js/widget.php?v=10">
</script>
<script type="text/javascript"><!--
amazon_ad_tag = "bytsizoff-21"; amazon_ad_width = "120"; amazon_ad_height = "600"; amazon_ad_logo = "hide"; amazon_color_border = "EEEEEE"; amazon_color_link = "3399CC";//--></script>
<script type="text/javascript" src="http://www.assoc-amazon.co.uk/s/ads.js">
</script>
</div>
</div>
<div id="footer">
<p>©bytesizeoffice.co.uk
<script type="text/javascript">
<!--
function y2k(number) { return (number < 1000) ? number + 1900 : number; }
var today = new Date();
var year = y2k(today.getYear());
document.write(''+year+' - All rights reserved');
//--></script>
<br>
Microsoft®Programs and Logos are registered trademarks of Microsoft® Corporation</p>
</div>
</div>
</body>
</html>
|
|
|
quartzy
Joined: 26 Dec 2007
Posts: 405
|
| Posted: Wed Feb 27, 2008 5:31 am re |
|
|
|
I ran it through the css validator and found some errors, which I worked on. Now my vertical navigation is in a mess.
| Code: |
.vmenu {font: bold 12px Verdana;}
.vmenu ul {padding: 0; margin: 0; background: white url('images/indentbg.gif') repeat-x center; float:right;}
.vmenu ul {width: 750px;}
.vmenu ul li {display: inline; display: block;}
.vmenu ul li a {color: #666666; text-transform: uppercase; padding: 4px 8px;border-right: 1px solid #666666; text-decoration: none;}
.vmenu ul li a:visited {color: #666;}
.vmenu ul li a:hover {color: gray; background: white; padding-top: 5px; padding-bottom: 5px; text-decoration: none;height: 100%; text-align: center;}
|
it is all jumbled up to the left. So I have done something wrong. |
|
quartzy
Joined: 26 Dec 2007
Posts: 405
|
| Posted: Wed Feb 27, 2008 11:04 am re |
|
|
|
| its all sorted now, copied the original stylessheet from the web. |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
