VPF::Верстка popup - Форум программистов

MrDmitry

Дата 16.12.2009, 02:43 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 556
Регистрация: 10.11.2006

Репутация: нет
Всего: нет

Парни помогите, целый день бьюсь над проблемой но так и не могу решить.
Нужно сделать страничку максимально похожею на ту что предоставлена на скрине
делаю так

Код



.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>&nbsp;</i><b>&nbsp;</b><u>&nbsp;</u></div>
        <div class="middle">
            <div class="popupHead">
                Мой профиль &gt; Оброзование &gt; ВУЗ
            </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>&nbsp;</i><b>&nbsp;</b><u>&nbsp;</u></div>
    </div>
</div>
</body>
</html>

Так как в css я применяю float то естественно текст с право огибается и выходит совсем не так как нужно (((

Это сообщение отредактировал(а) MrDmitry - 16.12.2009, 02:46

Присоединённый файл ( Кол-во скачиваний: 15 )

________________________________________.jpg 39,10 Kb

MrDmitry

Дата 16.12.2009, 18:31 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 556
Регистрация: 10.11.2006

Репутация: нет
Всего: нет

Ну что не кто не поможет? мне только со слоями надо разобраться, а т.к у меня не хватает знаний в области верстки web я не могу справится сам, уже весь нет перерыл :(

HARDMID

Дата 17.12.2009, 17:41 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 47
Регистрация: 10.12.2007

Репутация: нет
Всего: нет

Зачем же в дивах? о_О
То же самое можно весьма тупо и очень корректно сделать в таблице.

PS/ Многим не нравится слово "popup" smile

Это сообщение отредактировал(а) HARDMID - 17.12.2009, 17:41

MrDmitry

Дата 19.12.2009, 18:36 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 556
Регистрация: 10.11.2006

Репутация: нет
Всего: нет

Цитата(HARDMID @ 17.12.2009, 17:41)

В таблицах сделал, но программеры сказали что лучше мне все передалать в div :( :(

MrDmitry

Дата 19.12.2009, 23:46 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 556
Регистрация: 10.11.2006

Репутация: нет
Всего: нет

Парни ну помогите, срочно очень нужно, горю :(

MrDmitry

Дата 22.12.2009, 16:34 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 556
Регистрация: 10.11.2006

Репутация: нет
Всего: нет

в общем то с версткой разобрался, также разобрался с выпадающим меню(создавал тут тему)

Пример прикрепил
есть один прикол, в firefox 3.55 отображается нормально а вот в opera chrom и более ранних версиях firefox отображается не совсем верно :(
как быть?

Это сообщение отредактировал(а) MrDmitry - 22.12.2009, 16:44

Присоединённый файл ( Кол-во скачиваний: 3 )

______.rar 26,79 Kb

HARDMID

Дата 14.1.2010, 16:19 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 47
Регистрация: 10.12.2007

Репутация: нет
Всего: нет

Убери у u свойство:

Код


u { margin: 0px 12px 0px 13px; }

и сделай так:

Код


u {margin: auto;}

и все будет хорошо...

Это сообщение отредактировал(а) HARDMID - 14.1.2010, 16:19

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »