Welcome to WebmasterWorld Guest from 54.159.50.111

Forum Moderators: not2easy

Message Too Old, No Replies

footer and <a href=

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

New User

5+ Year Member

joined:June 30, 2008
posts: 10
votes: 0


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)

Junior Member

10+ Year Member

joined:June 3, 2004
posts:193
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 29, 2003
posts: 1676
votes: 0


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)

New User

5+ Year Member

joined:June 30, 2008
posts: 10
votes: 0


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)

Junior Member

10+ Year Member

joined:June 3, 2004
posts:193
votes: 0


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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 29, 2003
posts: 1676
votes: 0


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)

Senior Member

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

joined:Nov 28, 2004
posts:7999
votes: 0


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>