homepage Welcome to WebmasterWorld Guest from 54.205.254.108
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
footer and <a href=
Lassar




msg:4013883
 11:26 pm on Oct 26, 2009 (gmt 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 ?

-

 

Zipper




msg:4013893
 11:37 pm on Oct 26, 2009 (gmt 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>

D_Blackwell




msg:4013901
 11:47 pm on Oct 26, 2009 (gmt 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">

Lassar




msg:4013907
 11:57 pm on Oct 26, 2009 (gmt 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

Zipper




msg:4013908
 12:02 am on Oct 27, 2009 (gmt 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.

D_Blackwell




msg:4013937
 12:31 am on Oct 27, 2009 (gmt 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.

rocknbil




msg:4013981
 2:45 am on Oct 27, 2009 (gmt 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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved