Свойство overflow

[Delat]

Если закомментировать свойство

 overflow: hidden;

в главном меню, то в браузере Firefox 21.0 основная часть с сайдбаром слетает вправо, в остальных браузерах в норме. Почему это происходит? Не могу разобраться. http://prodpak.ru

[klierik]

потому что ты в блочный элемент положил объявленную ячейку.

твоя структура:

div.layer > div.left-text ...

равносильна для понимания браузером как код:

div.layer > td.left-text + td.sidebar + div.globfoo + div.footer

[Delat]

потому что ты в блочный элемент положил объявленную ячейку.

твоя структура:

div.layer > div.left-text ...

равносильна для понимания браузером как код:

div.layer > td.left-text + td.sidebar + div.globfoo + div.footer

ааа, вот теперь работает, осталось разобраться только с выравниванием sidebar.

поражаюсь вашим знаниям

[Delat]

я объявил в class=left-text свойство display:block; с ним кажется всё в порядке.

а вот sidebar получилось разместить справа(добавив position:relative; и position:absolute;), но он не растягивается по всей высоте, в результате рамка и боковая тень только напротив контента sidebar, к тому же главное меню исчезло.

Было:

Стало:

[Justnewone]

Прекрасно поставлен вопрос, и ссылка, и пояснения, и картинки, как есть и как надо, очень круто, всем бы так.

Я бы тень с .sidebar перенес бы на .layer

А меню - попробуйте .nav добавить overflow:hidden;

[Delat]

Прекрасно поставлен вопрос, и ссылка, и пояснения, и картинки, как есть и как надо, очень круто, всем бы так.

Я бы тень с .sidebar перенес бы на .layer

А меню - попробуйте .nav добавить overflow:hidden;

спасибо вам, можно сказать вопрос решен, но в этой ситуации у меня не работает подпункты меню "Продукция" ни в одно браузере.

вот этот кусок с именами:

<div class="nav">
<ul class="menu">
<li><a href="">Главная</a></li>
<li><a href="">Продукция</a>
<div class="submenu"><a href="#">Катя</a><a href="#">Миша</a><a href="#">Витя</a><a href="#">Гриша</a><a href="#">Ваня</a></div>
</li>																														  
<li><a href="">О компании</a></li>
<li><a href="">Контакты</a></li>
</ul>
</div>

в CSS:

.submenu {
    display:none;
    position:absolute;

}
.menu li:hover .submenu {
    display:block;
    width:350px;
    height:100px;
    background-color:#DB1D0F;
    border-left:1px solid black;
    padding:15px 15px 15px 35px;
}
.menu li .submenu a {
    display:block;
    margin:0px;
    text-align: left;
}

файлы на сервере обновил: http://prodpak.ru

[Justnewone]

У меня работает, а если .nav добавить position:relative и z-index, допустим, 10. Меняется что-либо?

PS: все, понял, там подменю.

Тогда у .nav overflow надо убрать вовсе.

теперь есть 2 пути:

1. Дабвить перед закрытием .nav

<span style:display:block;clear:both; height:0;overflow:hidden;></span>

2. Чуть сложнее, самому .nav в css:

.nav:after{
content:"";
display:block;
overflow:hidden;
height:0;
clear:both;
}

Второй вариант не совсем кроссбраузерный. Старые ослы такое не поймут. Впрочем, как и тени , так что наверное все ок.

[klierik]

а что именно заначит "не работает"?

аттрибут ссылки href ничего не сождержит, и конечно же, ничего происходить не будет.

[Justnewone]

а что именно заначит "не работает"?

аттрибут ссылки href ничего не сождержит, и конечно же, ничего происходить не будет.

Там подменю. А ссылку без ссылки дергает скрипт.

[klierik]

.nav {
background: rgb(204,255,204);
width: 1000px;
margin: 0 auto;
height: auto;
min-height: 31px;
position: relative;
z-index: 1;
}

данное решение. скорее, для примера. Оно не совсем идеально, но как точка отсчета будет всамый раз