How to Design Footer like this site

[keval_hack]

http://download.cnet.com/3001-7240_4-10398150.html?spi=f2d379a61eea51a632f41e56cfd116f3&part=dl-6271747

I want to make footer like this site in my website pls some help me.

That's just a fixed position element - like the purple footer on this site.

Set the display property of the div to fixed and give it a position:

#footer{
  display:fixed;
  position: bottom;
}

[macneato]

Ardav is correct but technically speaking, don't think I would refer to it as a footer, think its more of a menu bar (status bar). That adside.

REALLY wierd link to share though, considering the status bar is sitewide. Anyone interest in seeing what is being discussed, use this link instead (to avoid downloading the file and increasing its download count)

http://www.cnet.com/?tag=hdr;brandnav

[gaurang4]

ya...try following way,

#footer{
position: absolute;
bottom:0px;
}

[Dandello]

Just a heads up - there's a little glitch in IE7 on Mac. You need to add a z-index:1 to keep the absolutely place element from showing the elements it's covering up.

[almostbob]

more patches, compliant(? somewhat less so) browsers spit it over 0px 0em 0% 0pt 0in 0cm, zero is dimensionless
spit it over calculated absolute positions unless told to calculate
need to be told to fill the screen width

#footer{ position:fixed; bottom:0; top:auto; width:100% z-index:10; }

> IE7 on Mac

Didn't know that IE was still alive on the Mac. What the hell are Mac owners doing using IE?? I thought one of the points of buying a Mac was to get the best software. It's like buying a Ferrari and filling it with diesel.

[almostbob]

Mac owners: because IE still has 75% of the market so designed pages have to work in IE, test bed,
being Mac users they dont know that IEmac is not IE or mac, they expect it to work

[Dandello]

Frankly, the issue of needing a z-index explicitly stated has only shown up (for me) on Macs using MSIE7, while doing exactly what this thread is about - a div with navigation that needed to be fixed at the bottom of the browser screen. And believe me, I tried everything I could think of (setting the opacity, using the rgba fix). Setting the z-index to at least 2 was what did the trick. Apparently the other browsers simply accepted the opacity as being enough to block the background - MSIE Mac didn't. As to why worry - well my client base includes a lot of people using Macs. It's not smart to ignore even that percentage of your potential market.