I am seeking a solution to anchor a text input box to a specific spot on an image. Although I can achieve this using CSS, the problem arises when I resize my window and the alignment of the input box is lost.
While I want to allow some resizing of the window, it is crucial for the text boxes to remain anchored in a precise location.
Take a look at the provided HTML/CSS. I specifically require the "Firstname" input to always be positioned on the name line of the image.
HTML.....
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="style1.css" media="screen, projection" rel="stylesheet" type="text/css" />
<title>Test</title>
</head>
<body>
<div id="content">
<div id="block">
<div>
<img src="http://3.bp.blogspot.com/_RNrl2Gr0VwI/TJXG8dG6oeI/AAAAAAAADFY/pq6J6WQIW60/s1600/Arkham+Sanitarium+Admission+Form+Sample.jpg">
</div>
<input type="text" id="firstname" name="firstname" value="fn" class="one">one</a>
</div>
</div><!--/content-->
</body>
</html>
CSS.....
html, body {
height: 100%;
}
#block{ float:left; width:100%; max-width: 1000px; min-width: 600px; position: relative; }
#content{
height: 100%;
min-height: 100%;
}
#block img {
max-width: 100%;
display: inline-block;
}
input.one{ position: absolute; top:15%; left:12%; display:block; background:rgba(0,255,0,0.5);}
Help!