dillankid
03-21-2009, 07:05 PM
Here is the site that I need help with. (http://www.judahgraphics.com/dxm/ws/)
I'm trying to get a footer on the page but it's stuck at the very top (the blue bar with "DXM" on the right side.)
I know about the sticky footer and I tried to work that in as well but couldn't get it to work. What I'm trying to do is stick that at the bottom of the page, and have the two grey div's extend all the way down to the footer.
The html is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Digital XTreme Media</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="topimage"><a href="index.html"><div id="homeimage"></div></a></div>
<div id="menu"><img src="menu_r1_c1.jpg"><a href="bands.html"><img src="menu_r1_c2.jpg"></a><a href="models.html"><img src="menu_r1_c3.jpg"></a><a href="street.html"><img src="menu_r1_c4.jpg"></a><a href="store.html"><img src="menu_r1_c5.jpg"></a><a href="contact.html"><img src="menu_r1_c6.jpg"></a><img src="menu_r1_c7.jpg"></div>
<div id="featuredtable">
<p><img src="feat_btn.png"></p>
<p> Adrenaline Kid</p>
<p align="center"><img src="band.jpg"></p>
<p>Lorem ipsum *cut*</p>
<p><img src="divbar.jpg"></p>
<p><img src="event_btn.png"></p>
<p>Lorem ipsum *cut* </p>
<p>Ut wisi enim *cut* </p>
<p>Duis autem vel eum iriure *cut*</p>
</div>
<div id="newstable"><img src="news_btn.png">
<p>Lorem ipsum *cut*</p>
</div>
</div>
</div>
<div id="footer"><div id="footer1"></div><div id="footer2"></div><div id="footer3"></div>
</div>
</body>
</html>
And the CSS (with the footer in red, grey sections in orange: )
@charset "utf-8";
/* CSS Document */
body {
background:#FFFFFF;
background-image:url(bg.jpg);
background-repeat:repeat-y;
background-position:top;
margin:0;
padding:0;
height:100%;
}
a {
outline: none;
}
a img {
border:none;
}
/*Main Page Properties Begin Here*/
/*Container, This holds everything in the center of the page.*/
#container {
background: none;
width: 797px;
position: relative;
margin: 0 auto;
margin-top: 0px;
height:100%;
}
/*Top Image*/
#topimage {
background-image:url(topimage.jpg);
width:788px;
height:249px;
position:absolute;
margin:1 auto;
margin-left:2px;
margin-top:0px;
left:3px;
}
#homeimage {
width:565px;
height:50px;
position:absolute;
margin-top:0px;
margin-left:21px;
}
/*Menu Section*/
#menu {
position:absolute;
margin:0 auto;
margin-left:2px;
margin-top:248px;
width:788px;
height:39px;
left:3px;
}
/*Featured Artist Section*/
#featuredtable {
position:absolute;
background-color:#a5a5ad;
background-image:url(left_bgs.png);
background-position:top right;
background-repeat:repeat-y;
width:335px;
height:auto;
margin-top:286px;
margin-left:7px;
padding-left:23px;
padding-right:15px;
}
/*Events Section *IMPORTANT* -> (Currently not used, Events is included in the Featured Artist Section)*/
#eventstable {
position:absolute;
background-color:#a5a5ad;
background-image:url(left_bgs.png);
background-position:top right;
background-repeat:repeat-y;
width:375px;
height:auto;
margin-top:667px;
margin-left:5px;
padding-left:5px;
padding-right:5px;
}
/*News Section*/
#newstable {
position:absolute;
background-color:#a5a5ad;
background-image:url(news_bg.png);
background-position:top left;
background-repeat:repeat-y;
width:335px;
height:auto;
margin-top:286px;
margin-left:418px;
margin-bottom:0px;
padding-left:25px;
padding-right:15px;
padding-top:25px;
}
/*Main Page Properties End Here*/
/*Bands Page Properties Begin Here*/
/*Featured Band Section*/
#featuredband {
position:absolute;
background-color:#a5a5ad;
background-image:url(akid.jpg);
background-repeat:no-repeat;
width:788px;
height:331px;
margin-top:286px;
margin-left:5px;}
/*News Section*/
#bandlist {
position:absolute;
background-color:#a5a5ad;
background-image:url(bands_bg.png);
background-position:top left;
background-repeat:repeat-y;
width:738px;
height:auto;
margin-top:617px;
margin-left:5px;
margin-bottom:0px;
padding-left:38px;
padding-right:12px;
padding-top:10px;
}
.bandthumbnails {
-x-system-font:none;
background-color:#a5a5ad;
float:left;
font-family:Georgia,Times,Serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:202px;
line-height:22px;
margin:0 25px 15px 0;
text-align:center;
width:220px;
left: 23px;
top: 9px;
}
.bandthumbnails a.zepict {
background-position:left top;
background-repeat:no-repeat;
display:block;
height:180px;
margin:0;
width:220px;
}
/*Bands Page Properties End Here*/
/*Band Template Properties Begin Here*/
#bandtop {
position:absolute;
background-color:#a5a5ad;
width:788px;
height:331px;
margin-top:286px;
margin-left:5px;}
#bandbio {
position:absolute;
background-color:#a5a5ad;
background-image:url(bio_bg.png);
background-position:top right;
background-repeat:repeat-y;
width:245px;
height:auto;
margin-top:617px;
margin-left:5px;
padding-left:23px;
padding-right:15px;
}
/*News Section*/
#bandnews {
position:absolute;
background-color:#a5a5ad;
background-image:url(bandnews_bg.png);
background-position:top left;
background-repeat:repeat-y;
width:455px;
height:auto;
margin-top:617px;
margin-left:298px;
margin-bottom:0px;
padding-left:25px;
padding-right:15px;
padding-top:25px;
}
/*Band Template Properties End Here*/
/*Model Page Properties Begin Here*/
/*Featured Model Section*/
#featuredmodel {
position:absolute;
background-color:#a5a5ad;
background-image:url(featmodel.jpg);
background-repeat:no-repeat;
width:788px;
height:331px;
margin-top:286px;
margin-left:5px;}
/*Model List*/
#modellist {
position:absolute;
background-color:#a5a5ad;
background-image:url(bands_bg.png);
background-position:top left;
background-repeat:repeat-y;
width:738px;
height:auto;
margin-top:617px;
margin-left:5px;
margin-bottom:0px;
padding-left:38px;
padding-right:12px;
padding-top:10px;
}
.bandthumbnails {
-x-system-font:none;
background-color:#a5a5ad;
float:left;
font-family:Georgia,Times,Serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:202px;
line-height:22px;
margin:0 25px 15px 0;
text-align:center;
width:220px;
left: 23px;
top: 9px;
}
.bandthumbnails a.zepict {
background-position:left top;
background-repeat:no-repeat;
display:block;
height:180px;
margin:0;
width:220px;
}
/*Model Page Properties End Here*/
/*Model Template Properties Begin Here*/
/*Model Template Properties End Here*/
/*Street Team Template Properties Begin Here*/
/*Street Team Template Properties End Here*/
/*Store Template Properties Begin Here*/
/*Featured Band Section*/
#topitems {
position:absolute;
background-color:#a5a5ad;
background-image:url(newitem.jpg);
background-repeat:no-repeat;
width:788px;
height:331px;
margin-top:286px;
margin-left:5px;}
/*News Section*/
#itemlist {
position:absolute;
background-color:#a5a5ad;
background-image:url(bands_bg.png);
background-position:top left;
background-repeat:repeat-y;
width:738px;
height:auto;
margin-top:617px;
margin-left:5px;
margin-bottom:0px;
padding-left:38px;
padding-right:12px;
padding-top:10px;
}
.bandthumbnails {
-x-system-font:none;
background-color:#a5a5ad;
float:left;
font-family:Georgia,Times,Serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:202px;
line-height:22px;
margin:0 25px 15px 0;
text-align:center;
width:220px;
left: 23px;
top: 9px;
}
.bandthumbnails a.zepict {
background-position:left top;
background-repeat:no-repeat;
display:block;
height:180px;
margin:0;
width:220px;
}
/*Store Template Properties End Here*/
/*Contact Template Properties Begin Here*/
#contactpg {
position:absolute;
background-color:#a5a5ad;
background-image:url(bands_bg.png);
background-position:top left;
background-repeat:repeat-y;
width:738px;
height:auto;
margin-top:286px;
margin-left:5px;
margin-bottom:0px;
padding-left:38px;
padding-right:12px;
padding-top:10px;
}
/*Contact Template Properties End Here*/
/*Footer Begins Here*/
#footer {
background:none;
width: 879px;
height: 38px;
position:relative;
margin:0 auto;
bottom: 0px;
}
#footer1 {
background-image:url(footer_r1_c1.jpg);
width:710px;
height:38px;
float:left;
}
#footer2 {
background-image:url(footer_r1_c2.jpg);
width:104px;
height:38px;
float:left;
}
#footer3 {
background-image:url(footer_r1_c3.jpg);
width:60px;
height:38px;
float:left;
}
/*Footer Ends Here*/
Thanks for any help...
I'm trying to get a footer on the page but it's stuck at the very top (the blue bar with "DXM" on the right side.)
I know about the sticky footer and I tried to work that in as well but couldn't get it to work. What I'm trying to do is stick that at the bottom of the page, and have the two grey div's extend all the way down to the footer.
The html is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Digital XTreme Media</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="topimage"><a href="index.html"><div id="homeimage"></div></a></div>
<div id="menu"><img src="menu_r1_c1.jpg"><a href="bands.html"><img src="menu_r1_c2.jpg"></a><a href="models.html"><img src="menu_r1_c3.jpg"></a><a href="street.html"><img src="menu_r1_c4.jpg"></a><a href="store.html"><img src="menu_r1_c5.jpg"></a><a href="contact.html"><img src="menu_r1_c6.jpg"></a><img src="menu_r1_c7.jpg"></div>
<div id="featuredtable">
<p><img src="feat_btn.png"></p>
<p> Adrenaline Kid</p>
<p align="center"><img src="band.jpg"></p>
<p>Lorem ipsum *cut*</p>
<p><img src="divbar.jpg"></p>
<p><img src="event_btn.png"></p>
<p>Lorem ipsum *cut* </p>
<p>Ut wisi enim *cut* </p>
<p>Duis autem vel eum iriure *cut*</p>
</div>
<div id="newstable"><img src="news_btn.png">
<p>Lorem ipsum *cut*</p>
</div>
</div>
</div>
<div id="footer"><div id="footer1"></div><div id="footer2"></div><div id="footer3"></div>
</div>
</body>
</html>
And the CSS (with the footer in red, grey sections in orange: )
@charset "utf-8";
/* CSS Document */
body {
background:#FFFFFF;
background-image:url(bg.jpg);
background-repeat:repeat-y;
background-position:top;
margin:0;
padding:0;
height:100%;
}
a {
outline: none;
}
a img {
border:none;
}
/*Main Page Properties Begin Here*/
/*Container, This holds everything in the center of the page.*/
#container {
background: none;
width: 797px;
position: relative;
margin: 0 auto;
margin-top: 0px;
height:100%;
}
/*Top Image*/
#topimage {
background-image:url(topimage.jpg);
width:788px;
height:249px;
position:absolute;
margin:1 auto;
margin-left:2px;
margin-top:0px;
left:3px;
}
#homeimage {
width:565px;
height:50px;
position:absolute;
margin-top:0px;
margin-left:21px;
}
/*Menu Section*/
#menu {
position:absolute;
margin:0 auto;
margin-left:2px;
margin-top:248px;
width:788px;
height:39px;
left:3px;
}
/*Featured Artist Section*/
#featuredtable {
position:absolute;
background-color:#a5a5ad;
background-image:url(left_bgs.png);
background-position:top right;
background-repeat:repeat-y;
width:335px;
height:auto;
margin-top:286px;
margin-left:7px;
padding-left:23px;
padding-right:15px;
}
/*Events Section *IMPORTANT* -> (Currently not used, Events is included in the Featured Artist Section)*/
#eventstable {
position:absolute;
background-color:#a5a5ad;
background-image:url(left_bgs.png);
background-position:top right;
background-repeat:repeat-y;
width:375px;
height:auto;
margin-top:667px;
margin-left:5px;
padding-left:5px;
padding-right:5px;
}
/*News Section*/
#newstable {
position:absolute;
background-color:#a5a5ad;
background-image:url(news_bg.png);
background-position:top left;
background-repeat:repeat-y;
width:335px;
height:auto;
margin-top:286px;
margin-left:418px;
margin-bottom:0px;
padding-left:25px;
padding-right:15px;
padding-top:25px;
}
/*Main Page Properties End Here*/
/*Bands Page Properties Begin Here*/
/*Featured Band Section*/
#featuredband {
position:absolute;
background-color:#a5a5ad;
background-image:url(akid.jpg);
background-repeat:no-repeat;
width:788px;
height:331px;
margin-top:286px;
margin-left:5px;}
/*News Section*/
#bandlist {
position:absolute;
background-color:#a5a5ad;
background-image:url(bands_bg.png);
background-position:top left;
background-repeat:repeat-y;
width:738px;
height:auto;
margin-top:617px;
margin-left:5px;
margin-bottom:0px;
padding-left:38px;
padding-right:12px;
padding-top:10px;
}
.bandthumbnails {
-x-system-font:none;
background-color:#a5a5ad;
float:left;
font-family:Georgia,Times,Serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:202px;
line-height:22px;
margin:0 25px 15px 0;
text-align:center;
width:220px;
left: 23px;
top: 9px;
}
.bandthumbnails a.zepict {
background-position:left top;
background-repeat:no-repeat;
display:block;
height:180px;
margin:0;
width:220px;
}
/*Bands Page Properties End Here*/
/*Band Template Properties Begin Here*/
#bandtop {
position:absolute;
background-color:#a5a5ad;
width:788px;
height:331px;
margin-top:286px;
margin-left:5px;}
#bandbio {
position:absolute;
background-color:#a5a5ad;
background-image:url(bio_bg.png);
background-position:top right;
background-repeat:repeat-y;
width:245px;
height:auto;
margin-top:617px;
margin-left:5px;
padding-left:23px;
padding-right:15px;
}
/*News Section*/
#bandnews {
position:absolute;
background-color:#a5a5ad;
background-image:url(bandnews_bg.png);
background-position:top left;
background-repeat:repeat-y;
width:455px;
height:auto;
margin-top:617px;
margin-left:298px;
margin-bottom:0px;
padding-left:25px;
padding-right:15px;
padding-top:25px;
}
/*Band Template Properties End Here*/
/*Model Page Properties Begin Here*/
/*Featured Model Section*/
#featuredmodel {
position:absolute;
background-color:#a5a5ad;
background-image:url(featmodel.jpg);
background-repeat:no-repeat;
width:788px;
height:331px;
margin-top:286px;
margin-left:5px;}
/*Model List*/
#modellist {
position:absolute;
background-color:#a5a5ad;
background-image:url(bands_bg.png);
background-position:top left;
background-repeat:repeat-y;
width:738px;
height:auto;
margin-top:617px;
margin-left:5px;
margin-bottom:0px;
padding-left:38px;
padding-right:12px;
padding-top:10px;
}
.bandthumbnails {
-x-system-font:none;
background-color:#a5a5ad;
float:left;
font-family:Georgia,Times,Serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:202px;
line-height:22px;
margin:0 25px 15px 0;
text-align:center;
width:220px;
left: 23px;
top: 9px;
}
.bandthumbnails a.zepict {
background-position:left top;
background-repeat:no-repeat;
display:block;
height:180px;
margin:0;
width:220px;
}
/*Model Page Properties End Here*/
/*Model Template Properties Begin Here*/
/*Model Template Properties End Here*/
/*Street Team Template Properties Begin Here*/
/*Street Team Template Properties End Here*/
/*Store Template Properties Begin Here*/
/*Featured Band Section*/
#topitems {
position:absolute;
background-color:#a5a5ad;
background-image:url(newitem.jpg);
background-repeat:no-repeat;
width:788px;
height:331px;
margin-top:286px;
margin-left:5px;}
/*News Section*/
#itemlist {
position:absolute;
background-color:#a5a5ad;
background-image:url(bands_bg.png);
background-position:top left;
background-repeat:repeat-y;
width:738px;
height:auto;
margin-top:617px;
margin-left:5px;
margin-bottom:0px;
padding-left:38px;
padding-right:12px;
padding-top:10px;
}
.bandthumbnails {
-x-system-font:none;
background-color:#a5a5ad;
float:left;
font-family:Georgia,Times,Serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:202px;
line-height:22px;
margin:0 25px 15px 0;
text-align:center;
width:220px;
left: 23px;
top: 9px;
}
.bandthumbnails a.zepict {
background-position:left top;
background-repeat:no-repeat;
display:block;
height:180px;
margin:0;
width:220px;
}
/*Store Template Properties End Here*/
/*Contact Template Properties Begin Here*/
#contactpg {
position:absolute;
background-color:#a5a5ad;
background-image:url(bands_bg.png);
background-position:top left;
background-repeat:repeat-y;
width:738px;
height:auto;
margin-top:286px;
margin-left:5px;
margin-bottom:0px;
padding-left:38px;
padding-right:12px;
padding-top:10px;
}
/*Contact Template Properties End Here*/
/*Footer Begins Here*/
#footer {
background:none;
width: 879px;
height: 38px;
position:relative;
margin:0 auto;
bottom: 0px;
}
#footer1 {
background-image:url(footer_r1_c1.jpg);
width:710px;
height:38px;
float:left;
}
#footer2 {
background-image:url(footer_r1_c2.jpg);
width:104px;
height:38px;
float:left;
}
#footer3 {
background-image:url(footer_r1_c3.jpg);
width:60px;
height:38px;
float:left;
}
/*Footer Ends Here*/
Thanks for any help...