Member Avatar for 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.

  • 6 Contributors
  • 8 Replies
  • 103 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Dandello

Dani AI

Generated

Quick summary and a safe recipe: wanted that persistent bottom bar. Several replies suggested positioning (thanks to , and ) and correctly warned about z-index oddities on some IE builds. Two practical patterns cover almost every case: an overlay footer that always sits on top of the viewport, and a non‑overlay "sticky" footer that pushes content so nothing is hidden. Pick overlay for controls/ads that must be visible; pick sticky when the footer should never cover content.

Example 1 — overlay footer (keeps the bar visible, but content must leave space):

<body>
  <main class="page-content">...page content...</main>
  <footer class="site-footer" role="contentinfo">...links / controls ...</footer>
</body>
:root { --footer-h: 56px; }

.page-content { padding-bottom: calc(var(--footer-h) + 8px); }

.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--footer-h);
  background: #6a1b9a;
  z-index: 1000; /* prevents underlying elements from showing through, as @Dandello suggested */
}

Example 2 — sticky (non-overlay) footer using flexbox (nice for responsive layouts and old browsers that dislike fixed):

html, body { height: 100%; margin: 0; }
.wrapper { min-height: 100vh; display: flex; flex-direction: column; }
.wrapper > main { flex: 1 0 auto; }
.site-footer { height: 56px; flex-shrink: 0; }

Troubleshooting notes: reset body margins (avoid unexpected gaps), ensure the footer has an opaque background (some browsers render semi-transparent areas oddly), and test mobile — position:fixed can behave poorly on some older mobile browsers. If supporting very old IE that lacks fixed positioning, either use the flexbox approach or a tiny JS fallback that moves the footer on resize/scroll.

Recommended Answers

All 8 Replies

Member Avatar for Member #120589

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;
}
Edited by Member #120589 because: n/a
Member Avatar for 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

Member Avatar for gaurang4

ya...try following way,

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

Member Avatar for 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.

Member Avatar for 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; }
Edited by almostbob because: n/a
Member Avatar for Member #120589

> 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.

Member Avatar for 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

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.