Sutar
BANNED | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii
я не знаю) я эту част спёр с другого сайта)))
Вот такой деффект:
Код: <div class="Group">
<span class="GroupLeft" style="width: 100px;">Код</span>
<input type="text" id="captcha" maxlength="5" value="" onblur="return CheckСaptcha();" style="width: 80px;"/>
<img style="position: absolute; margin: 2px 0px 0px 10px; cursor: pointer;" id="ImgCaptcha" onclick="return ChangeCaptcha();" alt="" src="/images.html"/>
<span class="status_icon" id="icon_4"></span>
<div class="InfoHidden InfoRed" style="margin: 3px 0px 0px 122px; display: none;" id="infoСaptcha">Код указан неправильно</div>
</div> |
И прилагающие к ним стили:
Код:
.InfoHidden {
display: block;
padding: 6px 10px;
margin: 0px;
position: relative;
color: #2c3e50;
border: 1px solid #c5d3dc;
background-color: #e8f6ff;
background-image: linear-gradient(to top, #dbf1ff, #e8f6ff);
box-shadow: 1px 1px 5px rgba(0,0,0,.19);
border-radius: 3px;
}
.InfoRed
{
color: #aa6666;
border: 1px solid #f5c1ba;
background-color: #ffedea;
background-image: linear-gradient(to top, #ffe6e3, #ffedeb);
}
.InfoHidden:after {
background: url('../images/blue.png') no-repeat;
display: block;
content: "";
position: absolute;
left: 16px;
bottom: 100%;
width: 16px;
height: 9px;
}
.InfoRed:after { background: url('../images/red.png') no-repeat; }
.status_icon { display: none; margin-left: 10px; position: relative; width: 13px; height: 11px; top: 0px; }
.icon_green { background: url('../images/igreen.png') no-repeat; display: inline-block; }
.icon_reed { background: url('../images/ired.png') no-repeat; display: inline-block; }
.Group {
position: relative;
display: inline-block;
line-height: 18px;
vertical-align: middle;
margin-bottom: 10px;
width: 100%;
}
.GroupLeft {
width: 35%;
text-align: right;
color: #2c3e50;
font-family: Segoe UI;
font-size: 14px;
font-weight: 700;
line-height: 18px;
margin: 4px 18px 0px 0px;
display: inline-block;
vertical-align: top;
} |
может вы посоветуете, как лучше через div реализовать вид table?)
т.е. чтоб была строка div в основание (которая отвечата за полную ширину блока, в котором находится div)
и в нем, был слева текст справа поля для ввода) ну и иконки статуса поля....
просто целый день над этим голову ломаю((
и никак мудро не могу реализовать(( |
