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

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

Вопрос

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

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

Вопрос

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

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

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

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

Вопрос

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

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

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

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

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

Вопрос

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

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

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 есть другое, более подходящее решение этой проблемы.

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

Вопрос

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

HTML/CSS. Возможно ли позиционирование “float: bottom”?

Вопрос

Предположим, что есть следующий HTML:

<div id="container">
  <!-- Здесь другие элементы -->
  <div id="copyright">
    Copyright
  </div>
</div>

Я бы хотел сделать так, чтобы с id ‘copyright’ «прилипал» внизу контейнера div, можно ли этого добиться без использования абсолютного позиционирования? Если бы в свойства «float» была поддержка значения «bottom», это было бы то, что мне нужно. Но к сожалению, такого значения нет.

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

Вопрос

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

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

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

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

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

Вопрос

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

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

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

Как применить стили CSS к iFrame?

Вопрос

У меня есть простая страница, на которой расположен блок iFrame (для отображения RSS-ссылок). Как я могу применить одинаковые стили CSS к главной странице и iFrame?

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