Карта Украины для сайта #
Стянул по быстрому откуда-то карту, может кому-то пригодится.
Карта Демо /
скачать
update 30/09/11
Нашелся разработчик данной карты -
kiphir
Вот ее оригинал http://rozumdim.com.ua/new/content/blogsection/7/47/lang,russian/
Спасибо ему за карту -)
upd: еще одна хорошая
карта украины
Простая форма без таблиц #
Очень часто сталкиваюсь с созданием форм. И сейчас я приведу как просто обойти таблицы и даже блочную верстку, но при этом получить правильную ровную форму.
!семантично
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;
}
demo
Текстовый ролловер(rollover) #
Очень просто реализовать текстовый ролловер(rollover):
a {
display:block;
width:100px;
background:#F2F2F2;
border:1px solid #DDDDDD;
font-size:14px;
line-height:26px;
color:#000000;
text-decoration:none;
text-align:center;
}
a:hover {
text-indent:-999em;
position:relative;
}
a span{
display:none;
}
a:hover span{
text-indent:0;
display:block;
position:absolute;
top:0;
left:0;
right:0;
}
Вот и все. Демо
Текстовый ролловер
Автор сайта другим цветом в комментариях DLE #
Захотелось мне выделять свои комментарии от других.
Например вот как здесь:
https://veselov.sumy.ua/273-100-multiyazych...ne.html#comment
Похожее что-то находил когда-то в нете.
Как сделал это я:
/engine/classes/comments.class.php перед
if( $row['is_register'] and $row['icq'] ) $tpl->set( '{icq}', stripslashes( $row['icq'] ) );
вставить
if( $row['is_register'] ) $tpl->set( '{color}', 'qwerty1' );
else $tpl->set( '{color}', 'qwerty2' );
И не забыть вставить в comments.tpl - {color}
То есть все кто зарегистрированы на сайте будут подсвечиваться классом
qwerty1, все остальные
qwerty2, а так как регистрация запрещена здесь, то подсвечивается только мои. Задача выполнена.
Пропорциональное масштабируемое видео и валидный youtube #
Пропорциональное масштабируемое реализовано за счет позиционирования блоков и процентных соотношений. Применимо на резиновых сайтах.
CSS
#containingBlock {
width:50%;
}
.videoWrapper {
position: relative;
padding-bottom:56.25%;
padding-top:25px;
height:0;
overflow:hidden;
}
.videoWrapper div,
.videoWrapper object {
position:absolute;
top:0;
left:0;
width: 100%;
height:100%;
}
Код видео с ютуба по умолчанию не валидный, здесь же он добавлен в соответствии стандартам
HTML
Following is the description of the video embeded in this document
This short clip is about YouTube widescreen formatting. It shows the two main formats (16:9, 4:3) and also explains the best way to create a Flash movie according to the new widescreen format.
...
Очень мне нравится девочка с видео демки -)
ДЕМО: https://veselov.sumy.ua/uploads/files/demo/003/index.html
css map и jquery notes #
Более продвинутая реализация Image Map. Суть работы та же как и в предыдущем примере. Описывать метод не буду, проще посмотреть демку
https://veselov.sumy.ua/uploads/files/demo/002/index.html
Но самая классная как по мне реализация это jquery notes. Красиво юзабельно, но яваскрипт тяжел.
demo: http://jquery-notes.rydygel.de/samples.php
