Блочная верстка в 3 колонки (fluid layout)

Эта статья из A List Apart послужила большим источником вдохновения для меня. После «тест-драйва» указанного в ней метода, я решил применить отрицательные внешние полоски (negative margins) с точностью до наоборот.

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

  • Ссылки в правой колонке не работают в Opera 6
  • Возникают проблемы с прорисовкой фона в MSIE
  • В разметке отсутствует структурный хак, который не позволяет очистить место после левой колонки в Netscape Navigator 6

Мой новый метод не использует:

  • CSS хаки
  • Структурные хаки для очистки плавающих элементов
  • IE/Win условные комментарии
  • Загадочные CSS правила
  • Длинные таблицы стилей
  • Надписи «Best viewed in...» (см. список поддерживаемых браузеров)

Эта страница показывает основную технику, но я создал «более сложный» проект, основанный на этом решении: это - вызов CSS.

Логика

Изображение ниже показывает, как работает макет. Я сдвигаю блок #container влево вместо правой стороны (противоположность тому что сделано в статье ALA), и самая важная часть - то, что я не делаю плавающим блок #sidebar.

Разметка

<body> <div id="outer_wrapper"> <div id="wrapper"> <div id="header"> <h2>Header</h2> <p>...</p> </div><!-- /header --> <div id="container"> <div id="left"> <h1>Left</h1> <ol> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> </ol> </div><!-- /left --> <div id="main"> <h1>Main</h1> <p>...</p> </div><!-- /main --> <!-- This is for NN6 --> <div class="clearing">&nbsp;</div> </div><!-- /container --> <div id="sidebar"> <h1>Sidebar</h1> <p>...</p> </div><!-- /sidebar --> <!-- This is for NN4 --> <div class="clearing">&nbsp;</div> <div id="footer"> <h2>Footer</h2> <p>...</p> </div><!-- /footer --> </div><!-- /wrapper --> </div><!-- /outer_wrapper --&;gt; </body>

CSS файлы

Я привожу здесь только стили относящиеся к разметке. Названия картинок и пути упрощены для наглядности.

Таблица стилей для современных браузеров (подключаем через @important):

#outer_wrapper { /* т.к. min-width не поддерживается IE, мы будем использовать скрипт написанный PVII */ min-width:740px; /* Правило для решения бага прорисовки фона в IE, но т.к. оно создает промежуток под футером, мы добавим такое же правило в блок #footer */ width:100%; /* Техника ложных колонок (faux-column), левая колонка */ background:#fff url(left.gif) repeat-y left } #wrapper { /* Техника ложных колонок (faux-column), правая колонка */ background:url(right.gif) repeat-y right } #header { border:1px solid #b0b0b0; background:#b0b0b0; /* Задаем "определение позиции" для элемента и устраняем peek-a-boo баг в IE (v6 sp2) */ width:100%; /* Предыдущее правило создает горизонтальную прокрутку в IE, избавимся от нее */ margin:0 -1px } #container { float:left; width:100%; /* IE удваивает внешние полоски (margins) у плавающих элементов, позаботимся об этой проблеме */ display:inline; /* Тут мы расходимся во мнениях с Ryan Brill (автором статьи в ALA) */ margin-left:-200px } #left { float:left; width:150px; /* IE удваивает внешние полоски (margins) у плавающих элементов, позаботимся об этой проблеме */ display:inline; margin-left:200px } #main { /* ширина левой колонки #left (150px) + отрицательное поле (negative margin) у блока #container (200px) */ margin-left:350px } /* Примечание: если блок #sidebar будет короче чем блок #main, тогда можете удалить это правило */ #sidebar { /* Для сохранения контента блока #sidebar справа от блока #main, если контента в #main меньше */ padding-left:100%; /* Возвращаем блок #sidebar на место, который был вытеснен из вьюпорта из-за отступа */ margin-left:-200px } #sidebar p { /* Удостоверимся что IE (v6 sp2) отображает элемент (та же проблема что и с блоком #header, но решение другое) */ position:relative } #footer { /* См. блок #outer_wrapper */ width:100%; /* Для очистки #container */ clear:both; border-top:1px solid #b0b0b0; border-bottom:1px solid #b0b0b0; background:#b0b0b0} /* Этот класс применяется к 2-м структурным хакам в разметке. Первый "бессмысленный" элемент используется для очистки блока #left в NN6, а последний для очистки #container в NN4 */ .clearing {height:0;clear:both}

Вы заметили, что несколько правил используются только для MSIE/Win, поэтому я советую вам убрать их из основной таблицы стилей CSS и включить в документ с помощью условных комментариев IE.

Стили для старых браузеров 4 версий:

Т.к. мы решили сделать поддержку NN4, необходимо указывать корневые относительные пути к картинкам в таблицах стилей.

#outer_wrapper { /* Техника ложных колонок (faux-column), левая колонка */ background-image:url(/корневой относительный путь/outer_wrapper.gif); background-repeat:repeat-y; border:1px solid #b0b0b0 } #header,#footer { /* Заставим блоки расшириться до 100% ширины */ width:150%; /* Данный трюк позволит закрасить блок целиком, а не только область под контентом */ background:#b0b0b0 url(/корневой относительный путь/clear.gif) } #container { /* Удостоверимся что NN4 не отрисует фон в этом элементе */ background-image:none; float:left; width:auto; /* Внешняя и внутрянняя полоски нужны чтобы оставить место для блока #sidebar */ margin-right:160px; padding-right:160px } #left { float:left; width:140px } #main { /* В NN4, очень важно корректно определить background для позиционированных элементов. Если NN4 не найдет картинку, то разметка разрушится */ background-image:url(/корневой относительный путь/clear.gif); /* это правило сохранит оболочку внутри вьюпорта */ margin:0 } #sidebar { /* Определяем фоновый цвет для блока #sidebar; я также удостоверился чтобы он не наследовал фоновые картинки */ background:#ccc none; margin:0; padding:10px 0; /* В современных браузерах этот элемент не плавающий, а вот в NN4 он должен быть плавающим */ float:right; width:180px } /* Этот класс используется для структурных хаков в разметке */ .clearing {clear:both}

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

if (!document.getElementById) document.write('<link rel="stylesheet" type="text/css" href="/css/v4.css">');

Список поддерживаемых браузеров

Windows:

  • NN 4.7*
  • FireFox 0.8
  • FireFox 1.0.7
  • Opera 6.05
  • Opera 7.23
  • Opera 8.5
  • Netscape 6.2
  • Netscape 7.1
  • Netscape 8.0
  • IE 5.00
  • IE 5.01
  • IE 5.5
  • IE 6.0
  • Mozilla 1.4.1
  • Mozilla 1.7.5

Mac OS:

  • NN 4.7*
  • FireFox 1.0
  • Mozilla 1.7.3
  • Camino 0.8.2
  • IE5.0 (OS9)
  • IE5.2 (OSX)
  • Safari 1.2.4

Mandrake:

  • Mozilla 1.7.5
  • Konqueror 3.3

Red Hat 9:

  • Mozilla 1.21
  • Konqueror 3.1-12
  • Netscape 7.2
  • Opera 8 Beta

Ubuntu 5.10 breezy badger:

  • Epiphany 1.8.12
  • Firefox 1.0.7
  • Mozilla 1.7.12
  • Opera 8.5

* - макет жидкий, но колонки разные по высоте. В версии вызов CSS, колонки одинаковой высоты.

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

Поделись с друзьями:
Комментарии
Аватар пользователя MatthewHal MatthewHal

I wish to share some tips and my collection of gambling suggestions to offer you this special short article. I will show you what makes the one armed outlaws tick, and how to decrease your losses, while optimizing your bets during your wins.

We sat down and started the game and I was surprised that the 12.2 g Coin Inlay Jackpot Gambling Establishment Poker Chips were not too heavy. I thought with a coin inlay that they would be heavier than the clay ones I had actually used at my local gambling establishment and card room. However they were really near the exact same weight. They were very good looking Clay Casino Poker Chips. We were playing combined video games that night and it was extremely easy to keep up with the different bet amounts as there were denominations on all the chips. The coins made the 12.2 g Coin Inlay Prize Gambling establishment Poker Chips look really great as they were being put into the pot.

Black jack, video poker, timeless slots and numerous other casino games can now be played online as CASINO ONLINE video games. Basically the mechanics are the same. For instance, in the video game of poker, the mechanics remain as is. That is, the objective is to have the very best 5-card hand, combining the two cards in the hands of the player and the flop, river and turn produced by the dealership. This is the exact same mechanics used online.

There are different types of poker video games and the first step to winning is to select an online poker game. The 3 primary options are Omaha Poker, Texas Holdem, and 7 card stud. Besides these, there are other poker games such as 5 card draw or crazy pineapple. But most individuals choose to play the above 3 main video games. You can begin off playing any game you like, however it would be better if you start mastering one game before you go on the next.

Video Poker is generally a game between you and the computer. There are numerous video poker video games readily available so make the most of online gambling establishment uses totally free play. This way you can discover a video game that you like and develop a technique you can utilize in a genuine cash video GAME CASINO. Video poker is offered in both download and flash variations.

So what is the lure of gathering poker chips? To some degree it is our innate love of gathering things, but it is often due to nostalgic worth. CASINO POKER chips can remind us of a remarkable event. How about that terrific weekend getaway at the MGM? Or is it a historical chip from an unique occasion?

You might not have the ability to bring the neon lights of Vegas to your living room, but think what you can do. A few colored light bulbs, such as red, can change the feel of the entire room. An individualized banner with something such as your name turned casino can be fun too.

I haven't had a chance to establish a party yet, but when I do, I'm going to display these David Williams Gambling Establishment Poker Chips at the center of the table. May too get the discussions flowing, and with a little additional details passed along, I might just have the ability to squeeze out a couple of huge pots early to actually win on my home grass. I'll just need to wait and see.

americathepossiblethebook.com

Аватар пользователя Newisthilt Newisthilt

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

Ныне рынок расширяет свое наличность, и некоторыми из ключевых игроков сообразно результатам глубокой аналитики являются Tripp Lite (США), Koninklijke Philips NV (Нидерланды), Panasonic Corporation (Япония), Nordost (США), Hitachi Ltd. (Япония), Sony Corporation (Япония), Ce-Link (Китай), Belkin Intercontinental, Inc. (США), Shenzhen Dns Industries Co., Ltd (Китай), Kramer Electronics Ltd (США).

IMAGE(https://iranwpd.com/wp-content/uploads/2021/02/HDMI-Cable.jpg)

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

В суждение будут внесены изменения с учетом последствий пандемии COVID-19 на мировом рынке кабелей HDMI.

Пред этим было заявлено teletype.in/@beelink/vE3_szqWd, что AV-кабели ради жилищного рынка растут рекордными темпами в период COVID-19. Это испытание также содержит профили компаний, изображения и спецификации продуктов, продажи, долю рынка и контактную информацию различных международных, региональных и местных поставщиков Broad HDMI Wire Superstore, среди которых потреблять Tripp Lite (США), Koninklijke Philips NV (Нидерланды). ), Panasonic Corporation (Япония), Nordost (США), Hitachi Ltd. (Япония), Sony Corporation (Япония), Ce-Link (Китай), Belkin Foreign, Inc. (США), Shenzhen Dns Industries Co., Ltd (Китай), Kramer Electronics Ltd (США). Борьба на рынке неумолчно растет с ростом технологических инноваций и слияний и поглощений в отрасли. Более того, некоторый местные и региональные поставщики предлагают конкретные прикладные продукты для различных конечных пользователей.

Основные сведения относительный охвате отчета:

- Весь фоновый расследование, что включает оценку мирового рынка кабелей HDMI.
- Важные изменения в динамике рынка кабелей HDMI
- Сегментация рынка кабелей HDMI прежде второго и третьего уровня региональной бифуркации
- Исторический, текущий и прогнозируемый размер рынка кабелей HDMI в отношении вдруг стоимости (выручка), так и объема (производство и потребление)
- Отчетность и критика последних событий в отрасли кабелей HDMI
- Доли для рынке кабелей HDMI и стратегии ключевых игроков
- Новые нишевые сегменты и региональные рынки
- Объективная оценка траектории развития рынка кабелей HDMI
- Рекомендации компаниям сообразно укреплению своих позиций на рынке HDMI Кабельный рынок

Выключая того, политика экспорта и импорта может оказать немедленное возбуждение для мировой рынок кабелей HDMI. Это книга содержит относящуюся к EXIM * главу о мировом рынке кабелей HDMI и всех связанных с ним компаниях с их профилями, в которой содержатся ценные причина, касающиеся их перспектив в плане финансов, портфелей продуктов, инвестиционных планов, а также маркетинговых и бизнес-стратегий.

Аватар пользователя VideochatU VideochatU

Multiple users across various places in the USA are randomly connected through this videochat. You might view someone from your State here or even a stranger from some other area or even country.
Many attractive women making the US American video chat so in vogue in the USA and loved by the Americans, British, Australians, Indians and New Zealanders.

The Ustalks https://ustalks.com platform has a prime aim of giving its visitors the best time to suitable brand-new people and assign a accessory someone is concerned bounce or fun. Live video communication is the most dominant method after online dating. How else would you originate to chat in the solitude of your home with several other people?

The peer-to-peer cam chat website

Click the "Start" button, and you'll automatically be linked to one of various serendipitously girls after the cam chat. Without any registration or due any of your slighting details. You can accept a late talking with demoiselle within just a next! The most exciting fact to the video converse benefit in the USA? It's offered let go of safe keeping!

Аватар пользователя ShopperMoola ShopperMoola

Черное платье dolce gabbana 2011 купить Купить сумки com Короткое платье длинным рукавом купить Купить складную сумку на колесиках недорого Платки зеленого цвета Как завязать шейный платок женский Можно ли дарит платок Платье на выпускной краснодар купить Какой платок одеть Павлодарские платки интернет Сумку для ноутбука купить в уфе Купить сумку эконика en30652 black 20z Куплю платье для венчания в свердловской области Дутая сумка из плащевки купить Свитшот lyle scott

Платье с пышными рукавами купить интересно!
Купить вечернее платье светлое дешево здесь...
Платки капоры с мехом Платки капоры с мехом!..
Dc shoes свитшот Dc shoes свитшот>>>
Купить ручки для сумки из кожзама смотреть дальше!..
Где купить свадебное платье недорого подробнее!..
Купить сумки оптом в новосибирске здесь!
Платья ампир купить оптом дешево здесь...
Итальянские женские сумки с ручками pollini купить здесь...
Купить стильное платье на торжество приобрести!
Сумка на колесах купить саратов здесь...
Красивые сумки купить магазин здесь!..
Изысканные павлопосадские платки Изысканные павлопосадские платки!
Платье в горох купить Платье в горох купить!
Купить кожаную сумку мужчине дешево здесь!
Платье на выпускной краснодар купить купить!..
Сумки louis vuitton оригинал купить в москве здесь!

Платье халат купить в москве Фото знаменитостей с павловопосадские платки Салон платьев купить Купить модное женское платье Комбинация женская под платье советская купить

Аватар пользователя JaniePEt JaniePEt

Xqduwg adymlx help write an essay Mrwzru

Аватар пользователя JaniePEt JaniePEt

Xqduwg adymlx help write an essay Mrwzru

Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt

Pigrvi xieplj best essay writers Utciwt Be met by Locality mit
74_48f4

Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt

Jeeaou yurkrb can t write my essay Shegjv Come across Put lek
52cfa76

Аватар пользователя JaniePEt JaniePEt

Ljewat nwmjsz buy a term paper Kgkrcd Correct Locality puT
b52cfa7

Аватар пользователя JaniePEt JaniePEt

Ydifsk iynylb buy essay paper Nrvrse Fitting Site tok
d6273af

Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt

Wbypcc wcywhk help on essay Wjngqt Take Locality cek
6273afa

Аватар пользователя JaniePEt JaniePEt

Wbypcc wcywhk help on essay Wjngqt Take Locality cek
6273afa

Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt

Mxgbrn jnhqyw site Awlcae Forward movement Plat Epima
a1565b5

Аватар пользователя JaniePEt JaniePEt

Ldjsnp vhinfo essay on the help Wbkthw Forward movement Locality Cal
d9cfbd6

Аватар пользователя JaniePEt JaniePEt

Mxgbrn jnhqyw site Awlcae Forward movement Plat Epima
a1565b5

Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt

Dqoctr ytyxmw term papers writers Rtymhr Come across Plat soari
bd6273a

Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt

Evzdyb iumcie help writing a essay Whkmbh Forgather Leaning ser
6273afa

Аватар пользователя JaniePEt JaniePEt

Rwqqhf sgmych help on essay Lirdhs Take Put nip
2cfa75_

Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt

Dqneaz kmhbhm term papers help Hhszks Meet Install voibe
5b52cfa

Аватар пользователя JaniePEt JaniePEt

Zkzisb rpcyuk online essay writers Utrrmc Good Spot fob
f2d9cfb

Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt

Vbilwq gkbrqv academic essay help Pqhxgf Come across Position Moste
cfa72_5

Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt

Nmiklp jwceaw Buy cheap viagra Xisxws Close in on Plat neecy
f2d9cfb

Аватар пользователя JaniePEt JaniePEt
Аватар пользователя JaniePEt JaniePEt

Wuzfmr jrjdkv Sample viagra Czuibd Come across Point of view kassy
565b52c

Аватар пользователя JaniePEt JaniePEt