Сегодня
23 февраля 2019
18:47
Вход Sign In Регистрация Sign Up Забыли пароль ? Forgot password ?
VARVE - Выпадающее окно регистрации на сайте
Выпадающее окно регистрации на сайте Сегодня мы с вами рассмотрим вопрос создания на сайте выпадающего окна. Примеры выпадающих окон, которые мы с вами будем делать можно посмотреть здесь - megainformatic_cms_groupon
подробнее...

Теги

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

Статьи сайта

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

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

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

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

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

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

Музыкальные мир - композиция Морозное утро - 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

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

Мега Информатик - Портфолио выполненных проектов сайтов и приложений

Уроки Photoshop - Текстуры

Уроки Photoshop - Создаем текстуру горной породы

Уроки Photoshop - Создание вариантов на тему созданной текстуры

Уроки Photoshop - Рисование текстуры травы

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

Уроки Photoshop - Рисование текстуры песка

Уроки Photoshop - Подготовка набора текстур

Уроки Photoshop - Рисование текстур глина, грязь

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

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

Атрибут float применяется для выравнивания блоков div по

<div style="float: left;">по левому краю отведенного пространства страницы</div>


по левому краю отведенного пространства страницы



<div style="float: right;">по правому краю отведенного пространства страницы</div>


по правому краю отведенного пространства страницы



<div>без выравнивания</div>


без выравнивания



аналогично объявляется в виде атрибута для описанного в css - файле класса или id

<style>
.element1 {
float: left; border: 1px solid #000000; background: #75ab41;
}


#element_2 {
float: right; border: 1px solid #000000; background: #75ab41;
}


</style>

<div class="element1">по левому краю отведенного пространства страницы</div>


<div id="element_2">по правому краю отведенного пространства страницы</div>


еще один пример -



<style>
.element1 {
float: left; border: 1px solid #000000; background: #75ab41;
}

#element_2 {
float: right; border: 1px solid #000000; background: #75ab41;
}

#elem_3 {
width: 400px;
background: #ffff00;
}

#elem_3 .elem_4 {
border: 1px solid #000000; background: #75ab41; width: 200px;
}

#elem_3 .elem_5 {
float: left; border: 1px solid #000000; background: #EC64FF; width: 200px;
}

#elem_3 .elem_6 {
float: right; border: 1px solid #000000; background: #6C87F1; width: 200px;
}
</style>

<div class="element1">по левому краю отведенного пространства страницы</div><br><br><br>

<div id="element_2">по правому краю отведенного пространства страницы</div><br><br><br>

<div id="elem_3">
<div class="elem_4">
какой-то текст в блоке без float
</div>

<div class="elem_5">
другой текст - float: left;
</div>

<div class="elem_4" style="background: #ff0000;">
снова текст в блоке без float
</div>

<div class="elem_4" style="background: #00ff00;">
и еще текст в блоке без float
</div>

<div class="elem_6">
теперь текст в блоке float: right;
</div>

</div>

<br><br><br>

<div style="clear: both;"></div>

а вот как он выводится -

по левому краю отведенного пространства страницы



по правому краю отведенного пространства страницы



какой-то текст в блоке без float
другой текст - float: left;
снова текст в блоке без float
и еще текст в блоке без float
теперь текст в блоке float: right;



В показанном примере видно как ведут себя блоки div имеющие или не имеющие тот или иной тип выравнивания блока с атрибутом float.

Важно запомнить всего 2 важных момента:

1) Если блоки не имеют указанного атрибута float - то они выводятся "как есть" - занимая всё отведенное им пространство и очередной блок будет помещен ниже данного;

2) Если вам требуется очистить пространство, занимаемое любыми блоками - примените атрибут clear: both; как показано в примере выше.

далее

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

 

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