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

Craig Saila

Як прибрати зайве простір навколо форми? html css

Є два способи зробити це - за допомогою хитрості і за допомогою css. Хитрість: вставляємо форму до таблиці, розміщуючи її між відкриває і закриває тегами:

...

Другий спосіб - за допомогою css виставити відступи в нуль:

Чому елементи форми видно навіть через що перекривають їх шари? css

Це особливість відображення має місце в IE і Opera під Windows і, на жаль, нічого вдіяти з цим не можна.

Opera показує всі елементи форми, IE тільки select. Приклад.

Це відбувається тому, що ці броузери при відображенні форм використовують стандартні елементи інтерфейсу Windows, в той час як Netscape 6.x/Mozilla щоразу перетворювати їх заново.

Навіть проблема виникає практично у всіх нових броузерах при відображенні плагінів і верств.

На сайті DHTML Lab є більш детальна стаття на цю тему. Thomas Brattli пропонує вирішення проблеми на JavaScript у своєму скрипті CoolMenus.

Як прибрати смугу прокрутки? html

Перш за все, у вас повинна бути справді вагома причина для цього. Відключення смуги прокручування створює масу проблем з юзабіліті і бентежить користувачів. Якщо причина все ж таки є, то досягти бажаного можна кількома способами, але всі вони надзвичайно небезпечні в невмілих руках.

Вимкнути смугу прокрутки у фреймі елементарно, просто додайте атрибут

scrolling = "no"

Прибрати її з основного вікна трохи складніше. По-перше, можна відкрити вікно за допомогою JavaScript без активування прокручування:

window.open (this.href, 'newWindow', 'scrollbars = no');

По-друге, в деяких браузерах (IE під Windows п'ятої версії і старше, а також броузерах на базі Gecko) можна використати наведену нижче декларацію:

HTML, BODY (style = "overflow: hidden; )

Як можна контролювати розмір текстового поля? html css

На жаль, Netscape 4.x відображає елементи форми по іншому алгоритму, ніж інші броузери (Internet Explorer, Opera, і на базі Gecko).

Так як Netscape 4.x використовує основний моно шрифт для відображення тексту в полях для введення текстової інформації, а IE використовує варіюється шрифт (зазвичай sans-serif) - краще за все оптимізувати текстове поле перш за все для Netscape.

Після цього можна використовувати декларацію css (яку старі версії Netscape проігнорують) для підгонки поля під інші броузери.

Приклади:        

Звичайне поле для введення в Netscape   4.7:             

Поле для введення в IE 5.5,   підігнане під розмір поля в Netscape (відступи додані для вертикального   вирівнювання тексту)             

Поле для введення в IE 5.5,   підігнане під розмір і зовнішній вигляд поля в Netscape (імітація досягається за   рахунок рамки та шрифту)     

Можу я використовувати меню, що випадає для навігації? ia/u gd

Як і багато чого в веб-дизайні, доцільність використання меню, що випадає залежить від аудиторії. На звичайних сайтах краще від нього відмовитися. Втім, іноді буває зручно зібрати разом декілька посилань на обмеженому просторі.

Мінуси використання випадають меню:

довгий текст робить меню надмірно широким

труднощі доступу до опцій в текстових і мовних броузерах

неможливо побачити одразу всі доступні варіанти

деякі Вам не здогадуються про наявність прихованих опцій

оперування що випадають меню може представляти труднощі для деяких користувачів ( "Я не зрозумів, що треба натиснути 'перейти'")

різний зовнішній вигляд в різних броузерах

вимагає невеликого, але все ж програмування (на стороні клієнта чи сервера)

Ще на цю тему має сенс почитати Macintosh Human Interface Guidelines.

Чому у картинок в таблицях з'являється відступ внизу? html css

Особливо це помітно в браузерах на базі Gecko (наприклад, в Netscape 6.x) і деяких версіях Mozilla. Швидше за все це відбувається тому, що броузер інтерпретує як рядковий елемент. Проблема вирішується наступного декалараціей:

TD> IMG (display: block;)

(докладний пояснення ви можете знайти в статті "Tables, Images, and Mysterious Gaps ".)

Після виходу Mozilla 1.0 у нього був додано "майже стандартний" режим для виправлення вищеописаної проблеми. Цей режим включається декларуванням у DOCTYPE transistional HTML 4.01 (з системним ідентифікатором) або transistional XHTML 1.0 (на Mozilla.org є повний список типів DOCTYPE).

В старих броузерах відступ може з'являтися через прогалини між і закриває. Видаліть зайві пробіли та проблема швидше за все вирішиться.

Як видалити рамку навколо картинки-посилання? 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 .* взаємно знищуються. Додайте пробіл або будь-який інший символ між тегами (наприклад, так:

) і проблема вирішиться.

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

Для підготовки даної роботи були використані матеріали з сайту http://www.webmascon.com