Что означает nbsp 151 в html. Как добавить неразрывный пробел в HTML код страницы. Неразрывный пробел и мягкий перенос в примерах

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

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

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

Но с блоками всё иначе. Посмотрите на 2 колонки свёрстанных блоками.

Почему же так происходит?

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

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

Их много, но сегодня я приведу самую простую и понятную новичку хитрость. Мы просто поместим оба блока в ещё один блок, который их объединит, и этому блоку зададим такой фон, который нам нужен. Так как общий блок будет продолжаться до конца самого большого из блоков, его фон будет распространяться вниз.

Посмотрим, как это выглядит на схеме.

Теперь давайте переходить непосредственно к коду.

Теперь разберём что к чему.

Далее создадим фоновое изображение. Ширина главного блока у нас будет равна 700 px. Следовательно и ширина фонового изображения будет равна 700px. Высоту можно задавать любую в зависимости от того, какой у вас фон.

Я создал такое изображение и назвал его textured. gif

Теперь смотрим, что получилось в CSS

#main {width:700px; margin:0 auto; background-image:url(textured.gif); background-repeat:repeat-y; }
#one {width:400px; float:left;}
#two {width:300px;}

Теперь если мы посмотрим на результат, то увидим следующие:

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

Я создал вот такое фоновое изображение и назвал его textured1. gif

Естественно соответствующим образом изменил одно из свойств в CSS.

#main {width:700px; margin:0 auto; background-image:url(textured1.gif); background-repeat:repeat-y; }

Вот что получилось:

P.S. от Максима: данный эффект не работает у меня в Firefox.

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

Таким образом, видно чёткое разделение подходов к вёрстке:

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

Игнорирование этих принципов приводит к усложнению кода и появлению ошибок в отображении документа браузерами, как следствие, повышается время на разработку сайта и его отладку. Исключением может служить применение свойства height , которое устанавливает высоту слоёв. В примере 5.32 показано создание подобного макета.

Пример 5.32. Использование height

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

Рис. 5.23. Колонки одинаковой высоты

Понятно, что объём текста в колонках может различаться, поэтому высоту через height обычно указывают с запасом. Ещё можно добавить свойство overflow со значением auto . Если текст превысит заданную высоту, появится полоса прокрутки.

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

Границы в качестве колонок

Суть метода в следующем - устанавливаем слева или справа от элемента границу, ширина которой совпадает с шириной одной из колонок. Понятно, что границы предназначены совсем для других целей, но в данном случае такое их использование позволяет получить желаемый результат. Для этого создаем слой с именем layout и для него устанавливаем стиль, как показано ниже.

Layout { border-left: 200px solid #c7e3e4; /* Ширина границы и цвет левой колонки */ background: #e0d2c7; /* Цвет фона правой колонки */ }

Поскольку слой у нас всего один, то колонки, имитированные с помощью широкой вертикальной линии и фона, всегда имеют одну высоту. Остается расположить информацию точно поверх границы. Для левой колонки, назовём её col1 , следует задать ширину и с помощью стилевого свойства float указать, что это плавающий элемент. Поскольку граница не является частью текстового блока, то требуется сместить слой col1 влево за счет добавления свойства margin-left с отрицательным значением, равным ширине границы.

Col1 { width: 200px; /* Ширина левой колонки */ float: left; /* Превращаем в плавающий элемент */ margin-left: -200px; /* Сдвигаем все влево на ширину границы */ }

В данном примере сочетание свойств float и margin-left позволяет расположить содержимое слоя прямо поверх границы. Для правой колонки col2 никаких дополнительных условий указывать не надо, текст будет располагаться как нам требуется.

Из-за того, что используется плавающий элемент, может получиться, что текст в левой колонке выходит за пределы цветного прямоугольника. Чтобы этого не произошло, следует отменить действие свойства float за счет использования clear . В данном случае использовать overflow : hidden нельзя, будет обрезано пространство внутри границы, включая нашу фальшивую колонку. Окончательный код показан в примере 5.33.

Пример 5.33. Две колонки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Рис. 5.24. Две колонки, созданные с помощью границы

Для создания трёхколоночного макета границу следует добавить слева и справа от контейнера layout . Для разнообразия ширина правой колонки указывается в em (в процентах границу задавать нельзя).

Layout { border-left: 200px solid #c7e3e4; /* Ширина границы и цвет левой колонки */ border-right: 15em solid #ecd5de; /* Ширина границы и цвет правой колонки */ background: #e0d2c7; /* Цвет фона средней колонки */ }

Для первой колонки стилевой код остаётся неизменным, а третьей колонке следует указать свойство float со значением right и сдвинуть её вправо с помощью свойства margin-right (пример 5.34).

Пример 5.34. Три колонки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Грейпфрут

Грейпфрут - плод субтропического вечнозеленого дерева рода цитрусовых. Диаметр в среднем составляет 10–15 см, кожура желтая, мякоть красного оттенка. Вкус горький, чему способствует тонкая пленка вокруг каждой дольки. Если ее убрать, то горечь сильно снизится.

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

Рис. 5.25. Три колонки, созданные с помощью границы

Браузер IE6 содержит ошибку с границами и некорректно отображает данные примеры. Чтобы он правильно выводил макет, для него следует величину границ уменьшить вдвое.

Фоновая картинка

Принцип использования фонового изображения для колонок основан на том, что мы видим повторяющуюся по вертикали картинку, сверху которой располагается текст и другие элементы. Поскольку нам надо сделать эффект колонок, фон добавляется не к колонкам по отдельности, а для их родителя. Здесь имеет значение, какой это фон, что он собой представляет и каковы его размеры. Предположим, что у нас двухколоночный фиксированный макет шириной 980 пикселов, левая колонка занимает ширину 200 пикселов. Создаём изображение размером 980х60 пикселов. Ширина соответствует ширине макета, а высоты обычно берётся 20–30 пикселов.

Многие разработчики делают рисунок высотой 1–2 пиксела, полагая, что объём файла будет минимальным, и загрузка произойдёт быстрее. Однако всё обстоит наоборот. Компьютер тратит в несколько раз больше времени для отображения одной страницы с узким фоном, что особенно заметно при прокрутке окна браузера. Так что при использовании фонового рисунка делайте изображение высотой не менее 20–30 пикселов - так отображение его на странице будет происходить быстрее.

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

Рис. 5.26. Фоновый рисунок

Теперь вставляем фон для слоя layout , внутри которого расположены наши колонки (пример 5.35).

Пример 5.35. Фон для фиксированного макета

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 5.27. Хорошо заметно, что колонки имеют одинаковую высоту.

Рис. 5.27. Колонки одинаковой высоты, созданные фоновой картинкой

При использовании в рисунке каких-либо декоративных элементов, следует позаботиться, чтобы текст от них был отодвинут через padding и не «налипал».

Для трёх и более колонок в фиксированном макете процесс подготовки изображения сходный, а вот для резинового макета есть ряд особенностей из-за того, что ширина макета может лежать в широком диапазоне. Тогда фоновую картинку необходимо сделать заведомо широкой, например, 2000 пикселов. Фон не влияет на ширину веб-страницы и если не помещается в отведённые ему размеры, то обрезается. Этим качеством и воспользуемся. В качестве примера рассмотрим резиновый макет с фиксированной правой колонкой шириной 300 пикселов. Для него сделаем изображение шириной 2000х30 пикселов с тёмно-красным прямоугольником справа (рис. 5.28).

Рис. 5.28. Фон для резинового макета

Фиксированная колонка располагается справа, поэтому фон также надо установить в правый верхний угол, указав 100% 0 для свойства background (пример 5.36).

Пример 5.36. Фон для резинового макета

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Плюсы

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

Минусы

• Наилучшие результаты получаются, когда одна из колонок или все имеют фиксированные размеры. Для макета, где ширина колонок резиновая, фон корректно добавить не получится.
• При отключении изображений в браузере текст может оказаться нечитабельным. Впрочем, это легко обойти, задав наряду с фоновой картинкой цвет фона.
• Файл с фоновой картинкой может иметь большой объём и долго загружаться. Отметим, что для простого изображения, вроде приведённого на рис. 5.27, это не так, при размерах 2000х30 пикселов файл занимает всего 275 байт.

Цвет фона

При имитации колонок одинаковой высоты с помощью фоновой картинки она добавляется через свойство background к родительскому элементу колонок (слой layer ). Похожим образом работает и цвет фона. Его достаточно установить для слоя layer , а самой высокой колонке задать свой собственный цвет. В примере 5.37 приведён трёхколоночный макет, в котором цвет фона боковых колонок устанавливается через слой layer , а центральной колонки через слой col2 .

Пример 5.37. Использования фонового цвета для колонок

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Свойство height в примере добавлено, чтобы стало заметно влияние цвета на колонках. В реальности оно не требуется.

У этого метода есть ряд недостатков, которые следует учитывать на практике.

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

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

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

• 
• 
• 
• 
• 
  Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже.
• 
  Классический текст Lorem Ipsum.
• 
  Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже. Классический текст Lorem Ipsum.
• 
  Классический текст Lorem Ipsum, используемый с XVI века.

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

Select_main { margin:40px auto 0; width:800px; } ul { width:100%; } li { margin:0 10px 20px 5px; padding:10px; width:160px; display:inline-block; vertical-align:top; *display:inline; *zoom:1; border:1px solid #e5e5e5; } .img { width:100%; height:121px; text-align:center; display:table; position:relative; } .img span { display:table-cell; vertical-align:middle; } .img img { width:100%; }

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

$(document).ready(function(){ var maxH = 0; $("li").each(function () { var h_block = parseInt($(this).height()); if(h_block > maxH) { maxH = h_block; }; }); $("li").height(maxH); });

Сохраняемся, перегружаем страницу и любуемся проделанной работой. Все блоки приняли одинаковую высоту.

Теперь немного подробнее, чего мы тут написали. Объявляем переменную maxH и присваиваем ей значение 0 . Далее выбираем все элементы li в каталоге и проходимся по ним в цикле с помощью функции each . В теле цикла мы объявляем еще одну переменную h_block в которой сохраняем значение высоты каждого элемента li , округленного до целого числа с помощью функции parseInt . Все в том же цикле задаем условие - если значение текущего блока больше, чем значение в переменной maxH , то присваиваем последней это значение. Другими словами - мы проверяем высоту каждого блока и наибольшую высоту сохраняем в переменную maxH . И, наконец, пройдясь по всем li и вычислив наибольшую высоту, мы присваиваем ее всем блокам (строка $("li").height(maxH); ).

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

Исправить такую ситуацию полностью нельзя (если только не уменьшить объем текста в проблемной лишке), а вот свести недостаток к минимуму вполне возможно.

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

$(document).ready(function(){ var line = $("li"); var times = 0, rows = Array(), max = 0; line.each(function() { if (times == 4) { for (var i = 0; i < rows.length; i++) { rows[i].css("height", max); } max = 0; times = 0; rows = ; } if (max < $(this).height()) { max = $(this).height(); } rows = $(this); times += 1; }); if (times != 0) { for (var i = 0; i < rows.length; i++) { rows[i].css("height", max); } } });

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