Layout like Daniweb Footer

Question

furqan219 -9 Junior Poster in Training

16 Years Ago

How to make Layout like Daniweb Footer
My Favourite Forums Todays Posts .............

user-interface web-design

6 Contributors
25 Replies
125 Views
2 Weeks Discussion Span
Latest Post 16 Years Ago Latest Post by papanyquiL

Dani AI

Generated 9 Months Ago

Thread context: asked for a DaniWeb-style footer; early replies from pushed fixed/absolute positioning and corrected the HTML class placement (class on the anchor, not the wrapper). wanted two links (Feedback, Help) and noted IE6 problems; pointed to learning the basics. Below is a compact, modern alternative that avoids fragile fixed positioning and works across browsers while matching the visual result most people mean by a “site footer.”

A resilient pattern is a flexbox “sticky” footer: the page flow keeps the footer at the bottom when content is short and lets it follow content when the page is taller. Minimal semantic markup and anchor-based buttons keep server-side tech (PHP/MySQL) irrelevant to layout.

Example HTML structure:

<body>
  <main class="page-content"> ... </main>

  <footer id="site-footer" class="site-footer">
    <div class="footer-inner">
      <div class="left">My Favourite Forums</div>
      <div class="right">
        <a class="btn" href="/feedback">Feedback</a>
        <a class="btn" href="/help">Help</a>
      </div>
    </div>
  </footer>
</body>

Example CSS (modern, simple, and accessible):

html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
.page-content { flex: 1 0 auto; }

.site-footer { background: #2f2f2f; color: #fff; }
.footer-inner { max-width: 980px; margin: 0 auto; padding: 10px 16px;
               display: flex; justify-content: space-between; align-items: center; }
.btn { display: inline-block; padding: 6px 10px; color: #fff; text-decoration: none;
       background: #4a90e2; border-radius: 3px; }
.btn:focus, .btn:hover { background: #357ab8; outline: none; }

IE6 and old-browser notes: problems reported in this thread likely came from using viewport-fixed positioning with IE6. If IE6 support is mandatory, degrade to a normal flow footer or add a small script that repositions an absolutely positioned footer on scroll (attach scroll/resize listeners only for legacy browsers). Also ensure a standards DOCTYPE to avoid quirks mode. Accessibility polish: use semantic <footer>, prefer anchors for navigation and <button> for actions, add clear focus styles and aria-labels where needed.

For modern reference on flexbox and semantic footer element, see MDN documentation on flexible box layout and the HTML <footer> element.

All 25 Replies

Member #120589

16 Years Ago

use css for keeping element at top or bottom of page

element{
  position:fixed;
  top:0;
  left: 0;
}

element{
  position:fixed;
  bottom:0;
  left: 0;
}

Edited 16 Years Ago by Member #120589 because: n/a

MJ Pieterse 2 Poster

16 Years Ago

mmm... i think you should use this and then obviously add your stuff in the div you will create.

#footer {
    position:absolute;
    vertical-align:bottom;
    margin:0 auto;
    width:100%;
}

Reply to this topic

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.

furqan219 -9 Junior Poster in Training · Answer 1 · 2010-05-25T12:42:09+00:00

furqan219 -9 Junior Poster in Training

16 Years Ago

Can I make like this

<div id=footer>
</div>

furqan219 -9 Junior Poster in Training · Answer 2 · 2010-05-25T13:12:42+00:00

No its not working ....
absolute or fixed?
is there ay example available

furqan219 -9 Junior Poster in Training · Answer 3 · 2010-05-25T13:19:54+00:00

#footer {
    position:fixed;
    vertical-align:bottom;
    margin:0 auto;
    width:100%;
	background-color:#0066FF;
}

Its Working....

furqan219 -9 Junior Poster in Training · Answer 4 · 2010-05-25T13:24:54+00:00

furqan219 -9 Junior Poster in Training

16 Years Ago

How i can add buttons. footer working perfectly

furqan219 -9 Junior Poster in Training · Answer 5 · 2010-05-25T13:43:46+00:00

its working perfectly in Google Chrome but in internet explorer 6 its not working.

MJ Pieterse 2 Poster · Answer 6 · 2010-05-25T13:44:35+00:00

you'll need to create your buttons etc inside your footer div

furqan219 -9 Junior Poster in Training · Answer 7 · 2010-05-25T15:33:56+00:00

furqan219 -9 Junior Poster in Training

16 Years Ago

How I can add Buttons

furqan219 -9 Junior Poster in Training · Answer 8 · 2010-05-25T15:37:03+00:00

I am new to CSS. I want to add but guide me. also its not working in IE6.

MJ Pieterse 2 Poster · Answer 9 · 2010-05-25T15:59:08+00:00

it depends in what you are working. if asp then adding an imagebutton or linkbutton will be advised, alternatively you'll have to create a image tag and wrap it with a href tag so you can use it to redirect on click or you can use an form input button. There are many ways for this to happen and no one will be able to help you properly without you giving us the relevant information on what you are using to create your web page

ayesha789 7 Posting Pro in Training · Answer 10 · 2010-05-25T16:32:48+00:00

I am using PHP and MYSQL.
I want to use CSS for creating Buttons.
I need 2 Buttons
FeedBack and Help

MJ Pieterse 2 Poster · Answer 11 · 2010-05-25T16:58:24+00:00

well, you'll have to use link buttons then, or text with a href tag around it and style if from there

example

.StandardButton {
	background-color:#CCCCCC;
	border:1px solid #CCCCCC;
	color:#666666;
	text-decoration:none;
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	font-size:90%;
	text-transform:lowercase;
	font-weight:bold;
	background-image:url(../images/Button.png);
	background-repeat:repeat-x;
}

ayesha789 7 Posting Pro in Training · Answer 12 · 2010-05-25T17:39:42+00:00

i make a link

<div id="footer" class="StandardButton"><a href="eims_north.php">Footer New</a></div>

and use CSS

#footer {
    position:fixed;
    vertical-align:bottom;

    margin:0 auto;
    width:100%;
	margin-left:0px;
}

.StandardButton {
	background-color:#73167A;
	border:1px solid #CCCCCC;
	color:#666666;
	text-decoration:none;
	padding-top:5px;
	padding-left:10px;
	padding-right:10px;
	font-size:90%;
	text-transform: uppercase;
	font-weight:bold;

But its not showing proper button.

master_99 0 Newbie Poster · Answer 13 · 2010-05-25T17:50:29+00:00

#footer {
position:fixed;
vertical-align:bottom;
margin:0 auto;
width:100%;
background-color:#4C265D;
}

master_99 0 Newbie Poster · Answer 14 · 2010-05-25T17:53:31+00:00

#footer_Daniweb Footer {
position:fixed;
vertical-align:bottom;
margin:0 auto;
width:100%;
background-color:#4C265D;
}

See below link to find out Professional Higher Page Rank CSS tutorials
http://www.tutorials99.com

MJ Pieterse 2 Poster · Answer 15 · 2010-05-25T18:38:31+00:00

because you are calling it wrong

<div id="footer"><a href="eims_north.php" class="StandardButton">Footer New</a></div>

your button class should be in the href tag. you cannot have two classes in the same div. you can then also add your hover styles etc to that button class.

css

#footer {    
	position:fixed;    
	vertical-align:bottom;     
	margin:0 auto;  
	width:100%;	
	margin-left:0px;
} 
.StandardButton {	
	background-color:#73167A;	
	border:1px solid #CCCCCC;	
	color:#666666;	
	text-decoration:none;	
	padding-top:5px;	
	padding-left:10px;	
	padding-right:10px;	
	font-size:90%;	
	text-transform: uppercase;	
	font-weight:bold;
}
.StandardButton a {	
	background-color:#73167A;	
	border:1px solid #CCCCCC;	
	color:#666666;	
	text-decoration:none;	
	padding-top:5px;	
	padding-left:10px;	
	padding-right:10px;	
	font-size:90%;	
	text-decoration:none;
	font-weight:bold;
}
.StandardButton a:link {	
	background-color:#73167A;	
	border:1px solid #CCCCCC;	
	color:#666666;	
	text-decoration:none;	
	padding-top:5px;	
	padding-left:10px;	
	padding-right:10px;	
	font-size:90%;	
	text-decoration:none;	
	font-weight:bold;
}
.StandardButton a:hover {	
	background-color:#73167A;	
	border:1px solid #000000;	
	color:#666666;	
	text-decoration:none;	
	padding-top:5px;	
	padding-left:10px;	
	padding-right:10px;	
	font-size:90%;	
	text-decoration:none;	
	font-weight:bold;
}

ayesha789 7 Posting Pro in Training · Answer 16 · 2010-05-25T19:03:20+00:00

ayesha789 7 Posting Pro in Training

16 Years Ago

But its not working properly

ayesha789 7 Posting Pro in Training · Answer 17 · 2010-05-25T19:04:19+00:00

Now its working..... on button click but not when page refresh

ayesha789 7 Posting Pro in Training · Answer 18 · 2010-05-25T19:07:50+00:00

ayesha789 7 Posting Pro in Training

16 Years Ago

but I want style like Daniweb

Member #120589 · Answer 19 · 2010-05-27T02:13:23+00:00

> but I want style like Daniweb

You want it, you code it. The global recession has dictated that free lunches are now deemed bad for your health. No pain, no gain.

MJ Pieterse 2 Poster · Answer 20 · 2010-05-27T13:02:46+00:00

besides that, be oringal and do your own thing. 'stealing' from another design is not what being a designer is about. you are the captain hook if you do. get inspiration from other people if you need it but plain copying is actually 'stealing' their work...

http://www.webdesignerdepot.com/2010/05/7-personality-types-of-designers-today/

ayesha789 7 Posting Pro in Training · Answer 21 · 2010-05-28T19:25:41+00:00

ayesha789 7 Posting Pro in Training

16 Years Ago

Furqan want it not me

Member #120589 · Answer 22 · 2010-05-28T20:48:53+00:00

> Furqan want it not me

But...

> but I want style like Daniweb

Sounds like 'I' to me. Whatever.

papanyquiL 45 Junior Poster · Answer 23 · 2010-05-28T22:30:13+00:00

Stop asking other people to make the code for you. What you're trying to accomplish is very basic and can be learned through the CSS tutorial sites that multiple people have posted in just a few hours. There are also multiple solutions to your problem on Google.

Layout like Daniweb Footer

Dani AI

Recommended Answers Collapse Answers

All 25 Replies

Recommended Answers