Notice: Use of undefined constant REQUEST_URI - assumed 'REQUEST_URI' in /var/www/www-root/data/www/sound-talk.ru/index.php on line 2

Notice: Use of undefined constant DOCUMENT_ROOT - assumed 'DOCUMENT_ROOT' in /var/www/www-root/data/www/sound-talk.ru/index.php on line 5

Notice: Use of undefined constant REQUEST_URI - assumed 'REQUEST_URI' in /var/www/www-root/data/www/sound-talk.ru/index.php on line 5

Notice: Use of undefined constant DOCUMENT_ROOT - assumed 'DOCUMENT_ROOT' in /var/www/www-root/data/www/sound-talk.ru/index.php on line 11

Notice: Use of undefined constant REQUEST_URI - assumed 'REQUEST_URI' in /var/www/www-root/data/www/sound-talk.ru/index.php on line 11

Notice: Use of undefined constant REQUEST_URI - assumed 'REQUEST_URI' in /var/www/www-root/data/www/sound-talk.ru/index.php on line 28

Notice: Use of undefined constant REQUEST_URI - assumed 'REQUEST_URI' in /var/www/www-root/data/www/sound-talk.ru/index.php on line 28

Notice: Use of undefined constant REQUEST_URI - assumed 'REQUEST_URI' in /var/www/www-root/data/www/sound-talk.ru/index.php on line 28

Notice: Undefined variable: flag in /var/www/www-root/data/www/sound-talk.ru/index.php on line 28

Notice: Undefined variable: adsense7 in /var/www/www-root/data/www/sound-talk.ru/index.php on line 39

Notice: Undefined variable: adsense6 in /var/www/www-root/data/www/sound-talk.ru/index.php on line 40
Css какой промежуток добавляет браузер между колонками по горизонтали. Кросс-браузерное CSS-решение создания колонок с равной высотой

Поля и отступы CSS - пояснение на примере четырех HTML-элементов. Css какой промежуток добавляет браузер между колонками по горизонтали


Кросс-браузерное CSS-решение создания колонок с равной высотой

Гениальное и простое решение предложил Matthew James Taylor в своей статье. Данное решение основано на чистом CSS без хаков, без применения картинок и Java-Script. В своей статье Мэтью сначала описывает саму проблему создания колонок с равной высотой, а потом предлагает само решение проблемы.

Проблема

Я не буду описывать полностью всю проблему создания блоков (div) одинаковой высоты в независимости от контента, думаю, что иллюстрация все прекрасно поясняет. Скажу лишь что основная проблема в том, что высота блока зависит от  контента в нем. К сожалению к div мы не можем применить heigh:100%;, либо фиксированная высота в пикселях, что очень нежелательно, либо зависимость от контента. В общем, на этом ограничим пояснение сути проблемы и перейдем к решению.

Решение

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

Плавающий контенер будет всегда той высоты, которую ему придает контент — печальная истина:( Единственным способ решить сделать div равным по высоте любой из существующих колонок с контентом — это «обернуть» в него данные колонки.

Как видите, в примере выше три блока заключены в один общи блок.

<div> <div>Column 1</div> <div>Column 2</div> <div>Column 3</div> </div>

<div> <div>Column 1</div> <div>Column 2</div> <div>Column 3</div> </div>

А вот CSS для этой разметки

#container1 { float:left; width:100%; } #col1 { float:left; width:30%; background:red; } #col2 { float:left; width:40%; background:yellow; } #col3 { float:left; width:30%; background:green; }

#container1 { float:left; width:100%; } #col1 { float:left; width:30%; background:red; } #col2 { float:left; width:40%; background:yellow; } #col3 { float:left; width:30%; background:green; }

Суть данной разметки и CSS заключается в том, что все блоки, и те, которые с контентом, и тот, который их содержит должны быть плавающими (иметь свойство float, причем не важно в каком направлении). Если мы не придадим свойство float для всех контейнеров, то контейнер, содержащий в себе блоки с контентом не сможет охватить их, и в итоге высота общего конейнера на самом деле будет равна «0», а не высоте самого высокого блока с контентом. В конце статьи я предложу решение этой проблемы.

Добавление дополнительных вложенных контейнеров

Далее нам следует добавить еще несколько контейнеров в основной контейнер, который содержит в себе блоки с контентом. В итоге, мы должны получить равное количеству блоков с контентом, количество «оберток». В нашем случае на нужно добавить еще два вложенных контейнера. А далее мы должны убрать свойство background у блоков с контентом и «передать» его «контейнерам-оберткам».

А так выглядит разметка этого примера:

<div> <div> <div> <div>Column 1</div> <div>Column 2</div> <div>Column 3</div> </div> </div> </div>

<div> <div> <div> <div>Column 1</div> <div>Column 2</div> <div>Column 3</div> </div> </div> </div>

А вот CSS, обратите внимание, что все контейнеры имеют свойство float, а «контейнеры-обертки» имеют ширину 100%. При этом фон имеют только «обертки»:

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 #container3 { float:left; width:100%; background:green; } #container2 { float:left; width:100%; background:yellow; } #container1 { float:left; width:100%; background:red; } #col1 { float:left; width:30%; } #col2 { float:left; width:40%; } #col3 { float:left; width:30%; }

#container3 { float:left; width:100%; background:green; } #container2 { float:left; width:100%; background:yellow; } #container1 { float:left; width:100%; background:red; } #col1 { float:left; width:30%; } #col2 { float:left; width:40%; } #col3 { float:left; width:30%; }

Сдвигаем контейнеры с помощью относительного позиционирования

Используя относительное позиционирование мы передвинем контейнеры на их новое место. При правильном позиционировании «контейнера-обертки» становится виден лежащий под ним слой, что и создает иллюзию равной высота колонок. DIV с #container2 мы смещаем на 30% влево относительно содержащего его блока, и обнажаем зеленый фон #container3. А DIV с #container1 мы сдвигает на 40% влево относительно содержащего его блока #container2 и обнажаем желтый фон последнего для центральной колонки. Соответственно красная секция остается видимой всего на 30% и формирует красный фон ля третьей колонки.

А вот 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 #container3 { float:left; width:100%; background:green; } #container2 { float:left; width:100%; background:yellow; position:relative; right:30%; } #container1 { float:left; width:100%; background:red; position:relative; right:40%; } #col1 { float:left; width:30%; } #col2 { float:left; width:40%; } #col3 { float:left; width:30%; }

#container3 { float:left; width:100%; background:green; } #container2 { float:left; width:100%; background:yellow; position:relative; right:30%; } #container1 { float:left; width:100%; background:red; position:relative; right:40%; } #col1 { float:left; width:30%; } #col2 { float:left; width:40%; } #col3 { float:left; width:30%; }

Возвращаем колонки с контентом на свои позиции

Теперь нам нужно вернуть на место колонки с контентом, которые сместились вместе с содержащим их контейнером. Для этого мы снова применяем относительное позиционирование.

И последнее, что нам нужно сделать — это «обрезать» все, что выступает за пределы видимой области, назначив overflow:hidden; самому первому «контейнеру-обертке». В нашем случаее это #container3.

Смотрим 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 #container3 { float:left; width:100%; background:green; overflow:hidden; position:relative; } #container2 { float:left; width:100%; background:yellow; position:relative; right:30%; } #container1 { float:left; width:100%; background:red; position:relative; right:40%; } #col1 { float:left; width:30%; position:relative; left:70%; } #col2 { float:left; width:40%; position:relative; left:70%; } #col3 { float:left; width:30%; position:relative; left:70%; }

#container3 { float:left; width:100%; background:green; overflow:hidden; position:relative; } #container2 { float:left; width:100%; background:yellow; position:relative; right:30%; } #container1 { float:left; width:100%; background:red; position:relative; right:40%; } #col1 { float:left; width:30%; position:relative; left:70%; } #col2 { float:left; width:40%; position:relative; left:70%; } #col3 { float:left; width:30%; position:relative; left:70%; }

Казалось бы все, но для полной красоты нам не хватает отступов в колонках с контентом. Сейчас мы их сделаем. Но если мы добавим просто отступы с помощью padding, то наша разметка потеряет кроссбраузерность, за счет известного бага Internet Explorer с подсчетом ширины колонок. Итак, чтобы сделать отступы кроссбраузерными нам нужно применить следующий трюк.

Для того чтобы создать видимость отступов мы просто сделаем наши колонки уже, с учетом величины отступов слева и справа, а потом сдвинем их на нужное число с помощью отностиельного позиционирования. В нашем случае мы возьмем величину отступа в 2% и поэтому колонка шириной 30% будет иметь ширину 26%, а колонка шириной 40% будет иметь ширину 36%. Но теперь, когда мы будем возвращать колонки на место с помощью поиционирования, нам нужно помнить, что они стали уже и, соответственно, увеличить процент смещения для кажой колонки. в нашем случае для первой на 2%, а для остальных к смещению предыдущей добавляем еще 4%.

Конечный CSS

В результирующем CSS нам еще нужно добавить для каждой колонки с контентом свойство overfloww:hidden;, для того, чтобы в случаее, если содержимое превысит допустимую ширину, например картинка слишком широка, наша разметка не развалилась. Это сделано для IE, посокльку другие браузеры удержут разметку даже в таком случае.

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 #container3 { float:left; width:100%; background:green; overflow:hidden; position:relative; } #container2 { float:left; width:100%; background:yellow; position:relative; right:30%; } #container1 { float:left; width:100%; background:red; position:relative; right:40%; } #col1 { float:left; width:26%; position:relative; left:72%; overflow:hidden; } #col2 { float:left; width:36%; position:relative; left:76%; overflow:hidden; } #col3 { float:left; width:26%; position:relative; left:80%; overflow:hidden; }

#container3 { float:left; width:100%; background:green; overflow:hidden; position:relative; } #container2 { float:left; width:100%; background:yellow; position:relative; right:30%; } #container1 { float:left; width:100%; background:red; position:relative; right:40%; } #col1 { float:left; width:26%; position:relative; left:72%; overflow:hidden; } #col2 { float:left; width:36%; position:relative; left:76%; overflow:hidden; } #col3 { float:left; width:26%; position:relative; left:80%; overflow:hidden; }

Вот и все. Лично мне очень понравился предложенный Метью метод. На демонстрацию его в действии можно взглянуть на демо-страничке автора: 2 колонки, 3 колонки, 4 колонки и 5 колонок.

От себя добавлю, что можно избежать проблемы высоты плавающий «контейнеров-оберток», если использовать фикс высоты плавающих блоков, который нормально воспринимается валидатором CSS и работает во всех браузерах. Для этого «оберткам» можно добавить class=»clearfix», а в CSS добавить такой код:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 /* *** Float containers fix *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }   .clearfix{display: inline-block;}   /* Hides from IE-mac \*/ * html .clearfix{height: 1%;} .clearfix{display: block;} /* End hide from IE-mac */

/* *** Float containers fix *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix{height: 1%;} .clearfix{display: block;} /* End hide from IE-mac */

Теперь точно все. Удачной вам верстки!P.S.Для тех кому надоела верстка и захотелось экзотики есть недвижимость в Черногории — виллы, дома, квартиры. У кого на что хватит?А если вы вдруг затеяли социальный проект, то вам обязательно понадобиться наружная социальная реклама

www.master-web.info

Многоколоночный текст на CSS3

Автор: Анна Лысак и Татьяна Головко Дата публикации: 04.10.2011

Задача

Нужно распределить текстовый контент в несколько столбцов. И мы хотим сделать это при помощи средств CSS.

Решение

CSS3 предлагает нам новый вариант организации текстового контента при помощи модуля Multi-column. Это дает возможность разбить на столбцы текст без дополнительной разметки вроде плавающего <div> или <table>.

Текст разбит на колонки

Об истории и поддержке

Впервые модуль Multi-Column был опубликован еще 10 лет назад - в 2001 году, но только в апреле 2005, с выпуском Firefox 1.5 беты (основанный на Gecko 1.8) появилась хотя бы частичная поддержка CSS3 Multi-Column.

Сегодня модуль Multi-column поддерживается в браузерах Mozilla, Webkit (Safari и Chrome) и Opera 11, соответственно в IE и ранних версиях Opera многоколоночность не сработает.

Справка от W3C:

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

Хорошо, как использовать эту функцию?

Для поддержки в браузерах Mozilla и Webkit нужно использовать вендорные префиксы -moz- и -webkit-.

Свойства CSS3-модуля

  • column-count — требуемое количество столбцов для данного элемента;
  • column-width — ширина каждого столбца;
  • column-gap — расстояние (padding) между столбцами;
  • column-rule — определяет разделитель как границу между столбцами.

Так, хватит уже теории. Переходим к практике!

Есть два способа определения столбцов:

  • column-count — сколько тебе нужно столбцов;
  • column-width — какой ширины должен быть столбец.
Количество столбцов:
#multi-column1 { column-count: 3 -moz-column-count: 3; -webkit-column-count: 3; сolumn-gap: 20px; -moz-column-gap: 20px; -webkit-column-gap: 20px; text-align: justify; }
Ширина столбца:
#multi-column2 { column-width: 200px; -moz-column-width: 200px; -webkit-column-width: 200px; column-gap: 30px; -moz-column-gap: 30px; -webkit-column-gap: 30px; text-align: justify; }

Или же, как альтернативный вариант, можно использовать короткое свойство columns.

Граница между столбцами

Если для определения столбцов ты выбираешь column-count или column-width, можно добавить между ними разграничитель при помощи следующего CSS:

column-rule: 2px solid #9c9c9c; -moz-column-rule: 2px solid #9c9c9c; -webkit-column-rule: 2px solid #9c9c9c;

Если хочешь еще глубже разобраться в CSS3-модуле Multi-column — стоит почитать спецификацию W3C.

А как же браузеры, не понимающие Multi-column?

Специально для них очень давно был разработан скрипт css3-multi-column.js. Он парсит CSS-файл и с помощью javascript пререразбивает нужные блоки на несколько колонок.

Демо-пример — используем многоколоночный текст на CSS3 и скрипт для IE.

Проверено в:

  • IE 7-8
  • Opera 11
  • Firefox 6
  • Safari
  • Chrome

Материал:

xiper.net

position | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Краткая информация

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

Синтаксис

position: absolute | fixed | relative | static | inherit

Значения

absolute Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента. fixed По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. relative Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. static Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам. inherit Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>position</title> <style> .layer1 { position: relative; /* Относительное позиционирование */ background: #f0f0f0; /* Цвет фона */ height: 200px; /* Высота блока */ } .layer2 { position: absolute; /* Абсолютное позиционирование */ bottom: 15px; /* Положение от нижнего края */ right: 15px; /* Положение от правого края */ line-height: 1px; } </style> </head> <body> <div> <div> <img src="images/girl.jpg" alt="Девочка" /> </div> </div> </body> </html>

Результат данного примера показан на рис. 1.

Применение свойства position

Рис. 1. Применение свойства position

Объектная модель

[window.]document.getElementById("elementID").style.position

Браузеры

Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer до версии 8.0 не поддерживает значение inherit.

htmlbook.ru

Поля и отступы CSS - пояснение на примере четырех HTML-элементов

Свойство HTML margin используется для добавления отступа или разрыва между различными элементами. Свойство padding используется для добавления пространства между содержимым и границей (рамкой) указанного HTML-элемента.

Разницу между полем и отступом можно увидеть на следующем рисунке:

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

Посмотреть демо-версию и код

У нас есть три элемента div. Первые два — со свойством HTML margin, а третий — со свойством padding. Расстояние между элементами div — это margin, а пространство между текстом внутри третьего элемента div и линией его границы — это padding.

Синтаксис CSS padding и margin

Синтаксис, который используется для единичного объявления свойства CSS margin:

Этот код задает отступы во всех направлениях: сверху, снизу, слева и справа. Если необходимо задать отступы для разных направлений, это можно сделать с помощью следующего сокращенного объявления:

margin: 10px 20px 50px 100px;

Где:

  • 10px — отступ сверху;
  • 20px — отступ справа;
  • 30px — отступ снизу;
  • 40px — отступ слева.

Также можно установить margin left HTML и другие направления отдельно:

margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;

Примечание: Можно использовать для определения отступа px, pts, cm и т.д.

Синтаксис свойства CSS padding

Свойство padding можно задать с помощью единичного / сокращенного объявления или используя отдельное объявление, а для каждого направления.

Единичное объявление с одним значением:

Для каждого направления одиночным объявлением:

padding: 10px 20px 50px 100px;

Если указаны четыре значения, то порядок их следования такой же, как и для свойства HTML CSS margin.

Для каждого направления в отдельности:

padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px;

Пример для установки полей и отступов в HTML-списке

Во вступительной части я показал свойства margin и padding, используемые в элементе div. В этой демо-версии я создал список с помощью пунктов меню, которые являются ссылками. Список размещается внутри элемента div. Он содержит пункты меню в виде гиперссылок.

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

Посмотреть демо-версию и код

Добавив поля 10px для ссылок внутри <ul>:

мы получим следующий вид:

Посмотреть онлайн демо-версию и код

Свойство padding добавило пространство между содержимым и границей каждой ссылки. Укажите отступ величиной в 2 пикселя в классе ссылки, и получите следующий вид:

Посмотреть онлайн демо-версию и код

Весь класс для ссылок внутри элемента <ul> будет следующим:

padding: 10px; margin: 2px; text-decoration: none; color: #fff; background-color: #DA8119; display:block;

Демонстрация полей на примере HTML-таблицы

Ниже приводится пример использования свойства padding в HTML-таблице. Я создал таблицу с несколькими строками.

Для таблицы заданы стили с помощью различных свойств CSS. Сначала посмотрите, как выглядит таблица без применения свойства padding:

Посмотреть демо-версию и код

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

Посмотреть демо-версию и код

Ниже приводится код стилей, которые используются для <td>. Весь код можно увидеть, перейдя по ссылке выше:

padding: 20px; border: dashed 1px #DF7000; background: #D0E8AC; color: #000;

Пример использования полей и отступов с элементом form

Свойства margin padding HTML также можно применять для элементов формы: текстовых полей, кнопок и т.д.

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

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

Добавив поля к классу текстовых полей и классу кнопки btn, мы получим форму, выглядящую следующим образом:

Поля для текстовых полей:

Поля для кнопки:

Посмотреть демо-версию и код

Чтобы увеличить или уменьшить отступы между текстовыми полями, используйте свойство HTML CSS margin. В данной демо-версии я использовал отрицательное значение для уменьшения расстояния между полями.

Поля формы будут выглядеть следующим образом:

Посмотреть демо-версию и код

После использования отрицательного значения в HTML margin расстояние между текстовыми полями уменьшилось на 3 пикселя.

Использовав свойство padding, мы увеличили расстояние между курсором внутри текстового поля и линией границы, которое задается другими свойствами. Теперь поле выглядит гораздо лучше.

Для кнопки “Save” мы также применили свойство padding:

которое используется для выравнивания текста во всех направлениях.

Перевод статьи «CSS padding and margin – Explained with 4 HTML elements» был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Свойство border-spacing - расстояние между ячейками таблицы

Свойство border-spacing задает отступ между ячейками td или ячейками th HTML таблицы (и между границей ячейки и самой таблицы).

Данное свойство - CSS аналог атрибута cellspacing, при этом оно имеет больший приоритет (если задан border-spacing - cellspacing игнорируется).

Внимание! Если вам кажется, что аналогичного эффекта вы сможете добиться с помощью margin - я вас разочарую: margin для ячеек таблицы не работает (только padding).

Внимание! Применяйте свойство для таблиц, а не для ее ячеек (для ячеек просто не будет работать). Отсюда следствие: нельзя задать разный border-spacing ячейкам в одной таблице.

Внимание! Если задано свойство border-collapse в значении collapse - border-spacing работать не будет.

Синтаксис

селектор { border-spacing: 10px | 10px 20px; }

Значения

Значение Описание
Одно число Отступы между ячейками по вертикали и по горизонтали.
Два числа Первое число - отступ по горизонтали, второе число - отступ по вертикали.

Значение по умолчанию: 0.

Однако, каждый браузер имеет свое, ненулевое значение атрибута cellspacing, поэтому по умолчанию вы увидите отступы между ячейками. Они убираются с помощью cellspacing = "0" или border-spacing: 0;

Можно использовать любые CSS единицы, кроме процентов.

Примеры

Примеры будут по следующей таблице:

<table> <tr> {1} {2} {3} </tr> <tr> {4} {5} {6} </tr> <tr> {7} {8} {9} </tr> </table>

Пример . Одно число

Отступы между ячейками (и между ячейкой и границей таблицы) станут 10px:

table { width: 400px; border-collapse: separate; border-spacing: 10px; border: 1px solid red; } td { border: 1px solid red; text-align: center; }

Результат выполнения кода:

Пример . Два числа

Отступы между ячейками (и между ячейкой и границей таблицы) станут 10px по горизонтали и 30px по вертикали:

table { width: 400px; border-collapse: separate; border-spacing: 10px 30px; border: 1px solid red; } td { border: 1px solid red; text-align: center; }

Результат выполнения кода:

Пример . Зададим border-collapse: collapse

А вот теперь border-spacing работать не будет из-за свойства border-collapse в значении collapse:

table { width: 400px; border-collapse: collapse; border-spacing: 10px 30px; border: 1px solid red; } td { border: 1px solid red; text-align: center; }

Результат выполнения кода:

theory.phphtml.net

background | htmlbook.ru

CSS Internet Explorer Chrome Opera Safari Firefox Android iOS
2.1 6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 2.1+ 1.0+
3 9.0+ 1.0+ 10.5+ 1.3+ 3.6+ 2.1+ 1.0+

Краткая информация

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.

Синтаксис

Здесь:

<фон> = [background-attachment || background-image || background-position || background-repeat] | inherit

<последний_фон> = [background-attachment || background-color || background-image || background-position || background-repeat] | inherit

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

Значения

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

Пример 1

XHTML 1.0CSS2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>background</title> <style type="text/css"> div { height: 200px; /* Высота блока */ width: 200px; /* Ширина блока */ overflow: auto; /* Добавляем полосы прокрутки */ padding-left: 15px; /* Отступ от текста слева */ background: url(images/hand.png) repeat-y #fc0; /* Цвет фона, путь к фоновому изображению и повторение фона по вертикали */ } </style> </head> <body> <div> Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat. </div> </body> </html>

Результат данного примера показан ниже (рис. 1).

Вид фона и фонового рисунка в блоке фиксированного размера

Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера

Пример 2

HTML5CSS3IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>background</title> <style> body { background: url(images/hand.png) repeat-y, #fc0 url(images/bg-right.png) repeat-y 100% 0; } </style> </head> <body> </body> </html>

Объектная модель

[window.]document.getElementById("elementID").style.background

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

htmlbook.ru

overflow | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 3.6 1.0+ 1.0+ 1.0+

Краткая информация

Значение по умолчанию Наследуется Применяется Процентная запись Ссылка на спецификацию
visible
Нет
К блочным элементам
Неприменима
http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Синтаксис

overflow: auto | hidden | scroll | visible | inherit

Значения

visible Отображается все содержание элемента, даже за пределами установленной высоты и ширины. hidden Отображается только область внутри элемента, остальное будет скрыто. scroll Всегда добавляются полосы прокрутки. auto Полосы прокрутки добавляются только при необходимости. inherit Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>overflow</title> <style> .layer { overflow: scroll; /* Добавляем полосы прокрутки */ width: 300px; /* Ширина блока */ height: 150px; /* Высота блока */ padding: 5px; /* Поля вокруг текста */ border: solid 1px black; /* Параметры рамки */ } </style> </head> <body> <div> <h3>Duis te feugifacilisi</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div> </body> </html>

Результат данного примера показан на рис. 1.

Применение свойства overflow

Рис. 1. Применение свойства overflow

Объектная модель

[window.]document.getElementById("elementID").style.overflow

Браузеры

Internet Explorer до версии 7.0 включительно:

  • не поддерживает значение inherit;
  • относительно позиционированные дочерние элементы, значения overflow у которых заданы как auto или scroll ведут себя словно у них задано position: fixed.

Internet Explorer 8:

  • Сочетание overflow со значением scroll со свойствами max-height и float может привести к пропаданию элементов веб-страницы, в браузере выводится пустой экран.
  • Для блока, у которого указаны свойства float и overflow со значением scroll, игнорируется ширина, заданная через свойство max-width.
  • Высота блока с горизонтальной полосой прокрутки увеличивается на высоту скролбара, хотя по спецификации CSS заданные размеры должны включать в себя и полосы прокрутки.
Firefox 3.6 некорректно применяет overflow к группам ячеек таблицы (<thead>, <tbody>, <tfoot>).

htmlbook.ru