show textboxes positioned in the middle of a slanted rectangle

Is there a way to place centered textboxes inside each of the colorful boxes in the image below?

Update: I've posted my feeble attempt below. Admittedly, design is not my forte and I'm struggling with this task.

p.s. To those who downvoted, thanks!

Check out the code snippet here

table{width: 585px; height: 585px; background-image: url('https://i.sstatic.net/uknk9.png');} 
input{background-color: transparent; width: 100%; border-style:none; font-size: 32px;}

<table>
    <tr>
        <td></td>
        <td valign="bottom" align="center"><input type="number" id="number" value="1" /></td>
        <td></td>
    </tr>
    <tr>
        <td align="right"><input type="number" id="number"  value="2" /></td>
        <td></td>
        <td align="left"><input type="number" id="number" value="3" /></td>
    </tr>
    <tr>
        <td></td>
        <td valign="top" align="center"><input type="number" id="number" value="4" /></td>
        <td></td>
    </tr>
</table>​

htmlcss

Answer №1

For a solution, check out this link http://jsfiddle.net/ZC2bd/46/ but I'm confident you haven't explored enough - Google is your friend!

Here's the HTML code:

<div id="background">
  <input id="top" type="text" />
  <input id="left" type="text" />
  <input id="right" type="text" />
  <input id="bottom" type="text" />
</div>

CSS styling:

div#background{
    display: block;
    width: 597px;
    height: 597px;
    background-image: url('https://i.sstatic.net/uknk9.png');
}
#top{
    width: 150px;
    height: 25px;
    position: absolute;
    margin: 135px 0 0 224px;
}
#left{
    width: 150px;
    height: 25px;
    position: absolute;
    margin: 290px 0 0 70px;
}
#right{
    width: 150px;
    height: 25px;
    position: absolute;
    margin: 290px 0 0 380px;
}
#bottom{
    width: 150px;
    height: 25px;
    position: absolute;
    margin: 435px 0 0 230px;
}​

The HTML section clearly defines a container with four input fields.

In the CSS part, the image is set as the background for the container with fixed dimensions. Each input field has an ID and positioned absolutely within the parent element using the `margin` property.

Hoping this explanation proves helpful.

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

Navigating the website with curtain.js and anchor tags

Currently, I am working on a website located at www.TheOneCraft.co.uk. I have incorporated the curtain.js jQuery plugin to create animated slide/pages as users scroll down. However, I have been unsuccessful in making the navigation bar follow this animati ...

javascriptjqueryhtmlcss

When implementing Critical CSS, the Jquery function fails to execute upon loading

Currently, I am working on optimizing my website at . In an attempt to improve its performance, I decided to implement critical CSS using penthouse. The Critical CSS code can be found here, generously provided by the main developer of penthouse. However, ...

javascriptjquerycssoptimizationresize

What are the steps to utilize vue.js for dynamically adjusting my sidebar based on a URL input?

Greetings to the amazing community of Vue.js enthusiasts, I am a novice looking to develop a single-page web application using vue.js. This application will consist of a fixed header and dynamic body content that changes based on user interactions. Here&a ...

javascripthtmlcssvue.js

Using Puppeteer to Retrieve Data from a Web Page with Multiple Divs of the Same Class

I am in the process of creating a puppeteer script to scrape an announcements website. The challenge I am facing is how to extract the content of each page element with the same class using a loop. Upon inspecting the DOM, it's evident that all the co ...

javascripthtmlnode.jspuppeteer

How can you achieve the effect of "hovering over an image to automatically start playing a muted video within the image itself"?

[![enter image description here][1]][1]I am working with WordPress and Elementor, and I want to create a hover effect where an image triggers a muted video to play within the image area on mouseover. The video should stop playing when the mouse is not hove ...

javascripthtmlcsswordpresselementor

Echo command fails to work with location.href

I am facing a small issue with my PHP echo. I have a JavaScript link function that is not working because the HTML code shows this type of link onclick="location.href="http://www.link.com/";". It's clear that this syntax won't work. However, if w ...

javascriptphpjqueryhtml

Methods for Expanding a Div within an Oversized Row, Despite Height Constraints

I have a situation where I need to adjust the height of a cell in a table. One of the cells contains a larger element that causes the row to expand vertically. I also have another cell with a div element set to 100% of the cell's height. However, I wa ...

htmlcss

Change the size of a particular div upon hovering over another element

I'm trying to figure out how to scale my div with text when a user hovers over a button, but I've tried various operators like >, ~, +, - with no success. section { background: #000; color:#fff; height: 1000px; padding: 150px 0; font-family ...

javascriptjqueryhtmlcss

What is the best way to customize the background color of a highlighted ToggleButton in react-bootstrap?

Currently, I'm using react-bootstrap and facing a challenge in changing the background color of a chosen <ToggleButton> to blue. For instance: <ButtonToolbar> <ToggleButtonGroup type="radio" name="options" ...

cssreactjsreact-bootstrap

Align text to the left and right with a centered div

Visualize the asterisk * at the center of the div textAlignRight * text AlignLeft This is essentially my goal to accomplish <center> <span class="left_host">Right aligned</span> * <span class="righ ...

htmlcss

Saving a dynamically generated table in a PHP session to display every time the current user logs in

This specific table is generated based on the user's selection of values in the drop-down menus. How can we store this dynamically generated table in a session so that it appears every time the current user logs in? <table border="0" class="table ...

phphtmlsession

Enhance your website with Bootstrap 4 by separating text and images in your carousel

I've been struggling to create a slider similar to the one shown in the image. I attempted using the Bootstrap carousel, but ran into issues with inconsistent image sizes and the text on the left side jumping around before settling in its correct posi ...

cssbootstrap-4carousel

Angular.js does not trigger validation for input[type='date'] if only a part of the date is entered (such as just the day)

There is an input[type='date'] with no additional validation rules. The issue arises when only a portion of the date is entered (for example, just the day and month). In this case, if you enter '01/02/YYYY', it will be recognized as an ...

angularjshtmldate

Tips for creating a dropdown that autocompletes similar to the one found in Google Chrome

Looking to create a unique custom drop-down autocomplete suggestion list using HTML and CSS, similar to Chrome's design (shown below). In my attempts to achieve this, I utilized an absolutely positioned table beneath the input element. I applied vert ...

htmlcss

How to ensure the table fits perfectly on the screen using JQueryMobile and Cordova?

I've been working on a JavaScript function that creates a dynamic page and displays data fetched from a database. However, I've encountered an issue where the displayed data overflows past the width of the mobile screen. Is there a way to ensure ...

javascriptjquerycsscordovajquery-mobile

Problem with Jsdom retrieving document

I am struggling to utilize jsdom for loading a local HTML file. Here is the code snippet: var config = { file: "filename", scripts: ["node_modules/jquery/dist/jquery.min.js"], done: function(err, window){ con ...

javascripthtmljsdom

Tips for determining whether the current request is an AJAX request in MVC3 view using JavaScript

I have a div with a maximum height and overflow set to auto. When the size of the div overflows, a scroll bar is automatically added. However, I have also set $("#itemsdiv").scrollTop(10000); so that the scroll bar is always at the bottom. Now, I want t ...

javascripthtmljqueryasp.net-mvc-3-areas

Tips for personalizing the FileField in wtforms to function as an image button

I'm attempting to display an image from my project's directory as an icon instead of the standard "choose file" button. Unfortunately, my attempts thus far have been unsuccessful. Not only is the image not loading, but the original button is only ...

htmlcsswtforms

Should elements be concealed with CSS if they cannot be eliminated with php?

There are times when I struggle to deactivate a function or elements in PHP, particularly in PHP frameworks and CMSs. As a workaround, I often utilize display: none. However, I am concerned about potential issues this may cause in the future. Should I co ...

phpcss

Reposition the div element on mobile devices using media queries

Hello, I'm facing an issue on mobile with my website: dev site Today, I implemented a dropdown menu with flags to allow language switching. However, the dropdown in mobile is appearing under the hamburger nav bar. I was thinking of using media querie ...

htmlcssmedia-queries