<MyRusakov.ru />

Создание Интернет-магазина на PHP и MySQL

Создание Интернет-магазина на PHP и MySQL

Видеокурс "Создание Интернет-магазина на PHP и MySQL" - это уникальный курс по созданию Интернет-магазина с нуля. Особенностью данного курса является то, что создание идёт с самого начала, то есть от идеи. Далее создаётся дизайн всех необходимых страниц, после делается их вёрстка. Затем создаётся движок на PHP и MySQL, после делается Admin-панель и, наконец, готовый сайт размещается в Интернете.

Адрес созданного в этом курсе сайта: http://storedvd.ru

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Частичная отмена float в CSS

Частичная отмена float в CSS

В этой статье я решил разобрать одну проблему, которая иногда встречается при вёрстке, и при этом в Интернете найти её решение очень трудно. В этой статье мы разберём проблему частичной отмены float в CSS, а так же я Вам покажу её решение.

Итак, давайте разберём вот такой код:

<div id="left">Левые блоки</div>
<div id="right">
  <img src="images/img.jpg" alt="" />
  <p>Текст статьи</p>
  <div style="clear: both;"></div>
  <p>Автор: Иван Иванов; Раздел: CSS</p>
</div>

И CSS-код:

#left {
  border-right: 5px solid #000;
  float: left;
  height: 400px;
  width: 200px;
}
#right {
  margin-left: 220px;
}
#right img {
  float: left;
}

Какая была наша задача? Сделать 2 колонки: в левой колонке есть какой-то контент, в правой колонке есть статья. И у этой статьи есть картинка с float: left; (как и у левого блока). Затем мы хотим вывести блок с информацией о статье, безусловно, мы не хотим, чтобы эта информация была справа от картинки. Поэтому добавляем clear-блок. Однако, тут нас ждёт сюрприз.

Отменилось не только float: left; у картинки, но и у левого блока. Таким образом, информация о статье ушла вниз, поравнявшись с нижней границей левого блока (поскольку он выше). Как решить эту проблему? Очень просто, достаточно в блок #right добавить свойство overflow:

#right {
  margin-left: 220px;
  overflow: hidden;
}

Теперь всё встало на свои места. Свойство overflow отвечает за отображение того, что находится за пределами блока. И hidden сообщает, что будет отображаться лишь то, что находится внутри блока, а всё остальное будет скрыто. Именно это свойство и значение позволяет нам решить проблему с частичной отменой float в CSS.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (5):

mike124 mike124 18.02.2014 22:05:02

Пример неудачный - у меня что с overflow: hidden;, что без оного отображается нормально. Пробовал в IE9, Опера, FF и Хром.

Ответить

rysich rysich 19.02.2014 01:32:06

Кажется это материал из разряда "хак". Overflow это отображение внутреннего контента, а float это обтекание и позиционирование, и они вообще никак не связаны между собой. Чтобы нормально отображались колонки, нужно верстать нормальный многоколоночный макет, хотя бы так как у Мержевича: http://htmlbook.ru/layout А не заниматься сомнительными хаками.

Ответить

sinkill sinkill 19.02.2014 01:53:22

где ты здесь вообще хаки увидел? :D

Ответить

Maks4ever Maks4ever 02.01.2015 18:27:02

не очень понятно как это сработало может действительно для подписи к картинке стоило добавить отдельный блок

Ответить

Tanya1 Tanya1 05.01.2015 17:02:10

Михаил, если сможете подскажите:если читать описание значения "hidden": "Отображается только область внутри элемента, остальное будет скрыто".Но в нашем случае как раз нет границы элемента, за которой все должно быть скрыто.И содержимое как раз не скрывается при "hidden", а подтягивается.Значит перевод спецификации не полный, не описываются все особенности свойства?

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.