Неожиданное смещение блока и влияние CSS border.. Страница 1. Раздел «HTML/DHTML». Форум программистов «Весельчак У»

RXL

Технический
Администратор

Offline
Пол: Мужской

Неожиданное смещение блока и влияние CSS border.

« : 01-03-2013 08:11 »

Две страницы в HTML5. Различие только в наполнении блока section.content. Блоки section.content и aside.sidebar плавающие. Блок section.mainlayout скачет по вертикали. С помошью Firebug проверил, что margin и padding для упомянутых блоков не меняется, а section.mainlayout имеет разный offsetTop: 8 и 16 пикселей соответственно. Логики не вижу. И более того: если для section.content задать "border 1px;", то скакать перестает. Аналогично если задать границу для section.mainlayout. Может я что-то проглядел? Как вылечить?

Эффект был в FF19 и Chrome25.
Заголовки страниц не привожу.

Код: (HTML5)

<body>
<section class="mainlayout">
<aside class="sidebar"><div class="page-padding">
<p>Номер клиента: 111111<br>Баланс: 999.99 (долг)</p>
<ul class="menu">
<li><a href="/tests/lk/">Общая информация</a></li>
<li>Услуги</li>
<li><a href="/tests/lk/invoices">Счета</a></li>
<li><a href="/tests/lk/finances">Финансы</a></li>
<li><a href="/tests/lk/logout">Выйти</a></li>
</ul>
</div></aside>
<section class="content"><div class="page-padding">
<ul class="products">
<li class="hardware">.........
<ul class="products">
<li class="service">..................</li>
</ul>
</li>
</ul>
</div></section>
</section>
</body>

Код: (HTML5)

<body>
<section class="mainlayout">
<aside class="sidebar"><div class="page-padding">
<p>Номер клиента: 111111<br>Баланс: 999.99 (долг)</p>
<ul class="menu">
<li>Общая информация</li>
<li><a href="/tests/lk/products">Услуги</a></li>
<li><a href="/tests/lk/invoices">Счета</a></li>
<li><a href="/tests/lk/finances">Финансы</a></li>
<li><a href="/tests/lk/logout">Выйти</a></li>
</ul>
</div></aside>
<section class="content"><div class="page-padding">
<div class="contract">
<div>Небольшой текст</div>
</div>
<div class="address">
<div>адрес регистрации</div>
<div>.............................................</div>
<div>....................</div>
</div>
<div class="address">
<div>почтовый адрес</div>
<div>.............................................</div>
<div>....................</div>
</div>
</div></section>
</section>
</body>

Код: (CSS)

body {
font-family: Arial,sans-serif;
font-size: 12pt;
font-weight: normal;
}

body, div, section, aside {
margin: 0;
padding: 0;
}

.mainlayout {
clear: both;
}

/*.content { border: 1px dashed red; }*/

.content {
width: 80%;
clear: left;
}

.sidebar {
float: right;
clear: right;
width: 20%;
}

.page-padding {
margin: 6pt 1em;
}

ul.menu {
margin: 0;
padding: 0;
}

ul.menu li {
list-style: none;
}


« Последнее редактирование: 01-03-2013 09:42 от RXL »	Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.

RXL

Технический
Администратор

Offline
Пол: Мужской

Re: Неожиданное смещение блока и влияние CSS border.

« Ответ #1 : 01-03-2013 08:28 »

Лечение: ul.products { margin: 0; }
Странная все таки это система плавающих блоков, нелогичная. Разве может контент выходить за пределы родительского блока?


	Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.

Sla

Команда клуба

Offline
Пол: Мужской

Re: Неожиданное смещение блока и влияние CSS border.

« Ответ #2 : 01-03-2013 09:06 »

margin и padding для упомянутых блоков не меняется, а section.mainlayout имеет разный offsetTop: 8 и 16 пикселей соответственно.

Это ключевое... как у браузера на душу ляжет
Это - ты их очистил
ul.menu {
margin: 0;
padding: 0;
}

то же самое ты сделал и для .products

если уж html5 Улыбаюсь

то

Код:

.mainlayout:before {
    clear: both;
}

правда ... там еще танцы с бубном Улыбаюсь

Код:

.clearfix:before,
        .clearfix:after {
          content: ".";
          display: block;
          height: 0;
          overflow: hidden;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            zoom: 1; /* IE < 8 */
        }


	Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.

RXL

Технический
Администратор

Offline
Пол: Мужской

Re: Неожиданное смещение блока и влияние CSS border.

« Ответ #3 : 01-03-2013 09:45 »

Слав, а прокомментируй, если не трудно. Если первое понятно, но не понятно, то второе почти понятно, но совсем не понятно.

Цитата

Описание
Псевдоэлемент :before применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content.

Для :before характерны следующие особенности.

   При добавлении :before к блочному элементу, значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block.
   При добавлении :before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
   :before наследует стиль от элемента, к которому он добавляется.

Цитата

Описание
Псевдоэлемент, который используется для вывода желаемого текста после содержимого элемента, к которому он добавляется. Псевдоэлемент ::after работает совместно со свойством content.

Для ::after характерны следующие особенности.

При добавлении ::after к блочному элементу, значение свойства display может быть только: block, inline, none, marker. Все остальные значения будут трактоваться как block.
При добавлении ::after к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.

Добавлять сюда clear? Где логика?

Особенно подивило, что бага одинаково реализована в текущих версиях двух главных конкурентов.


« Последнее редактирование: 01-03-2013 09:51 от RXL »	Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.

RXL

Технический
Администратор

Offline
Пол: Мужской

Re: Неожиданное смещение блока и влияние CSS border.

« Ответ #4 : 01-03-2013 10:08 »

".clearfix" работает.

Я понял так: before и after создают виртуальные блоки с clear: both и нулевой высотой. Правильно?


	Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.

Sla

Команда клуба

Offline
Пол: Мужской

Re: Неожиданное смещение блока и влияние CSS border.

« Ответ #5 : 01-03-2013 10:34 »

Это понимание приходит, в основном, через метод тыка Улыбаюсь

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

и тебе приходится с этми соглашаться Улыбаюсь

Потому как иногда логики нет вообще Улыбаюсь

простейший пример

padding может быть только положительный
margin - любой знак

назначение понятно обоих

Код: (HTML)

.class1{
margin-bottom:25px;
}
.class2{
margin-top:30px
}
<div class="class1"></div>
<div class="class2"></div>

какое расстояние будет между блокаи?
30px

Теперь идем к псевдоселекторам
Ты все верно привел из документации
Идея в том, что
Перед (before) и после (after) у блока нужно произвести какие-то стилизации
.

Код: (CSS)

clearfix:after {
content: "."; /*Вывели как бы контент*/
display: block; /*задали блочное поведение*/
height: 0; /*типа спрятали */
overflow: hidden; /* а это чтоб контент не отображался вне блока */
}
.clearfix:after {
clear:both /* это аналог отдельного элемента с clear:both */
}

Возвращаемся к теме

Код: (HTML)

.class1{
width:100px;
padding:10px;
}
<div class="class1">
<p>текст
</p>
</div>

Все идеально так как хотели, и понятно

Код: (HTML)

.class1{
width:100px;
padding:10px;
}
.class2{

}
<div class="class1">
<div class="class2">
</div>
</div>

Вопрос... А будет ли class2 иметь ширину 80px?

А если в таком случае еще и сделать

Код: (CSS)

class2{
margin-left:50px
}

вот пример

Код: (HTML)

<div style="width: 100px; padding: 10px;">
<div style="margin-left: 50px;">AAAAAAAAAAAA AAAAAAAAAAAAAAAAA AAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAA
</div>
</div>


	Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.

RXL

Технический
Администратор

Offline
Пол: Мужской

Re: Неожиданное смещение блока и влияние CSS border.

« Ответ #6 : 01-03-2013 14:27 »

Я, Слав, HTML5 пока только пробую. На первый взгляд он выглядит более простым и логичным, чем HTML и XHTML. Подводные камни еще предстоит изучить. А вот всеобщая покладистика на IE6 мне по душе: давно надо было задушить эту уродливую тварь.


	Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.

Sla

Команда клуба

Offline
Пол: Мужской

Re: Неожиданное смещение блока и влияние CSS border.

« Ответ #7 : 01-03-2013 15:53 »

Кроме семантики, я преимуществ пока не вижу
и...

вот пример

Код: (HTML5)

<section id="content">
<article>
<header>
<h1>Заголовок статьи</h1>
<time datetime="2013-03-01">1 Марта 2013</time>
</header>
<p>Тело статьи</p>
</article>
</section>

Эх, красиво, и понятно

Берем <aside>
Вот что с ним-то делать?
По идее

Код: (HTML5)

<section id="content">
<article>
<header>
<h1>Заголовок статьи</h1>
<time datetime="2013-03-01">1 Марта 2013</time>
</header>
<p>Тело статьи</p>
<aside>Здесь какая-то хрень не относящаяся к статье</aside>
</article>
</section>

Ее(его) же лепят... как
"внешний" блок

Код:

<aside float=left>
</aside>
<article float=right>
</article>

Но... если есть
<article> - блок для контента
то почему бы и не Улыбаюсь


« Последнее редактирование: 01-03-2013 15:55 от Sla »	Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.

RXL

Технический
Администратор

Offline
Пол: Мужской

Re: Неожиданное смещение блока и влияние CSS border.

« Ответ #8 : 02-03-2013 10:30 »

По описанию aside: „Определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации. Такой блок, как правило, называется «сайдбар» или «боковая панель»“.
http://htmlbook.ru/html/aside
Структурное размещение не определено, дано только семантическое определение. Значит размещаем по требованию верстки.


	Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.

Sla

Команда клуба

Offline
Пол: Мужской

Re: Неожиданное смещение блока и влияние CSS border.

« Ответ #9 : 02-03-2013 11:12 »

не читай по-русски Улыбаюсь

http://www.w3.org/html/wg/drafts/html/master/sections.html#the-aside-element

Цитата

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

Смотри note

Цитата

It's not appropriate to use the aside element just for parentheticals, since those are part of the main flow of the document.

Кстати

Код: (HTML)

<p class="note">It's not appropriate to use the <code><a href="#the-aside-element">aside</a></code> element just for
parentheticals, since those are part of the main flow of the document.</p>

Код: (CSS)

p.note:before {
content: "Note: ";
}


	Записан

Мы все учились понемногу... Чему-нибудь и как-нибудь.

RXL

Технический
Администратор

Offline
Пол: Мужской

Re: Неожиданное смещение блока и влияние CSS border.

« Ответ #10 : 02-03-2013 12:58 » new

Почитал про термин «aside». В русскоязычной литературе используется термин «апарт» французского происхождения. Термин театрального назначения и имеет смысл «речь в сторону». В принципе, это подходит под характеристику «тангенциальный». Хотя если заходить со стороны доки („a section of a page that consists of content that is tangentially related to the content around the aside element“), то и sidebar подходит под описание. Согласен, что в моем случае такое применение не принципиально. Я вполне мог заменить aside на section.


« Последнее редактирование: 02-03-2013 13:01 от RXL »	Записан

... мы преодолеваем эту трудность без синтеза распределенных прототипов. (с) Жуков М.С.

Страниц: [1] Вверх

Печать

« предыдущая тема следующая тема »

Форум программистов «Весельчак У» > Направления программирования > Web > HTML/DHTML > Тема: Неожиданное смещение блока и влияние CSS border.

	Автор	Тема: Неожиданное смещение блока и влияние CSS border. (Прочитано 26097 раз)
0 Пользователей и 1 Гость смотрят эту тему.