CSS Codes
CSS Layouts
Results 1 to 7 of 7

Thread: Footer...

  1. 03-21-2009, 07:05 PM #1
    dillankid
    dillankid is offline Junior Coders
    Join Date
    Jan 2009
    Location
    Chattanooga, TN
    Posts
    41
    Thanks
    6
    Thanked 1 Time in 1 Post

    Default Footer...

    Here is the site that I need help with.

    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:

    Code:
    <!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: )

    Code:
    @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...
    Reply With Quote Reply With Quote
  2. 03-22-2009, 04:46 PM #2
    Snookerman's Avatar
    Snookerman
    Snookerman is offline Who ya gonna call?
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Have a look at this article:
    http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

    Good luck!
    Reply With Quote Reply With Quote
  3. 03-22-2009, 08:06 PM #3
    dillankid
    dillankid is offline Junior Coders
    Join Date
    Jan 2009
    Location
    Chattanooga, TN
    Posts
    41
    Thanks
    6
    Thanked 1 Time in 1 Post

    Default

    That looks like it will work - I'll put it in and see how it goes
    Reply With Quote Reply With Quote
  4. 03-23-2009, 06:52 PM #4
    dillankid
    dillankid is offline Junior Coders
    Join Date
    Jan 2009
    Location
    Chattanooga, TN
    Posts
    41
    Thanks
    6
    Thanked 1 Time in 1 Post

    Default

    Well...I'm still stumped. I worked it into the code but it's still not functioning correctly. It's like half way down the page now instead of at the top, but still not at the bottom.

    http://www.judahgraphics.com/dxm/ws/

    HTML - Footer in Red (Bottom of HTML)
    Code:
    <!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><a href="http://www.myspace.com/digitalxtrememedia"><div id="myspace"></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... *cut</p>
<p><img src="divbar.jpg"></p>
<p><img src="event_btn.png"></p>
<p>Lorem...*cut*</p>
</div>
<div id="newstable"><img src="news_btn.png">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam *cut*</p>
</div>
</div>

<div id="footer"><div id="footer1"></div><div id="footer2"></div><div id="footer3"></div>
</div>

</div>
</body>
</html>
    CSS - Footer in Blue (Bottom of the CSS)
    Code:
    @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;
}
#myspace {
	background-image:url(myspace_sm.png);
	position:absolute;
	margin-left:720px;
	margin-top:170px;
	height:81px;
	width: 63px;
	}
/*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;
}
/*Model Page Properties End Here*/

/*Model Template Properties Begin Here*/

/*Model Template Properties End Here*/

/*Street Team Template Properties Begin Here*/
#streetform {
position:absolute;
background-color:#a5a5ad;
background-image:url(bands_bg.png);
background-position:top left;
background-repeat:repeat-y;
width:738px;
margin-top:400px;
margin-left:5px;
margin-bottom:0px;
padding-left:38px;
padding-right:12px;
padding-top:10px;
}
/*Street Team Template Properties End Here*/

/*Store Template Properties Begin Here*/
#newstuff {
position:absolute;
background-color:#a5a5ad;
background-image:url(new_item.jpg);
background-repeat:no-repeat;
width:788px;
height:331px;
margin-top:286px;
margin-left:5px;}

/*News Section*/
#stuff {
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;
}
/*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:712px;
height:auto;
margin-top:286px;
margin-left:5px;
margin-bottom:0px;
padding-left:38px;
padding-right:38px;
padding-top:10px;
}

/*Contact Template Properties End Here*/

/*Footer Begins Here*/
#footer {
	background:none;
	height: 38px;
	position:absolute;
	bottom:0;
	width:100%;
}
#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*/
    Reply With Quote Reply With Quote
  5. 03-23-2009, 11:11 PM #5
    Snookerman's Avatar
    Snookerman
    Snookerman is offline Who ya gonna call?
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    The footer is supposed to be inside the container div but on your page it seems to be outside of it. Put it inside and it should work.

    Good luck!
    Reply With Quote Reply With Quote
  6. 03-24-2009, 01:55 AM #6
    dillankid
    dillankid is offline Junior Coders
    Join Date
    Jan 2009
    Location
    Chattanooga, TN
    Posts
    41
    Thanks
    6
    Thanked 1 Time in 1 Post

    Default

    When I put it inside the container it goes back to the top.
    Reply With Quote Reply With Quote
  7. 03-25-2009, 03:58 PM #7
    dillankid
    dillankid is offline Junior Coders
    Join Date
    Jan 2009
    Location
    Chattanooga, TN
    Posts
    41
    Thanks
    6
    Thanked 1 Time in 1 Post

    Default

    I still can't figure this one out...anyone have an idea?
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules