Традиционный способ

<div class="grid">
	<div class="col"></div>
	<div class="col"></div>
</div>

grid – контейнер колонок, одновременно это решение проблемы схлопывания, contain float
col – колонка.

.grid {
	*zoom: expression(this.runtimestyle.zoom=\"1\", this.appendchild(document.createelement(\"br\")).style.csstext=\"clear: both;
	font: 0/0 serif");
	*zoom: 1; }

	.grid:before,.grid:after {
		content: "";
		display: table; }

	.grid:after { clear: both; }

	.grid .col {
		float: left;}

Я привожу только стили показывающие механизм, и опускаю не принципиальные штуки, типа ширины и тд.
Интересный пример верстки плавающими боксами – inuit.css и стоит обратить внимание как обойдена проблема обнуления правого отступа у последней колонки.

Колонки инлайновыми блоками

<div class="grid-inline">
	<div class="col"></div>
	<div class="col"></div>
</div>

.grid-inline {
	letter-spacing: -.31em;
	word-spacing: -.43em;
	position: relative; }

	.grid-inline .col {
		display: inline-block;
		letter-spacing: normal;
		word-spacing: normal;
		vertical-align: top;}

.ie7 .grid-inline .col { display: inline; }

пример

Проблема с инлайновыми блоками в том что между ними есть зазор величиной с пробел текущего шрифта, аналогично пробелу между словами, поэтому при помощи letter-spacing: -.31em; этот пробел обнуляется. Возможным минусом этого метода может быть то, что у какого-то шрифта этот пробел не будет равным 0.31em, но в любом случае можно либо подобрать нужное значение либо для грида использовать какой то другой шрифт.

word-spacing: -.43em; – это тоже лечение только для Opera.

Плюс этого метода в том что не надо бороться с обрыванием float.

Метод Чикуенка

Не знаю насколько этот метод правомочно называть методом Чикуенка ), но впервые я прочел о нем в его статье Вёрстка растягивающихся сайтов. Понял я его не сразу и пришлось какое то время чесать репу и экспериментировать, и хотя я его не использую часто но он очень интересный и решает кое какие проблемы. Обьяснять его я не буду, лучше всего для этого почитать его в оригинале, тем более что в нем есть важные детали которые надо понять прежде чем использовать. Приведу только кратко пример.

<div class="page grid">
	<div class="col content"></div>
	<div class="col leftbar"></div>
	<div class="col rightbar"</div>
</div>

.col {
	float: left;
	position: relative;
	margin-right: -100%; }

.page {
	width: 50%;
	margin: auto; }

.content { width: 100%; }

.leftbar {
	width: 40%;
	left: -40%; }

.rightbar {
	width: 40%;
	left: 100%; }

.ie7 .content,
.ie7 .leftbar,
.ie7 .rightbar {
	padding: 0px;
	border: 0; }

пример

Главное тут, на что надо обратить внимание для того чтобы понять, это стили col.
float: left – “вынимает” блок из потока.
margin-right: -100% – “затягивает” соседний блок так что он оказывается в “нуле” относительно родительского блока. А дальше из этой точки блоки расставляются в нужное место свойством left.

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

Это не все прелести метода, остальное стоит почитать в оригинальной статье.

Имитация абсолютного позиционирования

Нечто похожее на предыдущий метод но с той разницей что изначально блоки ставятся в правый верхний угол а потом возвращаются на свои места. Этот метод подробно описан в статье Faux Absolute Positioning.

<div class="grid">
	<div class="content col"></div>
	<div class="leftbar col"></div>
	<div class="rightbar col"></div>
</div>

.col {
	float: left;
	position: relative;
	left: 100%; }

.content {
	margin-left: -80%;
	width: 56%;
	padding: 2%; }

.leftbar {
	width: 16%;
	padding: 2%;
	margin-left: -100%; }

.rightbar {
	width: 16%;
	padding: 2%;
	margin-left: -20%; }

примерпримерпримерпример

Проблема с этим способом та же что и с предыдущим – зазоры между колонками которые появляются из за округления процентных значений. Зазоров нет только в Firefox.

Решается это созданием дополнительной обертки для контейнера колонок

Задача

Общую конструкцию форм условно можно разделить на две группы – вертикальные и горизонтальные, или лучше – блочные и строчные.
Пример блочной формы:

То есть имя и поле расположены каждый на своей строке.

Пример строчной формы:

Еще:

Задача раз – часто формы рисуются выровненные по ширине, justified, подобно табличной верстке, и строка может содержать не один label+input а несколько, например:

Задача два – как можно видеть на рисунке 3 поле поле может иметь подпись, поэтому надо для этого случая иметь соотвествующую html структуру, иначе говоря колонку, в которую можно положить инпут и подпись.

Задача три – label и input не могут иметь заданной раз и навсегда ширины, во первых потому что они могут быть разной ширины в одной форме (Рис. 4), во-вторых дизайнер может запросто нарисовать в одном сайте несколько форм с разной шириной и пропорцией этих элементов. Это неприятно но приходится для каждой формы делать разные конструкции колонок.

HTML

Для верстки строки формы я выбрал такую HTML конструкцию:

Блочная форма

<ul class="field">
	<li><label for=""></label></li>
	<li><input type="text" placeholder="" id="" /></li>
</ul>

Строчная форма

<ul class="field inline">
	<li><label for="pass">Password</label></li>
	<li><input type="text" placeholder="" id="pass" value="" /></li>
</ul>

Строчная форма “упакованная”

<ul class="field inline packed">
	<li class="thirty"><label for="pass">Password</label></li>
	<li class="seventy"><input type="text" placeholder="" id="pass" value="" /></li>
</ul>

CSS

Колонки, в данном случае у нас это li, верстаю инлайн-блоками:

.field {
	padding: 0px;
	margin: 10px 0px;
	display: block;
	width: auto;
	list-style-type: none; }

.field.inline {
	letter-spacing: -.31em;
	word-spacing: -.43em; }
	.field.inline>li {
		display: inline-block;
		vertical-align: middle;
		letter-spacing: normal;
		word-spacing: normal;
	}

.packed input[type=text],
.packed input[type=password],
.packed select,
.packed textarea {
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

Как делаются колонки инлайновыми блоками нужно писать отдельно, но смысл понятен из кода я думаю.

Для задания ширин колонок пользую вот такую вот колбасу:

.ten{width: 10%;}
.fifteen{width: 15%;}
.twenty{width: 20%;}
.twenty-five{width: 25%;}
.thirty{width: 30%;}
.thirty-five{width: 35%;}
.forty{width: 40%;}
.forty-five{width: 45%;}
.fifty{width: 50%;}
.fifty-five{width: 55%;}
.sixty{width: 60%;}
.sixty-five{width: 65%;}
.seventy{width: 70%;}
.seventy-five{width: 75%;}
.eighty{width: 80%;}
.eighty-five{width: 85%;}
.ninety{width: 90%;}
.ninety-five{width: 95%;}
.full{width: 100%;}
.half{width: 50%;}
.third{width: 33.33%;}
.two-third{width: 66.66%;}
.quarter{width: 25%;}
.golden-small{width: 38.2%;}
.golden-big{width: 61.2%;}

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

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

Минусы

1. очень много разметки и много классов в конечном HTML, что может доставить муки программистам.
2. плохо поддается передизайну
3. не соответствует точно дизайну

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

Иногда формы верстаются при помощи dl и мотивируется это тем что разметка удобна для разделения имени (dt) и поля (dd), но на мой взгляд это не всегда удобно, это можно видеть в примерах, и верстка таких модулей не должна зависеть от разметки. Хорошо если стили написаны независимо от разметки и вы их сможете приспособить к другой верстке, например к какой нибудь дефолтной разметке какой-нибудь CMS.

Плюсы

1. автоматизирует верстку самых разных сложных форм
2. хорошо подходит к дизайну в котором не продумана сетка, у меня это 100% дизайна

Примеры

пример 1 пример 2 пример 3 пример 4

Работает в:

Верстка:

• Общий шаблон задач
• Виртуальный Репетитор
• Виртуальный репетитор, кнопка Skip
• Виртуальный репетитор, другая панель кнопок
• Виртуальный репетитор, Логин
• Виртуальный репетитор, Спасибо
• Виртуальный репетитор, формулы умножения вычитания
• Виртуальный репетитор, разбор задачи
• Виртуальный репетитор, связки
• Виртуальный репетитор, перевод единиц измерения
• Виртуальный репетитор, скобка под цифрами
• Виртуальный репетитор, размерности
• Перевод в разряды и слова
• Перевод в число
• Размерности
• Движение запятой
• Кнопка Show the Lesson
• Панель текстовой версии
• Деление в столбик
• Деление

• Начальная страница
• Fractions with your virtual Maths teacher
• Математика CM1
• Задача, Умножение

• Homepage
• About
• Login
• Article
• Full Width
• News and events
• News & Events Archive
• Search Result
• Reports
• Reports Economic
• Self Sufficiency
• Team Page
• Board of Directors
• Glossary
• Glossary Popup
• Generic Form
• County
• County Map
• Indicator: County Population

ryanfait.com

<ol class="code">
	<li>&lt;input type="radio" name="radio" class="styled" /&gt; Yes</li>
	<li>&lt;input type="radio" name="radio" class="styled" /&gt; No</li>
</ol>

ol.code {
	margin: 0 0 3em;
	padding: 6px 6px 6px 30px;
	border: 2px solid #c00;
}
ol.code li {
	margin: 0 0 1px 12px;
	padding: 0.5em;
	color: #000;
	font: 1.1em monospace;
	background: #fff5f5;
	list-style-type: decimal;
}

Отступы автор делает при помощи неразрывных пробелов. Любопытно что он не использует привычный в таком случае тег pre.

chikuyonok.ru

Такой себе минимализм. Код генерится похоже плагином syntaxhighlighter.

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

<div class="line alt2">
	<span class="content">
		<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>
		<span class="block" style="margin-left: 20px;">
			<code class="plain">.wrap, .h, .f {</code>
		</span>
	</span>
</div>

Мне казалось что при оформлении кода логично использовать тег pre и white-space: pre;, но оказывается что это не так уж очевидно ) В дейсвительности проблема в том что если использовать для отступов табы то рано или поздно вы столкнетесь с тем что какой-то код не влезает в отведенную область. Получается что надо контролировать размер отступа. Это можно сделать либо пробелами либо фиксированным css отступом.
Вот в плагине syntaxhighlighter сделано оступом – style=’margin-left: 20px;’>

.content {
	background-color: white;
}
.spaces {
	display: none;
}
.block {
	display: block;
	padding-left: 1.5em;
	text-indent: -1.5em;
}
.plain{
	color: black;
}

habrahabr.ru

Полный минимализм и в дизайне и в коде.

<code><pre>
&lt;div id="page"&gt;
    &lt;header&gt;&lt;/header&gt;
    &lt;article&gt;
        &lt;section id="main"&gt;&lt;/section&gt;
        &lt;aside&gt;&lt;/aside&gt;
    &lt;/article&gt;
    &lt;footer&gt;&lt;/footer&gt;
&lt;/div&gt;
</pre></code>

pre, code {
	font-size: 1em;
}
pre {
	white-space: pre-wrap;
	white-space: -o-pre-wrap;
}

html5doctor.com

<pre>
	<span class="tag">&lt;blockquote&gt;&lt;h1&gt;</span>
	<span class="pln">OMG a heading!</span>
	<span class="tag">&lt;/h1&gt;</span>
	<span class="pln"><br>&nbsp; </span>
	<span class="tag">&lt;ul&gt;&lt;li&gt;</span>
	<span class="pln">Block quotes can contain more than just paragraphsâ¦</span>
	<span class="tag">&lt;/li&gt;&lt;/ul&gt;</span>
	<span class="pln"><br></span>
	<span class="tag">&lt;/blockquote&gt;</span>
</pre>

pre, code, tt, kbd {
	font: .9375em 'andale mono','lucida console',monospace;
	line-height: 1.6;
}
pre {
	margin: 1.5em 0;
	white-space: pre;
	word-wrap: break-word;
	white-space: -moz-pre-wrap;
	white-space: -o-pre-wrap;
	white-space: -pre-wrap;
	white-space: -hp-pre-wrap;
	white-space: pre-wrap;
	white-space: pre-line;
}
.tag {
	color: #008;
}
.pln {
	color: black;
}
...

Длинные сложносделанные стили для pre обьясняются совместимостью с разными старыми браузерами, статья об этом.

24ways.org

<pre><code>div {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
</code></pre>

pre {
    display: block;
    margin-bottom: 18px;
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, .75);
    padding: 10px;
    overflow: auto;
}
code {
    color: rgb(179, 45, 71);
    color: rgba(179, 45, 71, .75);
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, .75);
    padding: 3px 5px;
    font: bold 13px/18px "Courier New", Courier, mono;
}

24ways подзабили на старые ИЕ, об этом говорит цвет в rgb, и в IE блок с кодом симпатично деградирует до:

Snook.ca

<pre><code>.element-invisible {
  height: 0;
  overflow: hidden;
  position: absolute;
}
</code></pre>

pre {
	margin-left: -20px;
	background: url(/img/code-bookmark.png) no-repeat 0 0;
}
	pre code {
		display: block;
		margin-left: 20px;
		padding: 10px;
		font-size: 90%;
		background-color: rgba(255,255,255,.5);
		overflow: auto;
	}

Часто встречается overflow: auto;, насколько я понял это для случая если код оказывается больше контейнера, появятся скроллеры.

css-tricks.com

<pre rel="CSS" class="prettyprint">
	<code>
		<span class="pln">li</span>
		<span class="pun">:</span>
		<span class="pln">nth</span>
		<span class="pun">-</span>
		<span class="pln">child</span>
		<span class="pun">(</span>
		<span class="lit">5</span>
		<span class="pun">)</span>
		<span class="pln"></span>
		<span class="pun">{</span>
		<span class="pln"><br>&nbsp; &nbsp; color</span>
		<span class="pun">:</span>
		<span class="pln"> green</span>
		<span class="pun">;</span>
		<span class="pln"><br>	</span>
		<span class="pun">}</span>
	</code>
</pre>

Я так подозреваю что есть какой то способ конвертации HTML кода в такую вот бодягу, вряд ли это делается руками.

pre {
	position: relative;
	background: #333;
	color: white;
	font-family: Courier, MonoSpace;
	line-height: 1.8;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	font-size: 16px;
	width: 730px;
	padding: 10px;
	margin: 0 0 20px 0;
	overflow: auto;
}
pre::after {
	content: attr(rel);
	position: absolute;
	font-size: 24px;
	top: 22px;
	line-height: 0;
	right: 12px;
	color: orangeRed;
	font-family: "myriad-pro-1","myriad-pro-2", HelveticaNeue, Helvetica, Arial, Sans-Serif;
	font-weight: bold;
}
pre code {
	padding: 0;
	color: white;
	background: #333;
}
code {
	background: #EEE;
	color: black;
	font-family: Courier, MonoSpace;
	border-radius: 4px;
	font-size: 16px;
	padding: 0px 5px 1px 5px;
	white-space: nowrap;
}
.pln {
	color: #DFC484;
}
.pun {
	color: #EEE;
}
.lit {
	color: #C9783E;
}

Интересно и логично сделан вывод языка кода из атрибута rel.

alistapart.com

<pre><code>
.block {
  width: 200px;
  height: 200px;
}
</code></pre>

pre {
	line-height: 1.5em;
}
pre, code {
	font: 100.1% Monaco, "Andale Mono","Lucida Console","Bitstream Vera Sans Mono","Courier New", monospace, serif;
}
blockquote, pre {
	padding: 0.25em 40px;
}
pre code {
	font-size: 1em;
	line-height: 1.5em;
}

Полезные инструменты

Сконвертировать HTML код в специальные символы можно с помощью Zen Coding, а именно фильтрами. Работает это так,

div#content>p.title|e

преобразуется в

<div id="content">
        <p class="title"></p>
</div>

Вот еще несколько инструментов:
Convert Special Characters into HTML Entities
Tabifier

По теме:

Wrapping Long URLs and Text Content with CSS

Математическая уникальность

Золотая пропорция уникальна тем что если удалить из нее квадратную область то оставшийся прямоугольник опять будет иметь золотую пропорцию. Соответственно это можно продолжать дальше с оставшимся прямоугольником, а это значит что золотой прямоугольник можно использовать для создания рекурсивных фигур. В этой статье мы покажем как построить золотую спираль только на HTML и CSS.

HTML

<div id="container">
   <div class="cicle">
      <div>
         <div>
            <div>
               <div class="cicle">
                  <div>
                     <div>
                        <div>
                           <div class="cicle">
                              <div>
                                 <div>
                                    <div></div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

Каждый четвертый div имеет класс cycle, то есть спираль будет замыкаться каждые четыре цикла.

Золотая пропорция

Начнем с того что сделаем прямоугольник с золотой пропорцией, 288 × 1.618 = 466

#container > div {
	width: 932px;
	height: 576px;
}

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

Приблизительное значение, 38.2%, получается из формулы – (100 × 1 − phi) ÷ phi.
Итого, имеем:

.cycle,
.cycle > div > div {
	height: 38.2%;
	width: 100%;
}

.cycle > div,
.cycle > div > div > div {
	width: 38.2%;
	height: 100%;
}

То есть — каждый второй и каждый четвертый блок после первого .cycle мы делаем вертикальным, сам .cycle и каждый третий просто масштабируем.

Теперь покрасим как то блоки чтобы их можно было различать.

#container div {
	background-color: rgba(255,255,255,0.15);
}

На данный момент вот что получилось

пример раз

Уже выглядит довольно прикольно, но теперь, чтобы создать спираль, надо выровнять прямоугольники правильным образом. А именно так, что каждый следущий прямоугольник «закручивался» относительно предыдущего. Для это, при помощи абсолютного позиционирования прилепим их к определенной стороне родителя.

.cycle {
	position: absolute;
	top: 0;
}
	.cycle > div {
		position: absolute;
		right: 0;
	}
		.cycle > div > div {
			position: absolute;
			bottom: 0;
		}
			.cycle > div > div > div {
				position: absolute;
				left: 0;
			}

пример два

Скругление углов

Спиральная форма уже начинает прорисовываться, но теперь нужно срезать углы для полного ажура. Нас спасет border-radius.
Но, нам неизвестны точно размеры сторон всех прямоугольников, поскольку мы выставляли их ширину процентами. Спецификация говорит что можно использовать проценты при задании размеров радиуса скругления, но, к сожалению это не работает как положено во всех браузерах. К счастью, оказывается, что если задать радиус скругления намного больше чем высота или ширина, то реальным радиусом станет меньшая сторона прямоугольника.

.cycle {
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-webkit-border-top-left-radius: 10000px;
	-moz-border-radius-topleft: 10000px;
	border-top-left-radius: 10000px;
}

	.cycle > div {
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
		-webkit-border-top-right-radius: 10000px;
		-moz-border-radius-topright: 10000px;
		border-top-right-radius: 10000px;
	}

		.cycle > div > div {
			-webkit-border-radius: 0px;
			-moz-border-radius: 0px;
			border-radius: 0px;
			-webkit-border-bottom-right-radius: 10000px;
			-moz-border-radius-bottomright: 10000px;
			border-bottom-right-radius: 10000px;
		}

			.cycle > div > div > div {
				-webkit-border-radius: 0px;
				-moz-border-radius: 0px;
				border-radius: 0px;
				-webkit-border-bottom-left-radius: 10000px;
				-moz-border-radius-bottomleft: 10000px;
				border-bottom-left-radius: 10000px;
			}

пример три

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

финал

Работает в:

Столкнулся с дизайном в котором надо было сделать строку элементов разной высоты выровненной вертикально, вроде этого:

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

Одна строка

<div class="line">
	<span>Facebook</span>
	<a href=""><img src="facebook.png" ></a>
	<span>Twitter</span>
	<a href=""><img src="twitter.png" ></a>
</div>

Два способа работающих во всех браузерах кроме IE6:

.line{
	display: table-row;
}
	.line span{
		display: table-cell;
		vertical-align: middle;
	}
	.line a{
		display: table-cell;
		vertical-align: middle;
	}

.line{

}
	.line span{
		vertical-align: middle;
	}
	.line a{
		vertical-align: middle;
		display: inline-block;
	}

Второй способ на мой взгляд более здравый, как то странно превращать элементы в таблицы и ячейки только для вертикального выравнивания.

Несколько строк

<div class="line">
	<span> Lorem ipsum dolor sit amet, consectetur adipisicing elit,
	sed do eiusmod... </span>
</div>

Метод в данном случае известный – элемент контейнер имеет межстрочное расстояние равное высоте а вложенный элемент возвращает межстрочное на место:

.line{
	line-height: 7em;
	height: 7em;
}
	.line span{
		display: inline-block;
		vertical-align: middle;
		line-height: 1.2em;
	}
	.ie7 .line span{
		display: block;
		margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" :
		(parentNode.offsetHeight - this.offsetHeight)/2 + "px");
	}

.ie7 .line span – костыль для IE7.

И еще один способ в котором в блок при помощи :before вставляется элемент растянутый по высоте на 100% и выровненный по центру, он создает нужную высоту строки.

.fline{
	height: 10em;
}
	.fline:before {
		content: "";
		height: 100%;
		position: relative;
		width: 0px;
		font-size: 0;
		display: inline-block;
		vertical-align: middle;
	}
	.fline span{
		display: inline-block;
		vertical-align: middle;
		width: 320px;
	}
	.fline  img{
		display: inline-block;
		vertical-align: middle;
		margin-right: 10px;
	}

Этот прием в IE7 работать не будет конечно же поскольку он не понимает псевдоселектор :before

пример

Работает в:

По теме

Vertical centering using CSS

Верстка

• community
• community_albums
• community_city_feed
• community_city_followings
• community_edit
• community_travel
• community_travel_countries
• community_travel_tab_left
• community_trip_notes

Три раза переписывал, все равно отстой )

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

Короче говоря – пример выдвигающейся панели на этом методе.

Теперь подробнее.

HTML

<a class="info_open" href="#info">Open Info< /a>
<div class="info" id="info">
   <div class="panel">
      …
      <a class="info_close" href="#close">Close Info</a>
   </div>   

<div class="content">
…
</div>

Div который скрывается/показывается – это div#info.

CSS

Начальные стили этого блока:

.info {
   width: 600px;
   margin: auto;
   height: 208px;
   position: absolute;
   top: -250px;
   z-index: 1000;
}

Благодаря отрицательному top этот блок не виден изначально. Ссылка a.info_open обращается к этому диву (href=”#info”) и срабатывает псевдоселектор.

.info:target {
   position: relative;
   top: 0px;
}

top: 0px сдвигает блок и он становится видимым, а position: relative нужен чтобы участвовать в потоке и сдвинуть контент.

Ну и чтобы закрыть панель нужно убрать обращение к элементу – ссылка a.close_info. Кнопка a.open_info спозиционирована абсолютно поэтому при появлении div.info она просто перекрывается им.

IE

Для IE это все работает благодаря скрипту target.js от Mark Wubben, который имитирует поведение псевдоселектора.

пример

Работает в:

По теме:

CSSPlay: Pull Down Information Panel
MDN :target
CSS3.info: Making an image gallery with :target

• Главная
• Тарифы
• OpenVZ VPS
• Xen VPS
• О компании
• Страница заказа

Есть у нас в офисе рыбки декоративные. И есть у нас охранники. Тоже хорошие. Ничего вроде особенного, охранник, рыбки, а у меня уже глаз дергается.

Перед тем как уйти на новогодние каникулы я попросил охранника покормить рыб в аквариуме, пока нас не будет. Подвел его к аквариуму, показал сколько насыпать, и это – один раз в день. Да, да, конечно, мне не трудно и все такое.

Прихожу третьего числа, и – е…ть! Одна рыбка на дне вверх пузом, две оставшиеся зеленые как лягушки. Вода желтая, цвета нездоровой мочи. Быстро поменял воду, но в чем суть происшествия еще не понял.

Потом начал распрашивать охранника, но ничего не узнал потому что он утверждал что кормил как было показано. Сюрприз был на следующий день, когда другой охранник сделал удивленную рожу и сказал – та я ж мля всего столовую ложку ) Он вскормил рыбкам в течении недели полторы пачки корма. Где то так две месячные нормы. Если сравнить с человеком то это типа как закидывать ему в трехметровую комнату, где он живет безвылазно, ведра три вкуснятины каждый день.

Потом еще выяснилось что этот герой покормил рыбок на втором этаже в другом аквариуме о котором его никто не просил. Ну душа добрая. В итоге еще одна рыбка не пережила новый год.

Обидно было.

В общем если вы вдруг родитесь рыбой то стоит боятся не старухи с косой а человека в форме с пакетиком корма ) Если бы у рыб были легенды то охранник бы точно там занял роль какого нибудь трехглавого монстра у которого из каждой дырки сочится жратва для рыб.

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

Если серьезно, была такая птица, путешествующий голубь (passenger pigeon), которая считалась самой распространненой птицей на земле. Одна колония или стая, могла насчитывать 150 млн особей, и занимать деревья на территории 2000 км². Но к концу 19 века эта птица считалась уже исчезнувшей по причине острела ee человеком. И вот, какой то доблестный чел, где то в Америке или Канаде, году так в 1906, когда уже их лет 30 как никто не видел, вдруг увидел парочку экземпляров этого голубя. Не, не побежал кормить ) Побежал за ружьем и застрелил, и потом очень гордился и рассказывал что подстрелил последнего такого голубя. На самом деле это был не совсем последний, последний умер в зоопарке в 1914 году, но все равно впечатляет.

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

HTML

<div class="plans">
	<div class="xen">...</div>
	<div class="price_item">...</div>
	<div class="price_item">...</div>
	<div class="price_item">...</div>
	<div class="price_item">...</div>
</div>

CSS

.plans{
       background-image:
       url(“../img/xenplans_xen.png”),
       url(“../img/xenplans.png”) ;
       background-position: left bottom, left top;
       background-repeat: no-repeat, repeat-y;
}

Можно написать иначе:

.plans{
       background:
       url(“../img/xenplans_xen.png”) left bottom no-repeat,
       url(“../img/xenplans.png”) left top repeat-y;
}

А вот так нельзя:

.plans{
       background: url(“../img/xenplans.png”) left top repeat-y;
       background: url(“../img/xenplans_xen.png”) left bottom no-repeat;
}

IE

Для IE множественный фон работает при помощи скрипта PIE.

.plans{
       position: relative;
       -pie-background:
       url(“img/xenplans_xen.png”) -3px bottom no-repeat,
       url(“img/xenplans.png”) left top repeat-y;
       behavior: url(“css/pie.htc”);
}

Firefox 3.5

К сожалению в FF3.5 множественный фон еще не поддерживался, поэтому фон не отработал вообще.
Подправить это можно так:

.no-multiplebgs .plans{
       background-image: url(“../img/xenplans.png”) ;
       background-position: left top;
       background-repeat: repeat-y;
}

.plans:before{
       display: block;
       position: absolute;
       width: 187px;
       height: 100%;
       content: ” “;
       background-image: url(“../img/xenplans_xen.png”);
       background-position: left bottom;
       background-repeat: no-repeat;
}

.no-multiplebgs – селектор который означает что текущий браузер не понимает multiple background, создается джаваскриптовой библиотекой modernizr.

пример

Работает в:

По теме:

MDN: Multiple backgrounds
Multiple Backgrounds and Borders with CSS 2.1

Верстка:

• Home
• About
• Suggest a Shop
• Contact US
• Shop

У меня есть знакомые которые когда видят меня с сигаретой обязательно говорят – курить вредно. Ничего не нахожу как глупо улыбаться в ответ. Пытаюсь иногда понять где тут собака порылась. Неужели они думают что я этого не знаю. Да блин понятно что вредно ) Тогда что еще? Просто напоминают?

Представьте, я вас встречаю и говорю – ты когда нибудь умрешь ) Не, не, все в порядке, проходи, просто напоминаю. Че то мне кажется что вы подумаете что я не в порядке. Странно, но почему то с курением такого не происходит.
Заметьте что такую “фундаментальную” истину говорят только некурящие.

Как вы думаете кто знает как легко бросить курить, и что это вообще элементарно? Конечно – те же самые некурильщики. Спросите любого, желательно конечно того кто курил когда нибудь и бросил. Сначала послушаете доблестную историю про то как он бросил а потом! – замрите, ценнейший совет как бросить. Типа – ты должен очень захотеть. Или – кури каждый день на одну сигарету меньше. А вообще просто это вопрос силы воли, надо волю иметь. Вообщем эти разговоры похожи на то как если бы к вам пришел кто то и сказал, выпучив глаза:
- Я знаю, я понял, я понял как бросить курить!
- Как? говори, говори!
- Просто – не кури!
- Вау! Супер! Бляяя!

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

 <div class="infobox"> You will need ... </div> 

border-image: url("../img/infobox.png") 30 35/ 30px 35px repeat;

30 35 / … – первые два значения это отступы внутрь картинки, которые “разрезают” картинку на 9 частей, то есть 30px сверху и снизу, 35px справа и слева, вообщем точно также как у padding. Вот такая у меня получилась картинка:

Не знаю почему но значения без размерности это пикселы, для процентов надо ставить знак процентов.
../ 30px 35px – размеры бордера, в который будет “вписано” то, что вы “нарезали” первыми значениями. К примеру если бордер – 10px 20px, то уголок исходной картинки 30px на 35px сожмется до 10×20.

repeat – определяет как будут себя вести остальные области картинки при растягивании. В данном случае – повторяться. Другие варианты:
stretch – масштабируется;
round – повторяется но с округлением, так чтобы в имеющуюся область вписалось целое количество частей, имеет смысл когда вам надо выложить узоры.
Но такая запись не работает в опере, ширину бордера надо вынести отдельно, поэтому:

border-width: 30px 35px;
border-image: url("../img/infobox.png") 30 35/ 30px 35px repeat;

пример

Chrome 16

В Chrome 16 обьявилась бага фича с border-image, элемент почему то не заполняется фоном.
Вот так это выглядит:

2012-01-07

Оказалось что это не бага а документированное поведение – для того чтобы использовать центральную часть картинки для заполнения фоном элемента нужно указать ключевое слово fill.
То бишь:

border-image: url("../img/infobox.png") 30 35/ 30px 35px fill repeat;

В FF это приводит к неожиданному поведению, поэтому пока для FF надо писать по старому.

Либо можно поступить иначе:

background-clip: padding-box;
background-color: #FFF;

пример

Работает в:

По теме:
Border-image: using images for your border
-moz-border-image

Примеры верстки:

• Managed VPS
• OpneVZ
• VPS Hosting
• Xen

Задача – сделать это на CSS3.

HTML:

Firefox

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

Немного подробнее о синтаксисе:
bottom – определение начальной точки градиента, работает также как позиционирование в background image, может быть left, center и так далее. Можно определять в углах, например 90deg, это будет идентично bottom, -90deg – top и так далее.
#EB8800 – начальный цвет
#FFE400 50% – второй цвет и точка остановки, то есть второй цвет на середине страницы по вертикали остановится.
Цветов может быть больше двух.

Webkit

linear – определение типа градиента, может быть еще и radial.
0% 50%, 0% 100% – направление градиента, в данном случае – центр и нижняя точка. Этими двумя точками мы “рисуем” направляющую градиента. Может быть задано в ключевых словах – left, top … В webkit нет возможности задать угол поэтому наклонный градиент нужно задавать смещая точки направляющей. Например – 50% 50%, 0% 100%. На мой взгляд как то муторно и неочевидно, проще написать угол как в варианте Firefox.
from(#FFE400), to(#EB8800) – задание цветов. В моем случае первый цвет, желтый, начинается от центра страницы, соотвественно выше, от верха до центра, он же. Есть еще другой способ задать цвета – при помощи color-stop(0.5, цвет). В моем случае это будет – color-stop(0.0, #FFE400), color-stop(1.0, #EB8800). Первое значение у color-stop 0.0 потому что я уже определил что у меня первый цвет начнется из центра. Вообщем вариант webkit имеет больше возможностей чем мозилловский, но уж больно ядрено закручено.

IE

Самое интересное, как же теперь эти чудеса привить старым добрым импотентам ) Натолкнулся недавно на такую вот таблетку для IE – PIE, скрипт который делает возможным использование некоторых прелестей CSS3.
Итак, что нужно для IE:

Свойство -pie-background обрабатывается скриптом PIE со значением идентичным значению для firefox. Обратите внимание что нельзя использовать -pie-background-image, допустимо только короткая запись, подробно – в документации PIE.

Для PIE желательно указывать позиционирование, relative или absolute.

-pie-background можно использовать не только для градиентов но и для фоновых изображений, цвета. В случае с фоновыми картинками PIE хорош тем что понимает PNG32.

Если вы назначили элементу градиент при помощи pie а потом, например на ховер, пытаетесь перекрасить его просто цветом (background-color) то у вас ничего не выйдет. Надо использовать опять -pie-background:

Другой минус скрипта PIE в том что он может тормозить и неслабо. У меня случались баги когда с элементом одновременно имеет дело PIE и джаваскрипт. Короче говоря с IE полного счастья быть не может.

Еще одно наблюдение – PIE не работает если вы применяли к элементу какие либо фильтры, типа filter: progid:DXImageTransform.Microsoft.gradient…

Результирующий CSS

Было бы корректнее применить эти стили к body но к сожалению PIE не работает в этом случае.

пример

По теме:

Ultimate CSS Gradient Generator
PIE: Supported CSS3 Features