Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: overflow: auto

 PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (2): [1] 2 »   

> Описание: проблема со скролом
Саныч
Отправлено: 20 Августа, 2010 - 13:31:55
Post Id



Участник


Покинул форум
Сообщений всего: 1365
Дата рег-ции: Июль 2010  
Откуда: Украина, Запорожье


Помог: 62 раз(а)




есть выпадающие меню, сделал их на списках
вот кусок css, чтоб было понятней...
CODE (htmlphp):
скопировать код в буфер обмена
  1. position: absolute;
  2. border: 1px solid #000;
  3. background: #d6ebff;
  4. text-align: left;
  5. margin-left: -1px;
  6. max-height: 220px;
  7. overflow: auto;
  8. min-width: 100px;

суть проблемы: нужно, чтобы каждая строка отображалась без переноса текста. В опере и осле так и происходит, но в мозиле и сафари текст переносится на новую строку, получается не совсем красиво (см. скрины)

я так понимаю почему это происходит, в опере и осле скрол добавляеться справа, а в мозиле вставляеться внутрь блока...
Как можно его вынести за пределы блока?
Прикреплено изображение (Нажмите для увеличения)
Безимени-1.jpg

(Отредактировано автором: 20 Августа, 2010 - 13:36:17)



-----
Все возражают против того, что я гений, хотя никто еще так меня не назвал. - Орсон Уэллс
 
 Top
Uchkuma
Отправлено: 20 Августа, 2010 - 14:26:43
Post Id



Участник


Покинул форум
Сообщений всего: 1539
Дата рег-ции: Март 2010  
Откуда: Киров


Помог: 6 раз(а)




Попробуйте добавить white-space: nowrap;
 
 Top
Саныч
Отправлено: 20 Августа, 2010 - 14:44:31
Post Id



Участник


Покинул форум
Сообщений всего: 1365
Дата рег-ции: Июль 2010  
Откуда: Украина, Запорожье


Помог: 62 раз(а)




Uchkuma пишет:
Попробуйте добавить white-space: nowrap;

пробовал еще до того, как задал вопрос. white-space: nowrap действительно решает проблему с переносом строки, но появляется новая. Появляется и горизонтальный скрол, а мне это совсем не нужно...
Нужно каким-то образом указать, чтобы скролы прилеплялись сбоку блока, а не вставлялись внуть


-----
Все возражают против того, что я гений, хотя никто еще так меня не назвал. - Орсон Уэллс
 
 Top
Uchkuma
Отправлено: 20 Августа, 2010 - 15:47:01
Post Id



Участник


Покинул форум
Сообщений всего: 1539
Дата рег-ции: Март 2010  
Откуда: Киров


Помог: 6 раз(а)




Цитата:
Попробуйте добавить white-space: nowrap;
не для всего блока со шрифтами, а для каждого шрифта. Ну и overflow: hidden; для него же.
(Добавление)
Может я что не так понял? Хм
 
 Top
LEONeso
Отправлено: 20 Августа, 2010 - 17:00:49
Post Id



Посетитель


Покинул форум
Сообщений всего: 499
Дата рег-ции: Янв. 2010  
Откуда: Россия, Москва


Помог: 1 раз(а)




Uchkuma, верно Радость


-----
Для некоторых лучший способ написать что-нибудь осмысленное - это сесть _опой на клавиатуру.
 
 Top
Саныч
Отправлено: 20 Августа, 2010 - 17:56:06
Post Id



Участник


Покинул форум
Сообщений всего: 1365
Дата рег-ции: Июль 2010  
Откуда: Украина, Запорожье


Помог: 62 раз(а)




Uchkuma пишет:
не для всего блока со шрифтами, а для каждого шрифта. Ну и overflow: hidden; для него же.

все такие умные бл.., один я дурак... Я и добавлял к каждому шрифту, появляется горизонтальный скрол, а если дописать overflow: hidden, то кусок текста просто перекрывается скролом, что тоже не подходит...


-----
Все возражают против того, что я гений, хотя никто еще так меня не назвал. - Орсон Уэллс
 
 Top
JustUserR
Отправлено: 20 Августа, 2010 - 21:49:09
Post Id



Активный участник


Покинул форум
Сообщений всего: 8715
Дата рег-ции: Июнь 2009  


Помог: 17 раз(а)




Саныч В качесте решения можете попробовать использовать наразрывный пробел   для запрета автоматического переноса по нему - и в таком случае ширина блока меню должна определяться размером самого длинного неразрывного текстового элемента в нем Кроме того можно использовать JS-скрипт для динамического определения размеров блочных элементов на основе их содержиого - и изменения ширины контейнерного блока по указанной зависимости


-----
Сделать можно все что угодно - нужно только старание, терпение и хороший поисковик Улыбка
Безлимитный web-хостинг от 15 рублей за 40 МБ дискового пространства - http://ihost[dot]oks71[dot]ru/
 
 Top
LEONeso
Отправлено: 20 Августа, 2010 - 22:07:35
Post Id



Посетитель


Покинул форум
Сообщений всего: 499
Дата рег-ции: Янв. 2010  
Откуда: Россия, Москва


Помог: 1 раз(а)




Собственно:
clear:both;
overflow:hidden;
+ размер width и height (без всяких макс/мин)

Думаю вся проблема в min-width: 100px; что если width: 100px;
или можно сделать запрет на перенос строки и авто ширину.
--
Да и на скриншоте, было ясно показано, что скроллы в разных местах стоят, есть предположение, что внутри блока и снаружи блока. Хотя - это нужно тестить на деле, а не так.

(Отредактировано автором: 20 Августа, 2010 - 22:12:54)



-----
Для некоторых лучший способ написать что-нибудь осмысленное - это сесть _опой на клавиатуру.
 
 Top
JustUserR
Отправлено: 20 Августа, 2010 - 22:17:50
Post Id



Активный участник


Покинул форум
Сообщений всего: 8715
Дата рег-ции: Июнь 2009  


Помог: 17 раз(а)




LEONeso пишет:
overflow:hidden
Простое использование overflow:hidden в таком случае может не всегда сработать по той причине - что если в некотором элементе появляется дополнительная проктурка и он имеет фиксированные размеры то его собственное содержимое может перераспределиться под новые размеры - и в таком случае хотя фиксированные рамезры для контейнерного блока приведут к явному скрытию прорутки но часть теста может остаться невидимой


-----
Сделать можно все что угодно - нужно только старание, терпение и хороший поисковик Улыбка
Безлимитный web-хостинг от 15 рублей за 40 МБ дискового пространства - http://ihost[dot]oks71[dot]ru/
 
 Top
Саныч
Отправлено: 20 Августа, 2010 - 22:34:36
Post Id



Участник


Покинул форум
Сообщений всего: 1365
Дата рег-ции: Июль 2010  
Откуда: Украина, Запорожье


Помог: 62 раз(а)




JustUserR, на первый взгляд ваш совет по поводу пробела мне показался дельным, но на практике это не так. Если ставить неразрывный пробел, то опять же появляется горизонтальный скрол. По поводу js я с самого начала думал, но хотелось решить проблему средствами css, но по хоже не получиться...

LEONeso, к чему вобще ваш пост? Или это из серии "лишь бы что-то написать"...
Каким боком тут clear:both, если оно запрещает обтекание? бред...
И то, что скролы в разных местах ясно с самого начала, сам вопрос в том, почему так и можно ли как-то "настроить" их положение...

(Отредактировано автором: 20 Августа, 2010 - 22:35:42)



-----
Все возражают против того, что я гений, хотя никто еще так меня не назвал. - Орсон Уэллс
 
 Top
JustUserR
Отправлено: 22 Августа, 2010 - 02:19:58
Post Id



Активный участник


Покинул форум
Сообщений всего: 8715
Дата рег-ции: Июнь 2009  


Помог: 17 раз(а)




Саныч пишет:
JustUserR, на первый взгляд ваш совет по поводу пробела мне показался дельным, но на практике это не так. Если ставить неразрывный пробел, то опять же появляется горизонтальный скрол. По поводу js я с самого начала думал, но хотелось решить проблему средствами css, но по хоже не получиться...
Да действительно использование неразрывного пробела хотя и похоже на решение вопроса но в принципе результатом его включения будет такой же вывод как при использовании тега <nobr> или аналогичного ему CSS-свойства - а если судить по приведенным автором вариантам решения проблемы то это уже было использовано и приводило в появлению горизонательной прокрутки Тем не менее такой подход дает достаточную реализацию шаблона меню чтобы привести его к требуемому виду - конкретно можно добавить JS-скрипт который будет отслежитьва динамический размер вложенного блока по offsetWidth и offsetHeight - и в зависимости от этого менять размер включающего его контейнера или дополнительного отступа Существенным моментов является повышение эффективности JS-скрипта - за сче обработки агрегирующего события заместо автоматической его компановки из составляющих компонентов и выбора требуемого из них в DOM-модели


-----
Сделать можно все что угодно - нужно только старание, терпение и хороший поисковик Улыбка
Безлимитный web-хостинг от 15 рублей за 40 МБ дискового пространства - http://ihost[dot]oks71[dot]ru/
 
 Top
LEONeso
Отправлено: 27 Августа, 2010 - 04:58:10
Post Id



Посетитель


Покинул форум
Сообщений всего: 499
Дата рег-ции: Янв. 2010  
Откуда: Россия, Москва


Помог: 1 раз(а)




Я о том, к какому элементу задавать стили.
select {} или option {}
судя по примеру у вас стили на select, но в нем же и option присутствует.

Можно задать ширину option, тогда возможно все будет как планировалось.

(Отредактировано автором: 27 Августа, 2010 - 05:00:09)



-----
Для некоторых лучший способ написать что-нибудь осмысленное - это сесть _опой на клавиатуру.
 
 Top
Саныч
Отправлено: 27 Августа, 2010 - 13:04:01
Post Id



Участник


Покинул форум
Сообщений всего: 1365
Дата рег-ции: Июль 2010  
Откуда: Украина, Запорожье


Помог: 62 раз(а)




LEONeso пишет:
судя по примеру у вас стили на select, но в нем же и option присутствует.

Если бы вы были чуть внимательней, то еще бы по скрину смогли увидеть, что выпадающий список у меня не на select, плюс я и так писал, что сделал его на списках, т.е. на UL и LI
Чтоб вам было совсем понятно, вот кусочек html
CODE (html):
скопировать код в буфер обмена
  1. <ul>
  2.         <li class="font">
  3.          <span>Шрифт</span>
  4.          <ul>
  5.           <li alt="Arial" style="font-family: Arial">Arial</li>
  6.           <li alt="Arial Black" style="font-family: Arial Black">Arial Black</li>
  7.           ............
  8.           <li alt="Verdana" style="font-family: Verdana">Verdana</li>
  9.          </ul>
  10.         </li>
  11.         .............
  12.        </ul>

(Отредактировано автором: 27 Августа, 2010 - 13:04:35)



-----
Все возражают против того, что я гений, хотя никто еще так меня не назвал. - Орсон Уэллс
 
 Top
LEONeso
Отправлено: 27 Августа, 2010 - 15:32:07
Post Id



Посетитель


Покинул форум
Сообщений всего: 499
Дата рег-ции: Янв. 2010  
Откуда: Россия, Москва


Помог: 1 раз(а)




и стоит ли - это времени?
По моему таким обилием шрифтов, мало кто пользуется и название из двух строк, не так критично, тем более можно чуток увеличить ширину и все вслезит.
Хотя может - это принцип?


-----
Для некоторых лучший способ написать что-нибудь осмысленное - это сесть _опой на клавиатуру.
 
 Top
Саныч
Отправлено: 27 Августа, 2010 - 16:01:37
Post Id



Участник


Покинул форум
Сообщений всего: 1365
Дата рег-ции: Июль 2010  
Откуда: Украина, Запорожье


Помог: 62 раз(а)




Скорей всего да, это принцип...
Дело не в том пользуются или нет, дело в том, что я хочу так сделать и это сделаю...
По поводу названия из двух строк вы конечно правы, это не критично и скорей всего так все и останется, т.к. делать проверку на js как-то... вобщем не нравится мне этот вариант...


-----
Все возражают против того, что я гений, хотя никто еще так меня не назвал. - Орсон Уэллс
 
 Top
Страниц (2): [1] 2 »
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


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



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB