Сегодня
22 марта 2019
11:25

Теги

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

Статьи сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ЛЕТО

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

megainformatic cms admin

megainformatic cms admin

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

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

megainformatic cms seo

Моделируем девушку в 3ds max - Создаем скелет для модели

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

megainformatic cms stat kit

megainformatic cms seo

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

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

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

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

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

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

megainformatic cms stat kit

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

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

megainformatic cms social

megainformatic cms social Руководство пользователя

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

модуль слайдера

ТЗ на сайт коллективных покупок

Моделируем девушку в 3ds max - Знакомимся с основами анимации созданного персонажа

Моделируем девушку в 3ds max - Знакомимся с основами анимации созданного персонажа страница 2

Поддержка сайтом нескольких языков - модуль multi lang

Моделируем девушку в 3ds max - Выполняем экспорт созданной модели в формат X

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

установка нового шаблона в joomla 2.5.4

Описание продукта megainformatic cms social

Моделируем девушку в 3ds max - Рассматриваем особенности работы с анимированными персонажами в приложениях C++ DirectX 9

Моделируем девушку в 3ds max - Подводим общие итоги проделанной работы

megainformatic cms groupon

дизайн сайта строительной компании УЛЬТРА-СТРОЙ

Тестирование подключения платежной системы

Выпадающее окно регистрации на сайте

Тестирование подключения к платежной системе с использованием скрипта эмулятора

Модуль для регистрации пользователя на сайте

Код для модуля регистрации пользователя на сайте

Быстрый подсчёт ключевых слов в статье

Модуль подсчёта ключевых слов в статье

Онлайн-сервис для подсчёта статистики ключевых слов

Пишем слайдер на javascript с нуля

Логика работы слайдера на javascript

Пишем свою соц. сеть - модуль предложений для webjob

Пишем свою соц. сеть - модуль предложений для webjob - часть реализации для личного кабинета

Пишем свою соц. сеть - Реализация файлового хранилища предложений в csv-файле

Тестирование подключения к платежной системе ЕДИНЫЙ КОШЕЛЕК (w1.ru) с использованием скрипта эмулятора

Пишем свою cms - шаг 1

Пишем свою cms - шаг 2

Пишем свою cms - шаг 3

бесплатная флеш игра freeway fury 2 - разработчик Serius Games

бесплатные флеш игры сторонних разработчиков

Как я осваивал Flash

Список уроков на тему создания flash приложений и игр

Как я осваивал Flash - шаг 2 - Основы создания простейших flash - игр

проект портала Идеи Комфорта

игра Веселый Буквоежка

игра Веселый Буквоежка

Использование cron, crontab и планировщика задач

Совместное использование jquery и mootools или других js-фреймворков

Модуль content php performer для megainformatic cms

Пишем компактный слайдер

Что нужно знать для создания сайта ?

Что нужно знать для создания сайта ? Глава 2 - Кодировки и DOCTYPE

Что нужно знать для создания сайта ? Глава 3 - Идём дальше - нанизываем новый код - где объявляются стили css и код javascript

Что нужно знать для создания сайта ? Содержание

Что нужно знать для создания сайта ? css - стили

preg_match или Использование регулярных выражений в php

статьи Тимонина Андрея - Flash. Содержание

статья Тимонина Андрея - Flash. Подготовка к работе.

статья Тимонина Андрея - Flash. Hello world.

статья Тимонина Андрея - Flash. Экспорт SWC библиотеки.

Тимонин Андрей - Несколько слов о себе

статьи Тимонина Андрея - уроки из области веб программирования, создания казуальных игр

статья Тимонина Андрея - Обеспечиваем доступ к объекту из любой точки программы. Singleton

статья Тимонина Андрея - Хронология работы программы. Создаем Лог

статья Тимонина Андрея - Поиск файлов. Получаем список файлов каталога.

статья Тимонина Андрея - Исключения. Создаем класс обработки исключений.

статья Тимонина Андрея - States. Создаем менеджер состояний игры.

статья Тимонина Андрея - Регистрация. Часть 1. Создаем страничку регистрации на сайте.

статья Тимонина Андрея - Регистрация. Часть 2. Создаем обработчик, и заносим информацию о пользователе в Б.Д.

статья Тимонина Андрея - Таймер. Выводим время игры.

статья Тимонина Андрея - DirectX9. Создаем основной класс обработки графики.

статья Тимонина Андрея - DirectX9. Создаем первое приложение.

Что нужно знать для создания сайта ? float - использование в css - стилях

Уроки Fruity Loops Studio (FL Studio) - урок 2 - пишем свою композицию COLD

Уроки Fruity Loops Studio (FL Studio) - урок 3 - экспериментируем с композицией COLD

Что нужно знать для создания сайта ? Стандартные шрифты для сайта

Что нужно знать для создания сайта ? ASC II Коды символов

Уроки Fruity Loops Studio (FL Studio) - урок 4 - пишем первый вариант композиции COLD

Популяризация Современных Научных Знаний и Размышления на околонаучные темы. СОДЕРЖАНИЕ

Популяризация Современных Научных Знаний и Размышления на околонаучные темы. Энергетический кокон

Модуль галерей для любой cms

Уроки Photoshop - Быстрый старт

Мои Музыкальные Миры - страница 2

megainformatic cms rs

Мега Информатик - Примеры моих работ

Уроки 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ами, а когда это невозможно - таблицами. Тогда ваша верстка будет более универсальной и в то же время - отвечать требованиям времени.

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

Удачи !

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

 

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



Рейтинг@Mail.ru
Время загрузки: 0,3661