Sorry if this is a stupid question, but I'm having trouble with a 404 error page I'm trying to make.
Basically, I've set it up as a 'Where's Wally' style page with a large background image. I'm trying to create a transparent button to click on that will return the user to the page they were just on, but I need it to be relative from the centre of the page as I'm trying to ensure it will work on all screens.
Here's the code I have so far:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('http://www.website.org/404.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
p.pos_fixed {
position: center;
position:relative;left:-50px
</style>
</head>
<body>
<p class="pos_fixed"><a href='javascript:history.back()’><img src=‘http://www.website.org/button.png’></a></p>
</body>
</html>
Can anyone see a way to do this? I'm also very open to suggestions if there's a much better way I'm missing.
Thank you in advance!
Update: New code.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('http://www.pophatesfags.org/404two.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: -50px;
padding: 1em;
border: 50px solid red;
}
</style>
</head>
<body>
<a class="button" href="javascript:history.back()">Link Here</a>
</body>
</html>
I think this is is what you are after.
It positions the button dead center of the page and then pushes it left 50px;
.button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: -50px;
padding: 1em;
border: 1px solid red;
}
<a class="button" href="javascript:history.back()">Link Here</a>
Note This is responsive in that it will always center first but the 50px value is, in itself, not responsive...you might want that to be a percentage value too.