20 CSS-решений распространенных багов и проблем при верстке сайта
Спонсор месяца:
Сайт о CSS и верстке сайтов
Ресурс опубликовал интересную подборку CSS трюков, в которой рассказывается более чем о 20 способах решения различных проблем и багов при верстке сайта с помошью CSS. Это первая часть из серии о CSS-трюках, поэтому я буду следить за обновлениями и переводить для вас самые интересные и актуальные решения.
Баги IE
1. (IE Double Margin Float Bug) – у блочного элемента с прописанными правилами margin и float в IE наблюдается интересный баг: значение отступа margin увеличивается в 2 раза.
BUGFIX: Пропишите для элемента значение display:inline.
2. . (Overcoming the Box Model Hack) – способ предназначен для решения проблемы отображения блоков с прописанной шириной и отступами: в IE padding не плюсуется к ширине блока.
BUGFIX: Указывайте все необходимые отступы в родительском или внутреннем элементе блока. Т.е. вместо:
#main-div{
width: 150px;
border: 5px;
padding: 20px;
}
Используйте:
#main-div{
width: 150px;
}
#main-div div{
border: 5px;
padding: 20px;
}
3. . (В IE7 проблем нет).
BUGFIX:
Для браузеров понимающих праивло min-height:
.container {
width:20em;
padding:0.5em;
border:1px solid #000;
min-height:8em;
height:auto;
}
Для IE6:
/*\*/
* html .container {
height: 8em;
}
/**/
4. . Задача решается с помощью нехитрого “оберточного” способа:
BUGFIX:
HTML:
например, ширина блока 960px
CSS:
* html .ie_minwidth {
border-left: 960px solid #fff; /*ширина блока*/
position:relative;
float:left;
}
* html .inner {
margin-left: -960px; /*ширина блока*/
position: relative;
float:left;
}
И не забываем о правильном доктайп, к примеру:
Центрирование
5. Центрирование блока относительно body.
body{
text-align: center;
}
#container
{
text-align: left;
width: 960px;
margin: 0 auto;
}
6. Центрирование по вертикали. Самое простое решение – указать для внутреннего элемента блока значение line-height.
#wrapper {
width:530px;
height:25px;
background:url(container.gif) no-repeat left top;
padding:0px 10px;
}
#wrapper p {
line-height:25px;
}
Проблемы с позиционированием элементов
7.
Статья “Равноудаленные элементы” в моем блоге.
8. (The Expanding Box Bug) – верстая 2х колоночный макет, в IE вы увидите разрыв колонок из-за фиксированной ширины блока и позиционирования относительно родительского блока. Несколько способов решения этой проблемы описаны в статье.
Понимание CSS позиционирования
9. О CSS позиционировании и не только об этом, подробно описано в статье Understanding CSS Positioning part 1 , и в продолжение ее , . Вы найдете не только ответы на разнообразные проблемы позиционирования, но и откроете новые возможности CSS3.
10. В чем разница между значениями relative и absolute в позиционировании?- Если вы новичок, то наверняка вы задавались этим вопросом. Ответ вы найдете в указанной статье и путаницы больше не возникнет.
#redSquare
{
position: relative;
bottom: 40px;
right: 40px;
}
И мы получим:
11. – небольшой CSS код, который поможет реализовать на вашем сайте “стикеры” в любом месте страницы.
#hang_tab {
position: absolute;
top: 7px;
left: 0px;
width: 157px;
height: 93px;
}
CSS-концепция “плавающей” модели верстки
12. от SmashingMagazine охватывает несколько статей, посвященных “плавающей” модели, т.е. свойству float.
Some contentText not inside the float
13. – еще одна статья, посвященная плавающей модели. В ней вы сможете узнать об основах модели и посмотреть примеры верстки различных элементов.
14. – в статье описан небольшой CSS-код (EasyClearing), котрый поможет вам решить проблему привязки элементов, имеющих свойство float.
/* EasyClearing http://www.positioniseverything.net/easyclearing.html */
#container:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#container
{display: inline-block;}
/* Hides from IE-mac \*/
* html #container
{height: 1%;}
#container
{display: block;}
/* End hide from IE-mac */
Простые способы закругления краев блока
15. Закругленные края с помощью фонового избражения – в случае с фиксированными размерами блока актуально будет решение от :
HTML:
beautifully-encapsulated paragraph
CSS:
.roundBox {
background:transparent url(roundBox.gif) no-repeat top left;
width:340px;
padding:20px;
}
.roundBox .boxBottom {
background:white url(roundBox.gif) no-repeat bottom left;
font-size:1px;
line-height:1px;
height:14px;
margin:0 -20px -20px -20px;
}
Интересна так же и техника, которая используется в – в каждый угол блока помещается пиксельное изображение 1х1, создавая эффект закругленного края. Пример техники можно увидеть .
16. от Alen Grakalic. Пример можно увидеть .
Полезные ссылки по теме:
Верстка форм на CSS
17. от Cris Coyer. Он предлагает использовать элементы label, псевдо-классы и др. В качестве примера он приводит свою
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
18. – статья иллюстрирует хороший пример крда формы на CSS без использования лишних таблиц. Код можно взять .
19. . Иногда нам необходимо объяснить пользователю, что ему необходимо написать в поле ввода. Обычным решением является написание лейбла для поля в самом поле ввода. В указанной статье приведен хороший пример реализации автозаполения поля с использованием JS кода. Мы делаем элемент лейбл невидимым и копируем значение title нашего поля в value. Если JS отключен, то лейбл будет отображен над полем ввода текста, value которго остается пустым. Пример можно посмотреть .
Экспериментируем с CSS: интересные трюки
20. .
div.hr {
background: #fff url(myhrimg.gif) no-repeat scroll center;
height: 10px
}
div.hr hr {
display: none
}
Dmoz
отличная статья, спасибо!
Цитировать
полезная статься. Спасибо
Цитировать
Присоединяюсь.
Узнал много полезного.
Спасибо за подборку.
Цитировать
Вот большое человеческое спасибо за 15 пункт (где про закругления). Сидел маялся с одним сайтом, получалось нагромождение таблиц и проч. лишних вещей. Реально простое решение, век живи век учись как говорится..
Цитировать
Тоже вот учусь CSS :)
как писали на блоге-блоге, это действительно полезный блог! :))
Цитировать
Отличный матерьяльчик. Мне токашо помог ;)
Цитировать
Спасибо за обзор!
Ссылки на сайты в примерах 16 и 17 ведут в одно и то же место (форму – Nice & Simple Contact Form)
Цитировать
Задайте разный цвет фона для HTML и BODY.е
Положите в BODY единственный DIV c margin-top:50px;
Посмотрите, что случилось с BODY, (которвый вы не трогали) в IE и в “стандартном” браузере.
Начните новую рубрику багов мозгов W3C.
Всё в Веб-разработке – есть относительно базы, с которой вы начинаете вашу работу. Если вы отталкиваетесь от логики ИЕ, то ФФ имеет кучу багов. Если вы начинаете работу отталкиваясь от мнения W3C, то ИЕ- “Кошмар на улице Вязов”.
Не путайте метры с килограммами.
Есть 2 НЕобязательных стандарта – это MS и W3C.
Это похожие, но РАЗНЫЕ стандарты ВЕБ.
W3C стандарт рекомендательный, и потому, собственно, стандартом не является !!!!!!
Ни юридически и ни фактически консорциум не имеет прав считать свою логику – СТАНДАРТОМ. Это лишь общественная организация. И всё!
Стандарт консорциума создавался ИСКЛЮЧИТЕЛЬНО против монополии MS !!
И поэтому, не предубежденный разработчик видит в нём множество извращений нормальной человеческой логики.
Никакой паддинг не сделает ваш монитор большим по размеру :-)
Цитировать
W3C пишет спецификации, на основе которых браузеры решают как тот или иной элемент будет работать согласно их рекомендациям. Валидность пока никто не отменял, не смотря на то, что это всего лишь рекомендации. Браузер выдает ошибки CSS как раз согласно W3С, так что… Доктайп имеет смысл.
Цитировать
В предыдущем посте я хотела указать на “логический” баг стандарта. Т.е. не делаем из стандарта W3C идола.
К моему примеру:
DOCTYPE – любой на ваш вкус.
HTML, BODY {width:100%, height:100%}
Но цвет фона задать обязательно различным для этих элементов страницы.
Единственный блок DIV, помещенный на страницу с margin-to:50px; [любая цифра], “стандартно” срывает ни в чем не повинный BODY со своего места.
Это по стандарту – эффект вываливания границ.
Решение проблемы:
1. Задать верхний внутр. отступ для BODY, наприме, padding:1px; .
О, все хорошо – как и задумывалось, все на своих местах. Но, черт возьми, зачем мне этот некстати появившийся скролл??
2. Обернуть DIV в фантик из ещё одного DIV. Это аналогично BugFix №2 статьи.
Резюме – стандарт W3C в реализации CSS2 далёк от совершенства и имеет свои пороки т.н. “логические баги”. Т.е. он имеет быть плохо приспособленным к некоторым очевидным задачам вебмастера. И в особенности, когда речь идет о “резине”.
Я могла бы продолжить примеры, когда стандарт обыгрывает плохую шутку с веб-разработчиками. Да вы и сами их знаете. Не раз вам попадались сайты с “двойным текстом” , когда один контент лежал поверх другого и это безо всякого абсолютного позиционирования в стилях. Таково правило стандарта!
Но оно не прозрачно и не очевидно и следовательно, вебмастер может не сразу заметить скрытый подвох стандарта.
Сайт уже на движке, шаблонизирован и слит в БД. Секретарша набивает контент для сайта фирмы и о.. сорри, конфуз – в раскладке не учтено, что контент может быть другим и т.п. … текст лежит на тексте или еще на чем.
Это и есть “логические баги”.
Когда для человека очевидно, что сначала обувается ботинок, а потом завязываются шнурки. Но стандарт требует начинать завязывать шнурки, а потом одевать ботинок. Это и есть “логический баг” стандарта. Со временем большинство привыкает следовать стандарту, и готово ради него (стандарта) совершить аутодафе с любым еретиком.
Ибо стандарт W3C – “священное писание”!!!
Я считаю, что стандарты W3C не только можно, но и нужно обсуждать и подвергать критике. Ибо нам с ним работать.
_____________________________________
Никакой паддинг не увелит размер вашего монитора :-)
Цитировать
ЗЫ {P.S.]
Если речь в статье о багах веб-верстки как таковых, то почему бы не упомянуть о бо ВСЕХ багах?
А не только о длинных ушах “ослика ИА”?
Цитировать
Дело вовсе не в стандарте. Дело в том КАК разработчик браузера понимает этот стандарт. Это уже совсем другой разговор. Стандарт – один для всех, но как вы правильно заметили, он носит рекомендательный характер. Именно поэтому каждый интерпретирует его по разному (я о браузерах). W3C тут ни причем. Идеальное решение было бы собраться всем разработчикам браузеров и сделать _единую поддержку_ предлагаемых стандартов. А интерфейс самого браузера – это уже их личное дело.
Цитировать
Потому что ослик вымирающий вид. Иначе зачем IE7, IE8 гоняться за стандартами?
Цитировать
Т.е. “логические” баги W3C не обсуждаются.
Это табу?
Цитировать
Да. Очень похоже.
Очень многое от MS стало стандартом в HTML, JS и CSS[W3C]. Что-то не прижилось и вымерло. То же у NN произошло с “LAYER”.
Но ведь главный строительный материал веб-верстки – блок DIV это же дитя IE !!!!
Согласна полностью, сто нужно не вести войну стандартов между MS и W3C, а взять, как обычно, лучшее у MS.
Цитировать
P.S.
У ФФ, Оперы и др. “не ИЕ” багов нет?
Потому что не может быть никогда?
Цитировать
Почему же, и W3C не ангел :) Но браузеры делают все так как они пишут, так уж лучше пусть делают одинаково для всех.
Цитировать
Смотря как посмотреть. Если вы верстаете под IE, то FF и Опера для вас имеют баги. Если верстаете под FF, то баги имеет IE. Но как правило, популярен именно второй вариант. А разницы между FF и Оперой практически нет.
Цитировать
Отличный материал! В обязательном порядке – в делишес, на полку)
Цитировать
“6. Центрирование по вертикали. Самое простое решение – указать для внутреннего элемента блока значение line-height.”
Это конечно никакое не решение проблемы. Подходит исключительно для случая, если нужно отцентрировать одну строку, да и то такую, которая целиком влезет по ширине в блок-контейнер.
Цитировать
Это “самое простое” решение :)
Цитировать
>К моему примеру:
>DOCTYPE – любой на ваш вкус.
>HTML, BODY {width:100%, height:100%}
>Но цвет фона задать обязательно различным для этих элементов страницы.
>Единственный блок DIV, помещенный на страницу с margin-to:50px; [любая >цифра], “стандартно” срывает ни в чем не повинный BODY со своего места.
>Это по стандарту – эффект вываливания границ.
ммм… простите, не совсем понял… где здесь “нарушение” логики?
[code]
html, body {width:100%, height:100%}
body{background:yellow;}
test
[/code]
Цитировать
> Стандарт консорциума создавался ИСКЛЮЧИТЕЛЬНО против монополии MS !!
Ну начнем с того, что консорциум был создан в 1994 году
А винда95 вышла в соответствующем году. К тому моменту – микрософт успешно профакал рынок www.
Так что консорциуму было глубоко до одного места касаемо монополии MS
А то что MS начав разрабатывать свои браузеры не прислушалась/ не присмотрелась к стандарту W3C – так на то он и MS – загордились, затупились, …
Цитировать
Для IE6 есть атрибут min-height, вот только назвали его height :)
Если для ie6 задать height то при увеличении содержимого блока, он все-равно будет увеличиваться его высота.
Проблему можно решить более элегантно:
.block {
min-height: 100px; /* для нормальных браузеров*/
height: auto !important; /* ie6 понимает important, поэтому это свойство перекроется */
height: 100px; /* подействует только для ie6, все остальные прочитают height: auto последним */
}
Цитировать
Неплохая подборка в одном месте
Цитировать
вы провобоали height задать для Div’a ?
содержимое либо будет вываливаться из блока, либо пропадет вовсе
Цитировать
Отличнейшая статья!!!
Спасибо!”!
Цитировать
Кстати оочень часто встречаю баг 2х колоночного шаблона в IE , как по мне самая распространенный…
Цитировать
В этом коде другая тонкость: если указать фон только для BODY, то для страниц, отдаваемых как text/html, он распространяется на HTML. Это стандарт, но корни у него исторические, для application/xhtml+xml такого не происходит (тоже не очевидно и не вполне логично, имхо;). Поэтому для демонстрации проблемы и нужно явное задание цвета и для html, и для body.
Цитировать
Для описания всех багов и недостатков IE могут уйти годы…
Цитировать
Советы полезные, спасибо. Действительно, часто приходится сталкиваться с подобыми задачами, и, сведенные все воедино в рамках одной статьи они полезны для всех.
Цитировать
Отличная подборка!
@Snowcore: а по поводу IE вы правы! :-)
Цитировать
Для того, чтобы большинства проблем с отображениями не возникало, советую использовать CSS-обнуление)
Цитировать