Как можно добавить отступ между элементами списка? html css 2 страница

Я недавно столкнулся с задачей, в которой надо было создать двухколоночный макет страницы с "шапкой" и "подвалом", причём в коде страницы контент должен был быть расположен перед блоком боковой колонки. Я решил воспользоваться возможностью продемонстрировать малоизвестный приём CSS-вёрстки: отрицательные поля (negative margins). Отрицательные поля позволяют нам сместить область контента за границы окна браузера, освободив место для боковой колонки. Постановка задачи Итак, чтобы показать, как полезны могут быть отрицательные поля для создании резиновой вёрстки, давайте-ка сделаем резиновый двухколоночный макет с "шапкой" и "подвалом". Область основного содержимого (контента) будет слева, вторая колонка - справа. Сделать это, в общем-то, довольно просто, но мы пойдем немного другим путем, потому что по условиям задачи код страницы у нас будет иметь определенную структуру. Зная, как работают "плавающие" блоки, проще всего было бы разместить боковую панель перед блоком контента, позволив ей обтекать (float) контент с правой стороны. Однако, раз уж нам так важно, чтобы в текстовых браузерах, программах для чтения с экрана и старых браузерах, не понимающих наши таблицы стилей, сначала был виден контент, а потом уже боковая панель, значит нам надо найти такое решение, которое бы позволило разместить контент в начале кода. Причем это решение должно ещё и работать в большинстве браузеров. Исходный код Давайте-ка взглянем на код двухколоночной страницы с "шапкой" и "подвалом", с которым мы будем работать: header content Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend. Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit. sidebar · link one · link two footer Посмотрите на Примере 1, каким будет содержимое, не обработанное стилевыми правилами. Увидев пример, вы поймете, почему мы хотим расположить контент перед боковой панелью - так отобразят страницу те браузеры, которые не способны правильно понять наши таблицы стилей. Понятно, что левая область, содержащая контент, должна занять всю свободную ширину страницы минус пространство, необходимое для боковой панели. Хорошо было бы, если бы мы могли задать ширину следующей формулой "100% минус 200 пикселей"? Используя отрицательные границы, мы можем добиться нужного эффекта. Нет, честно! Необходимые стили Теперь примемся за CSS. Как мы и сказали, зададим нашему блоку с контентом ширину, равную 100%, включаем "левое обтекание" (float: left;), и устанавливаем отрицательное правое поле, равное "-200px". Включение обтекания (float) здесь очень важно, так как поля (раз уж мы работаем с отрицательными величинами) у плавающих (float) и строчных (inline) элементов обрабатываются броузерами совсем не так, как у "неплавающих" блочных элементов. Отрицательное правое поле у блока контента нужно скорей для того, чтобы боковой блок "всплыл" в освободившееся место, нежели для изменения вида самого блока контента. Посмотрите, что получилось в результате, на Примере 2. Мы "сплавляем" боковую панель вправо (float: right;) и задаем ей ширину, равную тем самым оставленным для неё 200 пикселям. Наконец, мы задаём для нашего "подвального" блока свойство "clear: both", дабы он располагался ниже контента и бокового блока, независимо от того, какая из колонок окажется длиннее. Также мы пропишем фоновые цвета для "шапки" и "подвала", чтобы они выделялись на странице. #header { background: #d7dabd; } #container { width: 100%; float: left; margin-right: -200px; } #sidebar { width: 200px; float: right; } #footer { background: #d7dabd; clear: both; } Данный CSS даст нам то, что изображено в Примере 2. Как видите, нам нужно теперь отодвинуть контент от правой стороны документа. Поэтому мы решили воспользоваться ещё одним div-блоком - этот метод понимается браузерами намного лучше, чем любой другой способ. Итак, мы внесли следующие изменения в наш XHTML код: content Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend. Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit. Теперь мы зададим блоку контента правое поле и фоновый цвет, расположив его тем самым там, где нам нужно, и отделив его от боковой панели. #content { background: #f1f2ea; margin-right: 200px; } Наводим лоск Прежде чем перейдем к визуальному оформлению страницы, давайте решим ещё одну проблему. Нам нужно задать нулевое верхнее поле первому элементу в нашем блоке контента, равно как и нулевое нижнее поле для последнего элемента. В нашем конкретном случае мы просто зададим для заголовка h1 margin-top: 0, и создадим класс для последнего абзаца в блоке контента, у которого будет нулевое нижнее поле. Мы это сделали - теперь можно и на Пример 3 посмотреть. Уже значительно лучше, но, конечно, вы обратили внимание на то, что правая панель не заполняет всё пространство, доступное ей по высоте. Спасибо Дэну Цедерхолму (Dan Cederholm) за небольшой трюк с использованием фоновых изображений, с помощью которого мы легко решим возникшую проблему (статья Дэна "Faux Columns"). Во-первых, создадим вот такую картинку. Ее ширина 200 пикселей, т.е. такая же как и ширина нашей боковой панели. Согласно трюку Дэна, добавим обрамляющий блок, охватывающий блоки "container" и "sidebar", а также добавим еще один блок со стилем clear: both прямо под ними. Наш XHTML код будет выглядеть так: content Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend. Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit. sidebar · link one · link two Теперь, сделав это, мы можем добавить к охватывающему блоку фоновое изображение. Мы зададим фоновому изображению свойство "repeat-y" и прижмём его к правому краю. Чтобы побороть один баг в Internet Explorer, нам также нужно добавить такое же фоновое изображение и к блоку "container". #wrapper { background: #f1f2ea url(background.gif) repeat-y right; } #container { width: 100%; background: #f1f2ea url(background.gif) repeat-y right; float: left; margin-right: -200px; } Не забудем мы и про стили для нашего выключающего блока (с классом "clearing"), для того чтобы "подвал" расположился сразу под обеими колонками, а также для того, чтобы они отображались корректно: .clearing { height: 0; clear: both; } Всё это даст нам отлично смотрящийся "резиновый" двухколоночный макет страницы, не теряющий привлекательность даже при отключенных CSS. Взгляните на Пример 4. Добавьте к элементам границы и отступы, и у вас получится отличная отправная точка для своего резинового макета. Само собой разумеется, что если бы нам потребовалось разместить боковую панель слева, то мы бы просто поменяли значения для float: и margin: на противоположные. Было "float: left" - стало "float: right"; было "margin-right: 200px", стало - "margin-left: 200px", и так далее. Колдуем дальше: трёхколоночная версия А что если пойти дальше и попробовать создать трёхколоночный макет с гибкой областью контента посередине? Мы не просто сделаем это - мы сделаем это в два счета! Нам понадобится внести несколько последних мазков в наш XHTML-код, добавив в него ещё несколько блоков - теперь мы готовы дописать ещё чуть-чуть CSS. navbar · link one · link two content Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend. Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer nonummy mauris sit. sidebar Here be your sidebar. Add whatever content you may desire. И снова псевдо-колонки И вот вновь, с тех пор как нам требовалось сделать высоту всех колонок на странице визуально одинаковой, мы создаём ещё псевдо-колонки. И вот мы сделали две таких картинки: Как вы можете видеть в вышеприведённом XHTML-коде, мы добавили: общий обрамляющий блок , блок левой колонки , а так же блок вокруг центрального текста страницы. Наш новый обрамляющий блок будет содержать фоновую картинку для левой колонки, и это фоновое изображение будет повторяться вниз до нижнего "подвального" блока. Ещё мы перенесли фон из блока в блок . #outer_wrapper { background: #fff url(background_3.gif) repeat-y left; } #wrapper { background: url(background_2.gif) repeat-y right; } Там, где нет фоновой картинки, будет виден белый цвет, окрашивая тем самым фон нашей средней колонки. Добавим также фоновые картинки во внутренние элементы, чтобы избежать досадных глюков в некоторых версиях браузера Internet Explorer. #container { width: 100%; float: left; margin-right: -200px; background: url(background_2.gif) repeat-y right; } #content { margin-right: 200px; background: url(background_3.gif) repeat-y left; } Затем добавим вот такие простые стили, снова используя поля для позиционирования левой и средней колонок, так, как нам нужно. #main { margin-left: 150px; } #left { width: 150px; float: left; } Наконец, мы добавили следующие стили "шапке" и "подвалу", придав им более законченный вид: border: 1px solid #cecea5; Посмотрите на Пример 5 и не стесняйтесь заглянуть в его код. Конечно, не забудьте в своем сайте использовать директиву @import, чтобы старые броузеры не изуродовали ваш сайт. В заключение Как вы видите, отрицательные поля - малоизвестный аспект CSS-вёрстки, который дает еще один импульс для творчества тем из нас, кому так важен порядок расположения элементов в коде страницы, и кто не против добавить для этого несколько дополнительных обрамляющих div-блоков.
Выделение внешних ссылок при помощи СSS

Во-первых, о чем речь? Внешние ссылки — ссылки на другие сайты, внутренние ссылки — соответственно, на внутренние страницы собственного сайта. С внешними ссылками все понятно. Если мы ссылаемся на Гугль, например, то пишем полный адрес http://www.google.com/. Префикс http:// и означает, что ссылка внешняя. Внутренние ссылки также могут начинаться с этого префикса. Тогда они будут называться абсолютными. Если же мы напишем ссылку в виде: /about.html, то это будет уже относительная ссылка, которая показывает, что путь к странице about.html лежит от корня сайта. Во-вторых, зачем их (внешние ссылки) выделять? Да просто для информирования посетителя, что ссылка идет на другой ресурс. Это что-то вроде сетевого этикета. Реализовать такое выделение можно, используя новые возможности, которые предоставляет CSS3. Смысл таков: когда мы в тексте вставляем ссылку на внешний ресурс, то она автоматически добавляет иконку-стрелку . Чтобы это заработало, нужно в листе стилей CSS для тэга «а» прописать следующее правило: a[href^="http://"]:not([href="websovet.com"])::after { content: url(external.png); } Поясним, что тут и зачем. Когда в тексте появляется внешняя ссылка (с префиксом http), то данный код сразу за ссылкой (::after) подставляет в строку картинку (content: url(external.png);). При этом исключается наш собственный домен —:not([href=”websovet.com”]). Таким образом, если вы ссылаетесь на чужой сайт, то стрелка появляется, а если на страницы собственного, то нет. Все замечательно, кроме одного: эту конструкцию поддерживают не все браузеры. Работает в Firefox, IE 7, Opera 9,5. Пример Другим решением, которое работает во всех в некоторых более ранних браузерах (например, Опера 9,1), будет следующая запись: a[href^="http://"] { background: url(external.png) no-repeat 100%; padding: 0 10px 0 0; color: #069; } Здесь мы просто показываем, что все ссылки с префиксом http будут иметь в качестве фона картинку со стрелкой. Значение в 100% помещает картинку в крайнем правом положении. Однако такой код не распознает где ссылка на внешний ресурс, а где на свой собственный. Поэтому придется все свои внутренние ссылки прописывать в виде относительных. Автор: Игорь Квентор
Простая фотогалерея на CSS

Для организации фотогалереи на сайте часто используют готовые скрипты на PHP. Я пробовал пару-тройку раз заняться сим полезным делом и пришел к выводу, что если нужна динамическая галерея, где могут оценивать ваши работы другие люди, где можно легко и быстро вставлять фотки и тексты описания к ним прямо с рабочего стола, то лучше воспользоваться готовыми сервисами, коих в сети целая куча. Вот хотя бы Flickr. Цеплять к своему сайту скрипт, потом настраивать его — тот еще гимор. Те бесплатные скрипты, что лежат в сети, либо простые, но страшненькие в оформлении и глючные в работе, либо настолько тяжеловесные и перегруженные всякими излишествами, что править и затачивать их под свой сайт запаришься. Но если вы хотите просто разместить на своем сайте несколько фоток с подписями, то это очень леххко и красиво можно оформить с помощью CSS, что мы сейчас и сделаем. Для начала нам нужно заготовить парочку вот таких картинок:

Сразу поясним, для чего они у нас такие длинные. Обе картинки мы будем использовать фоном под наши превьюшки. Так как и сами превьюхи могут быть разного размера и ориентации (горизонтальные или вертикальные), и подписи к ним могут быть разной длинны, то мы сделаем следующую хитрость. А именно: привяжем первую картинку фоном непосредственно к превьюшке, то есть к тэгу img, а вторую — к тэгу p, который задействуем для подписи. В результате нижний край превьюшки будет всегда на одном и том же расстоянии от подписи. Еще нам понадобятся сами превьюшки. Их мы нарежем из фоток, сделаем для простоты одинакового размера и сложим все в общую кучу, то есть одну папку. Фотки мы разместим каждую на своей отдельной странице, с которой будет возврат на главную при помощи кнопки BACK. Итак, запишем для начала код нашей главной страницы: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <link rel="stylesheet" href="style.css" type="text/css"> <title>Фотогалерея | Урок с сайта Websovet.com</title> </head> <body> <div id="header"></div> <div id="container"> <div class="tumb"> <a href="foto1.html"><img src="1_sm.jpg" alt="okno_v_nebo" /></a> <p>Окно в небо</p> </div> <div class="tumb"> <a href="foto2.html"><img src="2_sm.jpg" alt="zloy_indeets" /></a> <p>Злой индеец</p> </div> <div class="tumb"> <a href="foto3.html"><img src="3_sm.jpg" alt="pod_krylom_samoleta" /></a> <p>Под крылом самолета</p> </div> <div class="tumb"> <a href="foto4.html"><img src="4_sm.jpg" alt="nasyp_kamney_na_pirse" /></a> <p>Насыпь камней на пирсе</p> </div> <div class="tumb"> <a href="foto5.html"><img src="5_sm.jpg" alt="tsvetushy_kust" /></a> <p>Цветущий куст</p> </div> <div class="tumb"> <a href="foto6.html"><img src="6_sm.jpg" alt="goryachaya_kamennaya_baba" /></a> <p>Горячая каменная баба</p> </div> </div> </body> </html> Код совсем простой. Мы опять же поместили содержимое страницы в “ коробочку ” — container, которую расположили по центру, а каждую превьюшку с подписью оформили отдельным div-ом с классом tumb. Рассмотрим теперь подробнее лист стилей CSS: * { margin: 0; padding: 0; border: 0; } a { text-decoration: none; } body { background: #fff; } #container { width: 860px; margin: 0 auto; } #header { background: url(header.gif) no-repeat; width: 860px; height: 160px; margin: 0 auto; clear: both; } div.tumb { background: url(tumb01.gif) no-repeat; width: 210px; float: left; margin: 0 30px 20px; } div.tumb img { margin:5px 4px; } div.tumb p { background: url(tumb02.gif) no-repeat 0 100%; font: 85% Verdana, Arial, sans-serif; color: #333; margin: 0; padding: 0 25px 20px 10px; } Начнем по порядку. Для всей страницы разом мы установили поля, отступы и границы равными 0 (*). Фон указали белого цвета, у ссылок выключили подчеркивание, а размер контейнера задали в 860 пикселей по ширине и автовыравнивание. Для шапки нарисовали симпатишный зоголовок и поместили его там в виде фона, задав ширину и высоту. Это все просто. А вот дальше будет хитрость. Для превьюшек, как уже говорилось, мы использовали div с классом tumb. При этом самому селектору tumb мы в правилах задали отображение фона в виде первой нашей картинки, показанной выше, указав ее ширину в 210 пикселей и запретив повтор. Кроме того, мы сюда же добавили правило обтекания слева (float: left), ибо хотим расположить по горизонтали несколько превьюшек. Если этого не сделать, то все превьюшки будут располагаться на странице в столбик одна под другой. В следующем наборе правил мы уже задали самим превьюшкам с тэгом img отступы, чтобы картинки не лепились одна к другой. Обратите внимание на запись — div.tumb img. Она показывает, что мы не просто какому-то произвольному тэгу img задаем эти правила, а именно тому, который входит в блок div с классом tumb. Далее мы для тэга p, опять же, входящего в блок div с классом tumb, задали размер и цвет шрифта, поля и отступы и — самое важное — указали в качестве фона вторую нашу замечательную картинку. При этом кроме запрета на повтор мы показали ее координаты относительно осей х и у, 0 и 100% соответственно. То есть, несмотря на размер наших превьюшек и описательного текста (в разумных пределах конечно), эта фоновая картинка всегда будет показывать свою нижнюю часть и правый край. Вот, собственно, и все! Еще совет: не делайте с превьюшек ссылку просто на картинку в такой-то папке. Оформите каждую фотографию на отдельной странице, с более подробным описанием и ссылкой возврата на главную страницу. Это будет гораздо красивее и правильнее, нежели сиротливо прилепленная к левому верхнему углу фотка в окне браузера.

Правила хорошего HTML

В этой статье рассказано как сделать хороший HTML. Чего надо соблюдать, чтобы ваш сайт не был посмешищем. Не загружайте страничку графикой. Посетитель не будет вам бесконечно благодарен, наблюдая более 5 минут за загрузкой "огромных" картинок. Не используйте на страничке большие картинки. Если уж и приспичило, лучше порежте картинку на более мелкие части и вставьте их в таблицу. Этим вы существенно облегчите загрузку графики. Не встраивайте в страничку слишком много Java-скриптов и апплетов, показывая свою крутость. Не думайте, что интернет болен статичностью. Если есть возможность сделайте альтернативу картинкам-ссылкам в виде текстовых ссылок. Пусть на сайте присутствует и то, и то, так как некоторые пользователи отключают в своих броузерах загрузку графики. Если какой-либо раздел еще не готов не надо мозолить глаза посетителям стандартной анимационной картинкой "Идет строительство" или "Under Construction". Достаточно написать приглашение зайти попозже. Не ленитесь указывать в IMG-теге размеры картинки WIDTH и HEIGHT. Иначе при загрузке картинок текст будет прыгать в разные стороны. Посетителю точно это не понравится. Пишите в описании картинки ALT-текст. Не заставляйте посетителей ждать полной загрузки желая узнать, что же находится за этой картинкой. Не используйте большое число вложенных фреймов с запутаной системой навигации. Если есть возможность, лучше вообще отказаться от фреймов. Не используйте в тексте слишком много восклицательных знаков (!!!). Этим вы добьетесь того, что посетитель просто не заметит действительно важной информации. Если вы думаете, что много мерцающих ссылок привлекают внимаие - вы ошибаетесь. Не думайте, что Интернет болен статичностью. Большое количество таких ссылок не особо радует. После просмотра такого сайта можно получить головную боль до вечера. Проверьте, хорошо ли видна страничка в разных разрешениях. Вы должны позаботиться, чтобы она хорошо воспринималась как в разрешении 800х600 так и в 1024х768. Старайтесь не прибегать к использованию полосы горизонтальной прокрутки. Если вы собрались делать на страничке какой-либо фон: старайтесь подобрать контрастную и одновременно расслабляющую глаза комбинацию шрифтаи фона. Следите за правописанием на страничке. Если вы собрались создать действительно хороший сайт, то на вашем столе должен быть орфографический словарь. Каждый документ вашего сайта должен быть доступен с трех щелчков мыши. Старайтесь следить за этим. В противном случае посетитель будет путаться в навигации вашего сайта. Размер одной странички не должен превышать примерно 45-50 кб. Иначе процесс загрузки затянется, что не всегда приятно. Не помещайте сайт в одну большую таблицу, ведь содержимое таблицы будет показано только тогда, когда она полностью загрузится. Всегда проверяйте корректность внутренних ссылок. Очень часто web-мастера оставляют такие ссылки: file:///C:/... Всегда выставляйте цвет основоного фона в теге, даже если он белый. Иначе цвет будет по Default`у, а на разных машинах Default разный:-) В картинках-ссылках пользуйтесь параметром border="0" (в тегах) этим вы избавитесь от синих рамок вокруг картинки-ссылки. Автор: Кушнерук Денис
Как прижать подвал к низу экрана

Когда на странице сайта мало контента, то при обычной блочной верстке подвал (он же футер) прижимается кверху, хотя по логике вещей должен бы находиться внизу экрана. Но так уж устроены браузеры, что все содержимое страницы кучкуют вверху экрана, занимая плотно все свободное место. Особенно бестолково это выглядит, когда дизайнер рисует футер в виде земельки с травками и прочими жучками. Тут уж хочешь не хочешь, а надо как-то придавить непослушный подвал к низу монитора, вне зависимости от количества контента на странице. В своей книге о верстке 3-х колоночного шаблона для ВП я уже рассказывал, как этого можно добиться. Но решил вынести темку в отдельный пост, так как вопрос этот довольно частый. Итак, принцип следующий: если мы верстаем страницу, помещая все блоки в один общий контейнер, то блок футера нужно вынести за пределы контейнера. При этом нужно обоим блокам задать относительное позиционирование (position: relative;), в блоке контейнера добавить внизу пустую блок-распорку по высоте равную высоте футера, а футеру, в свою очередь, задать отрицательный верхний отступ на то же значение. В листе стилей у блока контейнера будет задана минимальная высота в 100%. Получится, что контейнер у нас распространится на всю высоту экрана. Но чтобы подвал не потерялся за нижним краем монитора, мы его “подтянем” вверх на отрицательную высоту. То есть, чтобы проделать этот трюк, надо заранее знать, какой высоты будет подвал. Ну, а так как мы это уже знаем, то нет ничего проще. Теперь подробнее. Общая схема страницы следующая: <html> <head></head> <body> <div id="container"> <div id="header"></div> <div id="leftside"></div> <div id="rightside"></div> <div class="clearfloat"></div> <div class="empty"></div> </div> <div id="footer"></div> </body> </html> Это 2-х колоночная страница с шапкой и подвалом. Колонка leftside — основной контент, колонка rightside — сайдбар, расположенный, соответственно, справа. Блоки шапки (header), левой и правой колонок находятся в общем блоке контейнера. Сразу после блока сайдбара (rightside) мы прописали так называемую “очистку” — clearfloat. Она помогает избавиться от всяческих глюков и не пускает подвал запрыгивать в пустое пространство страницы, буде там таковое образуется. Вообще, небольшой совет: пишите этот clearfloat всегда. При плавающей верстке (а блочная иногда так и называется) это очень полезная штука. Сразу после очистки, но до(!) закрытия блока контейнера, мы поместили пустой блок-распорку empty, тем самым зарезервировав место под подвал. Теперь посмотрим содержимое листа стилей. Я приведу лишь наиболее важные правила, которые реализуют нужный нам эффект. Все попутные правила я опускаю. * { margin: 0; padding: 0; border: 0; } html, body { width: 100%; height: 100%; } * html #container { height: 100%; } body { background: #fff; color: #333; } #container { position: relative; width: 960px; margin: 0 auto; min-height: 100%; } .clearfloat { clear: both; } .empty { height: 50px; } #footer { position: relative; background: #333; width: 960px; height: 50px; color: #ccc; font-size:.9em; margin: -50px auto 0; } Что тут есть. Во-первых, мы задаем отдельным набором правил размеры всей страницы как 100% по высоте и по ширине: html, body { width: 100%; height: 100%; } Во-вторых, обязательно прописываем хак для ИЕ, иначе он не станет толком работать: * html #container { height: 100%; } Далее пишем правила для контейнера. Здесь важными являются два момента: относительное позиционирование (relative) и указание на минимальную высоту, опять же в 100%. #container { position: relative; width: 960px; margin: 0 auto; min-height: 100%; } Для очистки применяем вот такое нехитрое правило: .clearfloat { clear: both; } А вот пустой блок-распорка имеет следующие параметры: .empty { height: 50px; } Здесь мы задали только высоту. Как я уже и говорил, высота эта берется из высоты самого футера. То есть, подразумевается, что его высота уже задана в 50 пикселей. Это важно. И вот почему: #footer { position: relative; background: #333; width: 960px; height: 50px; color: #ccc; font-size:.9em; margin: -50px auto 0; } В наборе правил для подвала мы задали точно такую же высоту. Но обратите внимание: здесь тоже относительное позиционирование (relative), а в самом нижнем правиле прописан минусовой отступ в те же 50 пикселей. То есть, выходит, что контейнер распространился на всю высоту монитора, и по идее, вытеснил подвал за пределы монитора. Но мы смещаем подвал (благодарая опять же относительному позиционированию) на 50 пикселей вверх. Словно бы накладывая подвал поверх контейнера. И в результате и овцы целы и волки довольны. Вот такая вот петрушка. Автор: Игорь Квентор По материалам сайта: http://www.websovet.com/
Изображение с подписью и эффект тени