Search code examples
htmlcsssearch-engine

HTML / CSS trying to move input text box to a set positon

Hey if anyone is able to assist it would be much appreciated, I have no idea how to move the following textbox to where I want it to be. Text Input

This is my HTML Code:

<!DOCTYPE html>
<html>

<head>

<link rel="stylesheet" type="text/css" href="Stylesheet.css">


</head>

<body>

<img src="../Resources/MainBrowser.png" alt="SearchEngineGIF" class="custom2">
<img src="../Resources/SearchEngineGIF.gif" alt="SearchEngineGIF" class="custom1">

<input type="text" placeholder="Insert Keyword Here">


</body>
</html>

And here is the CSS behind it:

.custom1 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  transform: translateY(-210px);
  width: 23%;
}

.custom2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  transform: translateY(+25px);
  width: 25%;
}

input[type=text]{
    width:20%;
    border:2px solid #000000 ;
    border-radius:4px;
    margin:8px 0;
    outline:none;
    padding:8px;
    box-sizing:border-box;
    transition:.3s;
    font-size: 20px;
    text-align: center;
  }

input[type=text]:focus{
    border-color:dodgerBlue;
    box-shadow:0 0 8px 0 dodgerBlue;

  }

input[type=text]::placeholder{
    font-family: Calibri;
    font-size: 20px;
    font-style: italic;
    text-align: center;
  }

It would also be useful if anyone knew how to make it not move when zooming in and out, Setting the position to fixed doesnt help as I am moving a gif inside of the Image by transforming it up/ down y pixels

EDIT - MainBrowser.png is the whole image above "Insert Keyword Here" textbox, minus "Geoorgle" which is SearchEngineGIF.gif

Solution

  • Instead you can just use the form tag

    <form style="width:25%;height:auto;">
<img src="yourimage.jpg" style="width:25%;">
<br>
<input type="text" style="width:20%;"><img src="searchimage.jpg" style="width:5%;">
</form>

    Change the source of the images and the width according to your need.

    You can also use the table tag if you want

    And about the image not moving, once you fix the position, put the top and left parameters for the form in the style.

    Example:

    top:25%;
left:25%;