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

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

Вопрос

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

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

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

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

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

Чем бы сжать CSS?

Вопрос

Какие инструменты Вы используете для сжатия CSS?

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

Вопрос

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

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

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

Что такое сброс (reset) CSS, где его взять и надо ли использовать?

Вопрос

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

Задание cellpadding и cellspacing в CSS как в тегах таблицы

Вопрос

Как я могу получить от CSS-свойств cellpadding и cellspacing такой же эффект, какой дают соответствующие им атрибуты в теге таблицы?

Какое свойство отключает выделение текста на CSS?

Вопрос

Существует ли правило (или правила) в CSS, которое позволяет отключить выделение текста (если пользователь делает это случайно или преднамеренно)?

Я знаю, что такой запрет можно реализовать с помощью JavaScript, а ещё - существует свойство с вендорным префиксом “-moz-user-select”, предназначенное для Мозиллы Фаерфокса.

Мой вопрос в том, можно ли стандартными способами на CSS, без применения скриптов, отключить выделение текста хотя бы только в основных браузерах? Если нет, то почему, неужели это считается плохой практикой?

Как работает треугольник на CSS? В чём фокус?

Вопрос

Когда я увидел трёхугольник на CSS, то был несколько озадачен.
Вот его код.

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

А на выходе получаем вот такую картинку:

Здесь рассматривается создания и более сложных фигур, но мне бы хотелось для начала разобраться, как рисуется относительно несложный треугольник. Как же так получается, в чём фокус?

CSS: как зачеркнуть текст линией другого цвета?

Вопрос

В HTML для зачёркивания текста используется тег “del” или “strike”, а при помощи CSS-стилей такое зачёркивание можно сделать, установив значение свойства “text-decoration” в “line-through”. Эффект, как я понимаю, идентичный. Вот примеры:

<del>Перечеркнутый текст с помощью тега del</del>

Получим:
Перечеркнутый текст с помощью тега del

<strike>Перечеркнутый текст с помощью тега strike</strike>

Результат:
Перечеркнутый текст с помощью тега strike

<span style='text-decoration:line-through'>
     Перечеркнутый текст с помощью text-decoration:line-through
</span>

И тут результат будет тот же:

Перечеркнутый текст с помощью text-decoration:line-through

Однако, цвет линии перечёркивания всегда равен цвету самого текста. Есть ли возможность на CSS изменить цвет линии зачёркивания?

Рисование фигур на CSS

Вопрос

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

Как растянуть ссылку на всю ширину родительского контейнера?

Вопрос

У меня есть ссылки, которые находится внутри блока DIV, а также ссылки внутри списков. Как я могу растянуть эти ссылки по всей ширине объектов, которые их содержат? То есть чтобы можно было кликать не только по тексту, а и по области, которая его окружает?

Назад, в будущее Вперёд, в прошлое