Кроссбраузерное выравнивание формы и картинки поиска с помощью float

Категории:HTML-верстка, Для начинающих
Теги: , , , ,

Все знают, когда делаешь форму поиска, то во многих случаях нужно что бы к форме “прилипала” кнопка “поиск” или картинка какая-нибудь, которая, при вводе текста, будет переходить по алгоритму поиска и т.д. Такое сложно сделать так как у формы ввода текста свои “хаки” а у картинки, которая присоединяется к форме – другие. Двигать с помошью padding или margin и top(bottom) очень сложно, и выбрать золотую середину не всегда удается. Вот я Вам покажу метод как это сделать без padding и margin.    Читать далее »

Видеоурок. Работа с float и clear на примере изображений и абзацев

Категории:Видеоуроки
Теги: , ,

Ну вот, решил опубликовать свой 1й видеоурок. Сразу говорю я дилетант в этом деле(в видеоуроках), но думаю для 1го раза урок получился неплохой. Не обращайте внимания на некоторые заминки…я ж волновался =).

Ну теперь непосредственно об уроке.

В данном уроке я рассказываю что такое float и clear. Про float так же можно почитать в моей статье “Поплавки или свойство обтекания(float)“. Урок и демонстрация основаны на примере картинок и абзацев. Вы сможете научиться не только владеть свойствами float и clear, но и некоторыми хитростями в работе с изображениями, абзацами и узнаете о небольшой хитрости с правилом overflow:hidden;

Не сильно меня ругайте=) Мой 1й урок. Дальше будет лучше. Кстате, незабываем про ”Конкурс. PSD макет для видеоурока.

Желаю приятного просмотра. Вперед! Читать далее »

Поплавки или свойство обтекания(float)

Категории:Для начинающих
Теги: , ,

попавокПоплавки” или как еще называется этот метод “обтекание блока“, служат для того что бы расположить блоки в 1 строку. Наглядный пример меню на моем блоге. Каждый пункт (обо мне, блог, портфолио и т.д.) создается с помощью блока div. Это не моя прихоть. Вы скажете, что сейчас все меню делаются списком, но тут уже все дело в плагине. Так сделано, что плагин сам создает меню на основе div’ов. Как тут быть, ведь все дивы будут становиться в столбик. Вот тут и приходит на помощь свойство float.

Float определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение параметра float равно none, элемент выводится на странице как обычно, самое большое — одна строка обтекающего текста может быть на той же линии, что и сам элемент.

Читать далее »