Форум PHP программистов > Появление скрола

[ Поиск ] - [ Пользователи ] - [ Календарь ]

redreem

29.02.2012 - 12:51

Есть такая вот схематичная раскладка: http://redreem.ru/main.html

HTML:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>pic BG</title>
	
<style type="text/css">	

html, body, div, span, img, b, u, i, center, table, tbody, tfoot, thead, td {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent} 
img {border:0;outline:0} 
html,body {width:100%;color:#000;height:100%;margin:0} 
body {line-height:1;background-color:#242}

#bgImg {position:absolute;width:1600px;height:730px;top:0;margin-left:-310px;z-index:0}
#globalcanva {position:relative;width:980px;margin:0 auto;min-height:100%;z-index:0}
#localcanva {position:relative;width:980px;margin:0 auto;background:#faa;opacity:0.7;min-height:100%}

</style>	
		
</head>
<body>

<div id="globalcanva">

	<div id="bgImg">
		<img src="pic_bg.jpg" />
	</div>

	<div id="localcanva">
		<center>LOCALCANVA</center>
	</div>

	</div>
	
</body>
</html>

Проблема: нужно чтобы горизонтальный скролл появлялся только когда розовый див выходит за границы окна. Сейчас скролл реагирует на див с картинкой.

Существенное условие: картинка и розовый див должны имет фиксированную ориентацию и пропорции при масштабировании или изменнии размеров окна, поэтому вариант с бэкграндом не проходит. Таблицы - тоже не вариант. Еще пробовал делать боковые "крылышки" с отрицательными маргинами для выступающих краев картинки - на них скролл так же реагирует. CSS3 - не вариант. Только CSS2.

Ктонибудь встречал подобное решение?

Спустя 2 минуты, 52 секунды (29.02.2012 - 11:54) Visman написал(а):

А если картинку в бэкграунд?

Спустя 1 минута, 12 секунд (29.02.2012 - 11:55) Игорь_Vasinsky написал(а):

часть картинки не будет показано на маленьком разрешении

Цитата

Проблема: нужно чтобы горизонтальный скролл появлялся только когда розовый див выходит за границы окна

что за розовый див?

Спустя 17 минут, 58 секунд (29.02.2012 - 12:13) sergeiss написал(а):

Не проверял

Но по сути так получается: "основному" ДИВу даешь ширину 100% и в стиле пишешь overflow:hidden. Тогда не важно, какая у тебя будет картинка, вложенная в этот ДИВ, прокрутки не будет. А вторую картинку накладываешь не в этом ДИВе, а в другом. У которого фиксированная ширина.

Либо - "картинку в бэкграунд" (с) Visman

Спустя 16 минут, 43 секунды (29.02.2012 - 12:30) redreem написал(а):

Игорь_Vasinsky

ну див, у которого наверху написано LOCALCANVA

Спустя 2 минуты, 2 секунды (29.02.2012 - 12:32) redreem написал(а):

Visman
sergeiss

про бэкграунд написал в топике - не вариант.
насчет 100% - вариант наверно, просто не хочется макет ломать, надеюсь что есть решения без внешних оберток.

вот тут http://www.lestnica-moskva.ru/ похожая ситуация, только там на таблицах и наверчено много костылей видимо.

Спустя 3 минуты, 54 секунды (29.02.2012 - 12:36) Игорь_Vasinsky написал(а):

ты хочешь оставить оригинальный размер картинки или чтоб она пропорционно менялась в зависимости от размера окна (при загрузке или реалтайм)?

Спустя 3 минуты (29.02.2012 - 12:39) redreem написал(а):

реалтайм

Спустя 4 минуты, 6 секунд (29.02.2012 - 12:43) sergeiss написал(а):

Цитата (redreem @ 29.02.2012 - 13:32)

насчет 100% - вариант наверно, просто не хочется макет ломать

Честно говоря, не понял. А что ты "сломаешь"-то?

Спустя 18 минут, 54 секунды (29.02.2012 - 13:02) redreem написал(а):

sergeiss

ну макет уже собран, добавлять в него внешний див - фиг знает, полетит все к чертям.
сам макет кстати вот этот: http://phpforum.ru/index.php?showtopic=0&v...dpost&p=1682269

Спустя 1 минута, 33 секунды (29.02.2012 - 13:03) sergeiss написал(а):

Вот посмотри на мой вариант. Меньше наворотов, чем у тебя, безо всяких абсолютных позиций. Размеры картинок - в их названиях, с шириной картинки 800px согласована позиция left:-400px.
Всё само настраивается, плавает, как надо. Полоса горизонтальной прокрутки появляется как раз тогда, когда ты хочешь - когда размер окна уменьшился до размера меньшей картинки.

Обрати внимание!!! Всего один ДИВ и один ИМГ. И без абсолютных позиций.

<body>
<div style="min-width:500px; background-image: url('/pictures/test/big_img_1200_600.jpg'); 
height:600px; background-position:center; ">
  <img src="/pictures/test/small_img_800_400.jpg" style="height:400px; width:800px;
 position:relative; left:-400px; padding-left: 50%; "  />

</div>
</body>

Спустя 11 минут, 4 секунды (29.02.2012 - 13:14) Игорь_Vasinsky написал(а):

может это тебя наведёт ;)

<html>
<head>
<style>
body{
    margin: 0px;
    padding: 0px;
}
#image{
   background-color: yellow;
    width: 100%;
    height: 100%;
}
</style>
<script type="text/javascript">
function changeWidth()
{
	var width = document.body.scrollWidth;
    
    var image = document.getElementById('image');
    
    image.innerHTML = width + ' px'; 
}    
</script>
</head>
<body onresize = "changeWidth()">
<div id="image"></div>
</body>
</html>

Спустя 3 минуты, 17 секунд (29.02.2012 - 13:17) redreem написал(а):

sergeiss

да, у меня сейчас дежурным такое решение и стоит. только вот при увеличении масштаба, когда появляется горизонтальный скрол, взаимное расположение картинок по горизонтали - меняется. фон остается центрированным относительно внешнего дива (в моем случае я просто на боди повесил фон), а внутренни блок прижимается к левому краю окна.

Спустя 58 секунд (29.02.2012 - 13:18) redreem написал(а):

Игорь_Vasinsky

ну скриптами я тоже могу

хочу чистый css.

Спустя 3 минуты, 3 секунды (29.02.2012 - 13:22) sergeiss написал(а):

Цитата (redreem @ 29.02.2012 - 14:17)

а внутренни блок прижимается к левому краю окна.

Ты сначала попробуй МОЙ вариант, чтобы не говорить, что что-то там "прижимается к левому краю окна"

Это у тебя прижимается, но не у меня.

PS. Обрати внимание на часть стиля для картинки "left:-400px; padding-left: 50%;" - именно эта хрень позиционирует картинку всегда по центру, даже когда ширина браузера больше, чем ширина картинки.

Спустя 22 минуты, 19 секунд (29.02.2012 - 13:44) redreem написал(а):

sergeiss

ага, работает. только в опере более-менее адекватно. в IE начинается "странное" позиционирование скрола, а в хроме и сафари - вообще скрол появляется гораздо раньше, чем картинка заполнит окно.

Спустя 2 часа, 41 минута, 39 секунд (29.02.2012 - 16:25) sergeiss написал(а):

Вот, держи... Задача оказалась интересной, посидел немного, "повтыкал".

Проверено в 5 основных браузерах: Опера, ИЕ Осёл, Огнелис, Хром, Сафари. Работает "как часы" :) Возможно, что-то тут лишнее - сам разбирайся уж.

<style>
html{
height:100%;
margin:0px;
padding:0px;
}
body 
{
    height:100%;
    margin:0px;
    padding:0px;
    width:1000px;
}
</style>

</head>

<body >
  <div style="width:100%; height:100%; background-image:  url('/pictures/test/big_img_1200_600.jpg'); 
background-position:center; 
background-repeat:no-repeat; position:relative; overflow:hidden; ">
   <img src="/pictures/test/small_img_800_400.jpg" style=" position:relative; left:-400px; 
padding-left: 50%; height:400px; width:800px;"  />  

  </div>
</body>

Спустя 1 час, 54 минуты, 57 секунд (29.02.2012 - 18:20) sergeiss написал(а):

Чё-та я косякнул немного :)

Вот так больше похоже на истину:

<style>
html{
height:100%;
margin:0px;
padding:0px;
}
body 
{
    height:100%;
    margin:0px;
    padding:0px;
}
</style>

</head>

<body >
  <div style="width:100%; min-width:800px; height:100%; background-image:  url('/pictures/test/big_img_1200_600.jpg'); 
   background-position:center; background-repeat:no-repeat; position:relative; overflow:hidden; ">
   <img src="/pictures/test/small_img_800_400.jpg" style=" position:relative; left:-400px;
 padding-left:50%; height:400px; width:800px;"  />  

  </div>
</body>

Спустя 1 день, 18 часов, 51 минута, 54 секунды (2.03.2012 - 13:12) redreem написал(а):

sergeiss

спасибо, разгреб.

Быстрый ответ:

Здесь расположена полная версия этой страницы.