HTML / CSS пытается переместить текстовое поле ввода в заданную позицию - PullRequest
Новая
       7

HTML / CSS пытается переместить текстовое поле ввода в заданную позицию

0 голосов
/ 15 апреля 2020

Эй, если кто-нибудь сможет помочь, это будет очень цениться, я понятия не имею, как переместить следующее текстовое поле туда, где я хочу его видеть. Text Input

Это мой HTML Код: 

<!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>

А вот CSS за ним: 

.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;
  }

Было бы также полезно, если бы кто-нибудь знал, как заставить его не двигаться при увеличении и уменьшении. Установка фиксированного положения не помогает, поскольку я перемещаю gif внутри изображения, преобразовывая его вверх / вниз по y пикселей

РЕДАКТИРОВАТЬ - MainBrowser.png - это целое изображение над текстовым полем «Вставить ключевое слово здесь», за исключением «Geoorgle», которое является SearchEngineGIF.gif

1 Ответ

0 голосов
/ 15 апреля 2020

Вместо этого вы можете просто использовать тег формы 

<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>

Изменить источник изображений и ширину в соответствии с вашими потребностями.

Вы также можете использовать тег таблицы, если хотите

И если изображение не движется, после того как вы исправите положение, задайте верхний и левый параметры для формы в стиле.

Пример: 

top:25%;
left:25%;
...