VPF::Съезжают слои с position:relative при...

madion

Дата 6.10.2010, 12:56 (ссылка)

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

Загрузка ...

Новичок

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

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

Сайт сейчас сверстан, все слои с position:relative;

Использую плагин jquery dialog ui. Когда вызываю этот диалог, все слои с positon:relative съезжают вверх. Что делать? Как это исправить?

bars80080

Дата 6.10.2010, 14:00 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

а есть некий верхний слой, растянутый на всю страницу и имеющий position: relative?
хотя бы body это надо бы сделать

madion

Дата 8.10.2010, 23:03 (ссылка)

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

Загрузка ...

Новичок

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

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

не помогает

FightInGlory

Дата 9.10.2010, 15:10 (ссылка)

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

Загрузка ...

Шустрый

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

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

Напиши пример кода, тогда тебе и помогут.

madion

Дата 11.10.2010, 09:22 (ссылка)

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

Загрузка ...

Новичок

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

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

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<html>
<head>
<title>Тест</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<link href="js/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/cufon.js"></script>
<script type="text/javascript" src="js/bgfunction.js"></script>
<script type="text/javascript" src="js/Neuropol_500.font.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
<script type="text/javascript">
Cufon.replace('.menu', {hover: 'true'});
Cufon.replace('.ti');
</script>
<!--[if IE]>
<script type="text/javascript">Cufon.replace('p'); Cufon.replace('a', {hover: 'true'});</script> 
<link href="style/styleie.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>

<div id="dialog" title="Оставить отзыв">
<p>Ваше имя: <input type="text" name="name"/></p>
<p>Ваш e-mail: <input type="text" name="mail"/></p>
<p>Отзыв: <textarea></textarea></p>
<p><a href="">Отправить отзыв</a></p>
</div>

<div id="otzyv" onClick="$('#dialog').dialog({ zIndex: 9999 });"></div>

<div id="flashcontent">
     <object id="swf">
        <embed src="images/flash.swf" loop="false" quality="high" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" height="680" width="680">
     </object>
</div>

<div id="textcontact">
<p class="ti">Телефон</p>
<p class="ti">Адрес</p>
<p class="ti">Мэйл</p>
</div>

<div id="icon">
<div id="homeicon"></div><div id="mailicon"></div><div id="searchicon"></div><div style="clear:both;"></div>
</div>

<div id="menu">
<ul><li><a href="" class="menu">Меню</a></li><li><a href="" class="menu">Меню</a></li><li><a href="" class="menu">Меню</a></li><li><a href="" class="menu">Меню</a></li><li><a href="" class="menu">Меню</a></li><li><a href="" class="menu">Меню</a></li></ul>
</div>
<div id="main">

<div id="soc">
<div id="vk"></div><div id="mrim"></div><div id="fb"></div><div id="lj"></div><div id="twitter"></div>
</div>
  
<div class="img"><img src="images/bg.jpg" width="100%" alt="" title="" /></div>
</div>

<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>

Код


html {
height:100%;
position:relative;
}
 
body {
margin: 0; padding: 0;
height: 100%;
}
 
a {
outline:none;
}
 
#flashcontent {
position:relative;
top:-130px;
margin-left:16px;
z-index: 99;
height:0px;
} 
 
/*Обертка картинки*/
#main {
position: absolute;
  top:0; left:0; right:0; bottom:0;
  z-index: 1;
  height:100%;
}
/*Сам слой с картиной*/
#main div.img {
display: block;
position: absolute;
left:0px;
z-index: 10;
min-width: 1000px;
width: 100%;
   _width: expression((documentElement.clientWidth||document.body.clientWidth)<1004?'1004px':'100%');
}
 
#page {
position: absolute;
top: 0; left: 0;
z-index: 30;
width: 100%;
overflow: hidden;
margin: 0 0 300px 0;
min-width: 1000px;
_width: expression((documentElement.clientWidth||document.body.clientWidth)<1004?'1004px':'100%'); 
}
 
#left {
width:290px;
margin-left:40px;
margin-top:30px;
text-align:center;
}

#homeicon {
background-image:url(../images/home.gif);
width:26px;
height:25px;
background-repeat:no-repeat;
float:left;
cursor:pointer;
}

#mailicon {
background-image:url(../images/mail.gif);
width:30px;
height:25px;
background-repeat:no-repeat;
margin-left:13px;
float:left;
cursor:pointer;
}

#otzyv {
position:absolute;
background-image:url(../images/otzyv.png);
width:30px;
height:120px;
right:0px;
z-index:99999;
top:60%;
cursor:pointer;
}

#searchicon {
background-image:url(../images/search.gif);
width:28px;
height:25px;
background-repeat:no-repeat;
margin-left:80px;
cursor:pointer;
}

#textcontact {
z-index:9998;
width:350px;
height:350px;
position:absolute;
font-size:19px;
left:17px;
top:20px;
text-align:center;
color:#2e2e2e;
}

.ti {
padding-bottom:5px;
}

#icon {
z-index:9999;
width:350px;
height:350px;
position:relative;
font-size:19px;
left:145px;
top:-10px;
text-align:center;
}

#menu {
position:relative;
z-index:9998;
bottom:30px;
text-align:center;
width: 1000px; 
left: 50%;
margin-left: -500px;
}

#menu ul{
list-style:none;
}
 
#menu ul li{
display:inline;
margin-right:20px;
} 

#dialog p {
font-family:Arial, sans-serif;
}

#menu ul li a{
color:#2e2e2e;
font-size:15px;
text-decoration:none;
} 

#menu ul li a:hover {
color:#e95e1e;
} 

#soc {
z-index:9999;
position:relative;
top:630px;
left:700px;
width:200px;
}

#vk {
background-image:url(../images/vk.gif);
width:30px;
height:30px;
background-repeat:no-repeat;
cursor:pointer;
float:left;
padding-left:5px;
}

#mrim {
background-image:url(../images/mrim.gif);
width:30px;
height:30px;
background-repeat:no-repeat;
cursor:pointer;
float:left;
padding-left:5px;
}

#fb {
background-image:url(../images/fb.gif);
width:30px;
height:30px;
background-repeat:no-repeat;
cursor:pointer;
float:left;
padding-left:5px;
}

#lj {
background-image:url(../images/lj.gif);
width:30px;
height:30px;
background-repeat:no-repeat;
cursor:pointer;
float:left;
padding-left:5px;
}

#twitter {
background-image:url(../images/twitter.gif);
width:30px;
height:30px;
background-repeat:no-repeat;
cursor:pointer;
float:left;
}

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