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

Пример верстки равноудаленных блоков


* { margin:0; padding:0;}
.container { text-align: justify; text-justify:newspaper; }
.box{ display:-moz-inline-box; display:inline-block; vertical-align:top; text-align:left; width:200px; height:200px; background:red; }
.box p{ padding:10px;}
/*IE6*/* html .box{ display:inline; }
/*IE7*/* + html .box{ display:inline; }
.under{display:-moz-inline-box; display:inline-block; width:100%; }


<div class="container">
<div class="box"><p>текст текст текст текст текст текст текст текст текст текст текст текст </p></div>
<div class="box"><p>текст текст текст текст текст текст текст текст текст текст текст текст текст </p></div>
<div class="box"><p>текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p></div>
<div class="box"><p>текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p></div>
<span class="under"></span>
</div>

ДЕМО: Смотреть

Полупрозрачный блок


Блок валидный, отображается правильно во всех последних браузерах.

  <style type="text/css">
    .opacity {
      margin:40px;
      padding:20px;
      background:
      url(opacity/AAAAABJR.png);
      background:rgba(0, 0, 0, 0.5);
    }
  </style>
  <!--[if lte IE 7]>
    <style type="text/css">
      .opacity {
        zoom:1;
        background:#000;
        filter:alpha(opacity=50);
      }
      .opacity * {
        position:relative;
      }
    </style>
  <![endif]-->

  <div class="opacity">
    <h1>Привет!</h1>
    <p>Это полупрозрачный блок.</p>
  </div>


И еще один нюанс, по моему хороший, сам блок прозрачный а шрифт нет. ДЕМО смотреть

Карта Украины для сайта


Карта Украины для сайта

Стянул по быстрому откуда-то карту, может кому-то пригодится.
Карта Демо / скачать

update 30/09/11
Нашелся разработчик данной карты - kiphir
Вот ее оригинал http://rozumdim.com.ua/new/content/blogsection/7/47/lang,russian/

Спасибо ему за карту -)

upd: еще одна хорошая карта украины

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


Очень часто сталкиваюсь с созданием форм. И сейчас я приведу как просто обойти таблицы и даже блочную верстку, но при этом получить правильную ровную форму.
<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, а так как регистрация запрещена здесь, то подсвечивается только мои. Задача выполнена.
«»
Вверх