Jump to content
  • 0

Свойство overflow


Delat
 Share

Question

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

 overflow: hidden;

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

ZCl1p482.jpg

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

Было:

JVwgUjeH.png

Стало:

1WiFH81P.png

Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

Я бы тень с .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

Link to comment
Share on other sites

  • 0

У меня работает, а если .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;
}

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

Link to comment
Share on other sites

  • 0


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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Curt54rus
      Есть страничка по адресу http://sale.srfhm.ru/css_bug/
      В ней есть табличка сделанная на UL LI тегах, и вот в ячейке Описание, где выводится описание для типа питания не влезает весь текст и остальную часть не видно, скрывается стилем - overflow: hidden
       
      Пробовал убрать этот overflow, тогда вообще таблица вся разъезжается... 
       
      В верстке не особо силен, подскажите пожалуйста где поправить что, чтобы текст нормально влез и весь отображался... Пробовал уже по всякому, всю голову сломал!
       
      Заранее огромное Спасибо!
    • By yaparoff
      Нужно чтобы текст обрезался по вертикали http://skrinshoter.ru/s/040718/dYPUy6EU
      и переполненное содержимое скрывалось
      overflow: hidden почему то не помогает
      https://codepen.io/anon/pen/yErxLY
    • By ows.nightwolf
      Всем доброго времени суток
      У меня возникла проблема с overflow. Вот упрощенный пример, для того чтоб "потрогать" проблему. В этом примере есть контейнер, и в нем абсолютно позиционированный элемент. Контейнеру заданы свойства overflow-x: hidden и overflow-y: visible для того чтобы все что вылазит за пределы контейнера по оси X скрывалось, а все что вылазит по оси Y - показывалось, при этом скролл на компоненте отображаться не должен. Но эта связка не работает (как видно на примере - у контейнера появляется скролл бар), однако если у контейнера изменить overflow-x c hidden на visible все работает как надо - скролл бар пропадает и абсолютно позиционированный элемент становится полностью видим, вылазя за пределы контейнера.
      Вопрос: почему браузеру есть разница установлен ли overflow-x в visible если контент внутри карусели выходит за пределы карусели по оси Y, а не X, и как решить эту проблему?
    • By Launder
      Столкнулся со следующим странным поведением.
      В хроме пока работает transition, фон просвечивает через border-radius (наведите на первый пункт).
      В Лисе градиент имеют такую особенность: полосочка 10px, полосочка 10px, прозрачность, на стыке второй полосочки и прозрачности образуется некий серый фон толщиной пикселя в два. Поскольку фон в примере двухнаправленный, то Вы, убрав одно направление (65 или 66 строчка, не забудте в конце оставленной строчки поставить точку с запятой ), можете увидеть что полоска есть только в том направлении, где нулевой переход из цвета в прозрачность.
      По обеим глюкам: что это? откуда это? куда писать? какие способы бороться?
      Спасибо за внимание
    • By uniken1
      https://jsfiddle.net/6on27wxf/
      Вот такой простой пример. При использовании стиля overflow: hidden; у родительского div увеличивается высота и снизу появляется серая полоса. Если overflow убрать то все нормально. Как сделать overflow: hidden и сохранить высоту?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy