В этом уроке мы рассмотрим создание шаблонов для сообщений на Вашем сайте. Основаны они на CSS.
Создадим блок, который будет ограничивать сообщения по ширине, чтобы они не расползались.
Это будет простой блок с CSS классом CONTAINER:
#container{
margin:0 auto;
margin-top:40px;
width:260px;
}
А уже в этот блок будем вставлять код с сообщениями.
Итак, для простых сообщений код будет такой:
CSS:
.clean-gray{
border:solid 1px #DEDEDE;
background:#EFEFEF;
color:#222222;
padding:4px;
text-align:center;
}
HTML:
<div class="clean-gray">Простое окошко сообщения</div>
Конечно же вы можете изменять CSS код по своему усмотрению, подстраивая цвета сообщений под дизайн Вашего сайта.
Для сообщений с иконками код следующий:
CSS:
.icon-yellow{
border:solid 1px #DEDEDE;
background:#FFFFCC url(img/icon-yellow.png) 8px 6px no-repeat;
color:#222222;
padding:4px;
text-align:center;
}
HTML:
<div class="icon-yellow">Clean message box</div>
Чтобы создать сплошные сообщения, то следует использовать следующий код:
CSS:
.solid-yellow{
background:#FFFFCC;
color:#222222;
padding:4px;
text-align:center;
}
HTML:
<div class="solid-yellow">Solid message box</div>
Для сообщений с закругленными углами код выглядит следующим образом:
CSS:
.round-a-ok{
background:#008000 url(img/round_green-left.png) left top no-repeat;
color:#FFFFFF;
text-align:center;
}
.round-a-ok div{
background:url(img/round_green-right.png) right bottom no-repeat;
padding:4px;
}
HTML:
<div class="round-a-ok"><div>Solid Ok message box</div></div>
Ну и наконец для сообщений с указателями код будет такой:
CSS:
.tooltips-ok{
background:#008000;
color:#FFFFFF;
text-align:center;
padding-top:4px;
}
.tooltips-ok div{
background:url(img/tips_green.png) left bottom no-repeat;
padding-top:4px;
height:18px;
}
HTML:
<div class="tooltips-ok">Solid message box<div></div></div>
Использование оригинального оформления сообщений придаст индивидуальности Вашему сайту, так что не пренебрегайте этим! Успехов!