CODEWITHSUNDEEP
htmlcss
user2486297
user2486297

Reputation: 1

HTML button always one place

I have HTML code with background image,which is man's head.I have html button on man's eye,and I want when browser windows resizes,button be always on eye,this is my code. Please help me,thanks a lot to help me.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Post</title>
</head>

<body>
<div>
<table cellspacing="0"  cellpadding="0">
<tr>
<td>
<img id="bgimage" src="heroes.jpg"/>
<div id="content">
<p align="center"><input type="submit" class="butt" onclick="dosomething();"/></p>
</div>
</td>
</tr>
</table>
</div>
<style>
body,html{margin:0;padding:0; height:100% width:100%}
#bgimage{ position:fixed; left:0; top:0; z-index:1;height:100%; width:100%;}
#content{position:absolute;left:0; top:0; z-index:70; height:100%; width:100%;}
.butt {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #3c4fd9;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
}.butt:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}.butt:active {
    position:relative;
    top:1px;
}
.butt{
    margin-top:260px;
    margin-right:190px;
    }
    .butt{


    }
</style>
</body>
</html>

Upvotes: 0

Views: 1470

Answers (3)

clearskyy
clearskyy

Reputation: 1

I tried to not make that many adjustments to your code as possible to make this solution as easy to implement as possible, but I have done what you're asking in the following way.

Put this in the "head" section of your HTML: 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>

HTML: 

<img id="bgimage" src=""/>
<div id="content">
  <input type="submit" class="butt" onclick="dosomething();"/>
</div>

CSS:

body,html{ margin:0;padding:0;height:100%;width:100%}

#bgimage{ 
  position:fixed; 
  left:0; 
  top:0; 
  z-index:1;
  height:100%; 
  width:100%;
}

#content{
  position:absolute;
  left:0; 
  top:0; 
  z-index:70; 
  height:100%; 
  width:100%;
}

.butt {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
   background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
   border:1px solid #3c4fd9;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
}

.butt:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}

.butt:active {
    position:relative;
    top:1px;
}

jQuery:

$('.butt').css({
  "position" : "absolute",
  "left" : "39%",
  "top" : "41%"
});

to put the jQuery in your HTML file just copy and paste this:

<script type="text/javascript">
$(document).ready(function(){
  $('.butt').css({
    "position" : "absolute",
    "left" : "39%",
    "top" : "41%"
  });
)};
</script>

This isn't perfect on all resolutions, you might have to tweak the percentages in the jQuery, the only alternative is to create a CSS using multiple @media queries to adjust with every screen size.

Upvotes: 0

bugwheels94
bugwheels94

Reputation: 31950

button.classname{
  position:fixed;
  top:value; /*set a value so that it comes on eye horizontally*/ 
  left:value; /*set a value so that it comes on eye vertically*/ 
}

Upvotes: 2

user2462948
user2462948

Reputation: 99

Fixed position and absolute position work in different way. If you use fixed position ,body will be the parent of the item but absolute positioned item can have user defined parent( just give parent element a position property.)

So, if you want to keep the man and the eye button together you have to use same parent. use same position for both man and eye (fixed or absolute) having same parent.

second thing is, you are resizing the man's head by using width: 100% and height: 100%; so, if you want the eye button also change the position use percentage in position (eg. top: 50%). have a look at http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/ . It might help you.

Upvotes: 0

Related Questions