PDA

View Full Version : Bottom Image footer

Incendio
03-30-2006, 10:39 AM
http://rude-child.org/index.php?subaction=showfull&id=1143579805&ucat=&archive=&start_from=&


Scroll down, see this http://i2.tinypic.com/sm8rgl.jpg

How can I get something like that?
uday
03-30-2006, 09:48 PM
your css:

.footer {
background-image:url('URL OF PIC');
position:position;
bottom:0%;
left:XXXpx;
width:XXXpx;
height:XXXpx;
z-index:Z;
}

then your html:

<div class="footer">Content</div>
Incendio
04-02-2006, 01:58 PM
That didn't work. I got no image whatsoever. :/
war59312
04-03-2006, 04:19 AM
Hey,

Well, if you just copied and paste it will not work, of course!. lol

That site is using an image map:

<table><tr>
<td colspan="6">
<img src="images/v18_11.jpg" alt="" width="800" height="64" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="290,47,372,60" href="javascript:zyXc();bookmarksite('Rude Child Designs', 'http://rude-child.org')">
<area shape="rect" coords="390,48,452,58" href="mailto:rudechild@gmail.com">
<area shape="rect" coords="471,48,508,58" href="http://hosting.dark-obsessions.net" target="_blank">
</map></td>
</tr></table>

But I think Uday's code will work. ;)

You have to edit to your needs like for example:

<?xml version="1.0" encoding="us-ascii"?>
<!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>Style Test</title>

<style type="text/css">
/*<![CDATA[*/
.footer {
background-image:url('background.gif');
text-align: center;
position:position;
bottom:0%;
left:XXXpx;
width:XXXpx;
height:XXXpx;
z-index:Z;
} <
/*]]>*/
</style>

</head>

<body>

<div class="footer">
One Thing | Another Thing | Last Thing
</div>

</body>

</html>

Of course make sure background.gif is in the same folder. Or just change the url. You can even use a .png, .jpg, etc. image instead of a .gif image.

Enjoy,

Will
Incendio
04-09-2006, 02:09 PM
well gee, im not stupid. of course I changed and customized the code to fit my needs O_o it still would not work.

im not stupid.
J to the izzosh
04-09-2006, 04:34 PM
Not that I doubt your intelligence, but just make sure that all dimensions (height, z-index, etc) are specified with numerical values and units of measurement (e.g., 125px), although z-index should just have an integer as a value.

Also, one amendment should be made to the code given above: the "position" property should have a value of "absolute", not "position". There is also no need for the % sign after '0' for the bottom property. Just leave it at '0'; units are not required for null values.
Incendio
04-24-2006, 08:28 AM
I didnät try to be rude or anything, but when whoever it was told me that I had to replace *<I>'URL OF PIC'</I>* with my own url, or else it wouldn't work, well, I just got the impression that I seem to be so stupid to use "url of pic" instead of "http://mypic.jpg" or whatever. N/M

Thanks!
Incendio
04-24-2006, 08:32 AM
mh, I'm having another problem. I want this image to be at the bottom, but it is not, the image moves around. For example when I first enter the site (or refresh), I see the image at the bottom of MY screen, but it'a not supposed to be there, cause it's supposed to be on the bottom of the page, when all content ends, like a nice rounded footer .... does this make sense?

And I want it at the bottom ... So what can I do about this?
J to the izzosh
04-26-2006, 03:23 AM
IF you want your footer to flow with the bottom of your document, then you should use just allow the element to be positioned regularly so content will be able to "push" it downward.
Incendio
04-26-2006, 05:53 PM
*confused* How can I allow the element to be positioned regulary? What's the exact code?
J to the izzosh
04-26-2006, 09:50 PM
Just don't apply any special positioning:

<div>
This element will expand to fit its content as
it has no set height. The longer the content
is, the longer the element will be.
</div>

<div>
This element will be pushed downward as the
previous element expands to fit its content.
</div>

Then style the elements in the way that you need them to appear as a footer and a... not-a-footer. You'll likely have to do some adjusting for margins, padding in such so the footer will appear flush with the previous element.