Делаем контейнер, охватывающий дочерние плавающие блоки

02 11.07
12

Распространенная проблема при использовании плавающих блоков заключается в том, что они не растягивают внешний контейнер.

Проблема

1
2
3
4
5
6
7
8
9
10
11
12
13

div.container {
	border: 1px solid #000000;
}
 
div.left {
	width: 45%;
	float: left;
}
 
div.right {
	width: 45%;
	float: right;
}

float: left

float: right

 

Необходимо чтобы черная граница охватывала плавающие блоки. Но этого не происходит, т.к. внешний контейнер не имеет высоты.

Старое решение

Старое решение заключалось в добавлении дополнительного элемента со свойством clear: both.

float: left

float: right

Но лучше избегать лишних элементов.

Новое решение

1
2
3
4
5

div.container {
	border: 1px solid #000000;
	overflow: auto;
	width: 100%
}

Использование width необходимо для активации свойства «hasLayout» в IE.

У элементов в IE есть нестандартное свойство DOM: hasLayout. Когда оно установлено, они ведут себя иначе, чем без этого свойства. Например div с hasLayout=True расширяется, чтобы вместить в себя любые float-элементы. И любой его потомок также будет иметь hasLayout=True. hasLayout включается неявно, например, если задать ширину или высоту для элемента и во многих других случаях.

float: left

float: right

Теги:

Советы по организации CSS

30 10.07
3

Табуляция

Этот совет скорее всего самый полезный, поскольку он может быть применен к обоим методам организации CSS, которые буду описаны ниже.

1
2
3
4
5
6
7
8
9
10
11

#main_side {
    width: 392px;
    padding: 0;
    float: right; }
 
    #main_side #featured_articles {
        background: #fff; }
 
    #main_side #frontpageads {
        background: #fff;
        margin: 8px 0; }

Такая структура позволяет легче ориентироватся в разметке и видеть как относятся друг к другу блоки на странице.

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

1
2
3
4
5
6
7
8
9
10
11
12
13

h2 { }
 
    #snapshot_box h2 { 
        padding: 0 0 6px 0;
        font: bold 14px/14px "Verdana", sans-serif}
 
    #main_side h2 { 
        color: #444;
        font: bold 14px/14px "Verdana", sans-serif}
 
    .sidetagselection h2 {
        color: #fff;
        font: bold 14px/14px "Verdana", sans-serif}

Используйте сокращенную запись свойств

Сокращенную запись делает ваш CSS легким для понимания и редактирования.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#test {
      margin-top: 2px;
      margin-right: 3px;
      margin-bottom: 5px;
      margin-left: 9px;
      font-weight:bold;
      font-size:12px;
      line-height:14px;
      font-family:Arial, Verdana, sans-serif;
      border-width: 1px;
      border-style: solid;
      border-color: #000000;
      background-color:#fff;
      background-image:url(bg.gif);
      background-repeat:no-repeat;
      background-position:0 15px
}

Согласитесь, что это не очень удобно редактировать. Но используя несколько сокращенных записей, вся эту куча правил может быть уменьшена до 4-х строчек кода:

1
2
3
4
5
6

#test {
      margin: 2px 3px 5px 9px;
      font: bold 12px/14px Arial, Verdana, sans-serif;
      border: 1px solid #000;
      background: #fff url(bg.gif) 0 15px no-repeat;
}

Разделяйте таблицу стилей на характерные области

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

Например такие:

  • Общие стили – (body, paragraphs, lists, и т.д.)
  • Шапка сайта
  • Структура страницы
  • Загаловки
  • Стили текста
  • Навигация
  • Формы
  • Комментарии
  • Дополнительно

И вид разделителя:

1
2
3

/* -----------------------------------*/
/* ---------->>> Общие стили <<<-----------*/
/* -----------------------------------*/

Основные стили в начале

Этот совет не всегда возможно использовать, но при реализации он приносит неоценимую пользу. Для этого необходимо чтобы основные правила были определены только один раз, и в дальнейшем в таблице не переопределялись. Например если вы знаете что все элементы не должны иметь отступов, определите эти правила в начале. Это позволяет получить быстрый доступ к редактированию элементов, если дизайн ресурса предполагает частые косметические изменения.

Источник: «5 Tips for Organizing Your CSS»

Теги: •

Специфичность в CSS

24 10.07
16

Если у вас есть два конфликтующих правила CSS относящихся к одному элементу, браузер следует нескольким принципам для определения какое из правил более приоритетное.

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

Если у вас есть два одинаковых селектора, то приоритет будет иметь последний.

1
2
3
4
5
6

p {
color: red
}
p {
color: blue
}

Элемент p будет синего цвета, т.к. это правило последнее.

Однако вероятнее всего у вас не будет одинаковых селекторов с конфликтующими правилами. Скорее всего конфликты появятся, если вы используете вложенные селекторы.

1
2
3
4
5
6

div p {
color: red
}
p {
color: blue
}

Может показатся что элемент p вложенный в div будет синего цвета, т.к. правило p {color: blue} самое последнее, но на самом деле он будет красного цвета из-за специфичности первого селектора. Чем больше специфичен селектор, тем больше у него приоритетность.

Специфичность вложенных селекторов требует некоторых расчетов. Все id селекторы (#something) приравниваются к 100, селекторы класса (.something) равны 10, а селектор по названию тега будет равен 1.

  • p — имеет специфичность равную 1 (один HTML элемент);
  • div p — имеет специфичность равную 2 (два HTML элемента);
  • .tree — имеет специфичность равную 10 (один селектор класса);
  • div p.tree — имеет специфичность равную 12 (два HTML элемента и один селектор класса);
  • #baobab — имеет специфичность равную 100 (один id селектор);
  • body #content .alternative p — имеет специфичность равную 112 (два HTML элемента, один id селектор и один селектор класса).

Наибольший приоритет имеют инлайновые стили (атрибут style) и приравниваются к 1000.

Источник: Specificity

Теги: