Стоит рассмотреть фиксированные и резиновые конструкции.
Обе имеют свои достоинства.

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

Фиксированные сетки

Как рассматривалось в предыдущих частях, фиксированные сетки наиболее актуальны для печатных изданий, где размеры макета не меняются и дизайнер получает полный контроль над пространством. Но с приходом Интернета многие из этих правил просто перестали работать.
Пользователь может изменить размер шрифта межстрочный интервал – как ему захочется.
Цель дизайнера максимально позаботится о удобочитаемости страниц с различными настройками пользователя.

Резиновая сетка

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

Пользователь может изменить размер шрифта
Пользователь может изменять размер окна браузера
Пользователь может изменять разрешение монитора

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

• Сетка должна адаптироваться под изменения пользователя
• Сетка должна сохранять первоначальные пропорции

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

Вопрос пропорций

Сетки строятся на пропорциях. К примеру,1:3 или 2:1, больше интересных отношений можно наблюдать при использовании золотого сечения.
Работа с коэффициентами хороша тем, что мы не привязываемся ни к каким конкретным единицам измерения, все, относительно.

Божественное сечение

В этой статье я показываю самый простой пример изпользования сеток. Как и в предыдущих статьях продолжим примеры на золотом сечении.
Отношение 1:1.618.

Выбираем длину измерения

Для того, чтобы сетка была резиновой мы должны ипользовать либо проценты либо em, что равно размеру шрифта используемого на сайте. Мы будем использовать проценты.
Чтобы нам было проще считать отношение 61,8% и 38,2%.

Построение сетки CSS

Перед началом построение хочу сказать, что эта статья о разработке, а не о веб стандартах и XTML и CSS я использую как инструмент реализации. Вы можете использовать таблицы.
Учитывая особенности браузеров может быть погрешность в 1-2 процента. (постараюсь со временем поработать над хаками)
Вот пример кода, кто не хочет собирать вручную и сразу посмотреть рузальтат.
Этот CSS подключает основные параметры, типографику и основные размеры тела.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

body {
margin: 0 auto;
padding: 0;
font-family: "Lucida Grande", verdana, arial,
helvetica, sans-serif;
font-size: 62.5%;
color: #333;
background-color: #f0f0f0;
text-align: center;
}
 
* {
padding: 0;
margin: 0;
}
 
/* Make sure the table cells show the right font */
td { font-family: "Lucida Grande", verdana, arial,
helvetica, sans-serif; }
 
/*--------------------------------------
GLOBALS & GENERAL CASES
---------------------------------------*/
 
a {text-decoration: underline; padding: 1px; }
a:link { color: #03c; }
a:visited { color: #03c; }
a:hover { color: #fff; background-color: #30c;
text-decoration: none; }
 
/*--------------------------------------
TYPOGRAPHY
---------------------------------------*/
h1, h2, h3, h4, h5, h6 {
font-family: helvetica, arial, verdana, sans-serif;
font-weight: normal;
}
 
/* approx 21px*/
h1 {
font-size: 2.1em;
margin-top: 2em;
}
 
/* approx 16px*/
h2 {
font-size: 1.6em;
margin-bottom: 1em;
}
 
/* approx 14px*/
h3 {
font-size: 1.4em;
}
 
/* approx 12px*/
h4 {
font-size: 1.2em;
}
 
/* approx 11/14 */
p {
font-size: 1.1em;
line-height: 1.4em;
padding: 0;
margin-bottom: 1em;
}

Далее добавим структуру в html документ.
Столбцы завернуты в div (container), он занимает 90% всей ширины экрана и минимальная ширина 84em.
Как упоминалось ранее наша идеальная ширина 52em. Это ширина нашей основной колонки и составляет по золотому сечению 1,62 умноженное на 52em и получаем, соответственно, 84em. Правая колонка – 84em минус 52 получаем 32em. Превращаем в проценты и получаем 62% и 38%.
Существует также минимальная ширина для общего контейнера 84em.

CSS для колонок

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

#container {
width:90%;
margin:0 auto;
text-align: left;
min-width: 84em;
}
 
#contentframe {
margin: 2em 0 0 0;
padding: 2em 0;
width: 100%;
text-align: left;
float: left;
border: 1px solid #ccc;
background-color: #fff;
}
 
/* 2 column layout c1-c1-c2 */
.c1-c2 #c2 {
float: right;
width: 36.2%;
padding: 0 0 0 1em;
margin: 0;
}
 
.c1-c2 #c1 {
float: left;
width: 61.8%;
padding: 0 0 0 1em;
margin: 0;
}

Часть 1 Часть 2 Часть 3 Часть 4 Часть 5

Оригинал статьи
Перевод: Опанасенко Сергей

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

/* Обнуляем все под нуль */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* использовать :focus */
:focus {
	outline: 0;
}
 
/* элементы, которым добавляем несколько классов: class="menu_item del" */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* Но все равно у таблиц надо ставить 'cellspacing="0"', без этого никак. */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Обнулятор от Yahoo ©

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

/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 0.11.0
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}

Спасибо Юревич Сергею за предоставленную инфу

1

img { -ms-interpolation-mode: bicubic; }

Плохое это дело — подгонять таким образом размеры изображения, но лучше знать как фиксить :-)

Хочу поделиться небольшим советом в верстке.

Итак, если вы занимаетесь версткой, то наверное уже знакомы с технологией CSS Sprites, поэтому объяснять, что это такое я не буду. В двух словах это технология которая позволяет сверстать, например, вот такое меню:

при этом используя только один файл, содержащий 2 изображения иконки:

Преимущества всем известны, а теперь о недостатках такого метода:

1. Невозможно прописать alt-текст к изображению.
2. CSS Spriting и IE6 PNG — несовместимы.
3. Если нужно будет распечатать страницу, то такие изображение напечатаны не будут.
4. Семантически плохо, если в CSS спрятаны не семантические изображения.
5. Невозможно подчеркнуть элемент бордером (border) не подчеркивая при этом саму картинку.

Всегда проще объяснить на примере, поэтому вот и он:

Для примера взял несколько элементов меню главной страницы своего проекта, реализованную технологией CSS Sprites:

HTML:

CSS:

Отправляем на печать и получаем:

А хотелось бы так:

Теперь пробуем другой подход, ради которого я и написал этот совет:

HTML:

Внутри тега A я добавляю по тегу IMG, которому прописываю необходимые атрибуты:

CSS:

В итоге получаем как в браузере так и в предварительном просмотре при печати, такой результат:

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

Ну вот и все. Думаю такой метод пригодится, задачи ведь бывают разные.

Автор статьи: divbyzero

Часто, или не очень, меня спрашивают как убрать пиксельную рамочку вокруг ссылок.

Она, конечно же не спроста там, а служит как один из элементов юзабилити. Ну что ж, убрать ее можно и это не предоставит труда, а поможет нам CSS.
Есть вариант с применением явы, но он пока-что нам не нужен и мы удовлетворимся применением каскадных стилей.

Делается свойством outline

1

a:active, a:focus, img { outline: 0; }

В ie6 не работает.

Вариант для работы в ie6 подсказал divbyzero.
Работает ниже приведенный код следующим образом: внутрь тега «a» добавляется тег «em».
Во время того, когда ссылка становится активна или приобретает фокус, мы делаем ее ширину и высоту равную нулю.
И в данный момент отображается уже содержимое «em».

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Тест</title>
</head>
 
<body>
  <style type="text/css">
    ul#no_dots {
      list-style-type:none;
      padding:0;
      margin:0;
      width:500px;
      height:50px;
      margin:0 auto;
    }
    ul#no_dots li {
      display:block;
      width:120px;
      height:25px;
      float:left;
      margin-right:2px;
    }
    ul#no_dots a {
      display:block;
      width:100px;
      height:30px;
      position:relative;
      text-decoration:none;
      outline:0;
    }
    ul#no_dots a em {
      display:block;
      font-style:normal;
      width:100px;
      height:30px;
      color:#000;
      position:absolute;
      top:0;
      left:0;
      cursor:pointer;
    }
    ul#no_dots a:hover {
      color:#c00;
    }
    ul#no_dots a:hover em {
      color:#2088F3;
    }
    ul#no_dots a:active, ul#no_dots a:focus {
      width:0;
      height:0;
    }
    ul#no_dots a:active em,
    ul#no_dots a:focus em {
      color:#D81E00;
    }
  </style>
  <ul id="no_dots">
    <li><a href="#"><em>Главная</em></a></li>
    <li><a href="#"><em>Форум</em></a></li>
    <li><a href="#"><em>Новости</em></a></li>
  </ul>
</body>
</html>