Linking text to specific spot on image

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!

Answer №1

Give this one a try.

input.one{ 
      position:relative;
      top:20%; 
      left:15%; 
      display:inline-block; 
      background-color:rgba(50,205,50,0.5);
      width:40%;
      height:120px;
     }

I have done some testing on IE8 with this code. Let me know if it meets your needs. Hopefully it does the trick.

Answer №2

Personally, I have reservations about the approach of using an image and overlaying HTML elements on top. However, let's give it a shot.

        <div style="width:800px">
            <img src="http://3.bp.blogspot.com/_RNrl2Gr0VwI/TJXG8dG6oeI/AAAAAAAADFY/pq6J6WQIW60/s1600/Arkham+Sanitarium+Admission+Form+Sample.jpg">
        </div>

Now, let's make a change to this CSS:

input.one {
position: absolute;
top: 163px;
left: 100px;
display: block;
background: rgba(0,255,0,0.5);
}

Answer №3

Check out this solution: Fiddle

To address the issue, a percentage-based padding-bottom is used to ensure responsive height in the text input.

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;
  position: absolute;
  top: 0;
     bottom: 0;
    left: 0;
    right: 0;
}

input.one{  
    height: 0;
    padding-bottom: 2%;
     position: relative; 
    top:15%; 
    left:12%; 
    display:block; 
    background:rgba(0,255,0,0.5);
}
#top-spacer {
     display: block;
     content: "Hello";
     padding-bottom: 21%;
     position: relative;
     width: 100%;
     clear: both;
}



 <div id="content">
          <div id="block">
                <img src="http://3.bp.blogspot.com/_RNrl2Gr0VwI/TJXG8dG6oeI/AAAAAAAADFY/pq6J6WQIW60/s1600/Arkham+Sanitarium+Admission+Form+Sample.jpg">
                    <div id ='top-spacer'></div>
            <input type="text" id="firstname" name="firstname" value="fn" class="one">

        </div>
    </div><!--/content-->

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS Trick: How to Clear Content in a 3-Column Div arrangement

I've been struggling to clear the content below my three div columns, each consisting of a span with centered text and a textarea. It seems that the issue arises from the floating div tags without proper clearing. When viewed in Firefox, the next ele ...

The border of the cell in the top row only partially overlaps with the margin area

Have you noticed how the left border of the first cell doesn't line up with the margin area of the table? This peculiar phenomenon seems to occur only in the first row: https://i.stack.imgur.com/qMWCh.jpg In all other rows, the border aligns proper ...

A guide on seamlessly transitioning from a mobile website to the corresponding native app

I am currently working on a mobile website project. This website is built using basic HTML and is accessed through a URL on a web browser, not as a native app or through PhoneGap. The client has requested links to their Facebook, Pinterest, YouTube, Twitt ...

Is there a method to retrieve all Class elements without using a for-loop?

I am trying to retrieve all elements with a specific class using document.getElementsByClassName(); <body> <div class="circle" id="red"></div> <div class="circle" id="blue"></div> <div class="circle" id="yell ...

When dynamically adding rules to jQuery validate, I encountered an unexpected error

My dynamic form validation with jQuery validate involves a drop-down menu on my HTML that includes values 1, 2, 3, and 4. Depending on the selection made from the drop-down, different div elements are displayed with corresponding fields. All the input fie ...

Encountering issues with Html.ActionLink in Asp.net MVC when using Bootstrap Select

I am trying to implement a dropdown list for language localization on my website. However, when using <ul> tags with Html.ActionLink, the links are created with language codes as shown below: @{ var routeValues = this.ViewContext.RouteData.Valu ...

Json data integrated dropdown menu

I have successfully retrieved data from a Json array and displayed it in a dropdown list. However, I am facing an issue where I want to only show the name of the city instead of both the name and description. If I remove cities[i]['description'], ...

Variances in the order of HTML elements within an article's layout

Check out this example of HTML and CSS <!DOCTYPE html> <html> <head> <title>Floats Example</title> <style type="text/css"> .left { float:left; width:100px; } .righ ...

"Maintaining Consistency: Ensuring The First Row is Repeated on Every

When trying to save a PDF using jspdf, I encountered an issue with tables in my HTML. The tables do not have headers, but JsPDF is automatically repeating the first row of the table on every page, causing overlap. I don't want headers on every new pag ...

Apply CSS styles from a text area using v-html

I am currently working on developing a unique WYSIWYG application where users have the ability to write CSS in a textarea field and view its direct impact on the HTML content displayed on the page. As I was experimenting with different approaches, I attemp ...

What is the recommended way to adjust the width of a paper-textarea element in Polymer 1.0?

Is there a way to adjust the width of a paper-textarea? I have tried using CSS selectors within Polymer 1.0 style tags, but it does not seem to be effective. The paper-textarea element is made up of paper-input-container. I attempted the following approach ...

Tips for showcasing the complete image within v-parallax

For my project, I decided to go with vuetify as the frontend framework. It's a great choice! Now, I have a question about v-parallax - how can I make it display the full image without cropping? Below is some code snippet, and you can find the full cod ...

When the last character in the route is a forward slash, the Express server will load the HTML page with CSS and JavaScript. Conversely, if the last route character

On my second html page model.html, I noticed the following issue: When I include a '/' at the end of my route address in the browser like this: http://localhost:3002/home/model/, the correct html page is loaded, but the css/js files do not load. ...

Is there a way to submit a basic HTML form using R?

As a newcomer to R programming, I am excited to apply what I am learning in the Johns Hopkins Data Science track to practical use. My current goal is to automate the process of downloading historical bond prices from the US Treasury website After explorin ...

Expanding a responsive HTML background image using Javascript

I've spent countless hours grappling with this code, attempting to dynamically resize the background of HTML based on the browser window size using JavaScript. Here's what I have so far (I'm using Firefox for this): GM_addStyle('body ...

Calculate the total number of vacation days not including holidays and weekend days

Looking for help with a program I've created to calculate total vacation days, excluding weekends and national holidays. Successfully excluded weekends, but struggling with how to ignore national holidays in the calculation. The program is built usin ...

Ways to retrieve the parent DIV's width and adjust the child DIV's width to match

Attached is my question with the HTML and a screenshot. Within a DIV container (DIV with ID=ctl00_m_g_a788a965_7ee3_414f_bff9_2a561f8ca37d_ctl00_pnlParentContainer), there are two inner DIVs - one for the left column TITLE (DIV ID=dvTitles) and the other f ...

Is there a way to adjust the width and create the illusion that the div is sliding in from off screen?

I successfully animated a side navigation menu to slide in from the left of the screen. The animation is working perfectly, however, I had to set the div's width to 0px in order for it to appear as though it's sliding in from off-screen. If I ch ...

Leveraging Forms for Entering Google Maps Information

Recently, I've been working on an app that aims to generate a custom map based on user input from a form. If you'd like to test the functionality yourself, head over to this page. After filling out all required fields and hitting "Submit", the g ...

Extracting information from a database (HTML, JavaScript)

I am currently working on a table that receives data from the server using ajax: $.each(data, function(i, item) { $('#MyTable tbody').append("<tr>" +"<td>" +data[i].A+ "</td><td>" +d ...