Примери HTML и CSS - колони с еднаква височина
Колоните на същата височина, чрез позициониране
Този пример е изградена на принципа на допълнително psevdokolonok и абсолютно позициониране. За да направите това, да създадете няколко пресечки (брой колони), които се протегна пълната дължина на страницата, и ги поставете в съответствие с тази колона. За да се покаже ефектът от колоните на една и съща височина, то psevdokolonkam задайте желания цвят фон.
Описание пример
- Всички оформление блокове се поставят в допълнителен блок обвивка ID = "обвивка". който бе зададен на минималната височина (CSS мин височина) на 100%, така че тя се протегна цялата височина на прозореца на браузъра, но ако е необходимо може да се проточи още и още. Но тъй като височината на интерес се смята за относително предшественик, а след това трябваше да се уточни и етикети и . Именно на тази единица, ние ще завърши нашата psevdokolonki позиция, така че той е добавен в позицията на CSS имот: роднина.
- В долната част на оформлението са били създадени от самите psevdokolonki с идентификатор равен на "menu_back". "Sidebar_back" и "content_back". към който е приложено абсолютно позициониране. В допълнение, в страничната psevdokolonok е посочен ширина (CSS ширина) и координати, офсет, и в центъра (CSS горния десен и ляв.) - само координатите на офсета, така че те се появиха на същата позиция като тази на настоящия говорител. Е, да psevdokolonki разтегне до по цялата височина на обвивката на блок, те попита собственост на CSS височина: 100%.
- В резултат на това, втора алинея от нашите действия въображаем колони, макар и протегна, както трябва да бъде и зае правилната позиция, но позициониран върху основните оформление блокове. И всичко това заради абсолютно позициониране е бил приложен, което издърпва и елементи на основния поток. За да поправите това, те са били дадени стойност по CSS Z-индекс е отрицателна. който е "белязан" от тяхното разположение. Всичко е готово.
- По принцип централната psevdokolonki могат да се премахнат само чрез задаване на желания цвят за цялата страница.
Тъй като Internet Explorer 6 проблеми с този начин за създаване на колона на една и съща височина, няколко хакове са били използвани за него:
- IE6 не разбира мин височина. но тя работи с височина, като че ли това е минималната височина. Също така, в някои ситуации браузъра игнорира произнесе! Важно. Тези две функции са били използвани за, от една страна, задайте блок обвивка минималната височина за, а от друга - не пречат на други браузъри.
- В този пример, IE6 psevdokolonki се простира само до височината на "първия екран", но той разбира изразът (document.body.offsetHeight), която динамично изчислява височината . Така че тя се използва за постоянно излагайте на желаната стойност в имота.
- И все пак, IE6 не изтегли "content_back". тъй като не е изрично определен от ширината на нея. След това, разбира се, можете да зададете ширина за него 100% и "постави" дори по-ниски странични колеги и я моли да се разделят Z-индекс: -2, но си струва да го?
Колоните на еднаква височина с помощта на фоново изображение
Този пример е много прост за прилагане и е това, което създава една малка "хоризонтална" образ, състояща се от няколко цвята (брой колони), която след това се "умножава" вертикално, имитиращ колоната. За съжаление, този метод е подходящ само за фиксирани оформления, също не забравяйте, че в браузър без никакви снимки на колони няма.
Изображение за фон, който е бил използван в примера може да се види тук. Именно чрез него е създал външния вид на колоните на една и съща височина.
Описание пример
- Ние имаме фиксиран обвивка оформление на потока, което е в действителност, прави фиксирано оформление. Това е всичко, и да зададете фоново изображение (CSS фона), който се разпространява вертикално.
Колоните на същата височина с помощта на полета и редовете
Този пример използва доста необичайно техника. Първо, всички колони са изложени на много големи долно полета, в резултат на който са опънати, а след това със същия размер, но отрицателни за по-ниската стойност на полето. В края на всичко, което е "излишно" - се подстригва.
Описание пример
- За да се увеличи по-ниската вътрешна преграда се прилага за всички колони на уплътнение дъно Имотът е много голяма стойност.
- Колони, посочват отрицателен долното поле (CSS долна граница), равна на определената вдлъбнатината. Въпреки това, в този конкретен случай, размерът на тази област на 100 пиксела по-малко. И всичко това, защото методът, който се използва в този пример за притискане на долната част на страницата, изисква по-ниска височина отстъп равен на размера на долната част на страницата. Общо получаване: 30000px-29900px = 100 пиксела.
- Резултатът от втория параграф е да се намали височината на опаковката (ID = "обвивка") до такава степен, както ако няма увеличение не беше високоговорителя. Това е за него да стане равно на височината на базата на тяхното съдържание (в този случай, тя добавя дори и тези много 100 пиксела), макар че визуално те остават в 30000px висока. С други думи, те просто отиде далеч надолу в чужбина обвивка.
- За опаковане единица използва CSS преливане собственост: скрит, да намалят всичко, което е извън него. В резултат на това ние имаме красива колона на една и съща височина.
Този метод е крос-браузър и се разбира от всички, включително Internet Explorer 6. Но, заедно с начина, по долната част на страницата натиснат, той отказва да работи правилно. Не съм дошъл с следващите "патерици" за този стар човек, а по-скоро отстранен няколко свойства, за да му помогне да изтръгне долния. Ето защо, когато се добавя към съдържанието на колона - всичко това в IE6 работи както трябва.
- Как да направите уеб сайт
Самият безплатно - Уроци по HTML
за начинаещи - CSS начинаещи
за начинаещи - Позоваването
HTML и CSS - примери
HTML и CSS - препратки
Полезни сайтове за уебмастъри - инструменти
Програми за създаване на сайтове