Парни помогите, целый день бьюсь над проблемой но так и не могу решить.
Нужно сделать страничку максимально похожею на ту что предоставлена на скрине
делаю так
| Код |
.popup{}
.popup>.top,
.popup>.bottom{zoom:1;height:12px;overflow:hidden;}
.popup>.top:after,
.popup>.bottom:after{content:' ';clear:both;display:block;width:0;height:0;overflow:hidden;font-size:0}
.popup>.top>*,
.popup>.bottom>*{overflow:hidden;text-indent:-9999px;display:block;}
.popup>.top i,.popup>.top b,.popup>.bottom i,.popup>.bottom b{width:13px;background:url(../images/popupCorners.png) 0 0 no-repeat;
height:12px;}
.popup>.top i{float:left;}
.popup>.top b{float:right;background-position:100% 0;width:12px;}
.popup>.bottom i{float:left;background-position:0 100%;}
.popup>.bottom b{float:right;background-position:100% 100%;width:12px;}
.popup>.top u,
.popup>.bottom u{height:11px;margin:0 12px 0 13px;background:#fff;}
.popup>.top u{border-top:1px solid #c2c2c2;}
.popup>.bottom u{border-bottom:1px solid #c2c2c2;}
.popup>.middle{border:1px solid #c2c2c2;border-width:0 1px;background:#fff;padding:0 11px;}
.popup .popAct{padding:0 0 7px;text-align:center;font-weight:bold;font-size:0;}
.popup .popAct>a{padding:0 0 0 17px;background:url(../images/popupIcons.png) 0 6px no-repeat;}
.popup .popAct>a{display:-moz-inline-stack;display:inline-block;zoom:1;font-size:18px;}
.popup .popAct>a+a{margin-left:10px;}
.popup .popAct>a.save{}
.popup .popAct>a.cancel{background-position:0 -94px;}
.popup .images{position:relative;left:30px;}
.popup .in_left{float:left;position:relative;left:110px;top:-85px;margin-right:10px;}
.popup .in_left input.grey{font-size:18px;font-family:tahoma,arial,sans-serif;padding:0px 0 0;
color:#c2c2c2;font-weight:bold;border:1px solid #c2c2c2;margin-bottom:5px;}
.popup .in_left input.blue{font-size:18px;font-family:tahoma,arial,sans-serif;padding:0px 0 0;
color:#0090ff;font-weight:bold;border:1px solid #c2c2c2;margin-bottom:5px;}
.oEditAct{font-size:0;}
.oEditAct>*{display:-moz-inline-stack;display:inline-block;zoom:1;background:url(../images/editIcons.png) 0 0 no-repeat;
width:20px;height:20px;margin-left:1px;}
.oEditAct>*:first-child{margin-left:0;}
.oEditAct .pero{background-position:0 0;width:10px;}
.oEditAct .zamok{background-position:0 -100px;width:20px;}
.oEditAct .kulek{background-position:0 -200px;width:17px;}
.oEditAct .vopros{background-position:0 -300px;width:19px;}
|
| Код |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>iFly</title>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
<link rel="stylesheet" href="styles/layout.css" type="text/css"/>
<!--[if IE]><link rel="stylesheet" href="styles/ie.css" type="text/css"/><![endif]-->
</head>
<body style="background:#aaa;">
<div style="width:600px;padding:0 0 25px 0;margin:0 auto;heigth=270px">
<div class="popup">
<div class="top"><i> </i><b> </b><u> </u></div>
<div class="middle">
<div class="popupHead">
Мой профиль > Оброзование > ВУЗ
</div>
<div class="images" style="top:25px"><img src="images/pero.png" /></div>
<div class="in_left">
<input class="grey" type=text readonly="true" value="Страна" size=15 maxlength=15 /><br />
<input class="grey" type=text value="№ части" size=15 maxlength=15 /><br />
<input class="grey" type=text value="Звание" size=15 maxlength=15 /><br />
</div>
<div class="in_left">
<input class="grey" type=text value="Год начало" size=15 maxlength=15 /><br />
<input class="grey" type=text value="Год окончания" size=15 maxlength=15 /><br />
</div>
<div class="position">
<div class="in_oEditAct" style="margin-left: 87%;">
<div class="oEditAct"><a href="#" class="zamok" ></a>
<a href="#" class="kulek" ></a>
<a href="#" class="vopros"></a>
</div>
</div>
<div class="popAct">
<a class="save" href="#">Сохранить</a>
<a class="cancel" href="#">Отмена</a>
</div>
</div>
</div>
<div class="bottom"><i> </i><b> </b><u> </u></div>
</div>
</div>
</body>
</html>
|
Так как в css я применяю float то естественно текст с право огибается и выходит совсем не так как нужно ((( |
