Printable View
is there a way using HTML or CSS to make the entire page a clickable link?
its the "Enter" page for the site.. and right now I have a large trans gif as the link (as well as a 10 second redirect).. but would rather have the whole page clickable...
Thanks!
Something like this might be suitable
HTML Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Example</title>
<style>
BODY.enterPage{
cursor:hand;
}
</style>
<script>
function goto(){
location.href = "http://www.dogpile.com"
}
</script>
</head>
<body class="enterPage" onclick="goto();">
<a href="www.dogpile.com">Enter</a>
</body>
</html>
thought of something like that.. but what if browser has scripts turned off? will that still work?
this should work then right?
<body onclick="location.href='home.html';">
I just tried that in Firefox with javascript turned off and it didn't work.
ok.. soo.. how to do this a "safe" way?
Put the whole page within an anchor tag.
Or put an anchor somewhere and use CSS to make it cover the entire viewport. (But problematic with either scrolling or IE.)
? I need examples of either of those :) (still learning!!)
if this helps.. there is NOTHING on the page but a background image
HTML or XHTML?
I'll assume HTML so here's the code including CSS
Change the background colour and "entry.gif" as needed.HTML Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
html
{
background-color: black;
}
body
{
overflow: hidden;
}
body>div a
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black url('entry.gif') center center no-repeat;
}
</style>
</head>
<body>
<div><a href="main"></a></div>
</body>
</html>
is this right? "body>div a"
it seems that whatever I have in that section doesnt work....
That would be because you are using a bad browser ... ;)
It works perfectly fine in Firefox and Opera.
Have you read the bottom two links in my signature? :)
lol
its because this "body>div a" should be just "div a"
then it works perfectly!!
I have to program for the "majority" and that means IE ;)
but it should work for FF & Opera as well...right?
body>div is a perfectly valid, basic, part of the CSS specification. To be quite honest, I removed it and it still did not work for me in IE, but then not much does anyway.
I have a problem with "programming for the majority", because standards are not respected and so progress is never made. But do as you see fit ;)
it didnt work??
this is what I changed it too based on a few examples I found... body> wasnt used in the ones I saw....
Code:div a
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('bg_main.jpg');
background-repeat: no-repeat;
background-position: center;
background-color: black;
}
Well that's actually exactly the same as what I had, minus the body>div child combinator in the selection rule. I only put it in in case you needed multiple div's, which you probably don't anyway :)
To make it work properly in IE I needed to add "height: 100%;" to the body properties.
Mind you, this method won't work if the content is long enough for scrolling. In that case, the link will simply scroll away.
position:relative;
would ignore scrolling, but doesn't work in IE.
cornedbee.. not to worry.. there is nothing but a background image on this.. no text etc...
Thanks all!!!
No problem, and PLEASE at least consider using a better browser ... it will make your life much easier.
I will consider it I guess...
I use maxthon, and I know its IE, but the features it has are just too good and so easy to use... basically its the drag link for new tab feature I cant live without
click drag a link a 1/4 inch (so it turns to a shortcut drop cursor) and let go.. bam that link opens in a new page.. love it too much! havent found another browser that does this
Mouse Gestures for Firefox.
http://optimoz.mozdev.org/gestures/
I can middle-click links for a new tab. How's that for simple?
works for me...