1
not an expert coder so need desperate help here.
I have constructed my website so it looks exactly as i want it to except because of teh way i've done it it leaves a big empty space at the bottom after the footer.
I have a transparent band that goes the whole screen width and need the container to go under it so the images i will place in header will be under this band and have the bands transparency over the top of the image, but i also need a div over the band and the container the same height as the band that has other info and links and logo in it. so i have created negative top position in relative and z-index to make it work, of clourse this leaves an equivalent empty space at bottom of page.
how to get rid of this?
i'm creating this in dreamweaver to transpose into joomla after which is why all my divs are just colors as they will become modules in joomla. my site will be extensive with hundreds of pages.
here is html followed by css
thank you for any help
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Australia's Great South interior redone</title>
<style type="text/css">
</style>
<link href="css/interior.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css"></style>
</head>
<body text="#333333" link="#f05a28" vlink="#660099" alink="#f05a28" >
<div class="page">
<div id="header-top-green">header top green</div>
<div id="header-top-links">
<div id="header-logo"><!-- end logo --></div>
<div id="header-search">
<div id="search-box">
<form action="">
<input type="text" class="searchbox" name="s" value="" />
<input type="image" src="img/go.gif" width="197" height="22" class="searchbox_submit" value="" />
</form>
<!-- end search-box --></div>
<div id="mobile-device"><!-- end mobile-device --></div>
<div id="languages"><!-- endlanguages --></div>
<div id="custom-tours"><!-- end custom-tours --></div>
<!-- end header-search --></div>
<!-- end header-top-links --></div>
<div id="container">
<div id="header">
<div id="header-menu">header-menu</div>
<div id="header-img-legend">header img legend</div>
<div id="header-title">header title</div>
<!-- end header --></div>
<div id="sidebar1">
<div id="map">map</div>
<div id="title-map">TITLE</div>
<div id="img-top-left">img top left</div>
<div id="town-links-container">town links container</div>
<div id="parks-links">parks-links</div>
<div id="img-bottom-left">img bottom left</div>
<!-- end sidebar1 --></div>
<div id="content">
<div id="breadcrumbs">breadcrumbs</div>
<div id="search-site">search-site</div>
<!-- end content --></div>
<div id="sidebar2">
<div id="follow-us">follow us<!-- end follow-us --></div>
<div id="img-top-right">img-top-right</div>
<div id="weather">weather</div>
<div id="newsletter">newsletter</div>
<div id="img-middle-right">img-middle-right</div>
<div id="img-bottom-right">img-bottom-right</div>
<!-- end sidebar2 --></div>
<!-- end container --></div>
<!-- end page --></div>
<div id="footer">
<div id="footer-top">
<div id="footer-img-container"><!-- end footer-img-container --></div>
<!-- end footer-top --></div>
<div id="footer-bottom"></div>
<!-- end footer --></div>
</body>
</html>
/* ~~ ags-interior redone ~~ */
@charset "utf-8";
a img {
border: none;
}
*{
padding: 0;
margin: 0;
}
html,body {
height: 100%;
background-image: url(../img/screen-bgd.jpg);
background-repeat: repeat;
margin: 0px;
padding: 0px;
}
.page {
height:auto !important;
height: 100%;
min-height: 100%;
margin: 0 auto -304px;
}
#header-top-green {
background-color: #545e3b;
filter:alpha(opacity=65);
opacity:0.8;
-moz-opacity:0.8;
box-shadow: 0 4px 4px -2px #333;
-moz-box-shadow: 0 4px 20px 0px #333;
-webkit-box-shadow: 0 4px 20px 0px #333;
margin: 0px;
padding: 0px;
z-index: 2;
height: 152px;
position: relative;
}
#header-top-links {
z-index: 4;
width: 950px;
margin: auto;
top: -152px;
position: relative;
}
#header-logo {
float: left;
height: 152px;
width: 255px;
background-color: #FC0;
background-repeat: no-repeat;
}
#header-search {
float: left;
height: 152px;
width: 695px;
bottom: 152px;
}
#search-box {
float: left;
height: 22px;
width: 197px;
margin-top: 19px;
margin-left: 292px;
background-image: url(../img/search-go.gif);
background-repeat: no-repeat;
}
#search-box form {
display:inline ;
}
.searchbox {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:20px;
left:550px;
width:160px;
height:20px;
}
.searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:20px;
left:717px;
width:25px;
height:20px;
}
#mobile-device {
background-repeat: no-repeat;
float: left;
height: 22px;
width: 151px;
margin-top: 15px;
margin-left: 15px;
background-color: #FC0;
}
#languages {
background-color: #96F;
background-repeat: no-repeat;
float: left;
height: 22px;
width: 197px;
margin-top: 19px;
margin-left: 292px;
}
#custom-tours {
background-repeat: no-repeat;
float: left;
height: 22px;
width: 151px;
margin-top: 19px;
margin-left: 15px;
background-color: #0CC;
}
#container {
background-color: #000;
width: 950px;
margin-top: 0%;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
display: table;
top: -304px;
position: relative;
height: 100%;
}
#header {
width: 950px;
background-color: #F30;
padding-top: 152px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-image: url(../img/img-header.jpg);
background-repeat: no-repeat;
height: 303px;
}
#header-menu {
height: 182px;
width: 184px;
padding-top: 18px;
padding-bottom: 12px;
background-color: #09F;
}
#header-img-legend {
opacity:0.8;
filter:alpha(opacity=65);
height: 36px;
width: 950px;
background-color: #545e3b;
}
#header-title {
height: 55px;
box-shadow: 0 4px 4px -2px #333;
-moz-box-shadow: 0 4px 20px 0px #333;
-webkit-box-shadow: 0 4px 20px 0px #333;
width: 950px;
background-color: #090;
}
#sidebar1 {
width: 346px;
padding-top: 10px;
background-color: #FF0;
z-index: 7;
float: left;
}
#map {
background-color: #999;
width: 346px;
}
#title-map {
background-color: #5f3713;
width: 346px;
margin-top: 2px;
}
#img-top-left {
margin-top: 2px;
background-color: #939;
width: 346px;
}
#town-links-container {
background-color: #70703d;
width: 346px;
margin-top: 2px;
}
#parks-links {
background-color: #405f2d;
width: 346px;
margin-top: 2px;
}
#img-bottom-left {
margin-top: 2px;
background-color: #360;
width: 346px;
}
#content {
width: 400px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
background-color: #C3F;
float: left;
}
#breadcrumbs {
background-color: #660;
width: 400px;
}
#search-site {
background-color: #069;
width: 400px;
margin-top: 10px;
}
#sidebar2 {
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
width: 204px;
background-color: #F90;
float: left;
}
#follow-us {
background-color: #933;
width: 204px;
}
#img-top-right {
margin-top: 17px;
width: 204px;
background-color: #060;
}
#weather {
margin-top: 17px;
background-color: #0C9;
width: 204px;
}
#newsletter {
background-repeat: no-repeat;
margin-top: 17px;
background-color: #09C;
width: 204px;
}
#img-middle-right {
margin-top: 17px;
background-color: #936;
width: 204px;
}
#img-bottom-right {
margin-top: 17px;
width: 204px;
background-color: #F69;
height: 600px;
}
.push {
height: -190px;
background-color: #FFF;
}
#footer {
z-index: 3;
margin: 0px;
padding: 0px;
filter:alpha(opacity=65);
opacity:0.8;
-moz-opacity:0.8;
}
#footer-top {
background-color: #545e3b;
position: relative;
height: 73px;
z-index: 3;
box-shadow: 0 4px 4px -2px #333;
-moz-box-shadow: 0 4px 20px 0px #333;
-webkit-box-shadow: 0 4px 20px 0px #333;
margin: 0px;
padding: 0px;
}
#footer-img-container {
margin: auto;
width: 950px;
padding: 0px;
background-color: #06F;
}
#footer-bottom {
position: relative;
background-image: url(../img/img-home/footer-bottom.jpg);
background-repeat: no-repeat;
width: 950px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 36px;
}
