cssor.ru - Сайт о CSS и верстке сайтов, в помощь веб разаботчикам.

Html элементы поверх флеш

admin — Sat, 14 Mar 2009 22:23:24 +0000

Здравствуйте дорогие читатели! Сегодня речь пойдет о решении одной специфической проблемы встречающейся при верстке сайтов. Специфическая она по той причине, что не связанна CSS багами позиционирования, речь пойдет лишь о html элементах. А конкретнее о том как поместить любой HTML элемент (div, img и пр.) поверх флеш элемента на html странице.

На практике мне не часто приходится верстать сайты с флеш элементами, поэтому я не подозревал о существовании данной проблемы, пока не столкнулся с ней “лицом к лицу”. В моем случае случилась ситуация, когда на странице горизонтальное выпадающее меню выпадало на флеш плеер в котором воспроизводилось видео, и оно выпадало под флеш плеер, чего собственно я оставить просто так не мог. Решение проблемы не заставило себя долго ждать и сейчас этим решением я поделюсь с вами.

Закругленные углы у пунктов меню на CSS

admin — Sat, 18 Oct 2008 20:15:46 +0000

Опять коснемся темы меню, название статьи говорит само за себя о чем пойдет сегодня речь. Есть масса способов реализовать пункты меню с закругленными углами. Но в этой статье пойдет речь о том как это сделать без использования скриптов, но с использованием картинок (от них никуда не деться). Думаю следует в самом начале рассказать принцип, чтобы в дальнейшем было понятно что мы будем реализовывать. В данном примере будет рассмотрено горизонтальное меню при наведении на один из пунктов, которого будет появляться фон с закругленными краями. Вот пример. С первого взгляда кажется ничего сложно, просто подкладываем под пункт меню нужную картинку с помощью свойства background и все. В принципе да, но большинство верстальщиков впадают в ступор, когда количество символов в пунктах меню значительно отличаются. И как сделать так чтобы левый и правый отступы от краев подкладываемой картинки были одинаковы при различной длине. Сперва приходит мысль о том чтобы подкладывать под каждый пункт меню отдельную картинку, но это дополнительные картинки, дополнительный код и что очень печально совсем не динамическое решение. Решение есть и довольно простое. И что самое приятное, нам потребуется всего одна картинка. И так… Картинка должна иметь следующий вид:

position: relative, баг в IE

admin — Sun, 05 Oct 2008 15:56:11 +0000

Эх сколько я мучился с ним в свое время ). Этот баг обычно возникает когда слой (div) имеет position: relative; и имеет дочерний слой или же еще какие либо элементы внутри себя. Но иной раз его сложно заметить, бывает он то появляется, то исчезает при скроллинге страницы. Я расскажу и покажу этот баг на простом примере, и естественно расскажу как он “лечится”.

Псевдоэлементы и псевдоклассы, их использование

admin — Fri, 03 Oct 2008 19:35:55 +0000

CSS стили в документе применяются для элементов (тегов) в целом, и в принципе этого хватает для повседневных задач верстальщика. Но есть способ применять стили к определенной части элемента (например к первой строке абзаца, к первой букве абзаца), именно для этого и существуют псевдоэлементы. Псевдоклассы же в свою очередь дают возможность применить стили к элементам по их характеристикам, которые не являются именем, атрибутом или содержимым и не могут быть получены из дерева документа (например псевдокласс :hover, который дает возможность задать стили для элемента на который наведен курсор мыши).

Полезно-интересное применение overflow

admin — Sat, 27 Sep 2008 19:33:18 +0000

Сегодня речь пойдет о интересном эффекте который можно сделать с помощью свойства overflow. Эффект галереи, увеличения, активности называйте его как хотите, применений у него можно найти много. Для начала давайте обратимся к самому свойству overflow и разберемся что оно делает.

Overflow - управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

Выпадающее меню на css

admin — Wed, 24 Sep 2008 15:42:52 +0000

В этой статье я расскажу вам как сделать выпадающее меню на CSS . Преимущества такого меню думаю очевидно. Самое главное из них – это то, что такое меню будет работать при выключенном Java Script в браузере. Будут рассмотрены 2 идентичных примера меню, первое – горизонтальное меню, второе – вертикальное меню. Принцип действия у них один и тот же.

Начнем с горизонтального меню, оно имеет следующий HTML код:

Красивая полоса прокрутки сайта на CSS

admin — Tue, 23 Sep 2008 12:06:32 +0000

Стандартные полосы прокрутки (Scrollbar) на сайтах это скучно. Не так ли? Нет это совсем не так :), они (стандартные полосы прокрутки) не “мазолят” глаза, да и безобразного в них ничего нет. Но иногда под стиль сайта имеет смысл изменить стандартный Scrollbar. Не каждому сайту подойдет, так что не стоит этим злоупотреблять. Но все же знать как это делается я думаю нужно.

Для начала немного теории, расскажу и покажу какие селекторы и свойства отвечают за полосу прокрутки, а потом перейдем к практике.

В чем разница между HTML и XHTML?

admin — Sun, 21 Sep 2008 18:43:22 +0000

Нет нет… Разница не только в количестве букв. HTML – это стандртный язык разметки документов во Всемирной паутине, так же HTML является приложением SGML (стандартного обобщённого языка разметки). А XHTML в свою очередь - это расширяемый язык разметки гипертекста, созданный на базе XML. Главное их различие состоит в том, что XHTML в отличие от HTML использует синтаксис XML. То есть XHTML требует более строгих синтаксических правил разметки нежели HTML.

Преимущество XHTML в том, что анализ документа XHTML проще и быстрее из-за использования строгих правил синтаксиса, обработка XHTML возможна даже на мобильных телефонах с небольшими ресурсами.

Введение в CSS

admin — Sat, 20 Sep 2008 12:26:26 +0000

Первая статья на сайте и логично было бы начать ее с определения и рассказать как и для чего используют CSS. Итак начнем…

Определение.

Сам сочинять не буду, все уже давно придумано. Просто процитирую великую и всезнающую Википедию.

[quote]

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего вида документа, написанного языком разметки. Преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML, включая SVG и XUL.

[/quote]

Для чего нужен CSS?

CSS используется веб-разработчиками для задания внешнего вида (шрифтов, цветов, отступов, расположения и др.) веб-страниц. CSS разработан для отделения основного содержимого документа (написанного на языке разметки, например HTML) от оформления этого содержимого (написанного на CSS). Такое отделение предоставляет веб-разработчикам большую гибкость, упрощает задание внешнего вида документов и оформление повторяющихся элементов разметки.