Выводятся записи из рубрики «CSS»

Несколько фоновых изображений на CSS

Вопрос

Подскажите пожалуйста, возможно ли назначить одному элементу 2 фоновых изображения? Мне бы хотелось, чтобы одна картинка повторялась по горизонтали, а другая — через всю страницу и при этом была позади той, которая повторяется по-горизонтали.

Сейчас я делаю так: одну картинку назначаю фоновой для тега html, а другую для тега body.

html {
background: url(images/bg.png);
}
body {
background: url(images/bgtop.png) repeat-x;
}

Является ли такой подход правильным? Что, если я захочу 3 картинки? Возможно, есть метод получше?

No responses yet

CSS: какая разница между visibility:hidden и display:none?

Вопрос

И свойство visibility:hidden, и display:none скрывают отображение элемента на экране. Получается, что эти свойства работают идентично?

No responses yet

DIV с прозрачной картинкой не позволяет кликнуть по дочерним элементам, закрывая их

Вопрос

У меня на HTML-странице есть DIV с прозрачной фоновой картинкой, который позиционирован абсолютно, и он закрывает собою много всяких элементов, в том числе ссылок, кнопок и т.п.

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

Я хочу, чтобы появилась возможность кликать по них при любых обстоятельствах. Возможно ли сделать это, желательно кроссбраузерно?

No responses yet

CSS: как убрать промежуток между двумя элементами inline-block?

Вопрос

Есть следующий HTML:

<div>
<span class="in-line">Первый</span>
<span class="in-line">Второй</span>
</div>

И этот CSS:

.in-line {
display:inline-block;
width:100px;
}

Вот как это выглядит:

Пример
Первый
Второй

Я понимаю, почему это происходит, и что если я поставлю элементы в HTML в один ряд, то промежуток исчезнет:

<div>
<span class="in-line">Первый</span><span class="in-line">Второй</span>
</div>

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

No responses yet

Как запретить выделение текста на HTML-странице?

Вопрос

В моем проекте используются разные интерактивные элементы, которые являются кнопками, но сделаны на основе DIV-вов и т.п. Эти элементы выглядят не очень, когда текст в них выделен (это может случиться, если пользователь, к примеру, дважды кликнет по такой кнопке — поведение по умолчанию для большинства браузеров).

Я ищу какое-нибудь универсальное решение для запрета выделения текста, желательно конечно, чтобы использовались только CSS и HTML, однако если это не возможно, то пусть тогда будет JavaScript.

No responses yet

CSS: Поддержка скругления углов (“border-radius”) в IE

Вопрос

Как обстоят дела в IE с поддержкой CSS-атрибута «border-radius», отвечающего за скругление углов?

No responses yet

CSS. Почему не работает вертикальное выравнивание по середине?

Вопрос

Почему не работает вертикальное выравнивание (по середине) в следующем примере?

<div>
<img style="width:30px;height:30px">
<span style="vertical-align:middle">Не работает.</span>
</div>

А выравнивание по нижнему и верхнему краю (vertical-align:top и vertical-align:botton) работают.
Такие вещи в CSS меня просто бесят.

No responses yet

CSS. Word-wrap в таблице

Вопрос

Раньше я использовал word-wrap: break-word для переноса текста в DIV-ах и SPAN-ах, но похоже, что это не работает для ячеек таблицы. У меня таблица шириной 100%, в ней один ряд и 2 столбика. Хотя тексту в столбиках и назначено это свойство, он не переносится на новую строчку и выходит за пределы ячейки.

Есть какие-то предложения, как это исправить? Такое происходит в FF, Chrome и IE. Вот так выглядит исходник:

Оооооооооооооооооооочень длинное слово
Слово

Текст «ооооооооооооо…чень длинный», он даже длиннее, чем страница, но он не разрывается. Я пробовал задать text-wrap:suppress и text-wrap:normal, но это также не помогло.

No responses yet

CSS. Задать высоту / ширину 100% вместе с padding / margin

Вопрос

Я уже длительное время пытаюсь безуспешно решить эту проблему и пока что никакого толкового решения не придумал. Вопрос звучит так: как можно средствами HTML/CSS сделать так, чтобы у элемента ширина и/или высота была задана в 100% относительно его родительского элемента, и в то же время у него соблюдались внутренние и внешние отступы (padding и margin)?

Например, если родительский контейнер имеет высоту в 200 пикселей, то логично было бы ожидать, что если дочернему элементу задать высоту в 100% и внутренний оступ (padding) в 5 пикселей, то в результате его реальная ширина будет 190 пикселей + «обводка» со всех сторон в 5, а сам дочерний элемент будет мило расположен по центру его родителя.

#myDiv {
width: 100%
height: 100%;
padding: 5px;
}

Естественно, на практике получаем совершенно не то. Я уже из опыта знаю, как поведут себя свойства CSS в подобных случаях, и всегда нахожу приемлемое решение обходными путями. Но мне постоянно кажется, что просто должен быть какой-нибудь способ добиться описанного выше эффекта (то есть заставить браузер рассчитывать размеры дочернего объекта, учитывая его отступы и размеры родителя). Кто нибудь знает, как это можно сделать?

И ещё. Меня не очень беспокоит, чтобы решение было обязательно совместимым с IE старых версий, так что это должно упростить постановку задачи.

No responses yet

Задать на CSS ширину дива равной ширине контента (таблицы)

Вопрос

Моя разметка выглядит примерно так:

<div>
<table>
</table>
</div>

Я хотел бы, чтобы DIV растягивался по шине таблицы, которую он содержит. Есть какие-нибудь предложения?

No responses yet

Вперёд, в прошлое »