Accurately position text fields hovering over canvas elements
Question
I have 2 canvases side-by-side (and a couple of "hidden" ones, also)(I want the side-by-sides to stay that way). I'm trying to find a way to make them stay centered, and not wrap, when the user shrinks the browser window. However there is a problem: I also want to collect user information via text fields and drop-down menu selections. The text fields and menu selections need to LOOK LIKE they're part of the canvas environment. I want them to hover EXACTLY... PRECISELY.... over the canvas(es) to look like they're part of the canvas art. But keeping the canvases centered and applying relative and absolute positions to the text fields and menus have proved to be tricky. I've tried a "parent" DIV and made other DIVs to be positioned absolute from the parent... but I'm getting unexpected results. If it helps make positioning easier, I COULD make the canvases flush left. See code.
#centerAll { margin-left:auto; margin-right:auto; width:1300px; } div.theParent { position: relative; } div.absolute1 { position: absolute; top: 70px; left: 0; width: 90px; height: 20px; } div.absolute2 { position: absolute; top: 120px; left: 0; width: 90px; height: 20px; } div.absolute3 { position: absolute; top: 120px; left: 200; width: 90px; height: 20px; } body{ background-repeat: no-repeat; background-position: left; }
<script type="text/javascript" src="javascriptFile.js"></script> <div class="parent"> <div class="absolute1"> <input type="text" id="letteringText" value="one line of text"> </div> <div class="absolute2"> <select id="select something"> <option value="option 1">option1</option> <option value="option 2">option2</option> <option value="option 3">option3</option> </select> </div> <div class="absolute3"> <select id="select some more"> <option value="option 1">option1</option> <option value="option 2">option2</option> <option value="option 3">option3</option> </select> </div> </div> <div id="centerAll"> <canvas id="TheLeftSideCanvas" width="300" height="300" style="border:1px solid #999999;"></canvas> <canvas id="TheRightSideCanvas" width="300" height="300" style="border:1px solid #999999;"></canvas> <canvas id="SomeHiddenCanvas" width="300" height="300" style="display:none;"></canvas> <canvas id="AnotherHiddencanvas" width="300" height="300" style="display:none;"></canvas> </div>
1 answers
solution1
0 ACCPTED 2019-03-24 15:50:04
your parent div doesn't match the canvas container( #centerAll ) width. I made parent div as absolute and made the width equal to canvas container. Then floated the absolute divs and used text-align property to center the input element over left or right according to the canvas element.
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> #centerAll { margin-left:auto; margin-right:auto; width:1300px; text-align: center; } div.parent { position: absolute; width:1300px; } div.parent:after { content: ''; display:block; clear:both; } div.absolute1, div.absolute2, div.absolute3 { width: 50%; float: left; box-sizing: border-box; text-align: right; padding-top: 20px; padding: 20px; } div.absolute2 { text-align: left; } div.absolute3 { text-align: right; padding-left: 50px; } body{ background-repeat: no-repeat; background-position: left;} </style> </head> <body> <div class="parent"> <div class="absolute1"> <input type="text" id="letteringText" value="one line of text"> </div> <div class="absolute2"> <select id="select something"> <option value="option 1">option1</option> <option value="option 2">option2</option> <option value="option 3">option3</option> </option> </select> </div> <div class="absolute3"> <select id="select some more"> <option value="option 1">option1</option> <option value="option 2">option2</option> <option value="option 3">option3</option> </select> </div> </div> <div id="centerAll"> <canvas id="TheLeftSideCanvas" width="300" height="300" style="border:1px solid #999999;"></canvas> <canvas id="TheRightSideCanvas" width="300" height="300" style="border:1px solid #999999;"></canvas> <canvas id="SomeHiddenCanvas" width="300" height="300" style="display:none;"></canvas> <canvas id="AnotherHiddencanvas" width="300" height="300" style="display:none;"></canvas> <script type="text/javascript" src="javascriptFile.js"></script> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.