Balls and holes PC game / Balls and Holes PC игра
Вакансии
Игродельня
Сегодня
13 июля 2025
15:02
Вход Регистрация Забыли пароль ?

webinformatic - Как создать torrent файл
Инструкция по созданию torrent - файла torrent файл представляет собой просто файл, в котором хранится информация о папке и всех входящих в неё файлах, расположенных локально на вашем компьютере. Важно понимать, что если вы переименуете или переместите эту папку, то раздача через torrent файл работать уже не будет, т. е. пользователи, скачавшие размещенный на сайте torrent не смогут скача
подробнее...

Теги

сайты, игры, дизайн, продвижение, php, html, css, my sql, c++, delphi, photoshop, 3ds max, fl studio, трекерская музыка, уроки

Статьи сайта

webinformatic - Бесшовные (тайловые) текстуры

webinformatic - Создание изображений огня, воды, неба

webinformatic - Создание текстур горных пород и суши (урок 5)

webinformatic - Рисование персонажей (урок 6)

webinformatic - Рисование фона (урок 6 часть 2)

webinformatic - Рельефные изображения

Добавление статей на сайт под управлением megainformatic cms express

webinformatic - Воспроизведение файлов в форматах it, xm, s3m, mod

webinformatic - Воспроизведение файлов в форматах it, xm, s3m, mod - страница 2

webinformatic - Воспроизведение в игре музыки в формате XM

webinformatic - Воспроизведение файлов в формате OGG Vorbis

webinformatic - игра "Веселый Буквоежка" - инструменты разработки

webinformatic - Игра "Веселый Буквоежка" - история создания проекта

webinformatic - Как анимировать паука ?

webinformatic - Уроки Photoshop

webinformatic - Купить Уроки Photoshop - Чудеса

webinformatic - Купить Уроки Photoshop - Рисуем и Анимируем

webinformatic - Эмулятор игры Ну, Погоди!

сайт webinformatic - Говорящий Комикс Веселый Буквоежка

webinformatic - Что нужно для создания собственного сайта ?

webinformatic - Моделируем девушку в 3d используя 3ds max

webinformatic - Уроки Fruity Loops Studio - пишем свою музыку

webinformatic - Уроки Fruity Loops Studio - пишем свою музыку - урок 1 - Быстрый старт

webinformatic - Сброник статей по дизайну и компьютерной графике. Обзор.

webinformatic - Уроки 3d на delphi directx - Вывод Заставки

Добро пожаловать в систему управления сайтом megainformatic cms

webinformatic - Создание эскиза и макета страницы сайта

webinformatic - Верстка созданного макета

webinformatic - Добавление модулей обеспечивающих минимально необходимый функционал

webinformatic - Основы добавления контента на сайт, управления и поддержки сайта

webinformatic - Проверка работы сайта, установка на хостинг

webinformatic - Основы продвижения созданного сайта

webinformatic - Создание шаблонов

webinformatic - Создание интернет-магазина

webinformatic - Музыкальные мир - композиция Морозное утро - 10 версий

ЛЕТО

webinformatic - Нечто Необъяснимое - пре релиз

megainformatic cms admin

megainformatic cms admin

webinformatic - Основы создания 3d игр - проект Тайны Морских Глубин

webinformatic - уроки delphi directx 8.1 3d - Основы Вращений и Управления камерой

megainformatic cms seo

megainformatic cms admin

webinformatic - Моделируем девушку в 3d - Подготовка 2d-эскиза тела человека

megainformatic cms stat kit

megainformatic cms seo

webinformatic - Теория и практика 3d игр - О Кватернионах

webinformatic - Теория и практика 3d игр - Основы теории векторов

webinformatic - Теория и практика 3d игр - Важные замечания

webinformatic - Моделируем девушку в 3d используя 3ds max - Подготовка к моделированию ноги - готовим ширму

webinformatic - Моделируем девушку в 3d используя 3ds max - Выполняем моделирование ноги

webinformatic - Моделируем девушку в 3d используя 3ds max - Улучшаем созданную модель женской ножки

megainformatic cms stat kit

webinformatic - Подводная лодка и подводный мир

webinformatic - megainformatic cms - Форма для смены шаблонов сайта - модуль template selector

megainformatic cms social

Уроки css - атрибут position

Сегодня Мы с Вами рассмотрим применение атрибута position

[к содержанию]

Приготовьтесь много экспериментировать, потому что настоящая верстка - это эксперименты, пробы и ошибки.

Особенно когда речь заходит о кроссбраузерности - т. е. одинаковом результате в разных браузерах.

Сначала приведу пример использования -



Красный блок - это DIV, описанный таким кодом -

<div style="float: left; width: 400px; height: 180px; background: #cc0011;">
</div>


Т. е. float: left - привязывание блока к левому краю контейнера (блока, его содержащего) - в нашем примере таким контейнером является внешний DIV, в котором находится данная статья.

Далее думаю понятно: width: 400px - ширина блока 400 пикселей
height: 180px - высота - 180, сразу дам совет если ваш блок планируется "резиновым" по высоте, тогда не указывайте атрибут height.

Соответственно цвет фона для блока - красный - background: #cc0011

Внутри красного блока DIV как видим расположен грязно-желтого цвета блок DIV.

Чтобы он остоял от левого края своего контейнера на 140 пикселей и от верхнего края на 50 пикселей зададим такой код -

<div style="position: relative; top: 50px; left: 140px; z-index: 1000; width: 200px; height: 80px; background: #aacc00;">
</div>


С шириной и высотой, а также цветом фона думаю Вам всё понятно, а вот новые атрибуты требуют пояснения

position: relative - задает расположение блока DIV "относительным" - т. е. смещения указанные у left и top задают относительное смещение внутри "родительского" контейнера - т. е. контейнера в котором расположен наш желый блок - по отношению в внешнему - красному блоку.

И вот тут таится главная ошибка всех НАЧИНАЮЩИХ ВЕРСТАЛЬЩИКОВ -

ИСПОЛЬЗОВАНИЕ position ТАМ, ГДЕ ЭТО СОВСЕМ НЕ НУЖНО.

!!! ПРАВИЛЬНО РЕШЕНИЕ ТАКОВО - используйте position там, где можно обойтись обычным float + margin. !!!

Т. е. блоки нужно выравнивать друг относительно друга с помощью атрибута margin - тот же самый пример более правильно записать так -



<div style="float: left; width: 400px; height: 180px; background: #cc0011;">

<div style="float: left; margin: 50px 0 0 140px; width: 200px; height: 80px; background: #aacc00;">
</div>

</div>


Внешне как видите никакой разницы. Но если использовать несколько блоков DIV внутри одного и того же контейнера, то разница будет ОЧЕНЬ ОЩУТИМА.

Посмотрим пример -



<div style="float: left; width: 400px; height: 180px; background: #cc0011;">

<div style="float: left; margin: 50px 0 0 40px; width: 60px; height: 60px; background: #22cc00;">
</div>

<div style="float: right; margin: 50px 0 0 40px; width: 60px; height: 120px; background: #220000;">
</div>

</div>


Пока всё просто :))))

А что если бы было вот так ?









<div style="float: left; width: 400px; height: 180px; background: #cc0011;">

<div style="float: left; margin: 50px 0 0 40px; width: 260px; height: 60px; background: #22cc00;">
</div>

<div style="float: left; margin: 50px 0 0 40px; width: 60px; height: 120px; background: #220000;">
</div>

<div style="float: left; margin: 50px 0 0 40px; width: 50px; height: 30px; background: #774100;">
</div>

</div>


Как видим маленькому коричневому прямоугольничку не хватило места в контейнере и он буквально "выпал" из него.

Использование position позволяет избежать такого поведения -









<div style="float: left; width: 400px; height: 180px; background: #cc0011;">

<div style="position: relative; top: 50px; left: 40px; z-index: 1000; width: 260px; height: 60px; background: #22cc00;">
</div>

<div style="position: relative; top: 50px; left: 40px; z-index: 1000; width: 60px; height: 120px; background: #220000;">
</div>

<div style="position: relative; top: 50px; left: 40px; z-index: 1000; width: 50px; height: 30px; background: #774100;">
</div>

</div>


Но как видите приводит к тому, что места теперь уже хватило лишь 1 блоку.

Остальные блоки оказались совсем не там, где ожидалось.

Это самый большой камень преткновения в верстке - добиться с одной стороны универсальности, а с другой - правильного расположения блоков в любых ситуациях.

МЫ ПОДОШЛИ К ГЛАВНОМУ - вы наверное уже заметили использование нового атрибута - z-index





<div style="float: left; width: 400px; height: 180px; background: #cc0011;">

<div style="position: relative; top: 0; left: 0; z-index: 1000; width: 260px; height: 60px; background: #22cc00;">
</div>

<div style="position: relative; top: -20px; left: 10px; z-index: 1001; width: 60px; height: 120px; background: #220000;">
</div>

<div style="position: relative; top: -40px; left: 10px; z-index: 1002; width: 50px; height: 30px; background: #774100;">
</div>

</div>






<div style="float: left; width: 400px; height: 180px; background: #cc0011; position: relative; top: 0; left: 0; z-index: 900;">

<div style="position: absolute; top: 0; left: 0; z-index: 1000; width: 260px; height: 60px; background: #22cc00;">
</div>

<div style="position: absolute; top: -20px; left: 10px; z-index: 1001; width: 60px; height: 120px; background: #220000;">
</div>

<div style="position: absolute; top: -40px; left: 10px; z-index: 1002; width: 50px; height: 30px; background: #774100;">
</div>

</div>


z-index всегда применяется совместно с position, поскольку без него просто не работает,
а используется он для позиционирования блоков по оси z - т. е. блоки с меньшими z располагаются на заднем плане, а блоки с большим z - поверх них.

Именно для такого позиционирования и правильно применять атрибут position, а во всех остальных ситуациях старайтесь обходиться простыми float + margin как было показано выше или вообще сверстать нужную часть страницы не блоками DIV, а при помощи TABLE (таблицы).

Считать, что "ДИВНАЯ" верстка более современна, а "ТАБЛИЧНАЯ" якобы устарела - в корне неправильно !

Почему ?

Да потому что бывают такие ситуации в верстке, когда обойтись без таблиц просто невозможно, особенно в плане поддержки очень старых браузеров, таких как IE 6, IE 5.5 или ниже.

Простой пример - красивое оформление форм - с позиционированием элементов по левому, правому краю. (см. например ФОРМУ ВХОДА нашего сайта или ФОРМУ для отправки комментариев).

Главное правило тут такое - старайтесь применять верстку DIVами, а когда это невозможно - таблицами. Тогда ваша верстка будет более универсальной и в то же время - отвечать требованиям времени.

На сегодня наш урок закончен, материала вам думаю будет достаточно и для экспериментов и для осмысления.

Удачи !

[к содержанию]

 

Оставленные комментарии



Something: Unexplained 2 captive of desires / Нечто: Необъяснимое 2 в плену желаний
Костя Коробкин Комикс Коллекционное издание - 6 комиксов, 81 страница, 220 mp3 треков
Время загрузки: 0,2246