Разное

Картинки ксс: Работа с картинками в HTML и CSS

29.07.2023

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

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

Вопрос задан

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

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

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

После того, как я вставил картинку, она очень сильно съехала, и никакие параметры в 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

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

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

Почта

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

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

Почта

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

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Делаем обтекание картинки текстом на HTML и CSS

Быстрая навигация по этой странице:

  • Общее решение задачи
  • Массовое применение для всех изображений
  • Накладываем текст на изображение

Правильное и красивое размещение всех объектов на странице — неотъемлемый элемент дизайна любого уважающего себя сайта. Как всегда, здесь не обойтись без CSS. Дело в том, что обтекание картинки текстом HTML сам по себе делает (с помощью атрибутов align=left, align=right тега img), но он при этом не создает отступов. Потому без CSS все-таки не обойтись.

Общее решение задачи

CSS? Я знаю несколько способов, с помощью которых можно решить поставленную задачу.

Так, например, можно картинку заключить в тег DIV, которому через CSS задать свойство float:left или float:right, с проставлением необходимых отступов.

Но этот способ я бы не назвал самым корректным — зачем включать в документ лишний тег, если вопрос можно решить исключительно в рамках тега IMG?

Делается это с помощью присвоения все тех же самых свойств — float, отвечающего за выравнивание, и margin, отвечающего за отступы.

Для начала присвоим нашему изображению класс:

[html]
<img src=»моя_картинка.jpg» />
[/html]

Теперь пропишем соответствующие свойства в CSS — предположим, что у нас картинка будет стоять слева:

[css]
.img_class {
float: left;
margin: 10px 10px 10px 0;
}
[/css]

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

Массовое применение для всех изображений

Если требуется, чтобы все изображения в документе выравнивались по левому краю, тогда этот вопрос можно решить сразу на уровне того блока (элемента) страницы, в котором они находятся — чтобы не прописывать каждый раз class для изображения. Даже небольшая экономия трафика того стоит.

Предположим, что картинки находятся в посте, который на странице вашего сайта показывается в <div class=»content»></div>.

В таком случае в CSS файле вашего сайта будет достаточно прописать следующий код:

[css]
.content img {
float: left;
margin: 10px 10px 10px 0;
}
[/css]

Теперь все изображения, находящиеся в блоке «content», будут выравниваться слева и иметь вышеуказанные отступы. Если для какого-то отдельного изображения вы захотите сделать исключение — например, расположить его справа, то для него будет нужно задать id (например, id=»my_img») и в css файле прописать такие параметры (должны начинаться со знака решетки — #):

[css]
#my_img {
float: right;
margin: 10px 0 10px 10px;
}
[/css]

Накладываем текст на изображение

Порой необходимо, чтобы текст был написан прямо на изображении — например, часто бывает красиво, если сделать большую картинку к статье, а на ней написать название статьи или какую-то аннотацию.

Опять-таки, сделать это можно множеством способов. Приведу два наиболее популярных.

Во-первых, можно создать блок, в котором будет написан текст, а изображение будет выступать фоном для этого блока:

[html]
<div>Текст, который будет наложен на картинку</div>
[/html]

 

[css]
. my_block {
background: url (my_img.jpg) top left no-repeat;
width: 500px;
height: 300px;
padding: 400px 0 0 0;
}
[/css]

В этом блоке строка с текстом разместится в нижней части блока — с верхним отступом в 400 пикселей.

Данный метод особенно хорошо подходит для элементов дизайна (шапка, логотип сайта), в которых уже заранее известен и размер изображения, и текст, который будет написан.

Другой метод — это создать два блока (один — с картинкой, другой — с текстом), и поместить один «сверху» другого в соответствии с заданными параметрами. Большой плюс этого метода состоит в том, что у блока с текстом можно задать фон (в том числе и полупрозрачность):

[html]
<div>
<img src=»моя_картинка.jpg» />
<div>Текст, который будет наложен на картинку</div>
</div>
[/html]

[css]
.img {
width:500px;
height: 300px;
position: relative;
}
.text {
background-color: #FFF;
width: 500px;
height: 50px;
position: absolute;
left: 0px;
top: 450px;
}
[/css]

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

Как видите, ничего сложного в обтекании картинок и наложении на них текста нет, главное — экспериментировать и подбирать наиболее удачный вариант!

30+ Kss Stok Fotografları, Resimler ve Royalty-Free Görsel

Görsel

  • Görsel
  • Fotograf
  • Иллюстрации
    • 9001 1 Vektörler
  • Video
kss videosunu görüntüleyin

31

kss stok fotoğraf ve görselini inceleyin veya daha fazla stok fotograf ve görsel keşfetmek için yeni bir arama başlatın.

Сирала:

En popüler

Индианаполис — май 2016: адрес розничного магазина kohl’s i — kss stok fotoğraflar ve resimler

Индианаполис — май 2016: розничный магазин Kohl’s, расположение I

indianapolis — май 2016: kohl’s розничный магазин, расположение ii — kss stok fotoğraflar ve resimler

Индианаполис — май 2016: Kohl’s Retail Store, расположение II

kohl’s, розничный магазин, расположение iv — kss stok fotograflar ve resimler

Kohl’s Retail Store Location IV

Kohl’un mağaza girişi — kss stok fotograflar ve resimler

Kohl’un mağaza girişi

Kohl’s Retail Department Store — kss stok fotograflar ve resimler

Kohl’s универмаг розничной торговли

Расположение розничного магазина Коля. kohl’s заключила партнерское соглашение с косметическим гигантом sephora для создания бизнеса. — kss stok fotograflar ve resimler

Kohl’s Retail Store Location. Kohl’s сотрудничает с…

краска для красок cephesi — kss stok fotograflar ve resimler

краска для красок cephesi

краска для красок perakende mağaza yeri. amazon’un Коля iadelerini ücretsiz olarak kabul ediyor. — kss stok fotograflar ve resimler

Kohl’un Perakende Mağaza Yeri. Коля Amazon’un iadelerini ücretsi

цветы — kss stok fotograflar ve resimler

цветы

теплоходы — kss stok fotograflar ve resimler

теплоходы

kohl’s розничный магазин местоположение. kohl’s принимает возвраты с amazon бесплатно. — kss stok fotograflar ve resimler

Kohl’s Retail Store Location. Kohl’s принимает возвраты Amazon…

red rose — kss stok fotograflar ve resimler

Red rose

Pretty esmer kadın elbiseler sıcak sarı kazak, beyaz kap ve eldiven lila arka plan üzerinde izole kamera hava öpücük g önderme, koyu dalgalı saçlı ve ışık makyaj ile Кадын, камера бакарак. — kss stok fotograflar ve resimler

Pretty esmer kadın elbiseler sıcak sarı kazak, beyaz kap ve…

Pretty esmer kadın elbiseler sıcak sarı kazak, beyaz kap ve eldiven lila arka plan üzerinde izole kamera hava öpücük gön derme, koyu dalgalı saçlı ve ışık makyaj ile kadın, kameraya bakarak. — kss stok fotograflar ve resimler

Pretty esmer kadın elbiseler sıcak sarı kazak, beyaz kap ve…

собор — kss stok fotograflar ve resimler

собор

kameraya hava öpücük gönder меня гюзель эсмер кадын якин портре, модель пембе арка план üzerinde izole poz, turuncu manikür ve makyaj sahip, mavi gömlek ve kot giyen обаятельный kadın. — kss stok fotograflar ve resimler

Kameraya hava öpücük gönderme güzel esmer kadın yakın portre,…

kameraya hava öpücük gönderme güzel esmer kadın yakın portre, модель pembe arka plan üzerinde izole poz, turuncu manikür ve makyaj sahip, mavi gömlek ve kot giyen обаятельный kadın. — KSS Stok Fotoğraflar Ve Resimler

Kameraya Hava öpücük Gönderme Güzel Esmer Kadın Yakın Porte, . ..

Kaleidoscope — KSS Stok Fotoğraflar Ve Resimler

Kaleidoscope

Kohl’s Strip. kohl’s заключила партнерское соглашение с косметическим гигантом sephora для создания бизнеса. — kss stok fotograflar ve resimler

Торговый центр Коля. Kohl’s сотрудничает с косметической…

Адрес розничного магазина kohl’s. kohl’s заключила партнерское соглашение с косметическим гигантом sephora для создания бизнеса. — kss stok fotograflar ve resimler

Kohl’s Retail Store Location. Kohl’s сотрудничает с…

ржавая трубка маргаритка — kss сток фото

трубка ржавая ромашка

розничный магазин kohl’s. kohl’s заключила партнерское соглашение с косметическим гигантом sephora для создания бизнеса. — kss stok fotograflar ve resimler

Местоположение розничного магазина Коля. Kohl’s сотрудничает с…

Морозный лист на земле — kss stok fotograflar ve resimler

Морозный лист на земле

бледно-розовая ипомея в одиночестве в кукурузном поле — kss stok fotograflar ve resimler

Бледно-розовая ипомея в одиночестве на кукурузном поле

серый осенний день на базе ксс в хибинах.
дома и автомобили на фоне осенних гор. — kss stok fotograflar ve resimler

Серый осенний день на базе КСС в Хибинах. Дома и…

Расположение розничного магазина Коля. kohl’s заключила партнерское соглашение с косметическим гигантом sephora для создания бизнеса. — kss stok fotograflar ve resimler

Kohl’s Retail Store Location. Kohl’s сотрудничает с…

розничным магазином Kohl’s. kohl’s заключила партнерское соглашение с косметическим гигантом sephora для создания бизнеса. — kss stok fotograflar ve resimler

Kohl’s Retail Store Location. Kohl’s сотрудничает с…

розничным магазином Kohl’s. kohl’s заключила партнерское соглашение с косметическим гигантом sephora для создания бизнеса. — kss stok fotograflar ve resimler

Местоположение розничного магазина Коля. Kohl’s сотрудничает с…

Kohl’s предлагает зарядные станции для электромобилей для клиентов i — kss stok fotograflar ve resimler

Kohl’s предлагает зарядные станции для электромобилей для клиентов I

Kohl’s розничный магазин — kss stok fotoğraflar ve resimler

Kohl’s розничный магазин

kohl’s розничная торговля расположение магазина.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *