На главную

Библиотека Интернет Индустрии I2R.ru

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » CSS

Основные методы позиционирования

Немного информации из собственного опыта. Как делать, чего ожидать. На этом сайте все блоки "зафиксированны" абсолютно, но все размеры заданны в процентах от экрана. Что мы с этого имеем — все "тянется" независимо от размеров экрана.

Но! Обратите внимание! Подобное допустимо только в случае с заполнением блоков текстом, при некоторой корректировке параметров. Например, блоки главного меню — всем им задали фиксированную высоту в процентах и добавили свойство 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 пикселов, а между блоками всего пять, а не десять, как можно было ожидать. Это вам пример взаимодействия перекрывающихся отступов. Стоит запомнить.

Алямкин Илья Юрьевич
S.T.Y.L.E.mtk.on.ufanet

Спонсор раздела

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100