Шановний Новомосковсктель, влаштовуйтеся зручніше і я познайомлю вас з принципами гумової блокової верстки сайту.
Раніше розглянута нами фіксована модель перетворюється в гумову всього-на-всього заміною пикселной ширини блоку
Без певних стилів вирівнювання блоку сайт з'їдять в ліву частину вікна. І це, на мій погляд, некрасиво. Хочеться вирівняти сайт посередині. Ось і питання, «як же це зробити?». А ось і відповідь.
Вирівнювання блоків посередині в разі гумової верстки на div-ах
Перше, що спадає на думку - це вказати у елемента body властивість text-align: center. Здавалося б, все, включаючи текст на сторінці, має вирівнятися по центру. А вже потім, для елемента wrapper поміняти центрування на вирівнювання по лівому краю (text-align: left). Але це неправильний підхід (хоча все спрацює в IE). У нормальних браузерах властивість text-align встановлює вирівнювання тільки для тексту всередині блоку, до якого застосовується ця властивість.
Правильним буде вказати рівні лівий і правий зовнішні відступи для елемента
CSS-інструкція для блоку wrapper матиме такий вигляд:
Або в скороченій формі:
Саме таким принципом необхідно керуватися при необхідності вирівняти блок по центру батька.
Господині на замітку: блок, сформований тегом
Природно, ніякої центрування ви не досягнете, тому що кордони центруемого блоку вперлися в кордону з батьків. Ширина контейнера
У разі директиви float: left (або float: right), знову-таки, ніякого вирівнювання за допомогою вищеописаного способу ви не досягнете. Блок, з даної директиви, прилипне своїм лівим краєм (або правим) до батькові чи матері, а всі інші блоки нормального потоку будуть обтікати його справа (або зліва).
Тому обмежуйте ширину блоку властивістю width (або фіксована ширина в пікселях, або відсотки) і, для розуміння того, що відбувається на сторінці, обводьте блок border-му. Наприклад ось так:
В цьому випадку ви будите чітко бачити межі верстається блоку. Але пам'ятайте, що в нормальних браузерах до розміру блоку додасться розмір border-а (ненормальним виявляється браузер IE, в якому розмір border-а не впливає на ширину блоку). Це може привести до спригіванія обведеного блоку з того місця, яке він буде займати без обведення.
Якщо хочете попрактикуватися, то можете завантажити исходник верстки з Deposit Files (* .zip-архів 3.5 КБ).
Дякую, все працює.
У мене дещо інше питання ... Загалом, вирішила написати свій трехколончатий гумовий (для центральної колонки) шаблон. Розташовуються вони по горизонталі правильно, але. по вертикалі меню починаються там, де закінчується блок контенту.
html, body height: 100%;
margin: 0;
padding: 0;
border: solid 1px;
>
#menu_left width: 150px;
float: left;
background: # FFC597;
margin-left: 0px;
position: relative;
text-align: center;
height: 100%;
>
#menu_right float: right;
background: # FFC597;
margin-right: 0px;
position: relative;
width: 150px;
text-align: center;
>
#container background-color: # 0ff;
width: 100%;
height: 100%;
padding: 0px;
float: left;
overflow: hidden;
display: inline;
>
margin-left: 150px;
margin-right: 150px;
border: solid 1px;
>
Будь ласка, підкажіть, в чому помилка ... Хочеться зрозуміти, а не тупо списати готове.
Всі уроки поки не подивився (ваш чудовий сайт виявив буквально вчора), тому конкретні питання, напевно, будуть пізніше.
Починаю верстати свій перший шаблон для joomla 1.5 (хоча, за великим рахунком, яка різниця). Ну і взагалі це мій перший досвід.
Дизайн планується такий:
Три колонки, «резиновость» тільки за рахунок середньої колонки, мінімальна і максимальна ширина самого зовнішнього div обмежена. Ну плюс хедер і футер. приблизно так :).
Або вже фіксований робити ... Ніяк не можу визначитися, чесно кажучи. Зараз ширина фіксована і не сказати, що це якось зовсім незручно ...
Сайт невеликого міста, він вже функціонує пару місяців, але задумав змінити дизайн, зробити більш зручним і наочним.
За уроки величезне спасибі 🙂
Якщо сайт на фіксованій ширині зручний, то і не потрібна ніяка гума.
Хотіла спитати: При верстці як в прикладі, все колонки-middle, тобто колонки контента і меню по висоті вирівнюються по висоті їх вмісту. Це так і задумано ?!
Намагалася зробити так, щоб вони займали весь вільний порстранство між Хедом і футером - в результаті - повна відсутність результатів. Ефект виходить тільки при видаленні height: auto! Important ;, причому тоді блоки middle «преползают» через футер
Мене теж це питання цікавить.
Зіткнувся з проблемою, що необхідно сайд бар розтягнути між хедером і футером.
Супер сайт. Дуже інформативний і тема дуже хороша. Спасибі велике вам!
А підкажіть будь ласка.
Сайт еластичний повинен однаково проглядатися на моніторах з розширенням 1024х768 і 1280х1024.
Питання: як зробити образно кажучи щоб відступи були плаваючими, тобіш картинка варто з ліва margin-left: 115px; при розширенні 1280х1024, а при 1024х768 повинно ставати 25 px як домогтися такого результату?
Заздалегідь вдячний за відповідь.
Задати відступи в процентах.
Справа в тому, що відступ можна задавати не в фіксованих одиницях (в пікселах), а в процентах. В результаті відступ буде змінюватися в залежності від ширини батьківського елементу.
Відчуваю деяку неправильність у Вашому питанні. У монітора відвідувача можуть бути будь-які дозволи, починаючи з 1024 * 768, ви ж обмежилися тільки двома. А що, якщо відвідувач використовує ноутбук з широкоформатним екраном?
Я до того, що процентне значення відступу потрібно підбирати таким чином, щоб сайт нормально виглядав на всіх популярних дозволах, починаючи з 1024 * 768.
Тут нічого конкретного я порадити не можу. Потрібно знати вимоги замовника, дизайнера ну і кросбраузерності (по можливості дивами) верстати відповідно до вимог і макетів використовуючи мінімум вкладених один в одного тегів.
З двох картинок бачу, що макет (ніби як) фіксованої ширини з лівим сайдбарі.
Два макета для того, що б Ви могли побачити як повинен сайт відображатися при вищевказаних розширеннях.
Вимога замовника особливого немає, головне що б відображався однаково при даних розширеннях і звичайно дивами.
Як зробити заливку content, щоб заливка не поширюється далі видимих кордонів блоку? Ато залив content, а воно і весь container прихопило і залило під правою і під лівою колонками, що неприйнятно.
Макет гумовий з хедером, футером і двома колонками, згенерований csstamplater
Заливка блоку не може поширюватися за його межі.
Посматрел ваші ролики це добре ... Але всерівно оcтаётся вапросік по «Гумової верстці на div-ах» як здолати правий і лівий блок фіксування а центр гумовим ... Як фіксувати блоки багато способів і ето не проблема ... проблема вто що переходячи з однієї сторінки на іншу ( приклад головна сторінка дапустім я зафіксую а на інший в етомже блоці по середині розмір повинен Поміняти на width: 100%; ліва і права просто проподает, вони не потрібні) але у мене фіксоване! ... (заметте що ні жіматся має а розсунуться в шаблоні) Добре роблю гумовим центр! тоді права йде в ліво падаючи під 1 колонку або йде під центр еcли задати width: 100%; Зате друга сторінка ідеальна ... Я не сильний CSS ось сиджу всю ніч колупаю нічого невихід ... (в table працює як годинник в дівах ну просто не хоче) Хотілося щоб підказали сам дадумаю ... Я так думаю що я не один стакнулся з такою проблемою.
Ура! Вирішив цю проблему.
У style_ie.css замість 1000px вказав 100%, а в самому style.css для IE7 прописав:
*: First-child + html #wrapper min-width: 990px;
>
*: First-child + html #footer min-width: 990px;
>
і все відмінно. У всіх браузерах все так як і повинно бути: IE5.5, IE6, IE7, IE8, Opera, FF.
Підкажіть будь ласка що таке в'ялена або валеная верстка
Дійсний верстка - це верстка виконана відповідно до стандартів і схвалена програмою автоматичної перевірки відповідності стандартам (валідатором).
Дякую дуже сподобався ваш сайт ... з'ясував для себе кілька корисних речей.
У мене одна проблема, а як зробити так що б текст теж був гумовим, тобто на великому екрані літери підбирали свій піксель, наприклад 12px на екрані 1920х1080 і 12 px на екрані маленьких екранах. в мене не виходить…
Дякую за урок! Сам верстати хочу на divах.
Спасибо большое за урок ... .але хотілося б дізнатися як зробити заголовок, якщо у мене є 3 картинки (тобто 2 куточка і вирізка з центру)
Вітаю, Андрій. Допоможіть, будь ласка, з футером. Я вже писав Вам на пошту. Не впевнений, що дійшло.
А існують які-небудь дослідження, яка зараз ситуація в рунеті - яка частка сайтів з гумовою версткою?
Андрій, тут ось звучало питання
«Хотіла спитати: При верстці як в прикладі, все колонки-middle, тобто
колонки контента і меню по висоті вирівнюються по висоті їх
вмісту. Це так і задумано ?!
Намагалася зробити так, щоб вони
займали весь вільний порстранство між Хедом і футером - в результаті
- повна відсутність результатів. Ефект виходить тільки при видаленні
height: auto! important ;, причому тоді блоки middle «преползают» через
футер ».
Так ось у мене він не наважився. Є хедер. Під ним, припустимо, є мідл див. У самому низу - футер. Так от якщо у мене в мідл дуже мало тексту, то між футером і мидель залишається простір. А я б хотів, що б решта мидель автоматом доходила до футера, а не закінчувалася разом з текстом. Тобто по висоті у мене нижче тексту див не опускається автоматом до футера. Як це реалізувати. Заздалегідь дякую.
Респект тобі морковкина!
Я веб-майстер і викладач. Мене цікавить технічна сторона інтернет-бізнесу.
Люблю вивчати різні технічні аспекти, розбиратися як це влаштовано і розповідати іншим.
Живу в г. Киев, Україна.
Живу в м Маріуполь, Україна.
Живу в м.Львові, Україна.