Member Avatar for keval_hack

visit this site see the footer which is at the bottom of the website. Can any one tell me how can i design this type of footer or is there any read made plugin available for that.


Pls help me!

  • 4 Contributors
  • 3 Replies
  • 456 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by tinymark

Dani AI

Generated

’s example can be implemented in a couple of robust ways depending on intent. As noted, first decide whether the goal is a true site footer (sits below page content) or a persistent bar that stays fixed to the viewport (social-strip style). ’s pointer toward CSS positioning and ’s absolute-position example are useful starting points, but absolute positioning is brittle for responsive layouts. Two modern, reliable patterns follow — a flexbox “sticky” footer that pushes to the bottom only when content is short, and a fixed footer bar that always remains visible.

/* Sticky footer (pushes to bottom when page is short) */
html, body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1 0 auto;
}
footer {
  background: #000;
  color: #fff;
  padding: 18px;
}
/* Fixed footer bar (always visible) */
.footer-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #000;
  color: #fff;
  padding: 12px 16px;
  box-shadow: 0 -4px 8px rgba(0,0,0,0.25);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* Keep page content visible under a fixed bar */
body {
  padding-bottom: 56px; /* match footer height */
}

Practical notes and gotchas: avoid hardcoded positioning/heights unless necessary; if a fixed footer seems to misbehave, inspect ancestors for CSS transforms/filters (these can change how fixed behaves); set body bottom padding equal to the bar height so content and clickable elements aren’t hidden; use semantic <footer> and role="contentinfo", ensure sufficient contrast and 44px+ touch targets for mobile, and test on mobile browsers (dynamic address bars and safe-area insets). For most sites the flexbox pattern is simplest and most accessible; use position:fixed only when the UI requires a persistent overlay.

Recommended Answers

All 3 Replies

Member Avatar for mutia

which footer are you talking about. with the black background color?or the one on top which has fixed position with the social network sites link?

Member Avatar for tinymark

There are a lot of places for information. Google for html and css. Here's some code I threw together.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Footer</title>
<style type = 'text/css'>
#footer{position:absolute; top:200px; left:40px; width:1000px; background-color:#f0f;}
</style>
</head>
<body>
<div id ='footer'>
<center>Hello there Mark.</center>
</div>
</body>
</html>

The style at the top tells the footer you want absolute control over it's position. You want it exactly 1000px wide starting at 200px from the top and 40px from the left. I left the height implied as auto. I'm letting the text set the height.

Change the background-color to #000 to get black. Add as many of these as you want.

<div id='some-name'><a href='some-plce-to-go.html'>Go here</a>

When you do, add the id name to the css and use absolute positioning to place the anchors on top of the background.

Hope this helps.

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.