Плавното оформление използва отрицателни полета
Наскоро се сблъсках със задача, в която трябваше да създам оформление на страница с две колони с „заглавка“ и „долен колонтитул“, а в кода на страницата съдържанието трябваше да бъде поставено преди блока на страничната колона. Реших да се възползвам от възможността да демонстрирам един малко известен трик за CSS оформление: отрицателни маржове. Отрицателните полета ни позволяват да преместим областта на съдържанието извън прозореца на браузъра, правейки място за страничната лента.
Дефиниране на проблем
И така, за да покажем как отрицателните маржове могат да бъдат полезни за създаване на плавни оформления, нека направим плавно оформление с две колони с горен и долен колонтитул. Областта с основно съдържание (съдържание) ще бъде отляво, втората колона отдясно. Като цяло е доста просто да направите това, но ще отидем по малко по-различен начин, тъй като според условията на задачата кодът на страницата ще има определена структура.
Знаейки как работят плаващите кутии, би било най-лесно да поставите странична лента преди полето със съдържание, позволявайки му да плава около съдържанието от дясната страна. Въпреки това, тъй като за нас е толкова важно в текстови браузъри, екранни четци и по-стари браузъри, които не разбират нашите стилови таблици, първо да се вижда съдържанието, а след това страничната лента, тогава трябва да намерим решение, което да ни позволи да поставим съдържание в началото на кода. Освен това, това решение трябва да работи и в повечето браузъри.
Изходен код
Нека да разгледаме кода за страница с две колони с "header" и "footer", с които ще работим:
Разгледайте Пример 1, за да видите как би изглеждало съдържанието, ако не е стилизирано. След като видите примера, ще разберете защо искаме да позиционираме съдържанието предистранична лента - това е начинът, по който тези браузъри, които не могат да разберат правилно нашите стилови таблици, ще покажат страницата.
Ясно е, че лявата област, съдържаща съдържанието, трябва да заема цялата свободна ширина на страницата минус пространството, необходимо за страничната лента. Няма ли да е хубаво, ако можем да дадем на ширината следната формула: "100% минус 200px"? Използвайки отрицателни маржове, можем да постигнем желания ефект. Не, честно!
Необходими стилове
Сега да преминем към CSS. Както казахме, ще дадем на нашия блок със съдържание ширина от 100%, ще активираме „ляво плаващо поле“ (float: left;) и ще зададем отрицателно дясно поле от „-200px“. Разрешаването на float е много важно тук, тъй като полетата (тъй като работим с отрицателни стойности) за плаващи (float) и вградени (inline) елементи се третират от браузърите по напълно различен начин, отколкото за "неплаващи" блокови елементи.
Отрицателното дясно поле на блока със съдържание е необходимо повече, за да може страничният блок да „изплува“ в свободното пространство, вместо да променя външния вид на самия блок със съдържание. Вижте резултата в Пример 2. Преместваме страничната лента надясно (float: right;) и й даваме ширина, равна на 200 пиксела, останали за нея. И накрая, задаваме нашия блок „долен колонтитул“ на „изчистване: и двете“, така че да седи под съдържанието и страничния блок, без значение коя колона е по-дълга. Също така ще зададем цветове на фона за „заглавката“ и „долния колонтитул“, за да се открояват на страницата.
Този CSS ще ни даде това, което е показано в Пример 2. Както можете да видите, сега трябва да преместим съдържанието от дясната страна на документа. Затова решихме да използваме друг div-блок - този метод се разбира от браузърите много по-добре от всеки другдруг начин. Затова направихме следните промени в нашия XHTML код:
Сега ще дадем на блока със съдържание дясно поле и цвят на фона, като го позиционираме където искаме и го отделяме от страничната лента.
Завършване
Преди да преминем към визуалния дизайн на страницата, нека разрешим още един проблем. Трябва да дадем на първия елемент в нашия блок със съдържание нулево горно поле, както и нулево долно поле за последния елемент. В нашия конкретен случай ние просто ще настроим заглавието h1 на margin-top: 0 и ще създадем клас за последния абзац в блока със съдържание, който ще има нулево долно поле. Направихме го - сега можете да разгледате Пример 3.
Първо, нека създадем изображение като това. Ширината му е 200 пиксела, т.е. същата като ширината на нашата странична лента.
Според трика на Дан, нека добавим гранична кутия, която се увива около кутиите „контейнер“ и „странична лента“, и да добавим още едно ясно: и двете поле точно под тях. Нашият XHTML код ще изглежда така:
Сега, след като направихме това, можем да добавим фоново изображение към обграждащия блок. Ще дадем на фоновото изображение свойство "repeat-y" и ще го подравним към десния край. За да преодолеем един бъг в Internet Explorer, трябва също да добавим същото фоново изображение към блока „контейнер“.
Нека не забравяме да стилизираме нашия блок за превключване (с класа "клиринг"), така че "долният колонтитул" да се намира непосредствено под двете колони, а също и така, че да се показват правилно:
Всичко това ще ни даде страхотно изглеждащо „течно“ оформление на страница с две колони, което не губи привлекателността си дори с деактивиран CSS. Разгледайте Пример 4. Добавете граници и подложки към елементите и ще имате чудесна отправна точка за вашата течност.оформление. От само себе си се разбира, че ако искаме да поставим страничната лента отляво, просто ще обърнем стойностите на float: и margin:. Беше "float: left" - стана "float: right"; беше "margin-right: 200px", стана - "margin-left: 200px" и т.н. Измислете още: версия с три колони
Но какво ще стане, ако отидем по-далеч и се опитаме да създадем оформление с три колони с гъвкаво съдържание в средата? Няма да го направим просто – ще го направим за нула време! Ще трябва да направим няколко последни щрихи на нашия XHTML код, като добавим още няколко блока към него - сега сме готови да добавим още CSS.
Псевдоколони отново
И тук отново, тъй като трябваше да направим височината на всички колони на страницата визуално еднаква, създаваме повече псевдоколони. И така направихме две такива снимки:
Както можете да видите в XHTML кода по-горе, ние добавихме: общо рамково поле
Там, където няма фоново изображение, ще се вижда бяло, оцветяващо фона на нашата средна колона. Нека също да добавим фонови изображения към вътрешните елементи, за да избегнем досадните проблеми в някои версии на браузъра Internet Explorer.
След това ще добавим прост стил като този, отново използвайки полета, за да позиционираме лявата и средната колона по начина, по който искаме.
Накрая добавихме следните стилове към „заглавката“ и „долния колонтитул“, придавайки им по-завършен вид:
Разгледайте Пример 5 и не се колебайте да разгледате неговия код.
Разбира се, не забравяйте да използвате директивата @import във вашия сайт, така че по-старите браузъри да не объркват сайта ви.
Коригиране на друга грешка в IE (бележки на екипа на Webmascon.com)
Наблюдава се следната схема: ако страничното меню съдържа повече от определено количествоточки, фоновото изображение не се умножава до края на съответния блок (вижте примера). Грешката се наблюдава само в Internet Explorer за Windows (проверено в 6-та версия), добре направените браузъри се държат адекватно.
Грешката се третира много просто (2 решения):
Трябва да се добавят стиловете за #outer_wrapper.
. или въведете там
Ето! - ето я - коригираната страница!
В заключение
Както можете да видите, отрицателните маржове са малко известен аспект на оформлението на CSS, който дава още един творчески тласък на онези от нас, които се интересуват толкова много от реда на елементите в кода на страницата и които нямат нищо против да добавят няколко допълнителни граници div за това.