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

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

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

Вопрос

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

No responses yet

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

Вопрос

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

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

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

No responses yet

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

Вопрос

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

No responses yet

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

Вопрос

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

No responses yet

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

Вопрос

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

No responses yet

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

Вопрос

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

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

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

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

No responses yet

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

Вопрос

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

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

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

No responses yet

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 изменить цвет линии зачёркивания?

No responses yet

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