CSS Footer (?) Problem

djs.specs

03-10-2009, 04:00 PM

Hi all!

I'm really, really, really new to CSS and of course I'm jumping in at the deep end by trying to adjust a template :eek: The problem is that I'm currently getting this with the code as it stands:

http://i167.photobucket.com/albums/u147/lil_miss_stfu/Picture2-1.png

What I want is for the background image to stop at the end of the text and the footer image (the bit with the pentacle) to attach seamlessly to the bottom in such a way that it scrolls with the rest of it. Main reason I want this is so that I can use a static background image that overlaps underneath the text box, thus the need for transparency around the bottom half of the image.

Here is the code I currently have:

*{
padding: 0px;
margin: 0px;
}

body{
background: #000000 url(images/back_all.jpg) no-repeat fixed left;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
padding: 0px;
margin: 0px;
}

#content
{
width: 100%;

}

a{
color: #151422;
text-decoration:none;
}

a:hover, a:active{
color:#151422;
text-decoration:none;
}

#header{
height: 128px;
}

#menu
{
height: 39px;
width: 604px;
margin-bottom: 10px;
}

#menu ul li{
list-style: none;
display: inline;
}

#menu a
{
display: block;
float: left;
width: 83px;
height: 37px;
padding-left: 30px;
padding-top: 25px;
color: #ffffff;
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
background: url(images/button.gif) no-repeat;
}

#menu a:hover
{
display: block;
padding-top: 25px;
height: 37px;
float: left;
color: #ffffff;
font-weight: bold;
background: url(images/button_r.gif) no-repeat;
}

#main
{
width:580px;
margin: 0 auto;
}

#wrapper
{
width: 604px;
background: url(images/table_back.gif) repeat-y center;
margin: 0px auto;
}

#logo
{
height: 66px;
width: 542px;
text-align: right;
}

#logo h1
{
font-size: 18px;
padding-top: 20px;
padding-left: 20px;
font-weight: bold;
color: #E6E6E6;
}

#logo h2 a
{
font-size: 10px;
padding-left: 20px;
font-weight: bold;
color: #E6E6E6;
text-transform: uppercase;
}

#top
{
background: url(images/top.gif) no-repeat top center
}

#text{
background: url(images/bottom.gif) no-repeat bottom center;
padding-bottom: 60px;
padding-left: 60px;
padding-right: 60px;
padding-top: 60px;
min-height: 480px;

}

#text p{
padding:5px;
}

h1, h2, h3{
color:#151422;
}

h1{
font-size:1.2em;
}

h2{
font-size:1.05em;
}

h3{
font-size:1em;
}

#text ul, ol{
padding-left:12px;
margin-left:12px;
}

.meta{
text-align:right;
color:#151422;
font-size:0.79em;
}

.meta a{
text-decoration:none;
}

#footer{
font-size:0.79em;
text-align:center;
margin-bottom: 20px;
height: 50px;
color: #FFFFFF;
padding-top: 10px;
}

#footer a{
text-decoration:none;
color: #FFFFFF;
}

Knowing my luck, its probably an easy fix but its not jumping out at me and the things that I've tried aren't working (I tried to fix the image as a static global footer but it killed something good). Any suggestions would be welcome :confused:

BoldUlysses

03-10-2009, 04:10 PM

Hi djs.specs,

Welcome to CF! Unfortunately we can't do much if we can't see your markup (HTML), since it's what the CSS acts on and goes hand-in-hand with. Ideal would be a link to your page, so we can work with the images too (which are integral to your page's functionality, sounds like).

djs.specs

03-10-2009, 04:21 PM

Durrr... I'm a 'tard. I should've known that'd come in handy. I can't direct you to a link because it's not uploaded anywhere, but here's the HTML of the page that I screenshotted:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Metamorphosis Design Free Css Templates</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link href="styles.css" rel="stylesheet" type="text/css"
media="screen">
</head>
<body>
<div id="content">

<div id="main">
<div id="header">
<div id="logo">
<h1><big>Atlanta Nocturna</big></h1>
<h2>A Dresden Files RPG</h2>
<br>
<br>
</div>

<div id="menu">
<ul>
<li><a href="application.html">Apply</a></li>
<li><a href="rules.html">Rules</a></li>
<li><a href="characters.html">Characters</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="mailto:djs.specs@gmail.com">Contact</a></li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="top">
<div id="text"><br>
<div style="text-align: justify;">Welcome to Atlanta Nocturna, a
Dresden Files RPG set in the city of - you guessed it - Atlanta,
Georgia.  Before you <a href="#">apply</a>, please be sure to
read the rules.<br>
</div>
</div>
</div>
</div>
<div id="footer">
<p>Copyright © 2009.</p>
</div>
</div>
</div>
</body>
</html>

There's probably a lot of extraneous code in there because I've not tried to code anything in years now and I wasn't too great at it to begin with :p

Also, here are links to the images I'm using in case that'll help any:

back_all.jpg (http://i167.photobucket.com/albums/u147/lil_miss_stfu/back_all.jpg)
top.gif (http://i167.photobucket.com/albums/u147/lil_miss_stfu/top.gif)
table_back.gif (http://i167.photobucket.com/albums/u147/lil_miss_stfu/table_back.gif)
bottom.gif (http://i167.photobucket.com/albums/u147/lil_miss_stfu/bottom.gif)

BoldUlysses

03-10-2009, 04:48 PM

Thanks. Still not quite clear about what you're after:

What I want is for the background image to stop at the end of the text (?) and the footer image (the bit with the pentacle) to attach seamlessly to the bottom in such a way that it scrolls with the rest of it (?). Main reason I want this is so that I can use a static background image that overlaps underneath the text box, thus the need for transparency around the bottom half of the image.

Could you clarify the bolded bits?

Also, your page has some divitis (http://csscreator.com/?q=divitis) and you definitely need to add a DOCTYPE (http://www.alistapart.com/articles/doctype/) to the beginning of your markup. The second is a non-negotiable if you want cross-browser compatibility, but the first thing we can clear up once we clarify what your footer needs to do.

Excavator

03-10-2009, 04:49 PM

Hello djs.specs,
Does this work for you? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="" content="authored by http://www.nopeople.com/Design/" />
<style type="text/css">
html, body{
height: 100%;
text-align: center;
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #000;
background: #000 url(http://i167.photobucket.com/albums/u147/lil_miss_stfu/back_all.jpg) no-repeat left;
}
* {
margin: 0;
padding: 0;
}
#content {
width: 604px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -138px; /* the bottom margin is the negative value of the footer's height */
text-align: left;
border-top: 2px solid #000;
background: url(http://i167.photobucket.com/albums/u147/lil_miss_stfu/table_back.gif) repeat-y;
}
#footer, #push {
width: 604px;
height: 138px;
margin: 0 auto;
}
#footer {
background: #999 url(http://i167.photobucket.com/albums/u147/lil_miss_stfu/bottom.gif);
}
#push {
background: none;
}
</style>
</head>
<body>
<div id="content">
add your website here
<div id="push"></div>
</div>
<div id="footer"></div>
</body>
</html>

That's layed out like the full-height example found here (http://nopeople.com/CSS/full-height-layout/index.html).

djs.specs

03-10-2009, 05:00 PM

Not... quite:

http://i167.photobucket.com/albums/u147/lil_miss_stfu/Picture4.png

:(

djs.specs

03-10-2009, 05:50 PM

Sorry msuffern, I missed your reply in there :p

Its a little hard to explain what I'm after without demonstrating, made worse by the fact I can't talk jargon. So here's a graphical representation:

http://i167.photobucket.com/albums/u147/lil_miss_stfu/table_graphic.jpg

Red - area covered by table_back.gif
Dashed green - area covered by bottom.gif

Basically, so far as I can tell, the box on the left is how the CSS works at the moment, which means that the back is visible through the transparency in bottom.gif. The box on the right is what I'm after - bottom.gif attaching where table_back.gif stops repeating (because that's where the text ends). I'd prefer not to have it as a static footer image (hence my thing about scrolling). Am I making a bit more sense about what I'm asking for now?

Excavator

03-10-2009, 06:06 PM

How about this one then? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 12px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
height: 865px;
background: #000 url(http://i167.photobucket.com/albums/u147/lil_miss_stfu/back_all.jpg) no-repeat left;
}
#content {
width: 604px;
height: 865px;
margin: 0 auto;
border-top: 2px solid #000;
background: url(http://i167.photobucket.com/albums/u147/lil_miss_stfu/table_back.gif) repeat-y;
}
#footer {
width: 604px;
height: 138px;
margin: 0 auto;
background: url(http://i167.photobucket.com/albums/u147/lil_miss_stfu/bottom.gif);
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
</div>
</div>
<div id="footer"></div>
</body>
</html>

djs.specs

03-10-2009, 06:33 PM

YES!

Well, I mean, I used the footer information to adjust my CSS file and now its working pretty much how I want. *happy dances* Thank you soooo much!