Как в html на картинке написать текст: Как сделать текст на изображении

Leave a Comment / Html / By /

html — Конфликт картинки и текста в css

Задать вопрос

Вопрос задан

Изменён 2 года 3 месяца назад

Просмотрен 419 раз

При создании шапки, я сделал текст «Главная», чтобы затем вложить в него ссылку на главную страницу, а позже решил что нужно вставить лого перед этим текстом.

После того, как я вставил картинку, она очень сильно съехала, и никакие параметры в CSS это не исправляют. Что делать не знаю, помогите пожалуйста.

* {
  margin: 0px;
  padding: 0px;
}
body {
  margin: 0px;
}
header {
  background-color: #000000;
  height: 120px;
  margin: 0px;
  padding: 0px;
}
#logo {
  padding-top: 28px;
  margin-left: 190px;
}
h2 {
  color: #757575;
  font-family: Sans-Serif;
  font-weight: 550;
  font-size: 13pt;
  padding-top: 28px;
  margin-left: 220px;
}
<!DOCTYPE html>
<html lang=ru>
<head>
  <meta charset=utf-8>
  <title>Pepeland</title>
  <!--заголовок, отображается в названии вкладки-->
  <link rel="stylesheet" href="csscode. css">
  <!--rel показывает что мы подключили стили, а href это название файла-->
</head>
<body>
  <header>
    <!--шапка сайта-->
    <img src="pictures/logo.png">
    <h2>Главная</h2>
  </header>
  <footer>
    <!--подвал сайта, как шапка, но в самом низу-->
  </footer>
</body>
</html>
  • html
  • css
  • вёрстка
  • сайты

6

Вам нужно использовать свойство float. И желательно, разбивать лого и меню на отдельные

div. Тогда получается такой код:

* {
  margin: 0px;
  padding: 0px;
}
body {
  margin: 0px;
}
header {
  background-color: #000000;
  height: 120px;
  margin: 0px;
  padding: 0px;
}
#logo {
  padding-top: 28px;
  margin-left: 190px;
  float: left;
}
h2 {
  color: #757575;
  font-family: Sans-Serif;
  font-weight: 550;
  font-size: 13pt;
  padding-top: 28px;
  margin-left: 220px;
}
<!DOCTYPE html>
<html lang=ru>
<head>
  <meta charset=utf-8>
  <title>Pepeland</title>
  <!--заголовок, отображается в названии вкладки-->
  <link rel="stylesheet" href="csscode. css">
  <!--rel показывает что мы подключили стили, а href это название файла-->
</head>
<body>
  <header>
    <!--шапка сайта-->
    <div>
      <img src="pictures/logo.png">
    </div>
    <div>
      <h2>Главная</h2>
    </div>
  </header>
  <footer>
    <!--подвал сайта, как шапка, но в самом низу-->
  </footer>
</body>
</html>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Заголовок на этой картинке можно сверстать текстом.

Как?

Руст Кулматов

Можно нарезать картинку на части и разложить элементы по слоям с помощью z-index. Попробуем!

Сначала вырежем из картинки «наползающие» элементы. Так как у меня нет оригинала, я сделал это довольно грубо:

Фон без текста

Голова штангиста

Рука со штангой

Теперь разместим все элементы на полотне с помощью абсолютного позиционирования:

 
<!-- index. html -->
<div>
  <h2>Зачем<br />тренер</h2>
  <div></div>
  <div></div>
</div>

.bg {
  position: relative;
  width: 840px;
  height: 364px;
  background: url(bg.jpg) no-repeat center / 100%;
}

.title {
  position: absolute;
  top: 12%;
  left: 5%;
  font: bold 135px/.8 Arial;
  color: white;
}

.head {
  position: absolute;
  bottom: 17.9%;
  left: 55.7%;
  width: 10.4%;
  height: 29%;
  background: url(head.png) no-repeat center / 100%;
}

.hand {
  position: absolute;
  top: 28.5%;
  left: 36.3%;
  width: 14.7345612%;
  height: 47.5%;
  background: url(hand.png) no-repeat center / 100%;
}

Зачем
тренер

Благодаря порядку элементов в разметке почти всё получилось сразу, только последняя буква второй строки подлезает под руку, хотя не должна. Исправим, задав ей z-index

:

 
<!-- index.html -->
<div>
  <h2>
    Зачем<br />трене<span>р</span>
  </h2>
  <div></div>
  <div></div>
</div>

.title span {
  position: relative;
  z-index: 1;
}

Зачем
тренер

Теперь последняя буква налезла на голову, а надо наборот. Поднимем голову по оси Z ещё выше:

 
.head {
  /* ... */
  z-index: 2;
}

Зачем
тренер

Готово!

Приходите смотреть разборы: https://t. me/rusty_pixels

P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Как создать текстовое поле HTML [Примеры]

При создании веб-форм вам понадобится несколько элементов, включая элементы div, метки и поля ввода.

Вводы, пожалуй, самый важный элемент формы. Существует много возможных типов ввода, таких как флажки, переключатели, меню выбора и текстовые поля, которые позволяют пользователям вводить данные различными способами.

Текстовое поле HTML позволяет пользователям форм отправлять свое имя, имя пользователя и другую важную информацию. Узнайте, как сделать его, следуя инструкциям ниже, а затем посмотрите несколько примеров.

Как создать текстовое поле в HTML

Создать текстовое поле в HTML легко с помощью элемента . Давайте разберем процесс шаг за шагом ниже.

Шаг 1: Создайте элемент этикетки.

Для начала создайте элемент

Шаг 2: Создайте элемент ввода.

Затем создайте элемент . В открывающем теге добавьте атрибут type и установите для него значение «text». Обратите внимание, что это значение по умолчанию. Затем добавьте атрибут ID  и name  и задайте для них то же значение, что и для атрибута for на предыдущем шаге.

Итак, для этого примера вы должны установить атрибуты имени и идентификатора на «Имя». Вот HTML:

Атрибут имени необходим для отправки любых данных из формы. Атрибут id необходим, чтобы связать поле ввода с меткой.

Шаг 3: Определите любые другие необходимые атрибуты.

Ввод текста поддерживает дополнительные атрибуты, такие как maxlength, minlength и заполнитель, которые могут предоставить пользователям важный контекст при заполнении формы.

Например, вы можете добавить текст-заполнитель в пример поля ввода выше, чтобы указать, что вы ищете имя и фамилию пользователя. Вот HTML рядом с результатом во внешнем интерфейсе.

См. пример ввода текстового поля Pen HTML от HubSpot (@hubspot) на CodePen.

Вот видео, в котором эти шаги объясняются более подробно.

Ввод текстового поля HTML

Ввод текстового поля HTML относится к однострочному текстовому полю в форме. Вы можете создать его с элементом ввода с атрибутом типа, указанным как «текст», или без указания атрибута типа. Обратите внимание, что атрибут type не нужно указывать, так как типом элемента ввода по умолчанию является «текст».

Элемент может отображаться другими способами с использованием различных атрибутов типа, таких как «флажок», «дата», «электронная почта», «пароль» и «отправить». Но при использовании атрибута типа текста или без атрибута результат будет выглядеть следующим образом:

Источник изображения

HTML Textarea

текстовое поле строки не будет работать. Пользователи могут оставлять комментарии через поле ввода текста, но большинство их ответов будут скрыты. Вместо этого вы можете создать многострочное текстовое поле, используя HTML-элемент