Простая форма без таблиц #
Очень часто сталкиваюсь с созданием форм. И сейчас я приведу как просто обойти таблицы и даже блочную верстку, но при этом получить правильную ровную форму.
!семантично
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
Image Maps c помощью спрайта #
Это один из простейших способов построения карты.
Заключается в смене позиционирования бекграунда при наведении на определенную зону картинки.
Недостаток большая картинка и неюзабильно.
CSS:
dd#monitorDef{ top: 65px; left: 114px; }
dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none; }
dd#monitorDef a span{ display: none; }
dd#monitorDef a:hover{ position: absolute; background: transparent url(office.jpg) -109px -317px no-repeat; top: -10px; left: -5px; }
dd#monitorDef a:hover span{
display: block;
text-indent: 0;
vertical-align: top;
color: #000;
background-color: #F4F4F4;
font-weight: bold;
position: absolute;
border: 1px solid #BCBCBC;
bottom: 100%;
margin: 0;
padding: 5px;
width: 250%;
}
HTML:
DEMO:
https://veselov.sumy.ua/uploads/files/demo/001/index.html
