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 :: Блок за основным контейнером.

 PHP.SU

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


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

> Без описания
Поиск в теме | Версия для печати
V1T
Отправлено: 23 Марта, 2012 - 23:38:15
Post Id


Гость


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


Помог: 0 раз(а)
Есть основной контейнер страници и есть блок.
CODE (html):
скопировать код в буфер обмена
  1. .container {width:1100px; overflow:hidden; margin:0 auto; position:relative;}

По дизайну нужно положить #block за пределами контейнера.
Пробую два варианта:
Без overflow, тогда страница растягивается в ширину из за отрицательного положения.
Второй, оставляя overflow, соответственно #block урезается за пределами контейнера.
Третий - самый простой, увеличивать сам контейнер, но сайт тогда будет уже 1400 , такое не подходит.

Есть способы положить его без пустой правой области на страници, грубо говоря фоново возле контейнера ?

(Отредактировано автором: 23 Марта, 2012 - 23:39:24)

 
 Top
DelphinPRO
Отправлено: 24 Марта, 2012 - 00:16:49
Post Id



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


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


Помог: 353 раз(а)
нифига не понятно. схематично набросали бы чтоли, что нужно.


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
IllusionMH
Отправлено: 24 Марта, 2012 - 00:19:11
Post Id



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


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
V1T, с HTML кодом было бы слегка понятней.
Примерно такая разметка?
CODE (html):
скопировать код в буфер обмена
  1. <div class="container">
  2.   <div id="block"></div>
  3. </div>


CODE (CSS):
скопировать код в буфер обмена
  1. .container {
  2.   width:1100px;
  3.   margin:0 auto;
  4.   position:relative;
  5. }
  6. #block {
  7.   position: absolute;
  8.   left: -300px;  
  9.   width: 300px;
  10. }


Такой вариант не подходит? Что значит
Цитата:
Без overflow, тогда страница растягивается в ширину из за отрицательного положения.

?
 
 Top
DelphinPRO
Отправлено: 24 Марта, 2012 - 00:34:28
Post Id



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


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


Помог: 353 раз(а)
IllusionMH ему надо вправо сместить - появится горизонтальная полоса прокрутки.
при такой постановке задачи - решения нет. Поэтому я попросил паказать как должно выглядеть, возможно нужен другой подход к решению.
Из опыта знаю, что сверстать можно любой каприз дизайнера, нужен лишь верный подход Улыбка


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
IllusionMH
Отправлено: 24 Марта, 2012 - 01:06:23
Post Id



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


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


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

DelphinPRO, ага. С утюгом/паяльником к дизайнеру ;)
Как читал в блоге кого-то из зарубежных разрабов: если не удается создать нужный эффект даже с использование двух доп. элементов :before и :after, то скорее всего что-то не так с дизайном


А так - ширина блока в 1100px +, как я понимаю, 300px выпирающего контейнера не поместится на большинстве мониторов ноутов. Так что нижней полосы прокрутки ожидать стоит.

Либо #block должен перекрываться основным контейнером. Тут мои возможности фантазии в час ночи исчерпываются Недовольство, огорчение
 
 Top
V1T
Отправлено: 24 Марта, 2012 - 17:18:04
Post Id


Гость


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


Помог: 0 раз(а)
IllusionMH пишет:
IllusionMH
, вы верно меня поняли именно вот так я и хочу
CODE (html):
скопировать код в буфер обмена
  1.     .container {
  2.       width:1100px;
  3.       margin:0 auto;
  4.       position:relative;
  5.     }
  6.     #block {
  7.       position: absolute;
  8.       left: -300px;  
  9.       width: 300px;
  10.     }

И тут из за минуса полоса появляется, а поставьте overflow в .container , урежится, как я уже понял варианта здесь нет к сожалению ..

(Отредактировано автором: 24 Марта, 2012 - 17:33:47)

 
 Top
IllusionMH
Отправлено: 24 Марта, 2012 - 19:10:13
Post Id



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


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
V1T, скриншот с полосой прокрутки покажите.
Ни один браузер не показывает полосу прокрутки для абсолютно позиционируемых объектов.
 
 Top
V1T
Отправлено: 24 Марта, 2012 - 23:16:35
Post Id


Гость


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


Помог: 0 раз(а)
IllusionMH пишет:
V1T, скриншот с полосой прокрутки покажите.
Ни один браузер не показывает полосу прокрутки для абсолютно позиционируемых объектов.

Это да, просто тогда я двигал не абсолютным

(Отредактировано автором: 24 Марта, 2012 - 23:16:59)

 
 Top
DelphinPRO
Отправлено: 24 Марта, 2012 - 23:28:39
Post Id



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


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


Помог: 353 раз(а)
IllusionMH пишет:
Ни один браузер не показывает полосу прокрутки для абсолютно позиционируемых объектов.

Улыбка
пожалуйста
Прикреплено изображение (Нажмите для увеличения)
Screenshot_2012_03_25_(01_29).png


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
IllusionMH
Отправлено: 24 Марта, 2012 - 23:49:52
Post Id



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


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
V1T, DelphinPRO, извиняюсь. Вспылил. Был не прав Огорчение
DelphinPRO, спасибо. Завтыкал что справа нужно расположить контейнер. тестил слева - слева не появляется.

V1T, решение есть
CODE (CSS):
скопировать код в буфер обмена
  1. body {
  2.   overflow-x: hidden;
  3. }
 
 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