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 :: ширина блока с position:absolute

 PHP.SU

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


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

> Без описания
Поиск в теме | Версия для печати
Pavelbeginner
Отправлено: 04 Июня, 2012 - 14:21:10
Post Id



Частый посетитель


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


Помог: 1 раз(а)
Есть верстка:
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <style>
  3.         *
  4.         {
  5.                 margin:0;
  6.                 padding:0;
  7.                 list-style:none;
  8.         }
  9.  
  10.         .menu>.item
  11.         {
  12.                 width:100px;
  13.                 height:20px;
  14.                 position:relative;
  15.         }
  16.        
  17.         .menu>.item>.subitems
  18.         {
  19.                 position:absolute;
  20.                 top:100%;
  21.                 left:0;
  22.         }
  23.        
  24.         .menu>.item>.subitems>li
  25.         {
  26.                 float:left;
  27.         }
  28. </style>
  29. <ul class="menu">
  30.         <li class="item">
  31.                 <ul class="subitems">
  32.                         <li>
  33.                                 sdfsdfsdf
  34.                         </li>
  35.                         <li>
  36.                                 sdfsdfsdf
  37.                         </li>
  38.                         <li>
  39.                                 sdfsdfsdf
  40.                         </li>
  41.                         <li>
  42.                                 sdfsdfsdf
  43.                         </li>
  44.                         <li>
  45.                                 sdfsdfsdf
  46.                         </li>
  47.                         <li>
  48.                                 sdfsdfsdf
  49.                         </li>
  50.                         <li>
  51.                                 sdfsdfsdf
  52.                         </li>
  53.                 </ul>
  54.         </li>
  55. </ul>
  56.  


1) Как я понимаю максимальная ширина блока с position:absolute равна ширине родительского блока с position:absolute/relative. То есть теги li внутри блока с классом subitems располагаются на одной линии до тех пор пока их суммарная ширина не превысит ширину родительского блока с классом item, и как только их суммарная ширина станет больше ширины родительского блока с классом item, то блоки начинают переноситься на следующую строку, верно?

2) Как заставить отображать в одну строку теги li внутри блока с классом subitems. Вариант задать блоку с классом subitems ширину отличную от auto не подходит, то есть он работает, но по верстке я так в силу определенных обстоятельств сделать не могу.

(Отредактировано автором: 04 Июня, 2012 - 14:54:48)

 
 Top
DelphinPRO
Отправлено: 04 Июня, 2012 - 18:43:49
Post Id



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


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)
2)
CODE (css):
скопировать код в буфер обмена
  1. .subitems li {white-space: nowrap;}

или
CODE (css):
скопировать код в буфер обмена
  1. .subitems {white-space: nowrap;}
  2. .subitems li {display:inline;}

не совсем понял что именно нужно.

(Отредактировано автором: 04 Июня, 2012 - 18:44:56)



-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
Pavelbeginner
Отправлено: 05 Июня, 2012 - 11:17:57
Post Id



Частый посетитель


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


Помог: 1 раз(а)
есть родительский элемент(блок1) со свойствами, например, width:100px; position:relative; И есть дочерний элемент(блок2) со свойствами position:absolute; top:0; left:0; Внутри блока2 идут элементы(блоки3) со свойством float:left; Блоков3, например, 20 штук и в сумме их ширина составляет 400px, но они располагаются не в одной строке, а переносятся на новые строки т.к. когда ширина строки с блоками3 достигнет ширины блока1, то происходит перенос на новую строку. Мне же нужно, чтобы переноса блоков3 на новую строку не происходило. Задать фиксированную ширину блоку2, чтобы блоки3 влезли в одну строку я не могу в силу особенности условий моей верстки. Нужен другой способ.

(Отредактировано автором: 05 Июня, 2012 - 11:18:38)

 
 Top
Pavelbeginner
Отправлено: 07 Июня, 2012 - 12:29:49
Post Id



Частый посетитель


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


Помог: 1 раз(а)
DelphinPRO, нет идей?)
 
 Top
Medallion
Отправлено: 08 Июня, 2012 - 08:46:56
Post Id



Частый гость


Покинул форум
Сообщений всего: 253
Дата рег-ции: Май 2012  
Откуда: Херсон, Украина


Помог: 7 раз(а)
Так работает!
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. <!DOCTYPE HTML>
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>Тестинг</title>
  7.  
  8. <style>
  9.        *
  10.        {
  11.                margin:0;
  12.                padding:0;
  13.                list-style:none;
  14.        }
  15.  
  16.        .menu>.item
  17.        {
  18.                width:100px;
  19.                height:20px;
  20.                 border: 1px solid #9C3;
  21.        }
  22.      
  23.        .menu>.item>.subitems
  24.        {
  25.                position:absolute;
  26.                 top: 20px;
  27.                left:0;
  28.                 border: 1px solid #9C3;
  29.        }
  30.      
  31.        .menu>.item>.subitems>li
  32.        {
  33.                float:left;
  34.                 border: 1px solid #9C3;
  35.        }
  36. </style>
  37. </head>
  38.  
  39. <body>
  40.  
  41. <ul class="menu">
  42.         <li class="item">
  43.                 <ul class="subitems">
  44.                         <li>
  45.                                 sdfsdfsdf
  46.                         </li>
  47.                         <li>
  48.                                 sdfsdfsdf
  49.                         </li>
  50.                         <li>
  51.                                 sdfsdfsdf
  52.                         </li>
  53.                         <li>
  54.                                 sdfsdfsdf
  55.                         </li>
  56.                         <li>
  57.                                 sdfsdfsdf
  58.                         </li>
  59.                         <li>
  60.                                 sdfsdfsdf
  61.                         </li>
  62.                         <li>
  63.                                 sdfsdfsdf
  64.                         </li>
  65.                 </ul>
  66.         </li>
  67. </ul>
  68. </body>
  69. </html>
  70.  
  71.  


Убрал relative и сделал top у absolute 20px, равной высоте блока li с классом item

(Отредактировано автором: 08 Июня, 2012 - 08:47:52)

 
 Top
Pavelbeginner
Отправлено: 08 Июня, 2012 - 11:17:30
Post Id



Частый посетитель


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


Помог: 1 раз(а)
Medallion пишет:
Так работает!
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. <!DOCTYPE HTML>
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>Тестинг</title>
  7.  
  8. <style>
  9.        *
  10.        {
  11.                margin:0;
  12.                padding:0;
  13.                list-style:none;
  14.        }
  15.  
  16.        .menu>.item
  17.        {
  18.                width:100px;
  19.                height:20px;
  20.                 border: 1px solid #9C3;
  21.        }
  22.      
  23.        .menu>.item>.subitems
  24.        {
  25.                position:absolute;
  26.                 top: 20px;
  27.                left:0;
  28.                 border: 1px solid #9C3;
  29.        }
  30.      
  31.        .menu>.item>.subitems>li
  32.        {
  33.                float:left;
  34.                 border: 1px solid #9C3;
  35.        }
  36. </style>
  37. </head>
  38.  
  39. <body>
  40.  
  41. <ul class="menu">
  42.         <li class="item">
  43.                 <ul class="subitems">
  44.                         <li>
  45.                                 sdfsdfsdf
  46.                         </li>
  47.                         <li>
  48.                                 sdfsdfsdf
  49.                         </li>
  50.                         <li>
  51.                                 sdfsdfsdf
  52.                         </li>
  53.                         <li>
  54.                                 sdfsdfsdf
  55.                         </li>
  56.                         <li>
  57.                                 sdfsdfsdf
  58.                         </li>
  59.                         <li>
  60.                                 sdfsdfsdf
  61.                         </li>
  62.                         <li>
  63.                                 sdfsdfsdf
  64.                         </li>
  65.                 </ul>
  66.         </li>
  67. </ul>
  68. </body>
  69. </html>
  70.  
  71.  


Убрал relative и сделал top у absolute 20px, равной высоте блока li с классом item

Ну во-первых, если меню будет находиться ниже на сайте, например, задайте .menu{margin:200px 0 0;}, то подпункты меню будут над меню. position:absolute; top:auto; left:auto; не хочу использовать т.к. когда-то где-то читал, что хотя по документации сказано, что при значение top:auto браузер "Не изменяет положение элемента.", нельзя на это надеяться т.к. не во всех браузерах это соблюдается
 
 Top
DelphinPRO
Отправлено: 08 Июня, 2012 - 12:38:46
Post Id



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


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)
Pavelbeginner пишет:
DelphinPRO, нет идей?)

ну так вот это должно подойти
DelphinPRO пишет:
.subitems {white-space: nowrap;}
.subitems li {display:inline;}

.subitems это блок2
li - блок3

т.е. те блоки которые должны быть в одну строку станут инлайновыми(вместо float:left), а у их родителя запртим перенос по словам (nowrap)


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
Pavelbeginner
Отправлено: 08 Июня, 2012 - 13:32:06
Post Id



Частый посетитель


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


Помог: 1 раз(а)
DelphinPRO пишет:
Pavelbeginner пишет:
DelphinPRO, нет идей?)

ну так вот это должно подойти
DelphinPRO пишет:
.subitems {white-space: nowrap;}
.subitems li {display:inline;}

.subitems это блок2
li - блок3

т.е. те блоки которые должны быть в одну строку станут инлайновыми(вместо float:left), а у их родителя запртим перенос по словам (nowrap)

Премного благодарен.
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 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