Загрузка. Пожалуйста, подождите...
|
|
Баги IE1. Двойной внешний отступ элемента (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. Понимание CSS позиционирования
8. HangTab - небольшой CSS код, который поможет реализовать на вашем сайте "стикеры" в любом месте страницы. #hang_tab {
position: absolute;
top: 7px;
left: 0px;
width: 157px;
height: 93px;
}
CSS-концепция "плавающей" модели верстки9. Теория плавающей модели верстки на 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> 10. Очищаем 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 */
Простые способы закругления краев блока11. Закругленные края с помощью фонового избражения - в случае с фиксированными размерами блока актуально будет решение от 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, создавая эффект закругленного края.
Верстка форм на CSS12. Основные пункты, на которые стоит обратить внимание при верстке форм от Cris Coyer. Он предлагает использовать элементы label, псевдо-классы и др. label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
Экспериментируем с CSS: интересные трюки13. Кроссбраузерный разделить hr с фоном . div.hr {
background: #fff url(myhrimg.gif) no-repeat scroll center;
height: 10px
}
div.hr hr {
display: none
}
<div class="hr"><hr /></div> Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
|
В избранное
