Простая форма без таблиц #

Очень часто сталкиваюсь с созданием форм. И сейчас я приведу как просто обойти таблицы и даже блочную верстку, но при этом получить правильную ровную форму.











!семантично
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

  

    

      
      
      
      
        
        
        

Get Adobe Flash player


      

    

    

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

css map и jquery notes

Но самая классная как по мне реализация это jquery notes. Красиво юзабельно, но яваскрипт тяжел.
demo: http://jquery-notes.rydygel.de/samples.php

Image Maps c помощью спрайта #

Это один из простейших способов построения карты.

Заключается в смене позиционирования бекграунда при наведении на определенную зону картинки.
Недостаток большая картинка и неюзабильно.

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