Deerua about Coding: последние заметки с тегом «html»

Универсальный шаблон HTML (dtd)

Sat, 27 Mar 2010 13:06:34 +0200

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

  <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
  <link rel="stylesheet" type="text/css" href="css/base.css">

  <title>New demo</title>
  <style type="text/css">
  	html, body {
  		margin: 0;
  		padding: 0;
  		width: 100%;
  	}
  </style>

  <script type="text/javascript"></script>
</head>
<body>

</body>

</html>

Комментарии к заметке

Теги:
html

HTML CharCodes for special symbols (Spanish, Italian, German, French)

Fri, 15 Jan 2010 18:25:50 +0200

Есть проекты разны-вкусны, делаешь его на англицком и руссише, а тут клиент бац и говорит что нужно ещё пару-тройку европеских ленгвиджей, а CMSка то windows1251 и точить ой как лень под UTF8 всё и везде. Вместо желанных умляутов, клиент в лучшем случаи увидит букву без точек, запятых, а что ещё хуже знаки вопроса.

Простой выход — помахать дороговизной переработки, и объяснить то-сё, а можно просто сделать через ВИЗИВИГ реплейсы непонятных символов в альтернативные спецсимволы, а в простых инпутах заставить вставлять вместо тех символов спец-коды.

Пример таблички (бабосики):

Display	Friendly Code	Numerical Code	Hex Code	Description
€	€			Euro
₣		₣	₣	Franc
₧		₧	₧	Peseta
₤			₤	Lira

Посмотреть список char-codes для
Spanish, Italian, German, French

Комментарии к заметке

Теги:
html

Забытые теги... CSS: list-style-position

Mon, 26 Oct 2009 06:26:10 +0200

Сегодня речь о свойстве CSS list-style-position? И что, а зачем? Да вот зачастую отступы для булитов в списках, все делают падингами-маргинами, и зачастую они просто вылазят вне своего блока, когда кто-то что-то обнулит и забудет. И тут на помощь приходит это свойство, оно попросту указывает куда тулить эти самые булиты, то ли вне, то ли внутрь ;)

По умолчанию, значение outside, но есть ещё

{ list-style-position: inside }

Выглядит это так:

Пример
Рыбного

текста

Можно даже с помощью джиквери сделать лесенку в одном и том же списке ;)) Каждому чётному или не чётному присвоить это свойство ;)

ps: О, пора переименовать рубрику %) Наверное в забытые уголки HTML, или что-то в этом духе.

Комментарии к заметке

Теги:
css
html > tags > Забытые тэги

Advancing Textarea (Google chrome hints)

Thu, 03 Sep 2009 11:37:44 +0200

TextArea гибкий и расширяемый тэг. У него есть удобный параметр wrap, который определяет правило переноса строк. Имеет два значения hard (по-умлчанию) и ~~soft~~ off :)

Добавив ивент onclick="select();" мы можем превратить его в удобный инструмиент для копипаста ;)

В конечном итоге получим простой сриптик

<!-- со скролом, для длииинных строк -->
<textarea onclick="select();" style="width: 600px; height: 36px;" wrap="off"></textarea>
<!-- без скрола -->
<textarea onclick="select();" style="width: 600px; height: 16px;"></textarea>

Хром умеет ресайзить любые textarea, это можно ограничить или упразнить

.limit_ta {
	/* ограничиваем textarea по высоте и ширине */
	max-width: 100px; 
	max-height: 100px;
}
.cancel_resize {
	resize: none; /* отключаем ресайз textarea */
}
.wrapoff {
	/* css analog wrap='off' */
	white-space: nowrap;
	overflow: auto;
}

Комментарии к заметке

Теги:
html
шпаргалка

HTML & iframe & IE

Thu, 06 Aug 2009 02:58:27 +0200

Как сделать iframe в ИЕ без границ/бордеров? Написать параметр frameborder="0"

Как сделать iframe в ИЕ прозрачным? Написать параметр allowTransparency="true"

Только в ИЕ, не пропусти!

Комментарии к заметке

Теги:
html > tags > iframe

crossbrowser click event (DOM)

Sat, 18 Jul 2009 20:32:52 +0200

var clickEvent:Object = doc.createEvent("MouseEvents");
clickEvent.initMouseEvent("click");
HTMLElement.dispatchEvent(clickEvent);

С помощью dispatchEvent мы напрямую бросаем ивент(событие) в модель ивентов. Использовать можно, так же и для других событий ;)

Комментарии к заметке

Теги:
html > w3c > DOM
browsers > crossbrowser
javascript

Забытые теги... tabindex (параметр)

Fri, 10 Jul 2009 15:14:11 +0200

Это параметр, который устанавливает поочерёдность переключения элементов, при помощи кнопки Tab, на хтмл-страничке. Например, нужно для установки очерёдности переключения в форме логина/пароля, когда нажав таб, мы попадаем на ввод пароля, а не на ссылку "забыли пароль" или что-то ещё в таком духе.

Доступен он для <A>, <AREA>, <OBJECT>, <BUTTON>, <INPUT>, <SELECT>, <TEXTAREA>

Параметр как бы есть, и много где встречается, но в большенстве случаем, о нём никто не думает %) Это как бы ньюансировка, на которую не всегда хватает времени.

Комментарии к заметке

Теги:
html > tags > Забытые тэги

Забытые тэги... BDO

Fri, 12 Jun 2009 16:20:58 +0200

Замечательный тэг %) Кто о нём знает, отпишитесь ;))

BDO - Bi-directional Override

Что же он делает - всего лишь указывает направление текста, слева-направо, справа-налево ;) через параметр dir (дирекшон)

rtl - right to left
ltr - left to right (по умолчанию)

<bdo dir="rtl">Sample Fun Text</bdo>

Выглядит вот так: Sample Fun Text
А на самом деле, направление текста можно изменить у всех текстовых блоках, через css

div { 
  direction: rtl
}

ps: Также параметр dir есть у тега HTML

<HTML dir="RTL">

Комментарии к заметке

Теги:
html
html > tags > Забытые тэги

Забытые тэги... BDO

Fri, 12 Jun 2009 16:20:58 +0200

rtl - right to left
ltr - left to right (по умолчанию)

<bdo dir="rtl">Sample Fun Text</bdo>

div { 
  direction: rtl
}

ps: Также параметр dir есть у тега HTML

<HTML dir="RTL">

Комментарии к заметке

Теги:
html
html > tags > Забытые тэги

Забытые тэги… lowsrc (ну не совсем тэг, параметр)

Wed, 10 Jun 2009 03:37:27 +0200

Если на странице нужно загрузить большие картинки, и что бы наш любимый пользователь не скучал, мы можем ему скормить картинки размером поменьше, или картинку прелоадера

<input type="image" lowsrc="btn_.png"  src="btn.png">
<img lowsrc="img_.png" src="img.png">

Сквозь CSS путь открыт только с современных браузерах, и то с помощью обманки :) Укажем в ЛоуСрц параметр "thumb" и потом используем один селектор, что бы картинке сделать фоновую картинку

img[lowsrc="thumb"] { background-image: url(img_.gif); }

В JavaScript все ещё проще ;)

image_obj.lowsrc = 'img_.gif';

Комментарии к заметке

Теги:
html > tags > img > lowsrc
html > tags > Забытые тэги