Richter web-программист: создание сайтов, написание интернет-магазинов, создание скриптов на PHP, MySQL, JavaScript. Качественная верстка HTML, CSS. Системы управления сайтом, CMS. Оптимизация для поисковиков
English version

PHP-программист: полезные заметки, решения, записки об HTML, CSS, верстке

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

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

HTML, CSS, верстка

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

Используя document.compatMode, можно узнать, с каким DOCTYPE видит браузер сайт, т.е. по какому сценарию браузер будет отображать страницу. Кстати, DOCTYPE обязательно следует указывать большими буквами.
Рейтинг: 0.0. Голосов: 0
(0) Добавить комментарий

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

/* CSS3 - Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */
opacity: 0.5;
/* IE 5.5+ */
filter: alpha(opacity=50);
Для IЁ нужно задать width или height.
Рейтинг: 10.0. Голосов: 1
(0) Добавить комментарий

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

a {color:red;}
a span {color: blue;}
Рейтинг: 10.0. Голосов: 1
(0) Добавить комментарий

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

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

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

< head>
< link rel="alternate" type="application/rss+xml" 
title="" href="URL/rss.xml" />
< /head>
В Firefox появляется иконка в адресной строке. Для Atom'а - application/atom+xml.
Рейтинг: 10.0. Голосов: 1
(0) Добавить комментарий

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.
Рейтинг: 10.0. Голосов: 4
(0) Добавить комментарий

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

UL { list-style: outside }
UL.compact { list-style: inside }
Рейтинг: 8.0. Голосов: 1
(0) Добавить комментарий

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

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;
	/* регулировка маркера по вертикали */
}
Рейтинг: 8.0. Голосов: 1
(0) Добавить комментарий

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

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

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

Решение - div с "clear: both;" в конце.
<div>
	<img style="float: right" src="" alt="" />
	Short text
	<div style="clear: both"></div>
</div>
Рейтинг: 0.0. Голосов: 0
(0) Добавить комментарий

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

Объявлять сначала visited, потом hover.
Рейтинг: 0.0. Голосов: 0
(0) Добавить комментарий

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

<body oncopy="return false">
Рейтинг: 0.0. Голосов: 0
(0) Добавить комментарий

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

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

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

Рейтинг: 0.0. Голосов: 0
(0) Добавить комментарий

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

Рейтинг: 0.0. Голосов: 0
(0) Добавить комментарий

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

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

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

Рейтинг: 0.0. Голосов: 0
(0) Добавить комментарий

CSS-ластик

* {
margin: 0; padding: 0;
}
Убирает все отступы во всем документе.
Рейтинг: 0.0. Голосов: 0
(0) Добавить комментарий

"display" и "visibility"

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

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

Часто приходится делать плавающие (floating) картинки в тексте документа. При это нужно задать отступы от текста. Правильнее для этого использовать margin, а не padding - так и IE понимает.
img {
	float: left;
	margin: 3px;
}
Рейтинг: 6.5. Голосов: 2
(0) Добавить комментарий

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

Понимается Firefox, Opera (только группы), IE 6. Смотри код.
Рейтинг: 0.0. Голосов: 0
(0) Добавить комментарий

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

"word-wrap: break-word;" или "word-break: break-all;"
Рейтинг: 5.0. Голосов: 1
(0) Добавить комментарий

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


Позволяет открыть новое окно при помощи JavaScript, а если JavaScript отключен, то просто переходит по ссылке. Работает во всех современных браузерах, решает проблему индексирования окон, открывающихся с помощью JavaScript.
Рейтинг: 0.0. Голосов: 0
(0) Добавить комментарий

Исходный CSS

В самом начале верстки можно прописать общие параметры, которые облегчат работу. Они пригодятся в любом проекте.
img {
	border: 0px;
}
td {
	vertical-align: top;
}
form {
	display: inline;
}
Рейтинг: 0.0. Голосов: 0
(0) Добавить комментарий

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

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

Рейтинг: 0.0. Голосов: 0
(0) Добавить комментарий

Рекомендую действительно качественный хостинг,
пользуюсь сам и предлагаю вам:

RuWeb.net - гибкий хостинг