VPF::Рывки на странице - Форум программистов

shafl

Дата 20.2.2008, 09:01 (ссылка)

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

Загрузка ...

Новичок

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

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

Всем доброго времени суток!
Проблема с выпадающим меню, собственно меню работает отлично, особенно при вставке кода на пустую страницу.
При вставке в необходимую область на готоваой странице, страница почему то увеличивается в ширину и возвращается к обычному размеру только при наведении на меню (popup) может кто сталкивался?
Подскажите если знаете...
Собственно код меню

Код


<style>.nav, .nav ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt;
padding:0pt;
}

.nav #nav-one {
font-family:Arial;
position:relative;

}

.nav #nav-two {
z-index:10;
}

.nav li {

float:left;
margin:0pt;
padding:0pt;
position:relative;
}

.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
background: none repeat scroll 0%;
color:#000000;
display:block;
font-family:Arial;
font-size:10pt;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:25px;
padding:0pt 9px;
text-decoration:none;

}

.nav li a:hover {
background:#CCCCCC none repeat scroll 0%;
color:#000000;
}

#nav-one li:hover a, #nav-two li.sfHover a {
background:#CCCCCC none repeat scroll 0%;
color:#000000;
}

#nav-one li:hover ul a, #nav-two li.sfHover ul a {
background:#CCCCCC none repeat scroll 0%;
color:#000000;
}

#nav-one li:hover ul a:hover, #nav-two li.sfHover ul a:hover {
background:#CCCCCC none repeat scroll 0%;
color:#000000;
}

.nav ul {
background:#FFFFFF none repeat scroll 0%;
border-bottom:0px solid #FFFFFF;
left:-1px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0pt;
position:absolute;
top:-999em;
width:0px;
}

.nav li:hover ul, .nav li.sfHover ul {
top:25px;
z-index:10;
}

.nav ul li {
border:0pt none;
float:none;
}

.nav ul a {
border-left:1px solid rgb(255, 255, 255); border-right:01px solid rgb(255, 255, 255); border-top:1px solid #FFFFFF; border-bottom:0pt none -moz-use-text-color; padding-right:20px;
white-space:nowrap;
width:110px
}

.nav ul a:hover {
background:#CCCCCC none repeat scroll 0%;
color:#000000;
}
</style>

<script type="text/javascript">
//<--!
startList = function() {
        if (document.all&&document.getElementById) {
            navRoot = document.getElementById("nav-one");
            for (i=0; i<navRoot.childNodes.length; i++) {
                node = navRoot.childNodes[i];
                if (node.nodeName=="LI") {
                    node.onmouseover=function() { this.className+=" sfHover";}
                    node.onmouseout=function() {
                        this.className=this.className.replace(" sfHover", "");
}
}
}
}
}
window.onload=startList;
//-->
</script>

<ul class="nav" id="nav-one">
<li>
<a href="#item1"><font face="Verdana">О компании</font></a>
<ul>
    <li>
    <p align="left"><a href="#item1.1">Презентация</a></li>
    <li>
    <p align="left"><a href="#item1.2">Наши объекты</a></li>
    <li>
    <p align="left"><a href="#item1.3">Реквизиты </a></li>
</ul>
</ul>

и сама страница которая дёргается, уже с меню

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

1.rar 46,29 Kb

NDenis

Дата 20.2.2008, 10:01 (ссылка)

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

Загрузка ...

Опытный

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

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

на вскидку, а где один закрывающий тег </li>?

Код


<ul class="nav" id="nav-one">
<li>
<a href="#item1"><font face="Verdana">О компании</font></a>
<ul>
    <li>
    <p align="left"><a href="#item1.1">Презентация</a></li>
    <li>
    <p align="left"><a href="#item1.2">Наши объекты</a></li>
    <li>
    <p align="left"><a href="#item1.3">Реквизиты </a></li>
</ul>
</li> <!-- вот здесь вот -->
</ul>

bars80080

Дата 20.2.2008, 10:14 (ссылка)

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

Загрузка ...

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

Награды: 1

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

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

Цитата

top:-999em;

top:25px;

у меня как-то раз была такая проблема, что при загрузке страницы меню, да и некоторые другие блоки оказывались не там где нужно, а затем перескакивали на своё место сами, либо при наведении на них мыши
тогда проблема оказалась в некорректной вёрстке, т.е. чтобы меню заняло нужное положение, я его сильно сдвигал вправо, и только потом увидел, что слой, относительно которого я ориентировался начинался с угла экрана, а не с угла страницы (которая уже экрана), сузив слой и вернув меню в нормальный поток, скачки прекратились

т.е. проблема может быть в том что вначале загружаются элементы, потом к ним применяется стили, от того и дёргается

shafl

Дата 20.2.2008, 10:19 (ссылка)

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

Загрузка ...

Новичок

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

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

NDenis спасибо!
Не заметил ошибочку.... smile

Но проблема не в этом, ........
Блин пока писал понял в чём дело.....

Код


.nav li {

float:left;  <!-- вот здесь вот беда, список выводится в строчку, поэтому и страница расширяется-->
margin:0pt;
padding:0pt;
position:relative;
}

Код


.nav li {

float:right;  <!-- так работает нормально (если кому надо)-->
margin:0pt;
padding:0pt;
position:relative;
}

Спасибо, сутки уже борюсь.... smile

bars80080 спасибо за ответ!

Это сообщение отредактировал(а) shafl - 20.2.2008, 10:26

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