Разделы
Теги | RSS © 2008 – 2017
Контакты
email: igor@veselov.sumy.ua
skype: utz0r2

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


Очень часто сталкиваюсь с созданием форм. И сейчас я приведу как просто обойти таблицы и даже блочную верстку, но при этом получить правильную ровную форму.
<form>
<label for="name">Name</label>
<input id="name" name="name"><br>
<label for="address">Address</label>
<input id="address" name="address"><br>
<label for="city">City</label>
<input id="city" name="city"><br>
</form>

!семантично
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 href="#">Не активная<span>Активная</span></a>

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


Захотелось мне выделять свои комментарии от других.
Например вот как здесь: http://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 в DLE


Ранее в посте Пропорциональное масштабируемое видео и валидный youtube я привел код как выглядит валидный код ютуб плеера который отображается во всех браузерах.

Теперь пойдет о мини хаке для ДЛЕ.

Откройте \engine\classes\parse.class.php на строчке где-то 540-овой найдите:
return '<!--dle_youtube_begin:'.$url.'--><object width="'.$this->video_config['width'].'" height="'.$this->video_config['height'].'"><param name="movie" value="http://www.youtube.com/v/'.$video_link.'&hl=ru&fs=1"></param><param name="wmode" value="transparent" /><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'.$video_link.'&hl=ru&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="'.$this->video_config['width'].'" height="'.$this->video_config['height'].'"></embed></object><!--dle_youtube_end-->';

и замените на
return '<!--dle_youtube_begin:'.$url.'--><!--[if IE]><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'.$this->video_config['width'].'" height="'.$this->video_config['height'].'"><param name="movie" value="http://www.youtube.com/v/'.$video_link.'&amp;hl=ru&amp;fs=1"></param><![endif]--><!--[if !IE]>--><object type="application/x-shockwave-flash" data="http://www.youtube.com/v/'.$video_link.'&amp;hl=ru&amp;fs=1" width="'.$this->video_config['width'].'" height="'.$this->video_config['height'].'"><!--<![endif]--><param name="wmode" value="transparent" /><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param></object><!--dle_youtube_end-->';

Теперь последующее новое видео с ютуба будет отображаться валидно!

Заказчик-исполнитель, жизненно!


Пропорциональное масштабируемое видео и валидный 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
<div id="containingBlock">
  <div class="videoWrapper">
    <div>
      <!--[if IE]>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="480" height="295">
        <param name="movie" value="http://www.youtube.com/v/mDRYnaajUcY&amp;hl=en&amp;fs=1&amp;showinfo=0" />
      <![endif]-->
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/mDRYnaajUcY&amp;hl=en&amp;fs=1&amp;showinfo=0" width="480" height="295">
      <!--<![endif]-->
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <p><a href="http://www.adobe.com/go/getflashplayer"><img alt="Get Adobe Flash player" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"/></a></p>
      </object>
    </div>
    <p>Following is the description of the video embeded in this document</p>
    <p>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.</p>
  </div>
  ...
</div>

Очень мне нравится девочка с видео демки -)

ДЕМО: http://veselov.sumy.ua/uploads/files/demo/003/index.html
«»
Вверх