Пример верстки равноудаленных блоков #
* { 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%; }
.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%; }
текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст
ДЕМО: Смотреть
Полупрозрачный блок #
Блок валидный, отображается правильно во всех последних браузерах.
И еще один нюанс, по моему хороший, сам блок прозрачный а шрифт нет. ДЕМО смотреть
Привет!
Это полупрозрачный блок.
И еще один нюанс, по моему хороший, сам блок прозрачный а шрифт нет. ДЕМО смотреть
Карта Украины для сайта #
Простая форма без таблиц #
Очень часто сталкиваюсь с созданием форм. И сейчас я приведу как просто обойти таблицы и даже блочную верстку, но при этом получить правильную ровную форму.
!семантично
demo
!семантично
label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;
}
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;
}
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;
}
Вот и все. Демо Текстовый ролловер