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
- вёрстка
- веб-сайт
Вам нужно использовать свойство 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
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 resimlerKohl’s Retail Store Location IV
Kohl’un mağaza girişi — kss stok fotograflar ve resimlerKohl’un mağaza girişi
Kohl’s Retail Department Store — kss stok fotograflar ve resimlerKohl’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 resimlerKohl’un Perakende Mağaza Yeri. Коля Amazon’un iadelerini ücretsi
цветы
теплоходы — kss stok fotograflar ve resimlerтеплоходы
kohl’s розничный магазин местоположение. kohl’s принимает возвраты с amazon бесплатно. — kss stok fotograflar ve resimlerKohl’s Retail Store Location. Kohl’s принимает возвраты Amazon…
red rose — kss stok fotograflar ve resimlerRed 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 resimlerPretty 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 resimlerKameraya 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 Porte, . ..
Kaleidoscope — KSS Stok Fotoğraflar Ve ResimlerKaleidoscope
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. kohl’s заключила партнерское соглашение с косметическим гигантом sephora для создания бизнеса. — kss stok fotograflar ve resimlerМестоположение розничного магазина Коля. Kohl’s сотрудничает с…
Морозный лист на земле — kss stok fotograflar ve resimlerМорозный лист на земле
бледно-розовая ипомея в одиночестве в кукурузном поле — kss stok fotograflar ve resimlerБледно-розовая ипомея в одиночестве на кукурузном поле
серый осенний день на базе ксс в хибинах.Серый осенний день на базе КСС в Хибинах. Дома и…
Расположение розничного магазина Коля. kohl’s заключила партнерское соглашение с косметическим гигантом sephora для создания бизнеса. — kss stok fotograflar ve resimlerKohl’s Retail Store Location. Kohl’s сотрудничает с…
розничным магазином Kohl’s. kohl’s заключила партнерское соглашение с косметическим гигантом sephora для создания бизнеса. — kss stok fotograflar ve resimlerKohl’s Retail Store Location. Kohl’s сотрудничает с…
розничным магазином Kohl’s. kohl’s заключила партнерское соглашение с косметическим гигантом sephora для создания бизнеса. — kss stok fotograflar ve resimlerKohl’s предлагает зарядные станции для электромобилей для клиентов I
Kohl’s розничный магазин — kss stok fotoğraflar ve resimlerKohl’s розничный магазин
kohl’s розничная торговля расположение магазина.