hi, this is (im pretty sure) the 2 last problems with my website, then im done. . its this one web page. i cant get the blue gradient background of #newcontainer, to go all the way down in the browser. it stops short. also, in firefox, i get a gray bar across the top of the browser, i cant figure out how to get rid of it. any help greatly appreciated. derek
here is the problem web page.
http://derekvanderven.com/new_geek_h...ta_backup.html
here is the css
Code:
@charset "utf-8";
/* CSS Document */
body {
margin: 0; /* clear for browsers */
padding: 0;
background-color: #333333;
}
#container {
background-image: url(gradient.gif);
background-repeat:repeat-x;
margin:0 auto;
width: 100%;
height: 850px;
}
#centered {
position: relative;
margin: 0 auto; /* centers page*/
width: 795px;
height: 850px;
background-color: #000000;
}
#header {
background-image: url(geek_header.gif);
background-repeat:no-repeat;
width: 795px;
height: 167px;
}
#geektitle {
margin-top: 30px;
margin-left: 220px;
text-align: center;
width: 300px;
height: 50px;
color: #FF0000;
font-weight: bold;
font-size: xx-large;
}
#navigation {
width: 795;
height: 27px;
}
#flash {
width: 795 px;
height: 248px;
background-color: #ffffff;
}
#navgroup {
width: 795px;
height: 146px;
}
#homecontent {
color: #FFFFFF;
width: auto; /* used auto so text doesnt pop out of div */
padding-top: 0;
padding-bottom: 0;
padding-left: 1em;
padding-right: 1em;
}
p {
font-family: Geneva, Arial, Helvetica, sans-serif;
}
#footer {
margin:2em auto 0 auto;
width: 400px;
height: 50px;
text-align: center;
color: #999999;
}
/*span.page p a {
color: red;
} */
/*************************************************************************/
/*****************************************DROPDOWN MENU CODE********/
/*
Title: Vertical CSS menu with a behavior file.
Author: Stefan Vervoort
Blog: http://www.divitodesign.com/blog/
Article: http://www.divitodesign.com/blog/2008/01/vertical-css-menu-with-a-behavior-file/
*/
body {
behavior: url(csshover.htc);
}
p a {
color: #990000; /* made the link text red again */
text-decoration:none;!important;
font-size:20px; /*change size of nav and dropdown text*/
font-family:Arial, Helvetica, sans-serif;
}
a{
color:#fff;
text-decoration:none; /* text color */
}
p a:hover{ text-decoration: none!important;
}
ul#nav {
list-style: none;
padding: 0;
margin: 0;
}
ul#nav li a {
display: block;
font-weight: bold; /*background color */
padding: 2px 10px;
background-color: #666666;
}
ul#nav li a:hover{
color:#fff; /* text hover */
background-color: #990000;
}
ul#nav li {
float: left;
position: relative;
width: 196px; /* change width of boxes */
text-align: center;
margin-right:0px;
border:1px solid #ccc;
background-color: #990000;
}
ul#nav li.current a{
background-color: #666666; /* fixed the home red button to gray */
}
ul#nav li.current a:hover{
background:#990000; /* background hover */
}
li ul {
display: none;
position: absolute;
width:150px; /* width of dropdown menu */
top: 0;
left: 0;
font-weight: normal;
padding: 1px 0 10px 0;
margin-left:-1px;
}
ul#nav li ul.sub li{
border-width:0 1px 1px 1px!important;
}
ul#nav li ul.sub li a{
font-weight: normal!important;
}
li>ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul {
display: block;
}
ul.sub { /* got rid of bullets in firefox */
list-style: none ;
}
and here is the html with my new container that wont go all the way down.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="geek.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>data backup</title>
<style type="text/css">
#newcontainer {
background-image: url(gradient.gif);
background-repeat:repeat-x;
margin:0 auto 0 auto;
width: 100%;
height: 1250px;
}
#centered {
position: relative;
margin: 0 auto; /* centers page*/
width: 795px;
height: 1250px;
background-color: #000000;
}
</style>
</head>
<body>
<div id="newcontainer">
<div id= "centered">
<div id= "header"> <div id="geektitle"> GEEK HELP</div>
<!-- end geektitle --></div> <!-- end geek header -->
<div id="navigation"><ul id="nav">
<li class="current"><a href="home.html" title="Home">Home</a></li>
<li><a href="#" title="Services">Services</a>
<ul class="sub">
<li><a href="desktop_support.html" title="Services > Desktop Suppport">Desktop Support</a></li>
<li><a href="laptop_support.html" title="Services > Laptop Suppport">Laptop Support</a></li>
<li><a href="mobile_device.html" title="Services > Mobile Device Support ">Mobile Device Support</a></li>
<li><a href="network_support.html" title="Services > Network Support">Network Support</a></li>
<li><a href="defragmentation.html" title="Services > Defragmentation">Defragmentation</a></li>
<li><a href="data_backup.html" title="Services > Data Backup and Recovery">Data Backup and Recovery</a></li>
<li><a href="virus_protection.html" title="Services > Virus Protection">Virus Protection</a></li>
<li><a href="malware.html" title="Services > Malware/Spyware Protection">Malware/Spyware Protection</a></li>
<li><a href="service_agreements.html" title="Services > Service Agreements">Service Agreements</a></li>
</ul>
</li>
<li><a href="staff.html" title="meet our staff">Meet Our Staff</a>
<!--<ul class="sub" >
<li><a href="#" title="Services > Themes">Themes</a></li>
<li><a href="#" title="Services > Plugins">Plugins</a></li>
</ul>
</li> --><!-- unneeded dropdown for this button -->
<li><a href="contact.html" title="Contact">Contact</a></li>
</ul> </div>
<img src="data_backup.gif" width="795" height="247" />
<div id="homecontent">
<h1>Data Backup and Recovery</h1>
<p>Nobody wants to lose a lifetime’s worth of work when a power surge fries the hard drive. Nobody wants to explain to the boss that they’ve just accidentally overwritten a month’s worth of spreadsheets with an errant mouse click. Nobody wants to have to decide whether to save the computer or the family album when there’s a house fire. Geek-Help™ makes sure nobody has to.</p>
<p>Geek-Help™ takes a two-pronged approach to keeping your data safe from anything that can happen: Backup and Recovery.</p>
<h2>Back it up</h2>
<p>The first prong is data backup. In short, making a copy of your information and storing it somewhere safe. There are two ways to do it: on-site and offsite. Onsite backups are the obvious choice: save everything to disks or portable hard drives and keep them somewhere safe. There are two problems with this approach: firstly, the storage begins to stack up after awhile. Secondly, and more importantly, having the physical storage in the same place as the computer means it’s just as vulnerable to fire, flood and human error as no backup at all.</p>
<p>For this reason, Geek-Help™ prefers offsite backups. The technology is simple and secure: once installed the software does all of the work. The encryption that our software is held to the same high standards used by major e-commerce sites, so you’re safe from thieves and hackers. </p>
<h2>Back from Oblivion</h2>
<p>But sometimes backing up isn’t enough. What if the computer that died wasn’t connected to the offsite server? That’s when the second prong comes in. Geek-Help’s staff is trained to analyze hard drives and salvage whatever data can be recovered. </p>
<p>Data recovery is your last resort, and results are sometimes mixed, but if anything can be salvaged and not always completely effective. Therefore, you’ll want to keep it from being a regular occurrence. The best way to keep from having to recover data is to keep your system well maintained. Geek-Help™ offers a variety of service agreements for nearly any system and budget. </p>
<p>To discuss how Geek-Help™ can recover your lost data, or keep you from losing it in the first place </p>
<p><a href="mailto:derekpainter1@hotmail.com">contact us today</a>. </p>
</div> <!-- end homecontent -->
<div id="footer"> Web Design by Derekvanderven.com © 2009</div>
</div>
<!-- end centered-->
</div>
<!-- end container -->
</body>
</html>
Last edited by silverglade; 01-13-2009 at 04:10 PM..
|
