ПредишенСледващото

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

По-рано ние разгледахме фиксирания модел се превръща в гума всичко на всичко ширина подмяна блок от пиксели

на интерес. По този начин, на ширината на търговската марка на обекта ще варира в зависимост от размера на прозореца на браузъра.

Без конкретни стилове aligners сайт ще ядем в лявата част на прозореца. И това, по мое мнение, грозен. Би било желателно да се приведе в средата на сайта. Това е въпросът, "как да го направя?". Тук е отговорът.

Изравнете средни блокове в случая на гума оформление на DIV-а

Първото нещо, което идва на ум - е точка в тялото елемент имот текст подравняване: център. Изглежда, че всичко, включително и текста на страницата, трябва да се приведе в съответствие с центъра на града. И тогава, за обвивка елемент за промяна на трасето на ляво подравняване (текст-приравни: вляво). Но това е грешен подход (макар че тя ще работи в IE). При нормални браузъри текст подравняване собственост определя подравняването на текст само в рамките на блока, за който се прилага на имота.

Правилно да се уточни, равни на лява и дясна маржове за външен елемент

и тяхното значение - автоматично. Ако лявото и дясното поле са равни, а след това на елемента е подравнен в средата.

CSS-ръководство за единица обвивка ще има следния вид:

Или и в съкратен вид:

Именно този принцип трябва да се ръководи, за да се приведе в съответствие на устройството в центъра на родителя, когато е необходимо.

Камериер съвет: блок формира от маркера

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

Разбира се, никой няма да се постигне изравняване, защото граница tsentruemogo единица се блъсна в границите на компанията-майка. Ширината на контейнера

Това става равна на ширината на съдържанието само в случай на определяне на свойствата на този контейнер поплавъка: ляво.

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

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

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

Ако искате да практикувате, можете да изтеглите изходния код оформление с Депозит файлове (* .zip-архив 3.5 МБайт).

Благодаря ви, че работи.

Аз имам малко по-различен въпрос ... Като цяло, реших да напиша му trehkolonchaty гума (за централен високоговорител) шаблон. Те са поставени хоризонтално отдясно, но. вертикално меню започва там, където свършва блока съдържание.

HTML, височина на тялото: 100%;
марж: 0;
подложка: 0;
граница: твърда 1px;
>

#menu_left ширина: 150px;
плаваш: ляв;
фон: # FFC597;
марж ляв: 0px;
позиция: относителна;
текст-приравни: център;
височина: 100%;
>

#menu_right плава: право;
фон: # FFC597;
марж-надясно: 0px;
позиция: относителна;
ширина: 150px;
текст-приравни: център;
>

#container фон-цвят: # 0ff;
ширина: 100%;
височина: 100%;
подложка: 0px;
плаваш: ляв;
препълване: скрит;
дисплей: инлайн;
>

марж ляв: 150px;
марж-надясно: 150px;
граница: твърда 1px;
>

Моля, кажете ми какво се е объркало ... Искам да разбера, а не тъпо дължи готов.

Всички уроци, докато гледах (вашия страхотен сайт, открити вчера), така че конкретни въпроси вероятно ще бъдат по-късно.
Започвам да наложи първата си шаблон за Joomla 1.5 (въпреки че, като цяло, каква е разликата). Е, всичко това е първият ми опит.
Дизайн протече по следния начин:
Три колони от "гума" само чрез средната колона, минималната и максималната ширина на най-външния DIV ограничен. Е, плюс горния и долния колонтитул. по този начин :).
Или вече фиксирана да правя ... не мога да преценя, за да бъдем честни. Сега ширината е фиксирана и не е да се каже, че това е някак много неприятно ...
Сайтът на един малък град, който вече оперира на няколко месеца, но планира да променя дизайна, да я направи по-удобен и интуитивен.
За уроци благодаря 🙂

Ако сайтът е на фиксирана ширина е удобно, тогава аз не се нуждаят от каучук.

Исках да попитам: Ако графично оформление, както в примера, всички колони-средата, т.е., в графата съдържание и вертикални менюта са приведени в съответствие с височината на съдържанието им. Това се дължи на дизайна?!
Аз се опитвам да се уверите, че те вземат всички свободно porstranstvo между hedom и долния - в резултат - пълна липса на резултати. Ефектът се получава само чрез премахване на височина :! Auto важно; и след това блокира средна «prepolzayut" през долния

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

Голям сайт. Много информативен и добра тема. Благодаря ви много!

И моля да ми кажете.
Сайт еластична трябва еднакво да се видят на монитори с разширяването на 1024x768 и 1280x1024.
Въпрос: как да се направи така да се каже да вдлъбнатината са плаващи, tobish картина струва ляв марж-наляво: 115px; разширяването на 1280x1024 и 1024x768 при 25 трябва да се превърне пиксела как да се постигне такъв резултат?
За по-рано благодарен за отговора.

Попитайте маржове като процент.

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

Чувствам се малко погрешно във вашия въпрос. Ние следим посетител може да бъде всеки резолюция, като се започне с 1,024 * 768, можете да разполагате само с две. И какво, ако един посетител използва широк екран на лаптопа?

Какво искам да кажа е, че процентът на тирето трябва да бъде адаптирана така, че сайтът изглеждаше нормално на всички популярни резолюции, като се започне с 1,024 * 768.

Няма нищо бетон не мога да посъветвам. Трябва да знаете, на изискванията на клиента, проектанта и различни браузъри (евентуално ДИВАЙНС) да наложи спазването и оформление с помощта на най-малко вложени тагове.

От двете снимки виждам, че оформлението (като) с фиксирана ширина в лявата странична лента.

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

Как да направите съдържанието на запълване, за да запълни не се простира отвъд видимите граници на блока? Ато попълнено съдържание, но това е цялата контейнер грайфер и наводнен от дясно и от лявата колона, което е недопустимо.
Разпределение каучук с Heder, долния и две колони, генерирани csstamplater

Напълнете блок не може да се простира отвъд нейните граници.

Posmatrel видеоклиповете си е хубаво нещо ... Но vseravno octaotsya vaprosik за "Каучук налагане на DIV-а", както се създаде един десен и ляв блок неподвижността и центъра на каучука ... Как да се определи на блоковете много начини, и UTB не е проблем ... проблемът на СТО, които се движат от една страница към друга ( например Начало dapustim аз ще оправя, а другата в etomzhe блок от средата на размера трябва pomenyatsya да ширина: 100%; наляво и надясно само propodaet, те не са необходими), но аз фиксирана ... (zamette не zhimatsya нужди и да се премести един от друг в шаблона) добре! правя каучук център! Тогава правилното нещо от ляво, попадащи в колона 1 или отива под центъра ECLI зададете ширина: 100%; Но втората страница е съвършен ... Аз не съм силен CSS седя тук цяла нощ мога да взема нищо отсъствия ... (в работата на масата като часовник в divah добре, просто не иска да се) Искам да подтикне dadumayu себе си ... Мисля, че аз не съм сам с този проблем staknulsya.

Ура! Аз решен този проблем.

В style_ie.css вместо 1000px има 100%, а в style.css за IE7 предписано:

*: На първо дете + HTML #wrapper мин ширина: 990px;
>
*: На първо дете + HTML #footer мин ширина: 990px;
>

и всичко е наред. Всички във всички браузъри, както би трябвало да бъде: IE5.5, IE6, IE7, IE8, Opera, FF.

Моля, кажете ми какво е пастърма или Вален Layout

Валидност на грим - грим е направен в съответствие със стандартите и одобрен от автоматична проверка на софтуера на съответствието със стандартите (валидатор).

Благодаря ви много вашия сайт ... разбрах за себе си няколко полезни неща.

Имам един проблем, и как да се уверите, че текстът ще бъде също беше на каучука, т.е. на големия екран писмата си взели пиксел, като 12px на екрана на 1920x1080 пиксела и 12 на екран на малки екрани. Аз не се получи ...

Благодаря ви за урока! налагат себе си искам да divah.

Благодаря ви за урока ... .Но аз бих искал да се научи как да се направи заглавие, ако имам 3 снимки (т.е., 2 ъгли и рязане от центъра)

Здравейте, Андрей. Помогнете, моля, с долната част на страницата. Писах на вас по пощата. Не съм сигурен дойде.

И има такива изследвания, каква е ситуацията в Runet - какъв процент от сайтове с гумен оформление?

Андрей, тук е въпросът прозвуча

"Исках да попитам: Ако графично оформление, както в примера, всички колони-средата, т.е.
съдържание колона и височина меню са подравнени в тяхната височина
съдържание. Това се дължи на дизайна?!
Опитвайки се да се уверите, че те
Те окупираха всички свободно porstranstvo между hedom и долния - в резултат
- пълна липса на резултати. Ефектът се получава само когато изтриете
височина: авто важно; и след това блокира средна «prepolzayut" през!
долния ".

Така че реших, че не е. Има глава. Според него, например, там са със средни диви. В долната част - долната част на страницата. Така че, ако трябва да средно- много малко текст, то е пространството между долната част на страницата и средната част на тялото. И аз бих искал, че за останалата част на корема на машината достига долната част на страницата, и не завършва с текста. Т.е. височина по-долу текст ми Разделение не отива автоматично в долната част на страницата. Как да го приложат. Благодаря ви предварително.

Уважение към вас Morkovkina!

Гумени оформление - блок подход - налагането на DIV-а - натискане на долната част на страницата в долната част на прозореца

Аз съм уебмастър и учител. Интересувам се от техническата страна на онлайн бизнес.

Харесва ми да учат различни технически аспекти, за да се разбере как работи, и кажете на другите.

Аз живея в Москва, Русия.

Аз живея в Мариупол, Украйна.

Аз живея в Лвов, Украйна.

Подкрепете проекта - споделете линка, благодаря!