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

Issue with overlapping positioning of child components in React

I've come across multiple inquiries addressing this issue, yet none of them have provided a solution that fits my problem. In my scenario, there's a Parent component containing three Child components. import React, { Component } from 'react ...

cssreactjs

What is the best way to smoothly move a fixed-size div from one container to another during a re-render process?

Introduction Anticipated change Similar, though not identical to my scenario: Situation 0: Imagine you have a container (chessboard with divs for game pieces) and a dead-pieces-view (container for defeated pieces). The positioning of these containers i ...

javascripthtmlcssreactjscss-transitions

div layout; sidebar movements occur after appending div to the header

Having trouble mastering layouts, I am attempting to create a full-width header that includes a left sidebar and a right sidebar. The body is split into 5 sections: full width, left and right sidebars, center content with 3 columns, and the footer mirrorin ...

csshtml

Create a vibrant PNG image background that changes dynamically based on the dominant color of the

Is it possible to dynamically set the background color of a PNG image, either white or black, based on the dominant color in the image? For example, this image should have a dark background: https://i.stack.imgur.com/cerjn.png And this one should have a ...

javascripthtmlcssvue.js

Struggling to keep text aligned to the left?

Check out the image at in my jsfiddle. It remains fixed in its position regardless of the screen width. However, the adjacent text does not behave in the same way. I aim to have the text positioned DIRECTLY next to the icon without any movement even if ...

htmlcsscss-position

Ways to customize the size of a radio button with CSS

Is it possible to adjust the size of a radio button using CSS? ...

htmlcssradio-button

Angular directive specifically meant for the parent element

I am working on a directive that I need to apply to a specific div element without affecting its child elements. The goal is to make the main div draggable, so that when it moves, its child divs move along with it. However, I do not want the child divs to ...

javascripthtmlangularjsangularjs-directive

Styling buttons with different colors using React onClick event.getSelectedItem() method

I am having an issue with adding a border when the class is set to "transportation active" in my React code. When I click on one of the icons, all of them become active instead of just the clicked one. This behavior is not what I want, as I only want the ...

javascripthtmlreactjsreact-hooksfrontend

A step-by-step guide on customizing the background color of a Dialog in Angular Material (Version 16)

I've been attempting to modify the background color of my Angular Material Dialog by utilizing the panelClass property in the MatDialogConfig. Unfortunately, I'm encountering a partial success. I am aiming to set the background color as red (jus ...

cssangulartypescriptsassangular-material

What is causing FF and Chrome to not recognize these <form>'s?

My PHP logic is rendering the following forms with text inputs and a submit button. Everything works fine in IE, but in FF and Chrome, clicking the submit button reloads the page instead of going to the form action URL. I was surprised to find that the &l ...

phphtmlformsfirefoxcross-browser

Is there a way to adjust the speed of the transitions between animations?

I've been experimenting with ways to increase the time between animations in my cycle. Adjusting the duration of the keyframes animation hasn't yielded the desired effect. span { animation: rotateWordsFirst 15s linear infinite 0s; ...

cssanimation

How can I adjust the height of an iframe dynamically using AngularJS?

I wrote a function that resizes the height of an iframe element to always be 100% after it loads: app.directive('iframeAutoSize', [function() { return { restrict: 'A', link: function(scope, element, attrs) { ...

javascriptcssangularjsiframe

The masonry plugin overlays images on top of each other

I have gone through similar questions but haven't found anything that applies to my specific case. Following an ajax call, I am adding li elements to a ul $.ajax({ url: 'do_load_gallery.php?load=all' }).done(function(result) { ...

javascriptjqueryhtmlcss

What is the best way to create a line break in a flex div container to ensure that overflowing items wrap onto the next line using

Using material-ui popper to display a list of avatars. Trying to arrange the avatars horizontally within the popper. <Popper style={{ display: 'flex', maxWidth: '200px', }}> <div style={{ marginRight: '20px' }}&g ...

javascriptcssreactjsmaterial-ui

Enhance Your Highcharts Funnel Presentation with Customized Labels

I am working on creating a guest return funnel that will display the number of guests and the percentage of prior visits for three categories of consumers: 1 Visit, 2 Visits, and 3+ Visits. $(function () { var dataEx = [ ['1 Vis ...

javascriptjqueryhtmlcsshighcharts

Positioning my login form in the right spot is proving to be a challenge

I'm working on integrating this form into my website, but I'm having trouble placing it in the top right corner of the header. Below is the HTML code: $(function(){ var $form_inputs = $('form input'); var $rainbow_and_b ...

htmlcssforms

Error: You can't call .text as a function in jQuery

While trying to retrieve the text from my td, I encountered the following error: $tds[2].text is not a function. The output of console.log('td',$tds[2]) shows: https://i.stack.imgur.com/OUngP.png $(document).ready(function() { $trs = $(&ap ...

javascriptjqueryhtml

On the initial page load, Magento is failing to load the CSS properly

I've been tinkering with the Magento website over at For some reason, the CSS on the Home page doesn't load initially, but it loads fine when you click on any other link like Products or Gallery. Any ideas why this might be happening? Thanks in ...

cssmagentoload

spacing between elements vertically

             I am struggling with a common issue and despite searching, I have not been able to find a solution that works for me. Here is my setup: <div id="wrapper">   <div class="content-area-top"></div>   <div clas ...

htmlcss

Printing from a lengthy React DOM using window.print only generates a single page

My React component is capable of rendering markdown and can span multiple pages. Everything looks great when the component is displayed in the browser - scrolling works perfectly. However, whenever I try to print the page using window.print or ctrl + P, ...

cssreactjstypescriptreact-dom