Как показать див встплываеющий как меню в диве с overflow:hidden?

Question

[Sergey Romanov]

Есть див с overflow:hidden и в нем есть таблица с записями с базы. У каждой записи есть иконка и при наведении на ней появляется меню управления. Типа удалить, редактировать и т.д.


Так вот у самой последенй записи или у предпослдних часть меню прячется или обрезается выходя за рамки родительского дива. Как можно сделать что бы меню вылетало поверх?


вот пример cssdesk.com/Q9pxa


вы увидите зеленую зону. Это класс elcontent. Это как бы содержимое выводимое результаты формы. Лэйбл содержит имя поля а зленая зона конетнт. Так вот как только я уберу overflow:hidden с зеленого дива он сразу становится по ширине на всю а мне надо что бы лейбл был фисиированый и зеленый див что осталось и не обтекал лейбл. Ну как сейчас. Так что я не могу убрать overflow:hidden.


А вот это меню как раз попадает в этот зеленый див.

Comments

[max_rip]

А зачем вам overflow:hidden?

[Sergey Romanov]

Что бы зеленый див был не обтекал синий лэйбл

[Sergey Romanov]

На хабре что не пиши все равно заминусуют. Даже просто задай вопрос. ТЕбя заминусуют за то что ты такай тупой и сам этого не знал.

Answer 1

[dmitryim]

Внутри дива с overflow:hidden показать обрезаемое содержимое не получится. Поэтому, по идее, есть два варианта:

1) Убрать у родительского дива overflow:hidden
элемент главного меню {position:relative;}
контейнер подменю {position:absolute; top:Npx; left:Mpx; display:none;}
контейнер подменю:hover {display:block;}
Таким образом, скрытое подменю будет показываться только при наведении на родительский элемент меню.

2) Использовать JS, чтобы вынести подменю за рамки родительского контейнера (переместив его, например, прямо в body) и спозиционировать где требуется.

Answer 2

[egorinsk]

Убрать overflow:hidden. Назначение этого свойства — скрывать вылезающие за пределы дива (кроме AP в некоторых случаях) элементы. Почему-то некоторые особо криворукие товарищи пытаются лечить им баги своей кривой верстки, что неправильно.

Comments

[egorinsk]

Однако, способ-костыль есть. Если элементу внутри overflow: hidden присвоить AP, и убрать position: relative у всех его предков внутри скрытого дива, элемент не будет обрезаться.

[Sergey Romanov]

Уж постите за невежество. Что такое АР?

Answer 3

[Bamboo]

А если так? http://cssdesk.com/6hgUZ

Comments

[Sergey Romanov]

Вот это то что надо. Так как я знаю ширину лейбла можно использовать маргин-лефт. Это идеально и все работат. Спасибо.

Answer 4

[denver]

У меня вот так получилось:
cssdesk.com/v8aKE

И вообще, в следующий раз не поленитесь, сами пример слабайте.

Comments

[Sergey Romanov]

Прошу меня простить. Я вообще на хабре первый раз дадаю вопрос и не сразу понял как ту и что и поэтому оветил внизу

Извините запарялся. Я добавил пример и описание в чем собственно проблема

Вот это было как бы ответ на ваш пост. Я добави приер а ваша ссылка очень помогла в плане где сдеать пример.

Answer 5

[Sergey Romanov]

I added an example and additional description to the post.

Answer 6

[Sergey Romanov]

Извините запарялся. Я добавил пример и описание в чем собственно проблема.

Answer 7

[Олег Торбасов]

.elcontent{overflow: auto; display: table;}

Или не располагать блок меню внутри блока с overflow: hidden. Положить его в коде рядом.

Comments

[Sergey Romanov]

Не получается ега вынести за приделы блока. Так так система устроена. В этом блоке может что угдоно появится.

[Олег Торбасов]

«так система устроена» — принято. Но последнее замечание непонятно: ну, может, ну и что?

[Sergey Romanov]

Имелось в веду что там могла что то больше самого блока. именно по этому и ставилось оверфлоу что бы непедвиденный код не ломал сетку.

Answer 8

[Pavel Isakov]

Может так cssdesk.com/CzKJB

Comments

[denver]

Ага, пойдет для этого абстрактный желто-зеленого примера. Молодец, только похоже Serhioromano нужно что-то другое на самом деле :) Либо он просто бестактен.

[Sergey Romanov]

Kwikpik width:210px подошло бы если бы был известен ширина основнова дива.

@devner прошу прощения. А в чем безтактность то?

[denver]

Например, я потратил время (я тоже заинтересован), а в ответ получил молчание и теперь не знаю что с моим решением не так.