Наші контакти: +7 (928) 029 69 59. +7 (909) 493 69 59
Останні роботи по створенню та просуванню сайтів нашої WEB студії в Ставрополі, Черкеську і П'ятигорську
Правильно використовуємо стилі CSS. Як правильно притиснути підвал до низу сторінки і як розташувати блок по центру.
Часто при створенні сайтів в Черкеську і Ставрополі виникає необхідність застосовувати ті чи інші техніки CSS для реалізації тих чи інших завдань. Так, наприклад, буває, що необхідно на сторінці з малою кількістю контенту притиснути footer (підвал) сайту до низу сторінки, розташувати блок по центру екрану та ін. Є багато способів для вирішення цих завдань, але не всі з них є валідними і кросбраузерності. У даній статті ми розглянемо способи, які дозволяють вирішити ці завдання валідність і кросбраузерності.
Властивість «min-height» для старих браузерів.
Для того що б «змусити» старі версії браузерів розуміти властивість «min-height», досить привласнити блоку якому ми хочемо задати мінімальну висоту в 100%, наступні стилі:
Як правильно притиснути футер до низу сторінки.
Створимо HTML файл з наступним кодом:
Тепер давайте розглянемо, що до чого. В HTML документі ми створили три блоки з id «document», «aux» і «footer». Давайте розглянемо кожен блок.
Блок «document» має негативний відступ (margin) знизу, рівний висоті блоку «footer». Використовуючи спосіб завдання властивості «min-height», описаний вище, ми встановили його мінімальну висоту рівну 100%.
Завдяки тому, що «footer» знаходиться за межами блоку «document», браузери будуть відображати його внизу сторінки.
Блок «aux» теж дорівнює висоті підвалу сайту, і служить для того що б запобігти «перекриття» підвалом сайту контенту, якщо його буде більше ніж висота вікна браузера.
Як розташувати блок по центру за допомогою CSS.
Часто при створенні того чи іншого сайту, потрібно розташувати div, або інший елемент по центру екрана. Якщо мова йде про горизонтальному вирівнюванні по центру, то це не викликає ніяких труднощів, досить призначити таким блоку наступні стилі CSS:
Використовуючи дані стилі CSS призначені блоку, блок вирівняється по центру по горизонталі. Давайте розглянемо спосіб, як вирівняти блок по центру і по вертикалі. Даний спосіб застосовується коли необхідно центрувати блок фіксованого розміру, тобто коли відомі ширина і висота блоку. Давайте розглянемо код HTML і CSS:
Тепер давайте розглянемо докладно наведений код CSS. Ми задали блоку висоту рівну 200px і ширину рівну 300px, і використовували для цього блоку абсолютне позиціонування на 50% зверху і 50% зліва. Далі ми задали негативний відступ зверху (margin) дорівнює половині висоти центрована блоку, і негативний відступ зліва рівний половині ширини нашого блоку.
Тепер можна перевірити результат в будь-якому браузері, наш блок буде розташовуватися рівно по центру екрана.
Якщо Вам необхідно змінити ширину або висоту блоку, не забудьте змінити і значення margin-top і margin-left. встановивши їх рівними половині висоти і ширини блоку відповідно.
Гумовий трьох стовпчик макет сайту.
Часто при створенні сайту, необхідно зробити гумовий трьох стовпчик макет сайту. який би займав всю ширину вікна браузера. У своїй практиці ми використовуємо наступний спосіб для створення гумового макета сайту. який є дійсним і кросбраузерності:
Про WEB студії DigitalART
Студія WEB дизайну DigitalART
Наша студія надає послуги по створенню та просуванню сайтів організаціям і підприємствам Ставрополя. П'ятигорська і Черкеська.