Категория
Информатика
Тип
реферат
Страницы
11 стр.
Дата
25.04.2014
Формат файла
.html — Html-документ
Архив
1023766.zip — 7.65 kb
  • prodvinutaja-css-verstka-shag-za-shagom_1023766_1.html — 24.42 Kb
  • Readme_docus.me.txt — 125 Bytes
Оцените работу
Хорошо  или  Плохо


Текст работы

        This is the top navigation bar.

       

          This is the advertisement bar.

       

     

     

       

         

            The code you are reading.

         

       

     

   

 

...

«Совет дня»

Теперь у нас есть три блока, куда мы можем поместить любое содержимое, основная область, верхний навигационный блок и рекламный блок. Каждый из этих элементов принимает высоту содержимого, но ширина у них фиксированная. Давайте теперь создадим блок, содержащий «Совет дня». Сделаем его плавающим, чтобы содержимое центральной области его огибало. Вложим в «main» слой «tipDay», и зададим для него перемещение вправо. Также укажем для него некоторую ширину (для плавающих элементов ширина обязательно должна быть задана). Взгляните.

#tipDay {

    float:right;

    width:175px;

    background:#FFF3AC;

}

Что с контентом?

Теперь давайте решим, как именно мы будем заполнять блоки содержимым. Самым естественным решением было бы использовать свойство float, но из-за проблем с отображением плавающих блоков в Opera и IE нам придется использовать абсолютное позиционирование. Ошибки в IE небольшие, и ими можно было бы пренебречь, но, к сожалению, с проблемами в Opera нам справиться не удалось. По этим ссылкам расположены описания возникших ошибок: одна ошибка в Opera, другая ошибка в Opera, ошибка в IE.

Заполняем боковые блоки

Начнем с левого навигационного блока – добавим к нему слой «lftBar». Так как мы решили использовать абсолютное позиционирование, то у нас теперь есть относительная свобода в выборе места для кода, определяющего слой. Его можно поставить внутрь «level0», до или после «level1» или даже на один уровень



Ваше мнение



CAPTCHA