this is what i want it too look like, and the footer must be 100% of the page.

Help pleasee

 

 

 

 

I have 3 divs inside my wrapper 2 div, all floating left so i can put each image and text in it.

The wrapper 2 div is inside my fotter div which is strecthed to 100% however now the background-image isent showing :S

 

Then my other wrapper is ment to sit on top of the fotter with everything init. and i did wrapper 2 to keep everything inline with the fotter div but allowing it to strecth.

 

is there a better way to do this, because my fotter background image wont show up now :/

 

css:

#wrapper {

margin-left:auto;

margin-right:auto;

width:900px;

}

 

#wrapper2 {

margin-left:auto;

margin-right:auto;

width:900px;

}

Edited January 18, 201115 yr by kingy da killa

Post the code, it's to confusing trying to understand your explanation. (or maybe it's because i've not had a morning coffee yet!)

@charset "utf-8";

/* CSS Document */

 

body

{

font-family:arial;

font-family:Arial, Helvetica, sans-serif;

font-size: 14px;

}

A:link{color:white}

A:visited{color:yellow}

 

#wrapper {

margin-left:auto;

margin-right:auto;

width:900px;

}

 

#wrapper2 {

margin-left:auto;

margin-right:auto;

width:900px;

}

 

<!---Footer---!>

#footer {

background-image:url(footer.png);

}

 

#f1 {

float:left;

width:300px;

}

 

#f2 {

float:left;

width:300px;

}

 

#f3 {

float:left;

width:300px;

}

 

.footer1 {

margin: 2px auto 2px auto;

}

<!---End---!>

 

 

 

<div id="wrapper">

sadasdas

</div>

<div id="footer">

<div id="wrapper2"><div id="f1"><img src="newsletter.png" width="119" height="24" alt="Newsletter" class="footer1" /><br />

Get our monthly email newsletter full of<br />

our latest prodcuts and coupon vouchers!</div>

<div id="f2"><img src="bllulinks.png" width="99" height="24" alt="Bllulinks" /></div>

<div id="f3">dasd</div> <br style="clear: left;" />

</div>

</div>

 

 

put that into dreamweaver or soemthing?

http://www.cssstickyfooter.com/

 

This might help, it will put your footer code to the bottom of the browser, it also give you the ability to have a full width footer, you can then add a div inside that to centralise that with your above content.

Two questions:

 

Is it just the image that is the issue?

&

Is your image in a folder or in the exact same place your css file is?

Two questions:

 

Is it just the image that is the issue?

&

Is your image in a folder or in the exact same place your css file is?

 

just the image is the issue, and yes the image is the same folder as the css... its weird without putting on those divs on top and stuff it works fine :S but as soon as the code gets a bit tricky it stops working...

 

maybe ill try one of those links or something

Stick footer code

 

 

XHTML

 

<!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" xml:lang="en" lang="en">

 

<head>

 

<title>Template</title>

 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta name="description" content="" />

<meta name="keywords" content="" />

 

<link href="resources/style/global.css" rel="Stylesheet" type="text/css" media="screen" />

 

<!--[if lte IE 6]>

<link rel="stylesheet" type="text/css" href="resources/style/ie-6.css" media="screen" />

<!--[if !IE 7]>

<style type="text/css">

#container {display:table;height:100%}

</style>

<![endif]-->

 

</head>

 

<body>

 

<div id="container">

 

<div id="main">

<h1>testing</h1>

</div>

 

</div>

 

<div id="footer">

 

<div class="footerContainer">

<p>testing footer</p>

</div>

 

</div>

 

</body>

</html>

 

 

CSS

 

/* BODY STYLING */

 

html, body {height: 100%;}

 

 

/* OPERA FIX */

 

body:before {/* thanks to Maleika (Kohoutec)*/

content:"";

height:100%;

float:left;

width:0;

margin-top:-32767px; /* thank you Erik J - negate effect of float*/

}

 

body {

font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;

font-size: 11px;

color: #333333;

background: #ffffff;

margin: 0px;

padding: 0px;

}

 

/* CONTAINER */

 

#container {

width: 900px;

min-height: 100%;

margin: 0px auto;

padding: 0px;

}

 

#main {

overflow:auto;

padding-bottom: 40px; /* must be same height as the footer */

}

 

/* FOOTER STYLING */

 

#footer {

position: relative;

height: 40px;

background: #cccccc;

clear:both;

margin-top: -40px; /* negative value of footer height */

}

 

.footerContainer {

width: 900px;

height: auto;

margin: 0px auto;

padding: 10px 0px 0px 0px;

}

 

/* TYPOGRAPHY STYLING */

 

h1 {

font-size: 24px;

font-weight: lighter;

color: #c70000;

margin: 20px 0px 10px 0px;

padding: 0px;

}

 

 

 

 

 

/* LINK STYLING */

 

a img {

text-decoration: none;

border: 0px;

}

 

a:link {

color: #666666;

text-decoration: underline;

}

 

a:visited {

color: #666666;

text-decoration: underline;

}

 

a:hover {

color: #999999;

text-decoration: none;

}

 

Edited January 18, 201115 yr by waynede

i wanted nice neat code that isent very big thanks anyways though

Edited January 18, 201115 yr by kingy da killa

Okies lol, I personally wouldn't have said it was that much code, especially once the css is in an extrenal stylesheet.

try this:

 

css

body {
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
}
a:link {
color:white
}
a:visited {
color:yellow
}
.wrapper {
margin:0 auto;
width:900px;
}
#footer {
width:100%;
background-image:url(footer.png);
background-color:#00FFFF;
overflow: hidden;
}
#footer .container {
float:left;
width:300px;
}
.footer1 {
margin: 2px auto;
}

 

 

 

HTML

<div class="wrapper"> dddd </div>

<div id="footer">
 <div class="wrapper">
   <div class="container"> <img src="newsletter.png" width="119" height="24" alt="Newsletter" class="footer1" /><br />
     Get our monthly email newsletter full of<br />
     our latest prodcuts and coupon vouchers! </div>
   <div class="container"></div>
   <div class="container"></div>
 </div>
</div>

 

 

I've cleaned up the code a little as well, but I think that its easy enough to understand. This won't stick the footer to the bottom of your page. But as you said you just wanted the image to display, this code should (fingers crossed) do that.

try this:

 

css

body {
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
}
a:link {
color:white
}
a:visited {
color:yellow
}
.wrapper {
margin:0 auto;
width:900px;
}
#footer {
width:100%;
background-image:url(footer.png);
background-color:#00FFFF;
overflow: hidden;
}
#footer .container {
float:left;
width:300px;
}
.footer1 {
margin: 2px auto;
}

 

 

 

HTML

<div class="wrapper"> dddd </div>

<div id="footer">
 <div class="wrapper">
   <div class="container"> <img src="newsletter.png" width="119" height="24" alt="Newsletter" class="footer1" /><br />
     Get our monthly email newsletter full of<br />
     our latest prodcuts and coupon vouchers! </div>
   <div class="container"></div>
   <div class="container"></div>
 </div>
</div>

 

 

I've cleaned up the code a little as well, but I think that its easy enough to understand. This won't stick the footer to the bottom of your page. But as you said you just wanted the image to display, this code should (fingers crossed) do that.

 

 

your amazing sorted it perfectly