<div> шире окна браузера без появления скроллера.

calebelt · November 10, 2011

Доброе время суток!

Есть такая конструкция:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>div</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Content-language" content="ru" />
<style type="text/css">
.pole_1 {
	width: 200px;
	height: 100px;
	float: left;
	background: #974C97;
}
.pole_2 {
	width: 200px;
	height: 100px;
	float: left;
	background: #3E5896;
}
#container {
	width: 800px;
	margin: auto;
}
#slider {
	width: 1600px;
	margin-left: -400px;
	margin-right: 0px;
}
</style>
</head>
<body>

<div id="container">

	<div id="slider">

		<div class="pole_1">
		</div>
		<div class="pole_2">
		</div>
		<div class="pole_1">
		</div>
		<div class="pole_2">
		</div>
		<div class="pole_1">
		</div>
		<div class="pole_2">
		</div>
		<div class="pole_1">
		</div>
		<div class="pole_2">
		</div>

	</div>

</div>

</body>
</html>

Задумка следующая. Есть некая полоса с картинками шириной скажем 1600px. Так же есть основной контент страницы шириной 800px. Полоса с картинками всегда расположена чётко по центру контента. То есть левый край выступает на -400px влево и правый - на 400px вправо. Но тут есть проблема: появляется нижний скроллер в окне браузера, хотелось бы от него как то избавиться. Как это сделать?

P.S. Не хотелось бы просто взять и тупо отключить её, может есть более изящное и правильное решение?

Edited November 10, 2011 by calebelt

calebelt · November 10, 2011

Извините. Тупил.

Может кому то пригодится. В этом случае надо ставить стиль:


body {
   overflow: hidden;
}

Работает во всех новых браузерах... Наверное. В IE 7, Opera и FF - работает точно.

Edited November 10, 2011 by calebelt

Switch74 · November 10, 2011

Ну это везде работает, но ты просто отключил скролл, если твой сайт не влезет в окно браузера, то его часть пользователь никогда не увидит.

calebelt · November 11, 2011

Ну вот можно поставить overflow-x: hidden. Тогда будет скрыт только горизонтальный скролл. Если сайт будут смотреть на ПК, то обычно не сворачивают окна уже 800px. А на смартфонах там скролл либо пальцем делается, либо джойстиком. Ну я так рассуждал.

А есть какое то иное решение? К примеру если всё же я сделаю сайт шириной 1000px, а пользователь свернёт окно уже. Вот тут я не знаю как быть

zSpx · November 11, 2011

Вашу резиновую графику используйте для body или html.

Switch74 · November 11, 2011

лучше сделать твои слайды в отдельную обёртку, которая будет 100% по ширине с overflow:hidden

Вашу резиновую графику используйте для body или html.

ну этот вариант прокатит, если все картинки сделать в одной и поставить её как background выравненный по центру.

calebelt · November 11, 2011

лучше сделать твои слайды в отдельную обёртку, которая будет 100% по ширине с overflow:hidden

Что то у меня не получается. То просто не срабатывает, то расползается. А можно пример кода? Там вообще картиночки будут меняться JS кодом, типа слайдеры такие небольшие.

Mr.Black · November 11, 2011

Можно получить картинку как должно быть?, и какая минимальная ширина должна быть?

Edited November 11, 2011 by Mr.Black

Mr.Black · November 11, 2011

Можно попробовать сделать так.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Слайдер</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Content-language" content="ru" />
<style type="text/css">
.pole_1 { background: #974C97; }
.pole_2 { background: #3E5896; }
#container { 
    width: 100%;
    margin: 0 auto;
}
#slider {
    text-align: center;
    height: 100px;
    overflow: hidden;
}
.sld {
    width: 200px;
    height: 100px;
    display: inline-block;
}
</style>
</head>
<body>

<div id="container">

        <div id="slider">

                <div class="pole_1 sld"></div>
                <div class="pole_2 sld"></div>
                <div class="pole_1 sld"></div>
                <div class="pole_2 sld"></div>
                <div class="pole_1 sld"></div>
                <div class="pole_2 sld"></div>
                <div class="pole_1 sld"></div>
                <div class="pole_2 sld"></div>

        </div>

</div>

</body>
</html>

Switch74 · November 11, 2011

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

Switch74 · November 11, 2011

пока могу предложить только такой вариант

размеры сделал поменьше, чтобы было понятно что происходит,

в css легко можешь поменять на свои:

-200px -> -400px

400px -> 800px

800px -> 1600px

вариант Mr.Black мне понравился, интересный подход

Edited November 11, 2011 by Switch74

Mr.Black · November 11, 2011

У меня тоже была сначала такая идея, но не понравились огрызки изображений

Sign In

<div> шире окна браузера без появления скроллера.

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information