4 replies [Last post]
MeestorMac
Offline
Enthusiast
UK
Last seen: 14 years 23 weeks ago
UK
Timezone: GMT+1
Joined: 2007-04-16
Posts: 54
Points: 0

I am just in the process of building a site for a client and I would like to have a different colour for the footer than the rest of the page.

ie: body background = white, footer = black.

But I would like the whole bottom of the site (from the footer down) to be black.

I have tried setting the height to 100% but this only seems to fill with black once there is text in there.

The image below shows the desired effect, but currently I am only getting the black where there is text.

Katie
Katie's picture
Offline
Enthusiast
Seattle, WA
Last seen: 6 years 47 weeks ago
Seattle, WA
Timezone: GMT-8
Joined: 2006-08-06
Posts: 357
Points: 2

My advice is to make the

My advice is to make the body black, and leave the footer transparent:

Test

body
{ padding: 0;
margin: 0;
color: #FFFFFF;
background-color: #000000;
}
#content
{ background: #33CCFF;

}
#footer
{ border: dashed #999999 1px;

}

Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed quam. Praesent euismod fermentum tortor. Phasellus quis orci. Ut pede. Morbi justo leo, adipiscing ac, nonummy et, facilisis a, ante. Ut pede. Donec euismod. Nam blandit pretium risus. Suspendisse fringilla erat quis erat. Duis non elit. Morbi convallis orci eget nisl dapibus vulputate. Integer lobortis augue pulvinar orci. In imperdiet pharetra sapien. Vivamus viverra, ligula et convallis egestas, massa massa consectetuer est, non tempor purus tellus sed odio. Morbi mollis. Integer sit amet neque a est interdum faucibus. Suspendisse tortor. Mauris volutpat blandit lacus. Curabitur tortor leo, pretium eget, condimentum et, congue sit amet, lacus.

  • alphum
  • ipsum
  • lorem

What have you tried so far?

Blog: Pew Pew Laser Blog
Online File Storage: DropBox
Daily Deals on Local Activities: Groupon

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Code?

Mac, as was said in your other thread, you need to show us the code you're working with.

Verschwindende wrote:
  • CSS doesn't make pies

MeestorMac
Offline
Enthusiast
UK
Last seen: 14 years 23 weeks ago
UK
Timezone: GMT+1
Joined: 2007-04-16
Posts: 54
Points: 0

The CSS: body { color:

The CSS:

body {
color: black;
background-color: white;
background-position: 0px top;
background-repeat: repeat-x;
background-image: url(../images/bkg_top.png);
margin: 0px;
line-height: 1.6em;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
}

#foot_container {
background-color: black;
background-image: url(/images/bkg_foot.png);
background-position: left top;
background-repeat: repeat;
position: relative;
text-align: center;
width: 100%;
height: 100%;
}

#footer {
background-color: black;
background-position: 0;
text-align: center;
color: white;
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
position: relative;
height: 100%;
width: 760px;
}

.footer {
color: white;
font-size: 10px;
}

.footer a {
color: white;
font-size: 10px;
}

The main background includes a black header "bkg_top.png" so I decided to try and use an image on the footer "bkg_foot.png" to cover the white.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

(No subject)

Verschwindende wrote:
  • CSS doesn't make pies