English version

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

О себе Услуги Портфолио Моё резюме Контакты

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

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

SBS Web-Pro

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

Пишите!

E-mail
richter@ardzo.com

Telegram
@richter_a

Skype
richter_allesher

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

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

HTML, CSS, верстка

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

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

Рейтинг: 0.0. Голосов: 0

(0) Добавить комментарий

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


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

Рейтинг: 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) Добавить комментарий

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

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) Добавить комментарий

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

$jstr='onMouseOver="this.style.backgroundColor='#d2d284'" onMouseOut="this.style.backgroundColor='#D7E8E1'">';
<table width="100%" border="0" cellspacing="0"

<? if (isset($add)) {
     echo ' cellpadding="10"><tr><td bgColor="#d2d284"><div class="smalltextS">Ваше сообщение...</div>';
   }else{
     echo ' cellpadding="4" '.$jstr.'<tr><td onClick="location.href='guest_book.php?r='.$r.?'&add=1'"><a href="guest_book.php?r='.$r.'&add=1" class="smalltextSC">Ваше сообщение...</a>';}
?>
</td></tr>
</table>

<div class="comments_1">
	<div id="rating_00e0d2cbfd08c65f2a6b3fd2e40d053f" style="float:right">
	Рейтинг: 0.0. Голосов: 0<br />
    
	<div id="rate_bar_00e0d2cbfd08c65f2a6b3fd2e40d053f_0" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('00e0d2cbfd08c65f2a6b3fd2e40d053f', 0)"
	  onmouseout="u23RatingHLOff('00e0d2cbfd08c65f2a6b3fd2e40d053f', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:1, item_id:'00e0d2cbfd08c65f2a6b3fd2e40d053f'})"></div>
      
	<div id="rate_bar_00e0d2cbfd08c65f2a6b3fd2e40d053f_1" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('00e0d2cbfd08c65f2a6b3fd2e40d053f', 1)"
	  onmouseout="u23RatingHLOff('00e0d2cbfd08c65f2a6b3fd2e40d053f', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:2, item_id:'00e0d2cbfd08c65f2a6b3fd2e40d053f'})"></div>
      
	<div id="rate_bar_00e0d2cbfd08c65f2a6b3fd2e40d053f_2" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('00e0d2cbfd08c65f2a6b3fd2e40d053f', 2)"
	  onmouseout="u23RatingHLOff('00e0d2cbfd08c65f2a6b3fd2e40d053f', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:3, item_id:'00e0d2cbfd08c65f2a6b3fd2e40d053f'})"></div>
      
	<div id="rate_bar_00e0d2cbfd08c65f2a6b3fd2e40d053f_3" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('00e0d2cbfd08c65f2a6b3fd2e40d053f', 3)"
	  onmouseout="u23RatingHLOff('00e0d2cbfd08c65f2a6b3fd2e40d053f', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:4, item_id:'00e0d2cbfd08c65f2a6b3fd2e40d053f'})"></div>
      
	<div id="rate_bar_00e0d2cbfd08c65f2a6b3fd2e40d053f_4" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('00e0d2cbfd08c65f2a6b3fd2e40d053f', 4)"
	  onmouseout="u23RatingHLOff('00e0d2cbfd08c65f2a6b3fd2e40d053f', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:5, item_id:'00e0d2cbfd08c65f2a6b3fd2e40d053f'})"></div>
      
	<div id="rate_bar_00e0d2cbfd08c65f2a6b3fd2e40d053f_5" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('00e0d2cbfd08c65f2a6b3fd2e40d053f', 5)"
	  onmouseout="u23RatingHLOff('00e0d2cbfd08c65f2a6b3fd2e40d053f', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:6, item_id:'00e0d2cbfd08c65f2a6b3fd2e40d053f'})"></div>
      
	<div id="rate_bar_00e0d2cbfd08c65f2a6b3fd2e40d053f_6" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('00e0d2cbfd08c65f2a6b3fd2e40d053f', 6)"
	  onmouseout="u23RatingHLOff('00e0d2cbfd08c65f2a6b3fd2e40d053f', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:7, item_id:'00e0d2cbfd08c65f2a6b3fd2e40d053f'})"></div>
      
	<div id="rate_bar_00e0d2cbfd08c65f2a6b3fd2e40d053f_7" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('00e0d2cbfd08c65f2a6b3fd2e40d053f', 7)"
	  onmouseout="u23RatingHLOff('00e0d2cbfd08c65f2a6b3fd2e40d053f', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:8, item_id:'00e0d2cbfd08c65f2a6b3fd2e40d053f'})"></div>
      
	<div id="rate_bar_00e0d2cbfd08c65f2a6b3fd2e40d053f_8" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('00e0d2cbfd08c65f2a6b3fd2e40d053f', 8)"
	  onmouseout="u23RatingHLOff('00e0d2cbfd08c65f2a6b3fd2e40d053f', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:9, item_id:'00e0d2cbfd08c65f2a6b3fd2e40d053f'})"></div>
      
	<div id="rate_bar_00e0d2cbfd08c65f2a6b3fd2e40d053f_9" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('00e0d2cbfd08c65f2a6b3fd2e40d053f', 9)"
	  onmouseout="u23RatingHLOff('00e0d2cbfd08c65f2a6b3fd2e40d053f', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:10, item_id:'00e0d2cbfd08c65f2a6b3fd2e40d053f'})"></div>
      </div>

(0) <a href="javascript:void(null)" onclick="u23ShowAddCommentWindow('00e0d2cbfd08c65f2a6b3fd2e40d053f')">Добавить комментарий</a>

<p />
	<div id="comments_00e0d2cbfd08c65f2a6b3fd2e40d053f"></div>
</div>

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

<div class="comments_1">
	<div id="rating_d32445b461afbb573983be38feeac935" style="float:right">
	Рейтинг: 0.0. Голосов: 0<br />
    
	<div id="rate_bar_d32445b461afbb573983be38feeac935_0" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('d32445b461afbb573983be38feeac935', 0)"
	  onmouseout="u23RatingHLOff('d32445b461afbb573983be38feeac935', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:1, item_id:'d32445b461afbb573983be38feeac935'})"></div>
      
	<div id="rate_bar_d32445b461afbb573983be38feeac935_1" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('d32445b461afbb573983be38feeac935', 1)"
	  onmouseout="u23RatingHLOff('d32445b461afbb573983be38feeac935', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:2, item_id:'d32445b461afbb573983be38feeac935'})"></div>
      
	<div id="rate_bar_d32445b461afbb573983be38feeac935_2" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('d32445b461afbb573983be38feeac935', 2)"
	  onmouseout="u23RatingHLOff('d32445b461afbb573983be38feeac935', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:3, item_id:'d32445b461afbb573983be38feeac935'})"></div>
      
	<div id="rate_bar_d32445b461afbb573983be38feeac935_3" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('d32445b461afbb573983be38feeac935', 3)"
	  onmouseout="u23RatingHLOff('d32445b461afbb573983be38feeac935', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:4, item_id:'d32445b461afbb573983be38feeac935'})"></div>
      
	<div id="rate_bar_d32445b461afbb573983be38feeac935_4" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('d32445b461afbb573983be38feeac935', 4)"
	  onmouseout="u23RatingHLOff('d32445b461afbb573983be38feeac935', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:5, item_id:'d32445b461afbb573983be38feeac935'})"></div>
      
	<div id="rate_bar_d32445b461afbb573983be38feeac935_5" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('d32445b461afbb573983be38feeac935', 5)"
	  onmouseout="u23RatingHLOff('d32445b461afbb573983be38feeac935', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:6, item_id:'d32445b461afbb573983be38feeac935'})"></div>
      
	<div id="rate_bar_d32445b461afbb573983be38feeac935_6" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('d32445b461afbb573983be38feeac935', 6)"
	  onmouseout="u23RatingHLOff('d32445b461afbb573983be38feeac935', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:7, item_id:'d32445b461afbb573983be38feeac935'})"></div>
      
	<div id="rate_bar_d32445b461afbb573983be38feeac935_7" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('d32445b461afbb573983be38feeac935', 7)"
	  onmouseout="u23RatingHLOff('d32445b461afbb573983be38feeac935', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:8, item_id:'d32445b461afbb573983be38feeac935'})"></div>
      
	<div id="rate_bar_d32445b461afbb573983be38feeac935_8" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('d32445b461afbb573983be38feeac935', 8)"
	  onmouseout="u23RatingHLOff('d32445b461afbb573983be38feeac935', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:9, item_id:'d32445b461afbb573983be38feeac935'})"></div>
      
	<div id="rate_bar_d32445b461afbb573983be38feeac935_9" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('d32445b461afbb573983be38feeac935', 9)"
	  onmouseout="u23RatingHLOff('d32445b461afbb573983be38feeac935', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:10, item_id:'d32445b461afbb573983be38feeac935'})"></div>
      </div>

(0) <a href="javascript:void(null)" onclick="u23ShowAddCommentWindow('d32445b461afbb573983be38feeac935')">Добавить комментарий</a>

<p />
	<div id="comments_d32445b461afbb573983be38feeac935"></div>
</div>

<h4>Для Opera нужно вставлять</h4>
<code><body topmargin="0" leftmargin="0"></code><br />
или<br />
<code>style="padding: 0px"</code><br />
т.к. <code>style="margin: 0px"</code> Opera не воспринимает.

<div class="comments_1">
	<div id="rating_6947366e52a33292c5fdf4b6304fc806" style="float:right">
	Рейтинг: 0.0. Голосов: 0<br />
    
	<div id="rate_bar_6947366e52a33292c5fdf4b6304fc806_0" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('6947366e52a33292c5fdf4b6304fc806', 0)"
	  onmouseout="u23RatingHLOff('6947366e52a33292c5fdf4b6304fc806', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:1, item_id:'6947366e52a33292c5fdf4b6304fc806'})"></div>
      
	<div id="rate_bar_6947366e52a33292c5fdf4b6304fc806_1" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('6947366e52a33292c5fdf4b6304fc806', 1)"
	  onmouseout="u23RatingHLOff('6947366e52a33292c5fdf4b6304fc806', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:2, item_id:'6947366e52a33292c5fdf4b6304fc806'})"></div>
      
	<div id="rate_bar_6947366e52a33292c5fdf4b6304fc806_2" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('6947366e52a33292c5fdf4b6304fc806', 2)"
	  onmouseout="u23RatingHLOff('6947366e52a33292c5fdf4b6304fc806', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:3, item_id:'6947366e52a33292c5fdf4b6304fc806'})"></div>
      
	<div id="rate_bar_6947366e52a33292c5fdf4b6304fc806_3" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('6947366e52a33292c5fdf4b6304fc806', 3)"
	  onmouseout="u23RatingHLOff('6947366e52a33292c5fdf4b6304fc806', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:4, item_id:'6947366e52a33292c5fdf4b6304fc806'})"></div>
      
	<div id="rate_bar_6947366e52a33292c5fdf4b6304fc806_4" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('6947366e52a33292c5fdf4b6304fc806', 4)"
	  onmouseout="u23RatingHLOff('6947366e52a33292c5fdf4b6304fc806', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:5, item_id:'6947366e52a33292c5fdf4b6304fc806'})"></div>
      
	<div id="rate_bar_6947366e52a33292c5fdf4b6304fc806_5" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('6947366e52a33292c5fdf4b6304fc806', 5)"
	  onmouseout="u23RatingHLOff('6947366e52a33292c5fdf4b6304fc806', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:6, item_id:'6947366e52a33292c5fdf4b6304fc806'})"></div>
      
	<div id="rate_bar_6947366e52a33292c5fdf4b6304fc806_6" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('6947366e52a33292c5fdf4b6304fc806', 6)"
	  onmouseout="u23RatingHLOff('6947366e52a33292c5fdf4b6304fc806', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:7, item_id:'6947366e52a33292c5fdf4b6304fc806'})"></div>
      
	<div id="rate_bar_6947366e52a33292c5fdf4b6304fc806_7" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('6947366e52a33292c5fdf4b6304fc806', 7)"
	  onmouseout="u23RatingHLOff('6947366e52a33292c5fdf4b6304fc806', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:8, item_id:'6947366e52a33292c5fdf4b6304fc806'})"></div>
      
	<div id="rate_bar_6947366e52a33292c5fdf4b6304fc806_8" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('6947366e52a33292c5fdf4b6304fc806', 8)"
	  onmouseout="u23RatingHLOff('6947366e52a33292c5fdf4b6304fc806', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:9, item_id:'6947366e52a33292c5fdf4b6304fc806'})"></div>
      
	<div id="rate_bar_6947366e52a33292c5fdf4b6304fc806_9" class="u23rating_bar"
	  onmouseover="u23RatingHLOn('6947366e52a33292c5fdf4b6304fc806', 9)"
	  onmouseout="u23RatingHLOff('6947366e52a33292c5fdf4b6304fc806', 0)"
	  onclick="simpleRequest('u23handler.php', {rate:10, item_id:'6947366e52a33292c5fdf4b6304fc806'})"></div>
      </div>

(0) <a href="javascript:void(null)" onclick="u23ShowAddCommentWindow('6947366e52a33292c5fdf4b6304fc806')">Добавить комментарий</a>

<p />
	<div id="comments_6947366e52a33292c5fdf4b6304fc806"></div>
</div>

<h4>Fading страниц</h4>
<textarea cols="80">
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.8)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.8)">

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

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

Рейтинг: 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) Добавить комментарий

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

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

Рейтинг: 0.0. Голосов: 0

(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 - гибкий хостинг