• Авторизация
Дневник getincss Лента друзей - Дневник - Полная версия


20 CSS-решений распространенных багов и проблем при верстке сайта 07-01-2009 19:17 к комментариям - к полной версии - понравилось!


Оригинал сообщения
Комментарии: [показать]
Спонсор месяца:

Сайт о CSS и верстке сайтов


Ресурс noupe.com опубликовал интересную подборку 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. Игнорирование IE6 правила min-height. (В 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. Игнорирование IE правила. Задача решается с помощью нехитрого “оберточного” способа:

BUGFIX:

HTML:
<div class="ie_minwidth">

<div class="inner">например, ширина блока 960px</div>

</div>

CSS:
* html .ie_minwidth {

border-left: 960px solid #fff; /*ширина блока*/

position:relative;

float:left;

}

* html .inner {

margin-left: -960px; /*ширина блока*/

position: relative;

float:left;

}

И не забываем о правильном доктайп, к примеру:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Центрирование


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. Баг 2х колоночного шаблона в IE (The Expanding Box Bug) - верстая 2х колоночный макет, в IE вы увидите разрыв колонок из-за фиксированной ширины блока и позиционирования относительно родительского блока. Несколько способов решения этой проблемы описаны в статье.

[показать]

Понимание CSS позиционирования


9. О CSS позиционировании и не только об этом, подробно описано в статье Understanding CSS Positioning part 1 , и в продолжение ее Part2, Part3. Вы найдете не только ответы на разнообразные проблемы позиционирования, но и откроете новые возможности CSS3.

[показать]

10. В чем разница между значениями relative и absolute в позиционировании?- Если вы новичок, то наверняка вы задавались этим вопросом. Ответ вы найдете в указанной статье и путаницы больше не возникнет.
#redSquare

{

position: relative;

bottom: 40px;

right: 40px;

}

И мы получим:

[показать]

11. HangTab - небольшой CSS код, который поможет реализовать на вашем сайте “стикеры” в любом месте страницы.
#hang_tab {

position: absolute;

top: 7px;

left: 0px;

width: 157px;

height: 93px;

}

[показать]

CSS-концепция “плавающей” модели верстки


12. Теория плавающей модели верстки на CSS от SmashingMagazine охватывает несколько статей, посвященных “плавающей” модели, т.е. свойству float.
<div> <!-- float container -->

<div style="float:left; width:30%;"><p>Some content</p></div>

<p>Text not inside the float</p>

<div style="clear:both;"></div>

</div>

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

14. Очищаем float-привязку к элементам - в статье описан небольшой 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. Закругленные края с помощью фонового избражения - в случае с фиксированными размерами блока актуально будет решение от CSS Guy:

HTML:
<div class="roundBox">

<p>beautifully-encapsulated paragraph</p>

<div class="boxBottom"></div>

</div>

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;

}

Интересна так же и техника, которая используется в Google Analitics - в каждый угол блока помещается пиксельное изображение 1х1, создавая эффект закругленного края. Пример техники можно увидеть здесь.

[показать]

16. 3 простых шага при верстке шаблона с закругленными элементами от Alen Grakalic. Пример можно увидеть здесь.

[показать]

Полезные ссылки по теме:

Генератор закругленных краев

Закругление углов у изображения

Верстка форм на CSS


17. Основные пункты, на которые стоит обратить внимание при верстке форм от Cris Coyer. Он предлагает использовать элементы label, псевдо-классы и др. В качестве примера он приводит свою форму - Nice & Simple Contact Form
label {

float: left;

text-align: right;

margin-right: 15px;

width: 100px;

}

[показать]

18. Красивый чистый код формы на CSS - статья иллюстрирует хороший пример крда формы на CSS без использования лишних таблиц. Код можно взять здесь.

[показать]

19. Автозаполнение полей ввода на JavaScript. Иногда нам необходимо объяснить пользователю, что ему необходимо написать в поле ввода. Обычным решением является написание лейбла для поля в самом поле ввода. В указанной статье приведен хороший пример реализации автозаполения поля с использованием JS кода. Мы делаем элемент лейбл невидимым и копируем значение title нашего поля в value. Если JS отключен, то лейбл будет отображен над полем ввода текста, value которго остается пустым. Пример можно посмотреть здесь.

Экспериментируем с CSS: интересные трюки


20. Кроссбраузерный разделить hr с фоном. 
div.hr {

background: #fff url(myhrimg.gif) no-repeat scroll center;

height: 10px

}

div.hr hr {

display: none

}

<div class="hr"><hr /></div>



[показать]LIci WP - WordPress crossposting plugin
вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник 20 CSS-решений распространенных багов и проблем при верстке сайта | getincss - Дневник getincss | Лента друзей getincss / Полная версия Добавить в друзья Страницы: раньше»