Кулинарные рецепты CSS

Информация - Компьютеры, программирование

Другие материалы по предмету Компьютеры, программирование

?ице, то окончательный вариант будет такой:

body { text-align: center; }

#centerItem { text-align: left; margin: auto; }

Для подробного изучения данной проблемы рекомендуем статью "Centering Tables".

Как сделать резиновую верстку с ограничением по ширине? css

Проще всего было бы использовать атрибут max-width. К несчастью, он не поддерживается большинством версий IE.

Выход - в использовании атрибута width вместе с небольшим фрагментом кода на JavaScript, который будет определять ширину окна и при превышении пороговой величины зажимать её на определенном значении, иначе задавать её равной 100%.

function resizeBox(){

sObj = d.getElementById("container").style

800)? sObj.width = "800px" : sObj.width = "100%" ">if(d.body.clientWidth) (d.body.clientWidth>800) ? sObj.width = "800px" : sObj.width = "100%"

}

Пример.

Как задать стиль для hr? css

Internet Explorer и большая часть css-совместимых броузеров (например, на основе Gecko, Opera имеет одну странность, которую документировал Stefan M. Huber) работают с hr по-разному. Суть в том, что IE обрабатывает его как строчный элемент, а прочие - как блочный. Поэтому, для горизонтального разделителя красного цвета мы делаем:

Internet Explorer:

HR { color: #F00; }

Прочие CSS-совместимые броузеры: HR { background-color: #F00; }

Тоже самое верно и для выравнивания:

Internet Explorer:

HR { text-align: right; }

Прочие CSS-совместимые броузеры:

HR { margin-right: 0; }

Итак, достичь с помощью css того, что в html выглядит как

...вы можете следующим образом:

HR { text-align: right; width: 30%; height: 2px; color: #F00; border: none; } /* Для IE */

HTML>BODY HR { margin-right: 0; width: 30%; height: 2px; background-color: #F00; border: none; } /* Для броузеров на базе Gecko */

HTML>BODY HR { margin-right: 0; width: 30%; height: 2px; background-color: #F00; border: 0px solid #F00; } /* Для Оперы и броузеров на базе Gecko */

Для более подробной информации по этой теме читайте статью Marek Prokop "Styling ".

Как изменить отступ для элементов списка с помощью css? css

Единственного правильного пути не существует. Броузеры Gecko и Internet Explorer по-разному интерпретируют css в данном случае. Самый простой вариант для уменьшения отступа - очистить поля и отступы слева. Для увеличения же отступа можно сделать так:

ul { margin-left: 0; padding-left: 20px; }

или

ul { margin-left: 20px; padding-left: 0; }

(Те же правила применимы к ol и dl)

Eric A. Meyer написал подробное объяснение по этой проблеме.

Как можно добавить отступ между элементами списка? html css

Если элемент списка - текст, лучше всего оформить его как параграф:

В других случаях можно добавить два переноса строки в конце каждого элемента списка:

Для более аккуратного и эффективного решения проблемы следует использовать CSS, так как он не затрагивает структуру документа. Эта декларация даст тот же эффект, что и уже приведенные способы:

li { margin-top: 1em; }

Внимание: установка line-height для списка приведет не только к увеличению расстояния между элементами, но добавит междустрочное расстояние для содержания каждого элемента.

Почему текст в Netscape 4.* становится все меньше и меньше? html css

Netscape 4.* рассматривает следующие один за другим тэги (даже корректно закрытые) как вложенные, и поэтому уменьшает размер текста.

Проблема возникает оттого, что пары ) и проблема решится.

Список литературы

Для подготовки данной работы были использованы материалы с сайта