Здравейте, скъпи читатели на блога KtoNaNovenkogo.ru. След това започна да се помисли за създаването на поетапно оформление с две колони за всеки блок. Мисля, че за да започне да се учи на оформлението на сайта. която се основава на използването на Cascading Style Sheets (CSS), най-добре е просто да конкретен пример, но не и с скучен изпит теория.

Не, разбира се, на базата от знания на стайлинга, също е необходимо, но това знание ще бъде по-добре усвоява и разбрах, след като сте един много прост пример, за да видите как можете да се свързват към HTML кода на CSS свойства и как да ги използвате, можете да контролирате появата на елементи на сайта ,

Да се ​​върнем към нашия оформление. В първата статия, ние дори не са започнали да се разгледа същността, защото много време са били изразходвани за обсъждане на основни въпроси на налагане. Това беше необходимо, особено за онези читатели, които тепърва започват да потънат в vebmastering.

Ето защо, ако не всички застават на мястото си в сферата на оформление, а след това се движат по диагонала на първата статия в тази серия. През втората, която току-що започна да verstaniyu, въпреки че в началото, аз отново направи отстъпление по темата, която е основната папка и как да погледнете техния хостинг (вж. На линка по-горе просто е посочено по-горе).

Така че, ние са се регистрирали в нашата все още празен файл index.html основни елементи (тяло, мета тагове и т.н.), както и кода на блока, от които ще формират оформлението на сайта.

След това са се регистрирали в нашите все още празни файл Cascading Style Sheets style.css първите CSS свойства, включително и тези, попитахме нашите фиксирана ширина оформление и да го приведе в съответствие с централно по отношение на ръбове на екрана.

Ние също така взе под внимание възможността за използване на по-старите версии на браузъри, например, в Internet Explorer 5. Тогава ние боядисани за илюстрация в различни цветове всички срещу блокове, които изграждат нашата оформление две колони, както и ограничената ширина на лявата колона (обикновено е менюто) ,

Е, в края на предишната статия попитахме в CSS файла, увийте в лявата колона блокира други контейнери, разположени по-долу HTML файла index.html код (в този случай, "Страници със съдържание (Content)" и "Мазе (Footer)").

След всички тези стъпки, ние сме получили:

В този файла index.html, съдържаща:

И style.css файл е бил регистриран:

Да сравним този резултат с това, което е трябвало да се случи:

някои подобрения

Изглежда, че е подобни модели, но има засечка. Footer (сутерен) блок не трябва да обгърне лявата колона в дясно, трябва да се намира в долната част на оформлението и заемат цялата си ширина. Това е един проблем.

Но, различна от тази, има и друг проблем. Ако добавим текста в Div Content (съдържанието на статията):

Това може да е ситуация, с разпределение:

Т.е. съдържанието на съда съдържание отнема цялото налично пространство в рамките на завършилия като ляв. Това се дължи на факта, че са включени увийте Div, оставени от всички останали единици, разположени под него в HTML кода, но след левицата свършва, всички последващи контейнери вече са започнали да се притиска до левия край.

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

защото ширина лявата колона (вляво) бяхме по-рано поиска да 200px, а лявата тире на Съдържанието ние определяме едни и същи, да даде възможност дори и за няколко пиксела повече за краткото разстояние между звената се е появило.

Всички style.css файла код ще изглежда така:

И нашата оформление на Div оформление става:

Сега нека да се симулира ситуация с значително увеличение на височина Ляв блок (лява колона):

Фигурата показва, че чрез увеличаване на височината на лявата колона, мазе (Footer) започва да обгърне, тъй като Левицата в style.css да тече около снимачната площадка на блок с помощта на плувка имот: ляво.

В следствие на това, всички Div контейнери, разположени в HTML кода по-долу от ляво, започват да текат около него и нашето Footer не е изключение. И това не ни допадат на всички, тъй като тя винаги трябва да бъде поставен под всички останали звена на нашата оформление две колони. Необходимо е да го оправя.

Тази функция ще ви позволи да се организира по-долу Footer всички плаващи блокове, т.е. тези, които иска от Float имота (увийте в дясно или ляво). По този начин, ние се пропусне мазето до дъното на нашата оформление.

Style.css сега ще изглежда така:

И оформлението на две колони върху оформлението на блок получите долния (сутерен), което отговаря на всички изисквания:

Ако трябва да поставите оформлението на левия (колона меню) без лява ръка, а в дясно, можете да го направите, като направи няколко промени в style.css. За левицата, че е необходимо да се замени поплавък имота: ляво; да плаваш: прав. и за съдържание единица - премахване лявото поле на левия ширината на контейнера и се добавят точно същия вдлъбнатината в дясно.

Т.е. Съдържание нужда CSS собственост марж-наляво: 202px; заменя с марж-надясно: 202px;. В резултат на това style.css приема формата:

И нашата оформление с колоната на менюто в дясно, ще изглежда така:

Създаване на оформление на три колони на основата на колона 2

Върнете всички на ум, когато Ляв блок се намира от лявата страна. За да създадете оформление три колони на основата на вече създадената две колони, ние само трябва да добавите един допълнителен Div-Container файла index.html след кода описващ левицата.

Наречете го без усложнения - Точно така. С като се вземе предвид тази нова Div, кодът ще бъде:

Съдържанието на контейнера Добре, добавят малко количество текст към блока имаше сравнима с левицата и съдържание размер височина. Сега трябва да се изготви отделно правило в каскадни стилове файл style.css на прецизното позициониране Точно така, в сравнение с други подобни от нашите три колони оформление на сайта:

Е, флоатно имота: прав ви позволява да натиснете правото на дясната страна и в същото време на всички от изброените в кода зад него Div ще тече около него наляво (за увиване около него е само съдържанието, Footer, тъй като ние се създаде, така че тя се намира под всички плаващ блокове).

Но това не е достатъчно. В началото на тази статия е решила проблема на съдържание zalezaniya Div съдържание завърши с Ляв блок. За да се избегне този проблем веднага и десен, ние посочете в CSS за съдържание е не само ширината на лявото поле на ляво, но ширината на уплътнението на десния дясно:

Окончателната версия на нашия style.css за оформление с три колони е както следва:

И оформлението на сайта, за да наложи на Div, ще изглежда така:

Transform фиксирано оформление в каучуковата

Две колони и три колони оформления, че са се научили да се създаде в тази серия, са така наречените фиксирани, защото ширината им не зависи от разделителната способност на екрана на потребителя, да разглеждате сайта. Но има и друг тип, наречен гума. В този случай, оформлението на сайта на оформлението на блок ще заема цялата ширина на екрана на потребителя.

Ако резолюцията на екрана ще има 800 пиксела широчина и макети на гумено сайт ще бъде равна на ширината на 800 пиксела, а ако резолюцията е 1920 пиксела, а след това моделът ще се разтегне по цялата ширина на екрана.

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

Необходимо е само за контейнера Div, който стигна до заключението, че целият оформление (в този случай МАКЕТ), разположен във файла за Cascading Style Sheets не е фиксиран размер с помощта на ширината на имота: 800px;. и относителния размер на ширина, с ширина на имота: 100%; :

Гумени версия ще изглежда по следния начин:

Решаване на проблеми за по-стари браузъри

На пръв поглед всичко изглежда наред, но ако се опитате да намалите прозореца на браузъра, след това в един момент ще се изпълнява в продължение на един блок на другата, което ще доведе до пълен срив на проекта (да кажем повече - няма оформление).

Но този проблем също е доста лесно да се неутрализира. Достатъчно е да се създаде за контейнер, където гумата е оформление (в този случай Maket), с помощта на специални CSS свойства минималната възможна ширина, за които е възможно да се намали неговия размер.

След достигане на този минимален оформление ширина, тъй като ще престане да бъде гума и няма да се промени ширината на по-нататъшно намаляване на прозореца на браузъра.

Този имот е както следва:

Digital пиксела 600 в този случай определя минимална ширина модел на каучука, след което му размер вече не се движи. С намаляване на прозореца на браузъра под тази минимална ширина част от него, просто ще престане да се види:

Сега вашата задача се свежда до, до ширина от 600 пиксела вашия сайт не е усукан, добре при високи резолюции, че със сигурност няма да се случи. Но след това отново, има едно "но", и отново това ", но" е свързан с всички нас любимата си Internet Explorer 6 браузър.

Все още много хора използват този отшелник, че въпреки усилията, които се измери все още няма да забележите ограниченията на минимална ширина гума оформление и упорито чупене дизайн.

За да се преодолее този държач каучук шаблон в Internet Explorer 6, съществуват редица на така наречените хакове, които ви позволяват да се избегне това ограничение.

Ще спомена тук, е един от най-стабилните на хакове, който не причини прекъсване браузъри и други проблеми. Тя се крие във факта, че ширината на CSS собственост: 100% за Maket единица ние ще замени специален код:

В продължение на четири места на този код е регистриран номер 600, който определя минималната широчина на гума оформление. Можете да промените този номер на този, който мисля, че е най-добре. Style.css окончателен вид ще бъде, както следва:

На добър час! Ще се видим скоро на страниците на блога KtoNaNovenkogo.ru