Подписка
Email
Fb
RSS
Twitter
Email

Видео уроки CSS. Часть9

Продолжаем наши уроки CSS. Сегодня очередной урок от сайта DenWeb.Ru. Тема — обтекание, а точнее обтекаемые элементы (еще одно название плавающие элементы).

Плавающие элементы — это элементы, которые обтекаются по контуру другими элементами веб-страницы. Они достаточно часто применяются при верстке. Например, для создания горизонтального меню, для обтекания картинок текстом, для создания колонок.

Обтекание задается с помощью css свойства float со значениями left и right. По умолчанию обтекание элементов не устанавливается, но можно это задать значением none.

Для того, чтобы отменить обтекание, можно после плавающего элемента расположить блок div и указать ему свойство clear:both;

Более подробно все я постарался рассказать в видео уроке.

Вы можете оставить комментарий.

16 комментариев к записи “Видео уроки CSS. Часть9”

  1. Павел:

    как в программе intype 0.9.3 RC подключить автоматический ввод тегов и т.д. как у вас? Подскажите плиз

  2. Евгений:

    Меня тоже интересует это.Как Задать автоматический выбор тегов ?

  3. Никита:

    Ден мне интересенно тег <div> буден использоватся при верстке? или где?

  4. Максим:

    Здравствуйте, Дэн! У меня возникла такая ситуация, с первого взгляда простая, но без вашей помощи не обойдусь......Есть хтмл код:<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Документ без названия</title><link href="1.css" rel="stylesheet" type="text/css"/></head><body><div class="1"><p>qwwwwwwwwwwwc</p></div></body></html>И css файл:.1 { border:solid; }Проблема — свойство сss не применяется вообще при открытии хтмл файла в браузере(хром)...пишу код в Dreamweaver'e, там при просмотре результата всё работает, рамка присутствует...подскажите плиз, в чём я совершил ошибку?...

  5. Ростислав:

    Максим, задай имя класса для параграфа словом, а не цифрой.

  6. Прохор:

    Вот он самый для меня главный урок. Остальные уже по несколько раз пересмотрел, чтобы наизусть так сказать :)

  7. Ильдар:

    Ты это тоже с помощью обтекание сделал?

  8. stek:

    Не сразу все улеглось, но с второй попытки всё встало на свои места))прошёл курс HTMl и вот уже девятую часть css закончил. Мой совет всем ученикам -при  изучение  частей сразу же приступать к практике. Это я понял после того,как прослушал весть курс html ,после думаю дай поработаю! и понял что нечего я не понял))) хех пришлось слушать всё снова, и делать уже работу. Клепал потихоньку html страницу,теперь моя страничка яркая и интересная)) Спасибо огромной тебе ! очень благодарен за твои уроки. не когда не мог подумать ,что это всё так интересно и увлекательно. И никогда не мог подумать что я начну этим увлекаться.первые поиски учителя привели меня к разочарованию ... Так как попадался на платные курсы и думал что нету бесплатных. Некоторое время сидел на попе ровно,потом опять захотел найти информацию! чтобы запомнить хоть немного структур ,и вот нашел! ваш сайтик)))  огромное спасибо. сейчас этот урок 2012 года,представляю как много вы знаете на 2014 год и это дает стимул)) 

  9. Людмила:

    Здравствуйте, Ден ! У меня такая проблема, — блоки никак не хотят  вставать по горизонтали.<div class="catalog">   <p><img src="images/vyx8.png" /></p>   <p><img src="images/vyx14.png" /></p>   <p><img src="images/vyx25.png" /></p></div>.catalog p{  float:left;}Тоже самое и с текстом, — не обтекает картинку. На сss «catalog» почему-то красного цвета, «р» — синего. Может, в этом проблема, что-то в настройках ? 

  10. Ольга:

    Ден, у меня почему-то картинки с рисунками после добавления свойства float, становятся не на одном горизонтальном уровне — второй чуть ниже первого. Что я сделала не так?

  11. Я не могу так сказать. Смотрите, может где-то отступы задали.

  12. Ольга:

    Вот что я в хтмл файле написала:<div class="catalog"> <p><img class="am" src="images/image.png" alt="« width=»100" height="100" border="0" />Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><br/> <p><img class="am" src="images/st.png" alt="« width=»100" height="100" border="0" />Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>а вот CSS:.catalog  p{ background-color: #006699; float:left; width:250px; border: 2px solid black; margin-left:10px;}.catalog  p img{ float:left;}как видите, отступов не задавала.Очень бы хотелось разобраться в чем ошибка, дабы при верстке не допускать таких досадных оплошностей.

  13. Ольга:

    ой, а почему в итоге весь комментарий сплошной кучей получился? Я ведь перенос строки делала. у меня в сss стоит margin-left, неужели он причина неровности?

Оставить комментарий

Spam Protection by WP-SpamFree

Яндекс.Метрика