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

Як видалити рамку навколо картинки-посилання? html css

У HTML (і старих броузерах) необхідно додати атрибут border = "0" до тегом img.

У CSS (і нових броузерах) досить додати стильову декларацію

A IMG {border: none;}

Ще ви можете зробити рамку невидимою в Netscape 4.x за допомогою css, змінюючи її колір на колір фону в зовнішньому блоці:

A IMG {border: none; border-color: [колір фону]; color: [колір фону]}

Але відступ приблизно у дві точки навколо картинки все одно залишиться.

Як встановити відцентрувати таблицю за допомогою CSS? css

Коректним способом установки блокових елементів (у тому числі і таблиць) по центру є вказівка ​​таких відступів:

margin-left: auto; margin-right: auto;

або ще простіше:

margin: auto;

На жаль, це не працює в IE версії старше 6 (та й в шостий працює дивно). Щоб справитися з цим, елементу body слід призначити атрибут text-align: center, але так як це відцентруйте весь текст на сторінці, то остаточний варіант буде такою:

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

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

Якщо елемент списку - текст, найкраще оформити його як параграф:

a list item

В інших випадках можна додати два перенесення рядка в кінці кожного елемента списку:

a list item

Для більш акуратного і ефективного вирішення проблеми слід використовувати CSS, так як він не зачіпає структуру документа. Ця декларація дасть той же ефект, що і вже наведені способи:

li {margin-top: 1em;}

Увага: установка line-height для списку призведе не тільки до збільшення відстані між елементами, але додасть поміжрядкове відстань для утримання кожного елемента.

Чому текст в Netscape 4 .* стає все менше і менше? html css

Netscape 4 .* розглядає наступні один за іншим теги (навіть коректно закриті) і вкладені, і тому зменшує розмір тексту.

Проблема виникає тому, що пари
в моделі відображення Netscape 4 .* взаємно знищуються. Додайте пробіл або будь-який інший символ між тегами (наприклад, так:
) І проблема вирішиться.