Balls and holes PC game / Balls and Holes PC игра
Сегодня
7 октября 2022
3:34
Вход Регистрация Забыли пароль ?

сайт webinformatic - Добавляем созданный счетчик на все страницы Вашего Сайта
        Конструируем свой сайт - полезные статьи для начинающих строителей сайтов.
подробнее...

Теги

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

Статьи сайта

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

webinformatic - megainformatic cms express files + module slider

webinformatic - Создание сайта бесплатно или под заказ

webinformatic - Как создать flash баннер

webinformatic - Разработка flash-приложения для сайта: онлайн примерочная

webinformatic - Мои впечатления о книге - Владислав Крапивин - Журавленок и Молнии

webinformatic - Модуль отзывов/комментариев для вашего сайта

webinformatic - Модуль отзывов/комментариев для вашего сайта

webinformatic - Модуль отзывов/комментариев для вашего сайта

webinformatic - Модуль короткие ссылки short link

webinformatic - Работа с сокетами fsocket из php

webinformatic - Как создать игру Создание игровых панелей и индикаторов

webinformatic - Приключения Кости Коробкина - Как я провел лето - интерактивный комикс

webinformatic - Приключения Кости Коробкина - Как я провел лето - интерактивный комикс

webinformatic - Приключения Кости Коробкина - С новым годом - интерактивный комикс

webinformatic - Система управления сайтом на php - megainformatic cms admin files

webinformatic - обзор антивирусных средств защиты

webinformatic - как работает антивирус ?

webinformatic - Создание сайта для бизнеса

webinformatic - Новый взгляд на очевидные вещи

webinformatic - Разработка программ на c++

webinformatic - Немного о музыке

webinformatic - GET и POST запросы

webinformatic - для чего нужна карта сайта

webinformatic - Web Администрирование

webinformatic - Мысли о разном

webinformatic - Легко ли быть программистом

webinformatic - Глубины программирования на C++

webinformatic - Убираем лимит на размер импортируемого файла в PhpMyAdmin

webinformatic - Как создать torrent файл

webinformatic - Нужна ли валидация вашему сайту ?

webinformatic - Недобросовестные клиенты, ЧЕРНЫЙ СПИСОК

webinformatic - Правила размещения материалов

webinformatic - игра для pc - black shades freeware 2002

webinformatic - игра / game CrazyCars3D v9.0 RU/EN - ранний доступ, shareware

игра / game Capsized 2011 PC, EN - обзор игры

урок / tutorial Direct3D 10 Урок 1 - Tutorial 1

игра / game Braid 2008 PC, EN - обзор игры

проекты, игры, уроки, видео, музыка, статьи, обзоры - страница 399

супер видео, костя коробкин комикс, проекты, игры, уроки, видео, музыка, статьи, обзоры - страница 400

выпуск 40 - познай свою реальность часть 1, веселый буквоежка игра, веселый буквоежка, webinformatic проекты, выпуск 39 balls on lift, balls on lift, balls on lift 2, bol 2, шарики на лифте часть 2, создание и доработка сайтов, выпуск 38 сайты, игры, уроки, видео, музыка, статьи, обзоры - страница 401

Выпуски 38 - 44 Посвященные созданию игры на движке fle game engine

Выпуски 44 - 47 Посвященные созданию сцен в игре и генераторам частиц - снег, дождь, звезды, красивые эффекты

Выпуски 47.2 - 54 Разноцветный снег, Звезды, обзор комиксов о Косте Коробкине, Костя Коробкин в гостях у тёти Светы часть 1, directx 9c 3d трансформации. Основы, история развития проекта мега информатик, bubbles music clip, bubbles music clip версия 2

Paulo iOS, Android game Kurage Studios

Slime Rancher | Windows, Mac, Linux | game | Monomi Park

Zombia | Windows | game | UnluckyGames

Job Simulator | VR, PS4 | game | Owlchemy Labs

Feudal Feud | Web, iOS, Android | game | Urubu Studio

Exoplanet: First Contact | Windows, Mac | game | Alersteam

Rex | ZX Spectrum | game | Martech Games Ltd UK, 1988

Crystall Kindom Dizzy | ZX Spectrum | game | ZXArt Russia 2017

Batman: The Movie | ZX Spectrum | game | Ocean Software Ltd UK, 1989

Harbinger - Convergence | ZX Spectrum | game | Cthonian Godkiller, 2016

Harbinger - Convergence part 2 | ZX Spectrum | game | Cthonian Godkiller, 2016

Metal Man Reloaded | ZX Spectrum | game | Oleg Origin (Россия), 9713

Уроки 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,0810