Forum Moderators: not2easy
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 ?
-
<a href="#top">footer text</a>
<body id="top">
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
<div id="footer" onclick="window.scrollTo(0,0);">
But this actually depends on whether the div container is not empty and is clickable.
.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.
- 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 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"> </a></p>
</body>
</html>
