-
HTMLbook.Ru
verify
приклеить
http://devaka.ru/articles/seo-beginning
http://www.searchengines.ru/
ya.ru
javascript.ru
ENG
JQ Unix_API: HotKey sig w3c.certif
mime-types
microformats (hCard as a prime)
https://developer.mozilla.org/en/CSS
http://mainview.ru/css/realistichnyj-hover-effekt-s-jquery
http://web.izjum.com/jquery-icon-hover
http://tutsvalley.ru/js/jquery/fresh-bottom-slide-out-menu-with-jquery.html
http://neutron.com.ua/cms/krasivoe-animirovannoe-menyu-s-pomoshhyu-jquery/
http://jquery-docs.ru/effects/stop/
http://anton.shevchuk.name/javascript/jquery-for-beginners-effects/
http://psywalker.ru/Forum/JS/Primitive/Dom-Zadachi/Menu-Plavnoe/Div-exit/1.html
-
equ_fixed_column.html
Колонки
-
abitur2011.html
Пример с картинкой 100х100% процентов монитора+ после контент.
-
balance_probe3.html
Поле баланса - сверху ФИО, снизу тянущееся поле баланса
-
first_child.html
Как видно из примера :first-child работает только в случае, когда указанный элемент (тобишь element:first-child) первый в родительском блоке (примеры 1 и 2).
-
Кабинет
Первая версия кабинета
-
Вертикальное выравнивание через inline-block
by Psywalker
-
Блочная ссылка, если флеша нет
в новой опере не работает - баг с флешом(всегда поверх любого блока) пофиксен.
- Уголки на блоках(заготовка мини-макета) /* из минусов - плюёт на ширину содержимого*/
-
Progress bar overflow
Progress bar clipping
Прогрессбар с переходм цвета цифр при наезде на них бегунка.
- Скругленные уголки без графики через пустые теги <b>
-
drag_n_drop_img_to_text.html
Перетащить картинку в блокнот текстом (без JS).
- Скругленные уголки без графики через •
- Мой макетик в розовых тонах
- Две колонки, футер прибит(осторожно - жуткая цветовая схема)
- Ссылки в текстовом формате
- Подстветка синтаксиса на JS. Так и не доделал, но есть на что посмотреть
- Кусочек от реферата по RichEdit
- Сайт козерога.
- Исходник на С для просчета погрешностей в лабe M5 по физике
- Погрешности - исходник
- Интерпретатор с стиле C++(на работоспособность не проверялось)
- XML - проба
- Исходник консольной менюшки С++
-
Если бы повышение рейтинга за сообщение сказывалось на поисковом индексе ( как тег ),
было бы реально полезно.
http://www.hmsite.net/
Бесплатный хост php+MySQLhttp://devaka.ru/articles/actual-themes-2009 http://devaka.ru/articles/seo-beginning http://www.searchengines.ru/ http://forum.htmlbook.ru/index.php?showtopic=20993
-
sigma77:
Но в качестве якорей лучше использовать сами элементы и ссылаться на из id, т.е. <a href="#block">Перейти> <div id="block">Содержимое</div>
-
Документация CSS2.1
Документация CSS 2 (rus)
Margin collapsing tutorial
Margin collapsing tutorial 2
Simple
- SVG scalable graphic (INTUIT)
- float. Теория и практика. Баги IE
-
http://designformasters.info/posts/adaptive-layout/
Адаптивная разметка.
-
http://designformasters.info/posts/usability-rules-psychology-terms/
Юзабилити
-
http://designformasters.info/posts/chastyie-voprosyi-o-css/
Частые вопросы по css(FAQ)
- Внедрение FLASH
-
http://habrahabr.ru/blogs/css/16058/
deprecated tag removing
-
http://spyrestudios.com/mega-collection-of-cheatsheets-for-designer-developers/
коллекция шпаргалок по WEB
-
http://ru.wikipedia.org/wiki/Мнемоники_в_HTML
Спец символы HTML
- Селекторы
- Lightmapper/v - интерактивные карты изображений с использованием векторной графики.
- Облако тегов
-
Подборка сайтов
-
http://cssing.org.ua/
Трюки и новое в CSS
-
http://trifler.ru/blog/
статьи по верстке и обзоры фич css
-
http://www.tigir.com/
Javascript, CSS, HTML +PHP (base level)
-
http://www.webmasterschool.ru/articles/
HTML,CSS, PHP и MySQL
-
http://xmlhack.ru/
XML
-
http://habrahabr.ru/bloglist/
Много всякого на основе блогов.
-
http://easywebscripts.net/html.php
Интересный сайтец.
-
http://www.spravkaweb.ru/download
Справочник по JavaScript, PHP, HTML, CSS
-
http://dimox.name/
Свобода слова вебмастерского
-
http://blog.sribna.com/
WEB-программирование и не только..
-
http://stm.dp.ua/web-design/color-html.php
HTML- цвета
-
http://pyha.ru/articles/
Статьи по JavaScript и PHP.
-
http://xhtml.ru/
Много интересных статей по CSS, JS..
-
http://www.htmlbook.ru
Справочник по тегам HTML, CSS.
-
http://chikuyonok.ru/
Eclipse, HTML/CSS, JavaScript, XSL, Ph.
-
http://www.artlebedev.ru/tools/technogrette/html/
Студия Артемия Лебедева. Статьи по HTML, CSS..
-
http://cssing.org.ua/
-
Шрифты WEB
-
http://obzor.com.ua/dtp/book-design/index.html
Оформление книги. Редактору и автору
-
http://habrahabr.ru/search/?q=eot&target_type=posts
Типографика на Habrahabr'e
- Проблемы шрифтов
- Безопасные шрифты для WEB
- Типография WEB
- про печатные размеры шрифта в вебе
-
http://obzor.com.ua/dtp/book-design/index.html
-
Браузеры
-
FF
span:first-letter { }/*in FF doesn't work without*/
author: htmlbook::mishka2
a:hover span:first-letter {
color: red;
}
- Вертикальное выравнивание для input submit in FF
- background-image: () 50% 0; Bag and desition
- Отрубить resize для textarea в Chrome\Safari
-
http://forum.htmlbook.ru/index.php?showtopic=25673
Баг FF - :hover + :first-letter
- 20 CSS - решений по исправлению багов.
- position:relative;overflow:hidden;border-top; Браузеры
- Quirkmode
- BOX-model
- IE HasLayout
- ie bags
- IE8 bugs
- IE 6-7 input background bag
- Подборка багов IE6; 25+
- Превращаем IE6 в IE7(JS)
- Про фильтры для IE
-
IE
При использовании всплывающего меню типа "Уши"
(т.е. при hover появляется панель слева и справа..ессно они absolute)
использование задание полупрозрачного фона через градиенты дает очень неприятный
эффект - фокус сбрасывается при попытке наветси на "уши".
..при вложенности блока в табличную ячейку.
font-size 100,1% && IE
Дело в том, что это в основном касается масштабируемых единиц измерения, таких em и браузера IE. Т.е. когда ты например в качестве базовой единицы измерения на body вешаешь em, то font-size: 100%; в IE почему то (было вроде доказано, поэтому пришли к такому действию) начинает фонить и вычислять размер блоков немного неправильно. А вот font-size: 100.1%; как раз делает всё как надо. Я кстати раньше, когда болел этими единицами измерения, всегда в условных комментариях для IE писал font-size: 100.1%;
psywalker margin:0 auto; для вложенного блока в блок сdisplay: inline-block (он же display: inline + zoom : 1;)
делает его поведение в IE как у block - т.е. родительский блок занимает всю ширину. Ссылки с position: fixed - считает текст(картинки и пр) областью неактивности и вообще не ссылкой. Обратный эффект при применении filter - только содержимое(текст, бордюр) становится областью активности. Неадекватно себя ведет при задании min-width для столбцов таблицы - при растягивании ширины столбца продолжает высчитывание позиций элементов, как если бы ширина была равна min-width. Лечится только absolute + td:relative; float\text-align - бесполезно. картинка с абсолютом и высотой 100% занимает min-height от высоты родительского блока. есть непонятки с 100% высотой\шириной. порой становится от высоты\ширины картинки зависящим.. толи ошибки в коде, толи из-за inline-block+replaced element category. border: 0px; отрубает border, не отрубающийся через border: none;(input type=text) C IE7:
img.bicubic { -ms-interpolation-mode:bicubic }/*better quolity*/
img.nearest { -ms-interpolation-mode:nearest-neighbor }/*as default*/
!!! bicubic в IE7(возможно и ниже) имеет побочный эффект: при непропорциональном растяжении картинки (была png-шка сплошная) появляются заметные полоски более светлого цвета.input по умолчанию имеет inline in FF && block in OPERA
box-sizing: border-box;Таблицы в IE7
надо просто сменить доктайп на Transitional (или вообще на HTML4). При XHTML Strict в ИЕ7 таблицы себя дебильно ведут.
Great rashСделать слой 100% высоты - 90px сверху и снизу
<div class="body" style="position: absolute; top: 90px; bottom: 90px; overflow: auto; width: 100%;">
<!--[if lt IE 7]>
<style type="text/css">
.body {
height: expression(document.body.clientHeight - 180 + 'px'); /* 90 + 90 = 180 */
}
<![endif]-->
margin(%) у absolute не схлопываются OPERA {use top\left\..etc}
margin(non-%) у absolute ведут себя как положено
2 float, float + clearfix + non-float: никогда не схлопываются.
float + non-float, relative: схлопываются
1. .block {
2. min-height:200px;
3. height:auto !important;/*ignored by ie5-6 but not by oth*/
4. height:200px;/*min-height for ie5-6*/
5. }
OPERA В списке есть таблица. для нее установлено margin-bottom: 30px; При ul li, ul{ overflow: visible;} margin не учитывается. Приходится ставить ul{overflow:hidden;}
position:relative; блок не обрезает дочерний, если у него position: absolute;
либо padding-bottom:1px;
...вернее сказать - он не обрезается и не отображается.
...вернее сказать - не всегда Оо
В 11 версии исправили, похоже. В предыдущей версии баг исправлялся через display: table; overflow; height:100%; Почему он то появлялся, то исчезал - если внизу скролла+F5 Только тогда видно.
fixed слой height: 100% при прокрутке иногда отстаёт. пришлось задать 140% и top: -20%;Shift-Web
Ещё IE7 и ниже не понимает такого вида конструкции:
background: #fcfefe url('/./img2/url.png') 5px 20% repeat-x;
http://htmlbook.ru/blog/oshibka-s-blochnymi-ssylkami-v-ie6 http://htmlbook.ru/blog/obzor-haslayoutВ браузере Internet Explorer 7 обнаружился баг при сочетании background-color с разными значениями. К примеру, если задать цвет фона красным, как показано ниже, то фон в IE7 вообще не отобразится.
div { background-color: red; /* В IE7 не применяется */ background-color: rgba(255, 0, 0, 0.5); } div { background-color: red; /* В IE7 не применяется */ background-color: rgba(255, 0, 0, 0.5); } Решается это заменой свойства background-color на background. div { background: red; /* А это работает */ background: rgba(255, 0, 0, 0.5); } div { background: red; /* А это работает */ background: rgba(255, 0, 0, 0.5); }
Однако здесь есть один нюанс. Валидатор CSS «ругается» на background, если ему задать значение в формате RGBA. Но при этом корректно относится к background-color. В общем, как всегда, приходится выбирать между браузерами и валидностью.
-
FF
-
Верстка
-
Simple
-
GreatRash:
#divsection { font-size: 0; line-height: 0; letter-spacing: -1px; } #divsection div { display: inline-block; width: 150px; border: 1px solid black; margin: 0; font-size: 12px; line-height: normal; letter-spacing: normal; }
- Оформление списков 45 градусов между маркером род. списка и дочернего. Центровка текста.
- Обводка текстом сложных фигур
- О черточках и тире
- Типография: правильно пишем цифры
- Семантика 2,3,4 уровней. микроформат hCard
- Забытые теги
-
http://trifler.ru/blogcss.htm
min-heihgt;
-
Игнорирование table height:100%
html,body{
height:100%;
margin:0px;
padding:0px
}
Теперь при указании высоты в стилях таблицы высота должна быть 100%. -
Убрать отступ у < img >
1. img { display: block }
2. img { vertical-align: bottom }
3. img { line-height: 0; } -
Cellpadding\spacing
table{
padding : 0;
margin : 0 auto;
border : 0;
border-collapse: collapse;
}
table tr td{
margin : 0;
padding: 0;
border:0;
}
img{
border:0;
}
-
http://webmolot.com/recipe/virtus/4/virtus_task_4_new.html
Кроссбраузерное решение для position: fixed;
- Вёрстка сайта. Ещё один подход.
-
http://trifler.ru/blog/post_1260540815.html
Верстка. Пример шаблона
-
http://trifler.ru/blog/post_1258478347.html
Верстка. Пример шаблона
-
http://layouts.ironmyers.com/
Верстка . Набор стандартных шаблонов для сайтов.
-
GreatRash:
-
Уголки
-
http://www.yanajy.com/sdelay-sam/borders-and-corners-using-html-and-css.html
Делаем рамки и закругленные углы с помощью html и css.
-
http://john.albin.net/css/roundedcorners
способы закругления уголков ~ 4%5 (eng)
-
http://htc-cs.ru/corners/index.html
пример верстки уголков с картинками
-
http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml
пуленепробиваемые уголки. Картинки (eng)
-
http://www.alistapart.com/articles/mountaintop/
уголки Mt.Everest на *.gif
-
http://green-beast.com/experiments/css_smart_corners.php
Умные углы на *.png(ie+)(eng)
-
http://www.smileycat.com/miaow/archives/000044.php
Уголки - еще куча способов(eng)
-
http://www.cssplay.co.uk/boxes/chunky.html
Уголки с ярлыком. Без картинок.(eng)
-
http://www.yanajy.com/sdelay-sam/borders-and-corners-using-html-and-css.html
-
Колонки
-
http://trifler.ru/blog/i/layouts/absolute/anchor.htm
Absolute
- Одинаковые колонки через border
- Метод Чикуёнка
-
.cols{
overflow:hidden;
_zoom:1;
}
.cols .col1,.cols .col2,.cols .col3{
padding-bottom:10000px;
margin-bottom:-10000px;
}
-
http://trifler.ru/blog/i/layouts/absolute/anchor.htm
- Footer
-
Прозрачный фон
- Про прозрачный фон
- Прозрачный фон Светланы Байер (градиент в IE)
-
non-inherited opacity
div.opacity{
width: 100%;
position: absolute;
top: 0;
bottom: 0;/*why not height: 100% ? equ */
background: url(vetton_ru_749.jpg) repeat;
_height: expression(document.body.clientHeight+'px');/*for ie 6*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
filter:alpha(opacity=70); /* IE +*/
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
opacity: 0.8; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
}
div.content { position: relative; z-index: 1;}
http://psywalker.ru/Forum/opacity/main-2.html -
http://tigir.com/alpha_png.htm
alpha-канал *.png для ie
- png in IE6 and less (expression method)
-
http://designformasters.info/posts/creative-use-of-png-transparency/
Креативное использование *.png
-
Simple
-
Оптимизация
- Оптимизация php в 22 раза
- Изображения (оптимизация по техногрету).
- Rendering optimization from Google
- Руководство по поисковой оптимизации для начинающих от Google
- Оптимизация времени загрузки сайтов [ webo.in]
-
Как я выполнял советы webo.in
- Оптимизация JS
- Оптимизация [htmlbook/forum/JS]
- Убрать загрузку картинки на hover'e
- Картинки через data:url [CSS3 expected]
-
SEO
-
http://www.sitemaps.org/ru/protocol.php
XML-формат файла Sitemap
-
http://help.yandex.ru/webmaster/?id=996567
Создание файла robots.txt
-
http://help.yandex.ru/webmaster/?id=1108685
Добавление адресной информации в сниппет (Яндекс)
- О теге META
-
http://help.yandex.ru/webmaster/?id=1111670
О микроформатах (Яндекс)
-
http://www.sitemaps.org/ru/protocol.php
-
HoverActive LinkVisited
http://forum.htmlbook.ru/index.php?showtopic=25005&st=20
http://forum.htmlbook.ru/index.php?showtopic=24593
- про использование псевдо классов для ссылок
-
JavaScript
-
Simple
- Встраиваем Google map
- Список сервисов Google
-
http://ruseller.com/lessons.php?rub=2&id=986
Плавная замена картинок
- Недетский коддинг - получение id
- image from rgb to grayscale (canvas)
- Асинхронная загрузка файлов
- Разница между таймерами
-
http://xregexp.com/
X Reg Exp
-
http://www.regular-expressions.info/refadv.html
Regular Expression Advanced Syntax Reference
- Всплывающие подсказки
- Способы идентификации в интернете
- Проверка форм от psywalker'а
- Проверка паролей на javascript
- 10 лучших функций на JavaScript
- Пятничные сниппеты. JavaScript, продолжение стилизации файл-инпута
- Стилизуем select
- Рецепты JS (tigir.com)
- Изменение страницы через DOM
- Events
-
AJAX
-
http://vlvit.ru/uroki-po-jquery/vkladki-na-css-i-jquery.html
JQuery tabs\also at this site are some articles AJAX
-
http://habrahabr.ru/search/?q=ajax
Хабрахабр об AJAX
- internet-technologies
- allajax.ru
-
http://vlvit.ru/uroki-po-jquery/vkladki-na-css-i-jquery.html
-
JQuery
- JQuery UI - tabs
- TAB on JQuery (Не дергаются)
- JQuery для начинающих
-
http://xo66ut.ru/archives/tag/jquery
PHP, MySQL, Javascript, JQuery, ExtJS, UML, и другие интернетости…
-
http://tutsvalley.ru/js/jquery/sozdanie-dinamicheskix-vkladok-s-pomoshhyu-biblioteki-jquery.html
Valley of tutorials and advices for webmasters
-
http://www.linkexchanger.su/category/jquery-dokumentaciya
JQuery книжка
-
http://www.rsdn.ru/article/inet/jQuery.xml
Статья про JQ на rsdn
-
Simple
-
Trics
- Анимационное таб-меню на CSS 3
- media-screen Применение media-screen почему не работает при увеличении разрешения экрана увеличивался и текст
- Про вертикальное выравнивание http://forum.htmlbook.ru/index.php?showtopic=19320
- http://forum.htmlbook.ru/index.php?showtopic=25043 Отцентровать ul по ширине
- Равноудаленные элементы
-
http://www.cssplay.co.uk/menus/new-dropdown.html
drop-down меню на a:active (eng) основано на фиксированной ширине outer для <a> and float; a:active{margin-right:1px;} выпихивает float- ul.sub и он становится видимым
- Равномерный фон под текстом
- убрать обводку в FF input:focus {outline: none;}
-
Равноудаленные элементы
#movers-row{ text-align:justify}
#movers-row span{ display:inline-block; width:100%; }
- Table RULES none Все линии отсутствуют cols Линии между столбцами rows Линии между строками groups Линии между группами столбцов и строк all Все линии присутствуют (по умолчанию) Ставятся так: Код < table rules="rows" >