Пыльца сосны Россия
Инструкция
Все нюансы сборки, переработки, заготовки и применения.
-- Купить пыльцу --

Как вставить картинку и текст в блок HTML+CSS

В этой статье рассмотрим, как в отдельный блок вставить текст и картинки, и разместить их, при помощи CSS

Для примера используем созданную в предыдущих статьях заготовку каркаса с шапкой сайта.

Возьмём html код блока content.


<div id="content"></div>

Вставим в блок content два абзаца текста.


<div id="content"
  <p>Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте. Этот сайт
первый, который я разработал самостоятельно, а до этого умел только
входить в интернет.
Почему я решил его сделать? За те 3 месяца, пока разбирался в сайтостроении
и создавал этот ресурс обнаружилось, что авторы руководств по созданию
сайтов считают многие нюансы само собой разумеющимися и не обращают на
них внимание. А мне, учитывая возраст и «опыт», было не просто понять как
раз эти нюансы, они отнимали больше всего времени. И я решил написать свой
материал, так что-бы другим было легче сориентироваться в потоке новой информации.</p>

  <p>Если вам что-то будет непонятно,
спрашивайте, для меня нет «глупых» вопросов.
Читайте и создавайте свой сайт самостоятельно, каким бы ни был Ваш возраст и
стаж работы на компьютере. Уверен, у Вас получится еще лучше и уж точно, в
несколько раз быстрее, чем у меня.И я решил написать свой
материал, так что-бы другим было легче сориентироваться в потоке новой информации.
Здесь «разжеваны» все мелочи сопровождающие создание сайта, мимо которых
обычно проскакивают другие авторы.</p>
</div>

Есть два абзаца. Теперь посмотрим, как в блок content вставить изображения.

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

Если сайт на виртуальном хостинге, то изображения нужно загружать на него, в соответствующую папку images.

Размещать будем три картинки. Одну по центру в начале статьи, другую в первом абзаце слева, и третью во втором абзаце справа.

Сначала в html код блока content вставим адреса картинок, и зададим для каждой из них свой class. Делается это для того, чтобы в дальнейшем, через эти классы, применить к изображениям свойства CSS.


<div id="content">
  <img class="center" src="images/i10.png">
    <p><img class="left" src="images/i11.jpg">Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте. Этот сайт
первый, который я разработал самостоятельно, а до этого умел только
входить в интернет.
Почему я решил его сделать? За те 3 месяца, пока разбирался в сайтостроении
и создавал этот ресурс обнаружилось, что авторы руководств по созданию
сайтов считают многие нюансы само собой разумеющимися и не обращают на
них внимание. А мне, учитывая возраст и «опыт», было не просто понять как
раз эти нюансы, они отнимали больше всего времени. И я решил написать свой
материал, так что-бы другим было легче сориентироваться в потоке новой информации.
Здесь «разжеваны» все мелочи сопровождающие создание сайта, мимо которых
обычно проскакивают другие авторы.</p>
    <p><img class="right" src="images/11.jpg">Если вам что-то будет непонятно, спрашивайте, для меня нет «глупых» вопросов.
Читайте и создавайте свой сайт самостоятельно, каким бы ни был Ваш возраст и
стаж работы на компьютере. Уверен, у Вас получится еще лучше и уж точно, в
несколько раз быстрее, чем у меня.
И я решил написать свой
материал, так что-бы другим было легче сориентироваться в потоке новой информации.
Здесь «разжеваны» все мелочи сопровождающие создание сайта, мимо которых
обычно проскакивают другие авторы.</p>
</div>

Получилось вот так.

Изображения установленные в блоке content

Теперь, свойствами CSS, распределим изображения по местам.

.center{ /*Звёздочка*/
margin: 0 0 10px 330px; /*Внешние отступы*/
}
.left{ /*Чёртик слева*/
float: left; /*Обтекание справа*/
margin: 10px 10px 10px 10px;
}
.right{ /*Чёртик справа*/
float: right; /*Обтекание слева*/
margin: 10px 10px 10px 10px;
}

Как видите, для изображений находящихся в массе текста, задаётся свойство CSS — float, и оно предписывает тексту обтекать изображение, и обтекать его с заданной стороны. А при помощи свойства margin, задаётся отступ текста от изображения.

Я бы здесь добавил ещё красную строку.


p{
  text-indent: 30px;
}

Изображения обтекаемые текстом в блоке content

На следующей странице мы рассмотрим относительное позиционирование, и будет ещё интереснее. И совсем не сложно.

Неужели не осталось вопросов? Спросить


Перемена

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

Как сделать шапку сайта < < < В раздел > > > Абсолютное позиционирование (position:absolute)
 

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.
А так же:

30 комментариев на «Как вставить картинку и текст в блок HTML+CSS»

  1. stariс говорит:

    Судя по вопросу, одной подсказкой тут не отделаешься. flexbox — это тема для отдельной полноценной статьи, которую я ещё не написал, так что в Гугл, инфы предостаточно и фишка не сложная, но удобная. Для большого количества изображений — самое то, что надо.

  2. Максим говорит:

    Доброго времени суток. А не подскажите как расположить изображения в блоке div с помощью flexbox? Не float.

  3. irmaseo говорит:

    Очень полезная статья, спасибо

  4. stariс говорит:

    Чем могу.

  5. Ирина говорит:

    Ай спасибо! Три дня мучала коды и не понимала, почему картинка не хочет лежать слева от текста. Оказывается, нужно было поставить float!
    (не кидайтесь помидорами — делаю с нуля, курю мануалы, про флоат раньше не знала)

    Дай вам бог здоровьечка!

  6. stariс говорит:

    Добрый день Герман. Так как Вы единственный из 30 человек, ежедневно посещающих эту страницу, и только у вас текcт не хочет ложиться в блок, то вывод очевиден.

    Я всё же проверил код в редакторе — всё работает так как и показано.

    Проверьте ещё раз. Скорее всего, где-то пропущена закрывающая кавычка или точка с запятой в конце строки.

    Я на той неделе два дня искал незакрытый див в Кнопках CSS, и нашёл эту пропущенную угловую скобку только с помощью поиска Notepad. И что ты думаешь — на самом видном месте. «Где были мои глаза!». Вот так бывает.

  7. Герман говорит:

    Доброго времени суток! Все делаю и повторяю как вы пишите но вот в элементарном застрял. Пытаюсь сделать текст для блок и вставить его, но он не хочет ложится в сам блок а прописывается в отступы. В чем ошибка? Повторяю все делаю как у вас написано. Даже(когда очередной раз не получилось) тупо скопировал код но текст все равно не встал в блок а разместился в пространстве отступа. Спасибо.

  8. stariс говорит:

    I will never give up help. And what kind of help can you offer?

  9. Smithe207 говорит:

    Heya im for the first time here. I discovered this board and I to uncover It truly helpful &amp it helped me out a whole lot. I hope to supply something back and aid other people such as you helped me.

  10. stariс говорит:

    Мои понятнее для начинающих, потому что писал я этот материал в процессе обучения, как конспект студента, а не тогда когда стал мастером и многие мелочи стали «само собой разумеется». Сейчас наверное так уже не напишу.

  11. Олег говорит:

    Cергей, доброго вечера! Спасибо что ответили Глюк в самом нотепаде. Переделал
    все в Dreamweaver и все нормально.
    Хотел бы добавить, что на самом деле Ваши объяснения намного лучше и понятней в отличии от Попова и других авторов видео курсов которые как бы уже считаются доками в этом деле Спасибо за труды

  12. stariс говорит:

    Здравствуйте Олег. Так как статья написана давно я перепроверил код. Скопировал, вставил в Notepad++ и изменил margin у правого чертика. Картинка подвинулась согласно новым значениям. Перепроверьте ещё раз свой код. Может точки с запятой в конце строки нет или ещё какая-то мелочь?

  13. Олег говорит:

    Доброго времени суток Старик! Тут такой вопрос по теме влаживания картинок
    Я вставил 5 штук 3 по левой стороне и 2 по правой
    Стали четко, но вся фишка в том что левые они свойством margin регулируются во все стороны, а те что справа нет. В чем может быть проблема?

  14. stariс говорит:

    Спасибо Дружище!!! И тебе всего чего хочется, и побольше и побыстрее!!!

  15. stariс говорит:

    Спасибо Джек за понимание и советы. Но сознаюсь честно, в последнее время, замечаю за собой уже не желание разжёвывать всё так как в начале. Видимо начал «забуревать». Придётся, видимо, этот момент мне всё таки учесть, и исправить. Ведь дело ещё в том, что я даже не думал в начале, что этот сайт будет кому-то интересен. Просто мне так удобнее осваивать материал, т.е. понять, потом сделать, потом подробно описать всё что сделал, вот тогда всё хорошо усваивается. И больше всего я ждал насмешек и критики в комментах. Ну вот получилось то, что получилось. Сейчас не знаю даже что делать. По идее знаю уже достаточно, чтоб запустить и гнать свой основной ресурс, а этот сайт использовать только как конспект шпаргалку, монетизировать то его практически невозможно. Ведь о каких деньгах можно говорить с конкретными новичками, и всякая реклама им по барабану. Я даже Адсенсе убрал — всё равно по нулям идёт. И бросить сейчас — уже как то не так. Люди то идут, что-то находят, что-то спрашивают, ну как бросишь? Видимо придётся тянуть, и тянуть так же досконально и подробно, как я это делал вначале. Эх если бы не работа, но её тоже не бросишь, там бесценный материал для основного ресурса. Собираю, а вот обрабатывать уже не успеваю. Ну ладно, извини, уже нытьё пошло. Людям и потруднее во сто раз бывает. Короче, по просьбам трудящихся тормоз Блога Старого Перца отменяется. Постараюсь успевать. Ведь мы то уже понимаем, что людская искреняя благодарность, приносит гораздо больше, чем могут принести деньги.

  16. Джек говорит:

    УМЕТЬ и ОБЪЯСНИТЬ.
    Вот в этом согласен с Владимиром.
    Чайник он и в Африке чайник и не суть важен эксклюзив.
    Старик прав, как и прав в приводимом аргументе Владимир.
    Не все преодолевающие барьер в изучении HTML либо CSS молодого возраста. Есть люди гораздо старшего поколения, к которым себя и отношу.
    Отдать предпочтение тому либо другому мнению — затруднительно.
    Истина важнее!
    Сталкивался с многими сайтами подробной тематики.. вроде как бы и все «разжевано», ан нет.. не все. Здесь простите немного отклонюсь в сторону философии. Многие освоившие HTML, CSS (независимо от возрастной группы) стараясь поделиться своим опытом, никогда не снизходят до уровня абсолютного нуба, пытаясь обьяснить прописные истины. И как говорит опыт, люди прочитав подобное изложение и ничего не поняв — просто напросто уходят. Безусловно наличие интеллекта, будь то новичок или умудренный опытом ветеран имеет существенное значение. Всегда обходил «десятой дорогой» те сайты, где их авторы в изложении материала о веб-строительстве, почти всегда в большинстве случаев, выражались двусмысленно… иди туда, не знаю куда, возьми то не знаю что, и положи это непонятно куда и зачем т.д.
    Краткое резюме. Так как делает это Старик, понять проще, яснее. Не хвалю его, совсем нет. Просто.. обычный человек освоивший да мелочей и дающий советы, рекомендации, выражаясь совершенно ясным, понятным языком, явно старался снизойти до уровня понятного, извините повторюсь.. абсолютному новичку. За что ему и спасибо!
    Ну а Старику пожелание.. при изложении материала старайтесь до «мельчайших деталей» обьяснить новичку те или иные аспекты возникшего вопроса либо проблемы. Однозначно — это затруднительно, спору нет, зато понимание этого немаловажного аспекта привлечет к вашему ресурсу намного больше благодарных пользователей.

  17. Джек говорит:

    Ну Старику подниму настроение! Здравствуй Сергей!
    Извини что долго отсутствовал..
    Позволь поздравить тебя с наступающим Новым Годом! Хочу пожелать тебе
    здоровья, благополучия, счастья, творческих успехов да и всего самого
    хорошего! Чтоб блог развивался и побольше, хороших новостей и учеников!
    С огромным Уважением Джек

  18. stariс говорит:

    Нет, всё не правильно.
    Если для header задан класс, то перед ним ставится точка, но скорее всего он просто блок, тогда ставится #header.
    В background-image не нужен весь путь, нужно так:
    background-image:URL(images/wolf.png)
    Фоновым изображениям? width и height не задаются. Они сразу делаются нужного размера, а если размер картинки меньше блока, то она начинает размножаться по умолчанию, а если больше, то она не отображается.
    background-position — верно
    background-repeat:no-repeat: — нужно добавить, это запрет размножения.

  19. hummingbird говорит:

    Правилен ли код для вставки картинки в шапку?

    .header {
    background: #FFE4C4;
    background-image: /www………………/Themes/default/images(wolf.png);
    height: 150px;
    width: 250px;
    background-position:top 0px center;

    }

  20. stariс говорит:

    Точно. Только насчёт папки atachment, не скажу наверняка (не знаю директорию форума). На блоге картинка для шапки загружается в wp-content — themes — название темы — images.
    Затем в стилях прописывается следующее свойство:
    background: #f3ffff; /*фон, схожий с фоном картинки*/
    background-image: url(images/s3.png); /*картинка в шапке*/
    background-repeat:no-repeat; /*запрет размножения*/
    background-position:top 0px center; /*размещение, тут можно экспериментировать со значениями, короче двигать туда-сюда*/
    Да ещё. Картинка делается сразу нужного размера. Если будет больше, может вообще не появиться в окне.

  21. Джек говорит:

    Ладно, к делу.. вот ссылка куда я хочу вставить картинку весом 66 Kb и размером 550 на 300
    В этот прямоугольник.
    Firebug пустое место не исследовать, как тут быть и составить код? Картинку наверное нужно забросить на сервер в папку Аттачмент?
    Подскажи пожалуйста.

  22. stariс говорит:

    Попытка не пытка!

  23. Джек говорит:

    Спасибо! Знаешь в css я конечно дуб, но восстановление из резервных копий и заготовку бэкапов заранее, я уже освоил в 100 раз быстрее, чем изучение css ))
    Это дело у меня поставлено на конвейер )
    И этот парадокс меня самого удивляет! Постоянно общаюсь с хостером, изучаю Панель управления, но с css полный капеец..!!! Вот благодаря тебе может и продвинусь немного вперед.

  24. stariс говорит:

    Да никаких страшных последствий. Даже если наворотить такого, что откроется вообще белый экран, всегда можно войти в файл стилей через FTP, и поискать ошибку. Или восстановить сайт из резервной копии хостинга. Если нужно расскажу подробнее.

  25. Джек говорит:

    Настроение как вдохновение приходит не каждый день )
    Здравствуйте Старик!
    В чем то согласен с Владимиром, а именно для меня проблема вставки кода в нужное место файла. Ведь не верно сделанный отступ, пропущенный закрывающая (открывающая) скобка, точка, двоеточие и т. д и вместо картинки
    получаешь «белый экран» со всеми вытекающими отсюда последствиями..
    с Ув. Джек

  26. stariс говорит:

    Спасибо. Ну что тут скажешь. Подняли с утра настроение!

  27. ольга говорит:

    Вы молодец что так добродушно принимаете любые комментарии! Мне очень нравиться ваш сайт, вы действительно объясняете все очень просто и понятно чего нет на других сайтах!:))

  28. ольга говорит:

    Коли хорош, так не хвастай: тебя и так заметят

  29. starik говорит:

    Значит Вы эксклюзивный «чайник». Для таких тоже надеюсь есть руководство. С наступающим Вас Новым Годом.

  30. Владимир говорит:

    Я сожалею о потраченном Вами времени, но УМЕТЬ и ОБЪЯСНИТЬ — вещи разные… Это Вам просто так кажется, что все «разжеванно», но мне более понятен заумный язык программистов, чем Ваш, хоть я и «чайник»…
    Мне 50 🙂

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

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