b0s

Боюсь, вы неизбежно правы, и я перешел на вариант с таблицами.

вооот. В этом сейчас и проблема. Подумаю еще. А вы не пробовали это сделать таблицей? Или надо исключительно на дивах? p.s. спасибо за полосу прокрутки)) Все восстановил, все работает. Я знаю эту причу про ребят из виларибо и вилабаджо)))))))))))))))) Права даже не думал об этом... Я всё пытался на основе слоев сделать... Но думаю ваш совет вполне разумен. Пожалуйста за полосу, всегда рад помочь! Сайт классный! У меня так вряд ли получилось бы, я скорей кодировщик, в плане дизайна вообще никто, а у вас мне кажется есть вкус и талант. Прощу прощения за Offtop. Ещё кстати, про сайт. В первом разделе, появляется полоса прокрутки когда открывается раздел в виде таблиц, хотя видимого продолжения внизу нет. Возможно это вам пригодится.

По моему "height:90%;" у .text не работает. Я его убрал, и визуальных изменений нет. Наверное это потому, что по правилам, "height:90%;" действителен только при наличии этого же параметра у родителя, а "min-height:90%" не задаёт "height " родителю.

Да в любом случае спасибо вам, за время уделённое проблеме. Как бы там не было, рано или поздно вопрос решится. Сейчас посмотрю. Softlink, благодаря вам, похоже, решился вопрос с выпрыгиванием за границы, но остался другой момент. Как сделать так что бы список файлов (.text), всегда был растянут практически на всё пространство .main?

Спасибо за ответ Softlink! Наверное фиксированная, но зависящая от размера .files. То есть, если уменьшается окно браузера, уменьшается .files, а также должен уменьшаться и .list ориентируясь на .files, но так что бы .info оставался на своём месте внизу и не выезжал за границы .files, в прочем как и всё содержимое. Прошу прощения за offtop. Хахаха! Softlink, у вас очень хороший авторский сайт! Выглядит здорово и чувствуется, такая, рука характера и харизмы. Я крайне редко вижу такого типа сайты, очень творческий такой. Побольше бы таких. Пожалуйста, не сочтите меня за "подлизателя". А ещё, почему то сразу вспомнил дизайн Артемия Лебедева. Простите если скажу мнение, о котором вы не спрашивали. Мне, очень сильно, не хватило в Словотеке полосы прокрутки.

О. Кажется до меня дошло! Вротмненоги! Да я же только, что из первой группы дедсадика перешел в первую с половиной! Ура! Если высота .list определяется процентами, значит всё должно определяться процентами. Текст ведь не уменьшается? Ведь между .list и нижней границей .files пространство уменьшается, а текст остаётся того же размера, и потому не умещается в остатке свободного места .files. Так дорогие участники. Как же мне сделать, что бы .list был максимального размера, вне зависимости от размера окна, но при этом не выдворял из пространства .files, область .commonInfo? Текст ведь должен быть всегда одного размера... наверное...

И вот к сожалению я опять не могу найти в поисковике ничего полезного. Возможно потому, что не знаю как правильно задать вопрос. Я читал про Резиновый дизайн, искал про "div в div", много чего писал. К сожалению получается, что даже моего десяти летнего опыта работы с компьютером не хватает что бы написать правильный поисковый запрос. С другой стороны, честное слово, я не понимаю почему код не работает как должен. Потому, снова обратился сюда.

Давай, спокойной ночи дружище Спасибо за пожелание! Уже правда другой день пришел. Но я выспался! Сча снова начну "........... мозгом об долбанный телевизор (монитор)". Прощу прощения за эту цитату. psywalker, а почему вы выбирайте именно тэг <span> и предлагайте ему задать display: block;, если к примеру можно было бы сразу тэг <div> использовать? Если не ошибаюсь он по умолчанию как раз блочный? На сколько я понимаю вы предлагайте установить отступ вершины <span> путём выполнения сценария на JS? expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");} Если результат вычислений (родитель.положениеПоВысоте - текущийОбъект.положениеПоВысоте) меньше ноля, тогда margin-top="0", иначе задать параметру margin-top значение функции (родитель.положениеПоВысоте - текущийОбъект.положениеПоВысоте)/2 + "px");} Я наверное это раз сто прочитаю прежде чем осознаю. Ещё хотелось бы уточнить, не ли другого варианта без JS? Ведь основная моя задача - достижение результата без JS. Предполагаю, что если вы так сразу экспрессию предлагайте, то скорей всего, другого-варианта нет. Да пофиг, это я ради примера просто сделал. Можешь хоть <хрень></хрень> вставить=) Нет, это несовсем JS, это немного разные вещи. Экспрешаны придуманы Микрософтом как раз ради того, чтобы можно было вставлять JS в CSS, не применяя скрипты и т.д, т.е. не создавая лишние JS файлы и прочее. В общем экспрешан встраивается в CSS и поэтому вот эту задачу легко можно проделать на нём. Не боись, я с тобой Ну хоть кто то со мной... Спасибо! Я от JS отказываюсь только по одной причине, есть вещи которые без JS не выполнить, а есть вещи которые легко выполняются и есть главная проблема почему для меня это так важно. Так может получится что человек категорически отключает JS. Я так предполагаю что и экспрессия тоже перестаёт работать?

Сейчас вам помочь не смогу, но всё равно задам вам вопрос и попрошу вас. Не могли бы вы пояснить о каком пункте в сайд баре вы говорите? А ещё удобней было бы что бы вы сфотографировали те места которые не верно отображаются. Так проще и наглядней. Уверен это может помочь другим участникам форума разрешить вашу проблему.

Все четыре основных браузера. Opera, Safari, Firefox и Internet Explorer 7. Простите. Забыл параметр фона задать к .files. Исправил. Надо что бы всё было внутри слоя с зелёным фоном и за него не выходило. А при уменьшении окна, содержимое .files как раз опускается за границы. Весь слой .files, всегда должен занимать 90% от страницы, при этом слой .list, всегда должен занимать примерно 90% от слоя .files, для того что бы слои .title и .info дружелюбно и правильно разделяли всё пространство .files с .list, который сам должен быть резиновым и растягиваться пропорционально, но что бы не было всегда быть 90%. Проблема о которой я говорю, заключается в том что list не пропорционально уменьшается вместе с files. Я не понимаю почему так происходит. Но так во всех браузерах на сколько я помню. Сейчас перепроверю.

Получается, что все браузеры неверно растягивают блок с процентной высотой, находящийся в блоке с процентной высотой? Моя логика, конечно, не самая простроенная и правильная, но мне кажется, что 90% блока, должны пропорционально уменьшать и увеличивать блок, в зависимости от высоты родителя, но внутри родителя визуально, всёравно занимать 90%... А со словом скалирование, я переборщил...

Задача: Разместить <div> контейнер, используя 90% страницы. Контейнер используется для отображения списка файлов. Выглядеть должно так: Причина обращения сюда - проблема проявляющаяся во время уменьшения окна: Список файлов выезжает за пределы области, простите, "выезжая" и то что за ним )))). Весь код: <div class="files"> <div class="title">Список файлов</div> <div class="list"> <div> <span class="file">Текстовый документ.txt</span><span>(81 б)</span> </div> </div> <div class="info"> <div class="commonInfo">Файлов в папке: 1<span style="float:right">Общий размер: 81 б</span></div> <div path="/" id="path">Путь: /</div> </div> </div> <style> html,body{ height:100%; padding:0; margin:0; text-align:center; } .files { height:90%; width:22%; min-width:316px; background:green; } .title { position:relative; margin-bottom:10px } .list { position:relative; width:95%; overflow:auto; height:inherit; background:gray; display:block; text-align:center; } .commonInfo { text-align:left; position:relative; } </style>

Ох какой же ужас... UTF-8 без BOM забыл установить, и сохранил один из документов в UTF-8 формате... Так в IE у меня всё уехало, сценарии не работали, ничего не работало... и всё это было только из-за сохранения в неприемлемой для IE кодировке...

Давай, спокойной ночи дружище Спасибо за пожелание! Уже правда другой день пришел. Но я выспался! Сча снова начну "........... мозгом об долбанный телевизор (монитор)". Прощу прощения за эту цитату. psywalker, а почему вы выбирайте именно тэг <span> и предлагайте ему задать display: block;, если к примеру можно было бы сразу тэг <div> использовать? Если не ошибаюсь он по умолчанию как раз блочный? На сколько я понимаю вы предлагайте установить отступ вершины <span> путём выполнения сценария на JS? expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");} Если результат вычислений (родитель.положениеПоВысоте - текущийОбъект.положениеПоВысоте) меньше ноля, тогда margin-top="0", иначе задать параметру margin-top значение функции (родитель.положениеПоВысоте - текущийОбъект.положениеПоВысоте)/2 + "px");} Я наверное это раз сто прочитаю прежде чем осознаю. Ещё хотелось бы уточнить, не ли другого варианта без JS? Ведь основная моя задача - достижение результата без JS. Предполагаю, что если вы так сразу экспрессию предлагайте, то скорей всего, другого-варианта нет.

Так хочется разобраться сейчас, но у же сил не хватает сопротивляться желанию спать. Обязательно посмотрю позже! Спасибо за ответ, psywalker!

PanSoul. Вариант предложенный вами - замечательный! Правда есть кое какие минусы у этого метода. То что некоторые слои всё таки закрывают ссылку. Но это самый лучший вариант в любом случае из всех которые я пробовал. И при нём и останусь. Кое что можно изменить, и я так и сделал. Нужно ссылке, которая располагается в центре кнопки, установить параметр display:block, тогда место вокруг неё, тоже становится доступным для щелчка. В любом случае, благодаря вашим усилиям и усилим остальных участников форума, смог достичь выполнения задачи, к которой стремился, на протяжении уже наверное недели или недели с половиной. За что, прошу принять мою благодарность, уважаемые PanSoul, psywalker, iillyyaa2, Синдром и mishka2. Теперь, дорогие друзья, появляется вопрос. Возможно ли как то поменять таблицу стилей так, что бы это меню, хотя бы приблизительно нормально отображалось в Internet Explorer?

Я занимаюсь "веб программированием", около 2х-3х лет. Занимаюсь этим не в плотную, для себя. Но до сих пор к сожалению мне так и не удалось запомнить многие важные моменты связанные с кроссбраузерностью. У меня голова от этого кругом идёт дорогие друзья. Столько надо мелких фраз знать... Уверен это не сложно, но всётаки это и не легко...

PanSoul, простите пожалуйста, что так обращаю ваше внимание, но я вам чуть выше задал вопрос, боюсь что ввиду завязавшейся беседы вы его не увидели... Не могли бы ответить? Боюсь уже поздно, но я не подумал что следовало скинуть ссылку на сообщение, что бы не заставлять вас искать. Извините.

А оно обязательно что ли? display:table-cell; - это ячейка, ячейка должна находится в таблице. Ты же эмулируешь таблицу! Я замечал такую ситуацию, что без помещения контейнера с display:table-cell в контейнер с display: table, vertical-align:middle не работал. Правда в каком браузере не помню. Так что psywalker, понимаю о чём вы пишите. Если конечно от желания спать невнимательность мне не помешала осознать то что вы написали. Ну я и пишу... PanSoul, я не могу понять, а как так получается что ссылка доступна? Я честное слово говорю, что пытался сделать так же как вы предложили. Ссылка либо была сверху и закрывала остальные ссылки и кнопку, либо была закрыта фреймом со ссылками и не была доступна...

А оно обязательно что ли? display:table-cell; - это ячейка, ячейка должна находится в таблице. Ты же эмулируешь таблицу! Я замечал такую ситуацию, что без помещения контейнера с display:table-cell в контейнер с display: table, vertical-align:middle не работал. Правда в каком браузере не помню. Так что psywalker, понимаю о чём вы пишите. Если конечно от желания спать невнимательность мне не помешала осознать то что вы написали. Ну я и пишу... PanSoul, я не могу понять, а как так получается что ссылка доступна? Я честное слово говорю, что пытался сделать так же как вы предложили. Ссылка либо была сверху и закрывала остальные ссылки и кнопку, либо была закрыта фреймом со ссылками и не была доступна...

PanSoul, спасибо вам большое! Решение работает! Проверил на последних версиях Opera, Safari и Firefox. Я пока правда не разобрался как именно, что на что влияет. Спал всего три часа. Надеюсь быстро разберусь. Жалко, в IE не работает. Да и не удивительно... Значение table-cell параметра display, даже в 7-й версии по моему не поддерживается. Здесь похоже придётся искать другой вариант, какой-то более примитивный.

А оно обязательно что ли? PanSoul, спасибо за ответ! Сейчас проверю. psywalker, наверное так написал, потому что вероятно, я ему задал вопрос, а он скорей всего хотел ответить, а вы в низапно свой вариант предложили.

Спасибо за попытку помочь Синдром! psywalker, не очень вас понял. Table чему именно назначить? Контейнеру, а ребёнку display: table-cell; vertical-align: middle; psywalker, пожалуйста, не сочтите меня за человека строящего из себя идиота, и специально задающего вопросы. Я действительно не могу понять, какой именно контейнер вы имеете в виду. Не могли бы вы привести пример? Был бы очень вам благодарен!

Спасибо за попытку помочь Синдром! psywalker, не очень вас понял. Table чему именно назначить?

Спасибо за ваш ответ! Ой, точно! Простите, я совсем забыл про пример, с одной и двумя строками. Фото HTML код: <div class="menu"> <div class="item"> <div class="content"> <a href=" ">Короткая ссылка</a> <div class="sub"> <hr/> <div> <a href=" " style="float:left;">Опция1</a> <a href=" " style="float:right;">Опция2</a> </div> </div> </div> </div> <div class="item"> <div class="content"> <a href=" ">Очень длиное название</a> </div> </div> <div class="item"> <div class="content"> <a href=" ">Очень длиное название</a> <div class="sub"> <hr> <div> <a href=" ">Опция1</a> </div> </div> </div> </div> </div> Вы не совсем правы. Большая часть того, что есть в кнопке реализовано именно так как я хочу, за исключением того, что сама кнопка ссылкой не является. А мне надо чтобы ещё в добавок и сама вся свободная площадь кнопки была ссылкой. Как это реализовать я к сожалению не знаю, и как не старался не получается разобраться. Я пытался поместить весь контейнер (div.item или div.content) с кнопкой в ссылку, но это против правил работы HTML, так как внутри этой большой "кнопки-ссылки" не может быть блочных элементов. Даже не смотря на это правило, кнопка успешно "обнималась" ссылкой если я не добавлял другие ссылки внутрь. Если же хоть одна ссыка появлялась в контейнере, то главная ссылка-кнопка не работала. Firebug (расширение для Firefox), всегда закрывал контейнер ссылки сразу же после открытия, если внутри контейнера присутствует другая ссылка. Пытался сделать ссылку блочной и растянуть её, не вмещая в неё остальные ссылки, но это не вариант, потому что слой текста в центре, располагается по всей высоте кнопки, и ссылка оказывается под слоем. Если же ссылку поместить поверх слоя, то естественно ссылка закрывает собой слой с остальным содержимым кнопки.