Найбільш часто зустрічається верстка - блокова. Однак, не всі правильно верстають блоками, в основному, це ті, хто робить це вперше. Як показує практика, такі новачки довго мучаться з першої блокової версткою, а вже наступні їм даються набагато легше, так як вони вже знають структуру блокової верстки. І щоб полегшити трохи життя новачкам, я в даній статті покажу вже готову структуру блокової верстки.
#left float: left; // Ліві блоки розміщуємо зліва
width: 200px; // Установка ширини 200 пікселів
>
#right float: right; // Праві блоки розміщуємо справа
width: 200px; // Установка ширини 200 пікселів
>
#center margin-left: 200px; // Лівий відступ 200 пікселів
margin-right: 200px; // Відступ справа 200 пікселів
>
.clear clear: both; // Скасовуємо позиціонування (вплив float)
>
Цю структуру Ви можете сміливо копіювати на свій сайт. Безумовно, деякі елементи можна міняти. Наприклад, розміри лівих і правих блоків. Відповідно, треба буде поміняти і відступи у центрального блоку. Також якщо верстка фіксована, або вона не повинна розтягуватися на всю сторінку, то необхідно все блоки додати в інший, самий верхній, у якого задати фіксовану ширину в пікселях (фіксована верстка) або у відсотках (гумова, але не на всю сторінку).
Сподіваюся, дана структура блокової верстки допоможе новачкам з мінімальною кількістю проблем зверстати свою першу сторінку блоками.
Запропонуйте цю статтю друзям:
Якщо Вам сподобався сайт, то розмістіть посилання на нього (у себе на сайті, на форумі, в контакті):
Вона виглядає ось так:
А що ж робити з РІЗНИМИ РОЗШИРЕННЯ ЕКРАНІВ у користувачів? (Може через JS перевіряти, і встановлювати ширину блоків?)))))
Для цього можна ставити ширину у відсотках.
Якщо ширина блоків буде у відсотках, то не вплине це на фіксовану ширину контенту? наприклад картинка 200х200 буде одіннаковом відображатися на всіх дозволах. тобто 200х200
Розмір картинки тоді треба теж задавати у відсотках.
Якщо блоки пофарбувати background-color в кольори, то вони некоректно відображаються, коли одна з трьох колонок довше інших. У колонок виходить несовпадающая висота. Як це виправити?
Зробіть блок який інший висоти окремим і задайте йому потрібний колір. наприклад:
Задайте Вашому div'у width = 100% height = 100%.
Як зробити щоб шапка мала фіксований розмір і колонки. На цьому сайті варто просто width = 100% але у мене при такому коді шапка взагалі зникає