Элемент за правой границей экрана...

DjTarik · March 12, 2009

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

P.S. Влево - без проблем... А вот как быть с правой стороной?

Searcher · March 12, 2009

может проще сделать его невидимым display:none ?

DjTarik · March 12, 2009

Нет... Расскажу поподробнее:

- имеется блок с минимальной шириной в 1000px, а максимальной - 1280px... Необходимо справа и с лева поставить теньки, которые будут появляться если ширина экрана больше 1000px, и будут скрываться, если ширина экрана равна 1000px или меньше...

- горизонтальной полосы прокрутки при >1000px быть не должно...

P.S. Это вообще реально? =)

Searcher · March 12, 2009

убираться эти теньки будут яваскриптом?

можно эти теньки выводить за пределами блока в 1000px отрицательными марджинами

DjTarik · March 12, 2009

они не будут убираться...

они есть всегда - но при разных разрешениях то выезжают - то нет...

проблема именно в том, что отрицательным марджином нельзя сдвинуть блок за пределы экрана вправо...

Wind · March 12, 2009

можно ли ссылку на сайт посмотреть!?

И еще. у вас все прибито к левому краю, как я понял?!

Searcher · March 12, 2009

Вот наколупал тут, не совсем идеально работает, да и для ie6 костыли нужны, но есть идея:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Сдвиг</title>
<style type="text/css">


html, body {
margin:0;
padding:0;
}

#patch {
margin-left:-50px;
}

#outer {
position:relative;
max-width:1100px;
min-width:1050px;
overflow:hidden;
margin: 0 auto;
}

#container {
position:relative;
margin-left:50px;
width: 1000px;
border:1px red solid;
}

#right {
position:absolute;
top:0;
left:1050px;
width: 50px;
height: 100%;
background: #008000;
}

#left {
position:absolute;
top:0;
left:-50px;
width: 50px;
height: 100%;
background: #008000;
}

</style>
</head>
<body>

<div id="patch">
<div id="outer">
  <div id="right"></div>
  <div id="container">
	<div id="left"></div>
	..<br>..<br>..<br>..<br>..<br>..<br>..<br>..<br>..<br>..<br>..<br>..<br>..<br>
  </div>
</div>
</div>

</body>
</html>

Wind · March 12, 2009

в принципе можно попробовать извернуться стилями, но мне нужне скрин что бы утверждать.

DjTarik · March 12, 2009

Вот наколупал тут, не совсем идеально работает, да и для ie6 костыли нужны, но есть идея...

- на 1000px - всё равно не ровно... Таким способом, думаю, появиться прокрутка по-любому...

можно ли ссылку на сайт посмотреть!?
И еще. у вас все прибито к левому краю, как я понял?!

нету сайта... Могу только дать "пробный код"...

Выравнивание идет по центру...

Вот примерный код того, что нужно получить:

<!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">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
*	{
	margin: 0px;
	padding: 0px;
}
html, body {
	height: 100%;
	background: #7CCBF3;
}
.wrapper	{
	background: #ccc;
	position: relative;
	min-height: 100%;

	_height: 100%;
	width:expression(((document.documentElement.clientWidth || document.body.clientWidth) < 1000) ? '1000px' : ((document.body.clientWidth > 1280) ? '1280px' : '100%'));  

	min-width: 1000px;
	max-width: 1280px;
	margin: 0px auto;

	border: 1px solid blue;
}

.shadow-left-div {
	border: 1px solid red;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 200px;
	height: 100%;
	margin-left: -200px;
}
.shadow-right-div {
	border: 1px solid red;
	position: absolute;
	top: 0px;
	right: 0px;
	width: 200px;
	height: 100%;
	margin-right: -200px;
}
</style>

</head>

<body>

	<div class="wrapper">

		<div class="shadow-left-div"> </div>
		<div class="shadow-right-div"> </div>

	</div>

</body>

</html>

Красной границей отмечены области, которые должны скрываться при разрешении <1000px и должны появляться при разрешении >1280px...

Wind · March 12, 2009

вам не нужны лишние дивы=) я туплю... делаете один див основной, в котором будет все лежать например:

<div class='main'>
	<div class="wraper"></div>
</div>

далее делаете такие вот стили:

div.main {margin:0 auto; bacjground:url(/img/bg.png) repeat-x center top #990000; width:100%; max-width:1280px;}


/*остальное по желанию*/

bg.png - картинка бекгрануда шириной 1280px c подогнанмыми по обоим краям.

В идеале при разрешении 1024x768 - схлопываются тени, при большем они есть.

возможно ошибся, но думаю идею поняли.

DjTarik · March 12, 2009

Wind - именно так я и сделал:

- див-обертка, в котором фоновый рисунок длиной в 1280px... Его размножаем по вертикали...

- внутри дива-обертки - наш див, с максимальной шириной 1280 и минимальной 1000px...

- всё центрируем и всё работает... =)

——————————————-->

Но интересует именно тот код, который я давал выше - это возможно практически или нет? Получается что за левую границу экрана спрятать слой можно, а за правую нельзя? O_o

Wind · March 12, 2009

видимо так. ибо сами посмотрите, у вас полоса прокрутки только в одну сторону. ибо геометрически исчисления в верстке идут с левого верхнего угла, следовательно горизонтально и вертикально полоса прокрутки идет вниз и вправо, так как нулевая точка отсчета n(0;0) и есть верхний левый угол.

rv9wfj · March 16, 2009

Сейчас делаю примерно тоже самое, у меня даже уже получилось сделать один вариант под IE не работающий в остальных, и другой вариант не работающий в IE. Сейчас если объеденю это все то выложу код. Правда не уверен, что все это валидным получится.

DjTarik · March 16, 2009

Сейчас делаю примерно тоже самое, у меня даже уже получилось сделать один вариант под IE не работающий в остальных, и другой вариант не работающий в IE. Сейчас если объеденю это все то выложу код. Правда не уверен, что все это валидным получится.

Было бы интересно посмотреть, т.к. я не уверен, что это вообще возможно)))

rv9wfj · March 16, 2009

Вот, проверил на FireFox3 и IE7, других нету. Посмотреть в действии код можно тут.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Пример</title>
<style type="text/css"> 
html, body
{
	height: 100%;
}

body
{
	margin:0;
	padding:0;
	background: #E8E8E8 url(images/body_background.png) top center repeat-x;
}


/*Font*/
body, table
{
	font-size:100%;
	font-family: Tahoma, Verdana, Arial, Helvetica, Sans-serif;
	color:#3D3D3D;
}

a:link {text-decoration: underline; color:#EA7948;}
a:visited{text-decoration: underline; color:#752D2D;}
a:active {text-decoration: underline; color:#EA7948;}
a:hover{text-decoration: underline; color:#EA7948;}

#page-container
{
	width:80%;
	min-width: 972px;
	width: expression(document.body.clientWidth > 972 ? "80%" : "972px");
	height:100%;
	margin:0 auto;
	padding:0;
	background: #FFF;
}

#page-content
{
	float: left;
	width:100%;
	height:100%;
	background:white;
}

#page-body-left
{
	float: left;
	position:relative;
	margin-left: -32px;
	width:32px;
	height:100%;
	background:#E8E8E8 url(images/body_bright_left.png) top right repeat-y;
}

#page-wing-left
{
	width:100%;
	height:315px;
	background:#E8E8E8 url(images/wing_left.png) top right no-repeat;
}

#page-body-right
{
	float: right;
	position:relative;
	margin-right: -32px;
	width:32px;
	height:100%;
	background:#E8E8E8 url(images/body_bright_right.png) top left repeat-y;
}

#page-wing-right
{
	width:100%;
	height:315px;
	background:#E8E8E8 url(images/wing_right.png) top left no-repeat;
}

.clear
{
	clear: both;
}
</style>
</head>
<body>
<div id="page-container">
	<div id="page-body-left"></div>	
	<div id="page-body-right"></div>
	<div id="page-content">
	   			<p><img src="images/logo.png" alt="logo" width="284" height="94" /></p>
	</div>
	<div class="clear"></div>
</div>
</body>
</html>

Edited March 20, 2009 by rv9wfj

Wind · March 17, 2009

при 1024 на 768 нижняя полоса прокрутки в ff3 есть +)

rv9wfj · March 20, 2009

при 1024 на 768 нижняя полоса прокрутки в ff3 есть +)

Думается мне без нее никак не получится :-)

Sign In

Элемент за правой границей экрана...

Question

Link to comment

Share on other sites

16 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

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