Welcome to WebmasterWorld Guest from 54.205.20.160

Forum Moderators: not2easy

Message Too Old, No Replies

footer and <a href=

   
11:26 pm on Oct 26, 2009 (gmt 0)

5+ Year Member



I have done a css footer that works.

Only thing is tidy complains about it.

<a href="#top">
<div id="footer" align="center">
<div class="style6">
<center>
<br>
<br>
footer text
</center>
</div>
</div>
</a>

tidy
line 892 column 1 - Warning: missing </a> before <div>
line 902 column 1 - Warning: discarding unexpected </a>

When I click on the footer; the page goes to the top.

Is there anyway to make tidy happy ?

-

11:37 pm on Oct 26, 2009 (gmt 0)

10+ Year Member



A div container (block element) cannot be within an anchor (inline element). If you actually need the footer to take the page to the top, just wrap the footer text with the anchor.

<a href="#top">footer text</a>

11:47 pm on Oct 26, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Keep in mind also that the easiest way to handle the other end is by using id to mark fragment identifiers.

<body id="top">

11:57 pm on Oct 26, 2009 (gmt 0)

5+ Year Member



So suppose you did not have "footer text".

And just wanted that; when you click on the footer go to the top of page.

Or is this one case where tables are better then CSS

12:02 am on Oct 27, 2009 (gmt 0)

10+ Year Member



If you just want the div to take you to the top you can use something like,

<div id="footer" onclick="window.scrollTo(0,0);">

But this actually depends on whether the div container is not empty and is clickable.

12:31 am on Oct 27, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You can still do it with just CSS by putting the <a> inside the footer and setting {display: block;} on the <a> so that the entire footer is one big link. (You will need a single &nbsp; inside the <a>.)

.foot-link a {
display: block;
}

Note: IE will need {width: 100%;} conditional comments for both .foot-link and .foot-link a
......................................

I am more interested in how you plan to provide a cue t users that clicking on the footer will jump them back to the top of the page. Any user would need context. If Accessibility is important, then you definitely need to consider implementation.

2:45 am on Oct 27, 2009 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Try this. Note that

- There's no need to link to a real identifier in most browsers. href="#" by default goes back to top.

- I **have** heard that some browsers don't do this (was it Safari?) so to be sure, link your anchor to a real on-page element,

<h1 id="top">To Top</h1>
...
href="#top"

as in the second example.

- To answer the second posted q, this works fine without "footer text" (see second sample) but IE abhors empty elements, put a &nbsp; in the link. However . . .

- Agree on accessibility, this is called "Mystery Meat Navigation [webpagesthatsuck.com]" (or one flavor of it) and shouldn't be an empty link.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>To Top</title>
<style type="text/css">
#footer {
/*remove the border if you like, adjust widths,
it's just here to see what it's doing. */
width: 95%;
border:1px solid #000000;
margin: 0 auto 0 auto;
}
#footer a {
display: block;
text-align: center;
width: 100%;
height:24px;
text-decoration:none;
}
</style>
</head>
<body>
<h1>To Top</h1>
<p>content - paste more of these to take it below viewport</p>
<p>content</p>
<p>content</p>
<p id="footer"><a href="#">footer text</a></p>
</body>
</html>

No footer text, bad idea, link to in-page element, good idea.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>To Top</title>
<style type="text/css">
#footer {
/*remove the border if you like, adjust widths,
it's just here to see what it's doing. */
width: 95%;
border:1px solid #000000;
margin: 0 auto 0 auto;
}
#footer a {
display: block;
text-align: center;
width: 100%;
height:24px;
text-decoration:none;
}
</style>
</head>
<body>
<h1 id="top">To Top</h1>
<p>content - paste more of these to take it below viewport</p>
<p>content</p>
<p>content</p>
<p id="footer"><a href="#top">&nbsp;</a></p>
</body>
</html>
 

Featured Threads

Hot Threads This Week

Hot Threads This Month