Профессиональный PHP-программист:

создание сайтов, движков, аудит и оптимизация сайтов

О себе Услуги Портфолио Моё резюме Для заказчика Еще почитать Не_в_тему Контактная информация

Система построения сайта SBS "Web-Pro"

Средство для создания и удобного управления сайтом, имеющее расширенные по сравнению с CMS (Content Management System) характеристики. Более 5 лет успешного использования. Подробнее

Пишите!

ICQ
176621941

E-mail
richter@wpdom.com

Записки web-программиста

PHP и web-программирование | HTML, CSS | JavaScript | OS | Разное

HTML, CSS, верстка

Растяжка дива в FF и IE

В XHTML в IE не работает auto.

Ограничение на инпуты

Если на одной странице разместить более 180 элементов типа <input />, то IE их не будет обрабатывать. Firefox и Opera работает без пробем.

Минимальные размеры объекта


	min-width:100px

Работает в Firefox, не работает в IE 5.0.

Труднообъяснимый глюк IЁ

Есть drop-down-меню, основанное на div'ах и использующее JavaScript для открытия. Под меню тоже div'ы. Так вот пока не поставишь background на div меню, IЁ будет срабатывать на ссылки, находящиеся под меню, когда к ним подходит указатель мыши. Причем background нужен именно на главном div'е меню, а не на дочерних.

Пример меню, где исправлена проблема: novgaro.ru

Исходный CSS

В самом начале верстки можно прописать общие параметры, которые облегчат работу. Они пригодятся в любом проекте.

img {
	border: 0px;
}
td {
	vertical-align: top;
}
form {
	display: inline;
}

Правильное открытие окон на JavaScript

Позволяет открыть новое окно при помощи JavaScript, а если JavaScript отключен, то просто переходит по ссылке. Работает во всех современных браузерах, решает проблему индексирования окон, открывающихся с помощью JavaScript.

"Дырки во флоатах"

Если вы строите таблицу, используя плавающие div'ы, могут возникнуть пустые места, напоминающие ячейки. Причина их возникновения - различная высота div'ов, в результате чего нижестоящий div занимает наиболее высокую позицию, но совсем не нужную левую. Лечится выравниванием высоты div'ов:

div {
	float: left;
	height: 100px;
}

Запись в слой

.innerHTML=текст

Перенос в таблице посимвольно (только IE)

"word-wrap: break-word;" или "word-break: break-all;"

Цветной "select" с группами

Понимается Firefox, Opera (только группы), IE 6. Смотри код.

Флоатинг картинок

Часто приходится делать плавающие (floating) картинки в тексте документа. При это нужно задать отступы от текста. Правильнее для этого использовать margin, а не padding - так и IE понимает.

img {
	float: left;
	margin: 3px;
}

"display" и "visibility"

Свойство "display" отличается от "visibility" тем, что невидимый (visibility="hidden") слой продолжает занимать место, а неотображаемый (display="none") места не занимает, словно его просто нету.

CSS-ластик

Забавную штуку подсмотрел:

* {
margin: 0; padding: 0;
}

Убирает все отступы во всем документе.

Соблюдаем стандарт

Стандарт HTML требует наличие казалось бы необязательных атрибутов:

"alt" в "img"; "action" в "form"; "type" в "scripts", "style".
Проверить код на соответствие можно с помощью официального валидатора.

Вставка MP3-музыки в IE

<bgsound src="xxxxx.mp3" loop="0">

Вставка border="0" в таблицах нужна Netscape Navigator, иначе он оставляет промежутки.

Полезно использовать тег abbr, acronym

Недопустимо использовать td width="100%". Правильная конструкция через "style="width:100%""

Fading страниц

В Netscape Navigator фон <td> не покажется, если <td> пустой. Нужно ставить  

Для input и textarea можно поставить в CSS width: 100%

Для Opera нужно вставлять

<body topmargin="0" leftmargin="0">
или
style="padding: 0px"
т.к. style="margin: 0px" Opera не воспринимает.

Для экрана нельзя задавать размеры шрифта в пунктах

Смена цвета фона при наведении мыши

Чтобы нельзя было скопировать из браузера содержимое

<body oncopy="return false">

Чтобы hover работал и на visited

Объявлять сначала visited, потом hover.

Можно указать 2 и более класса через пробел

Понимается IE6, Firefox, Opera.

Если текст с плавающей картинкой и текста мало, то div сворачивается:(

Решение - div с "clear: both;" в конце.

<div>
	<img style="float: right" src="" alt="" />
	Short text
	<div style="clear: both"></div>
</div>

Однопиксельный DIV

div.onepix {
        border: 0px;
        overflow: hidden;
        width: 1px;
        height:1px;
}

Также м.б. применен для разделителей в строках. Tested: FF 1.0.7, IE 5.0

Шрифт при печати

"Раз уж мы готовим таблицу стилей для печати, то определить размера шрифта для "body" в 12 пунктов будет правильным и естественным."

Корректный список

ul.arcrubric {
	margin: 0.5em 0; 
	/* отступ списка от родительского элемента снизу и сверху */
	padding: 0 0 0 0.1em; 
	/* отступ списка от родительского элемента слева */
}
ul.arcrubric li {
	margin: 0.5em 0; 
	/* расстояние между элементами списка по вертикали */
	padding: 0 0 0 10px; 
	/* отступ маркера от текста */
	list-style-type: none;
	background: url('img/bullet.gif') no-repeat 0 0.2em;
	/* регулировка маркера по вертикали */
}

Выступы в списке

UL { list-style: outside }
UL.compact { list-style: inside }

Flash и z-index

Если нужно вывести HTML-код поверх Flash-ролика.

CSS:
#flash_obj {
  position: relative;
  z-index: 0;
}

HTML:
<div id="flash_obj">
	<object ...>
		<param name="wmode" value="opaque" />
		<embed ... wmode="transparent" />
		...
	</object>
</div>

Позиция div-а может быть absolute.

Как указать ссылку на RSS-канал в HTML

<head>
<link rel="alternate" type="application/rss+xml" title="" href="URL/rss.xml" />
</HEAD>

В Firefox появляется иконка в адресной строке. Для Atom'а - application/atom+xml.

Неверный отступ в Internet Explorer

Если для div в IE (версии 6 и ниже?) задать float и margin, то он показывается с двойным отступом. Лечится это присваиванием "display: inline".

Текст ссылки одного цвета, а подчеркивание другого цвета


a {color:red;}
a span {color: blue;}

Кроссбраузерная прозрачность


opacity: 0.5; /* CSS3 - Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */
filter: alpha(opacity=50); /* IE 5.5+ */
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1+, Safari 1.1 */

Для IЁ нужно задать width или height.

Какой DOCTYPE видит браузер?

Используя document.compatMode, можно узнать, с каким DOCTYPE видит браузер сайт, т.е. по какому сценарию браузер будет отображать страницу. Кстати, DOCTYPE обязательно следует указывать большими буквами.

Пользуйтесь выгодными услугами, рекомендую!