Немного информации из собственного опыта. Как делать, чего ожидать. На этом сайте все блоки "зафиксированны" абсолютно, но все размеры заданны в процентах от экрана. Что мы с этого имеем все "тянется" независимо от размеров экрана.
Но! Обратите внимание! Подобное допустимо только в случае с заполнением блоков текстом, при некоторой корректировке параметров. Например, блоки главного меню всем им задали фиксированную высоту в процентах и добавили свойство overflow: auto;
. Напоминаю, о чем речь если явно задать блоку высоту, а текста будет больше, чем расчитывали, часть блока просто "срежется", блок своего размера не изменит. Если мы задаем overflow: auto;
, то при переполнении блока у него просто возникнет свой скроллер для прокрутки содержимого.
Блоки, находящиеся ниже, в высоте не ограниченны вытягиваются в зависимости от "массы" текста.
Если используется графика, имеет смысл задавать блокам с картинками или фиксированную ширину, или устанавливать минимальную ширину блока.
Минимальная и максимальная ширина и высота блока.
min-width
и max-width
минимальное и максимальное значение ширины блока, задается как в процентах, так и в пикселах, например.
min-height
и max-height
минимальное и максимальное значение высоты.
Если упрощенно, то блок с описанием
width: 70%; min-width: 500px;
будет изменять свою ширину в зависимости от ширины экрана, но его ширина никогда не будет меньше 500 пикселов.
Позиционирование блоков.
Первый вариант позиционироване блоков, задавая им точные координаты и размеры в пикселях. При учитывании разночтений можно разместить блоки в любом порядке и в любом месте страницы. Но блоки имеют фиксированный размер, что надо учитывать.
Второй вариант позиционирование блоков, задавая им координаты и размеры в процентах. Очень гибкая структура страницы не зависит от размеров экрана, но сильно зависит от содержимого блоков, от возможности растягивать или сжимать его.
Вариант третий позиционирование блоков в зависимости от их функционального предназначения, смесь первого и второго методов с использованием всех возможных дополнений. Под дополнениями следует понимать задание максимальных и минимальных значений ширины и высоты блоков, применение свойства overflow
, учитывание разночтений.
Если разобраться, поэкспериментировать, то на деле применяется только третий вариант создать страничку по первым двум методам можно только в особо простых случаях.
Например, создание стандартной горизонтальной "шапки" возможно как минимум, двумя способами. Если шапка должна иметь определенную высоту, то мы просто задаем эту высоту в пикселях, а ширину в процентах, в результате получаем горизонтальную полосу шириной в экран.
При многоблочной структуре страницы стоит иметь ввиду, что блоки выводятся в том порядке, в каком они расположенны в коде страницы. Например, мы создали шапку:
<DIV id=shapka >
содержимое шапки
</DIV>
с описанием:
body {
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
background-color: #ffffff;
}
#shapka {
width:100%;
background:#A8C228;
border:2px solid #000000;
height: 100px;
margin:0px 0px 0px 0px;
}
Посмотрите, как она расположенна.
Мы имеем блок жестко не зафиксированный, но растяжимый по горизонтали. Теперь добавим еще одно описание блока, расположенного по центру.
#centercontent {
width:60%;
background:#A8C228;
border:2px solid #000000;
margin:5px 0px 5px 0px;
left:0px;
}
Обратите внимание! Мы задали блоку внешний отступ сверху и снизу по 5 пикселов.
Теперь в Боди пишем:
<DIV id=shapka>
содержание шапки
</DIV>
<DIV id=centercontent>
содержание блока
</DIV>
<DIV id=centercontent>
содержание блока
</DIV>
И в итоге получаем, посмотрите.
Итак, у нас не указанны точно координаты ни одного блока, но структура вполне прослеживается. В блоки centercontent
мы можем заносить абзацы текста, которые будут располагаться друг под другом. Таких блоков у нас может быть сколько угодно, только называй их centercontent
, и располагай в нужном порядке. Кроме того, все блоки растягиваются по высоте, так что нас ничего особо не должно беспокоить...
На что стоит обратить внимание в данном примере.
- Во первых
padding:0px 0px 0px 0px;
и margin:0px 0px 0px 0px;
в описании BODY
. Такое ощущение, что Эксплорер выдает для BODY
не только внутренний, но и наружный отступ. В Нетскейпе и Опера ничего подобного не наблюдается.
- Во вторых, обратите внимание на вертикальное расстояние между блоками
centercontent
в примере. Заданны отступы и сверху и снизу по 5 пикселов, а между блоками всего пять, а не десять, как можно было ожидать. Это вам пример взаимодействия перекрывающихся отступов. Стоит запомнить.