Отступы

Cabalist · June 17, 2009

Всем здрасте!

Вобщем возникла такая вот проблемка - надо сделать отступы например в 10px у главного блока,но когда я назначаему ему эти отступы например: <div style="width:100%;height:100%;margin: 10px;"></div> ,то появляется вертикальная полоса прокрутки. В чём проблема?И как сделать так что бы это полосы не было?

Для наглядности выкладываю скрин того что должно получиться

psywalker · June 19, 2009

в ИЕ7 не работает из-за: clip:rect(20px,auto,auto,20px);

Edited June 19, 2009 by psywalker

AjiTae · June 19, 2009

От сволочи, фигли они ие сломали.))

Интересно, а с чего вдруг они клип выпилили?)

P.S. ещё в ff2 работать не будет из-за z-index:-1; - эт и так знаю)

Это всё решается, но мне уже в лом, главное - суть)

Edited June 19, 2009 by AjiTae

psywalker · June 19, 2009

AjiTae

Это всё решается, но мне уже в лом, главное - суть)

бла-бла-бла, решение сэр! :D

psywalker · June 21, 2009

Вот оно я всё таки сделал его - Решение я назвал "Эврика"... http://psywalker.ru/Forum/border-10px/

Что мы имеем:

1) Три объявления

2) Ноль элементов

3) Полностью кросс-решение, проверено во всех браузерах, особенно в ИЕ6

4) Не смотря на Проценты Рамка имеет ширину 10 пикселов, проверено и доказано в фотошопе..

5) При заполнении содержимым всё также красиво, то-есть рамка растягивается, как и должна, опять-же во всех браузерах, включая ИЕ6

Минусы:

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

<!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=utf-8" />
<title>Min-height and Border</title>


<style type="text/css">
*{ margin: 0; padding: 0;}
	html { height: 100%;}
	body { min-height: 97.1%; border: 10px solid #000;}



</style>
<!--[if IE 6]>
	<style type="text/css">

		body { height: 96.7%;}

	</style>
<![endif]-->

<!--[if IE 7]>
	<style type="text/css">

		body { min-height: 96.7%;} 

	</style>
<![endif]-->
</head>

<body>

</body>
</html>

p.s. - по мне это идеальное решение, и лучше придумать врядли удастся. Great Rash зацените, скажите, что думаете по этому поводу?

Edited June 21, 2009 by psywalker

Nekromancer · June 22, 2009

смысл от процентной высоты? ты так никогда не добьёшься нужного отступа при разных разрешениях..

psywalker · June 22, 2009

Nekromancer

Ошибаешься друг, я проверял на разных разрешениях, Фотошоп всегда показывает РОВНО 10пикселов при любых раскладах, всё просто отлично высчитывается относительно размера экрана, опять-же если мне не веришь, можешь проверить сам, сделай скрин, открой фотошоп и убедись сам!

Nekromancer · June 22, 2009

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

psywalker · June 22, 2009

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

Great Rash · June 22, 2009

2psywalker:

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

2AjiTae:

С обрезанием (clip) тоже мутил... подлый ИЕ все портит.

psywalker · June 22, 2009

Great Rash

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

Great Rash · June 22, 2009

Кажись сделал!

Спасибо AjiTae. Взял ваш пример за основу, избавился от отрицательного z-index и заставил работать в ИЕ7. Оказывается данная версия недобраузера не понимает clip с запятыми внутри, а понимает с пробелами. Код ниже (проверьте в ИЕ6, а то у меня нету), если там работает, то можно сказать, что решение найдено.

<?xml version="1.0" encoding="utf-8"?>
<!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</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html {
			padding: 10px;
			background: #000;
		}

		body {
			height: 100%;
		}

		.bg {
			background: #ddd;
			height: 100%;
			width: 100%;
			position: absolute;
			z-index: 1;
			bottom: 10px;
			right: 10px;
			clip: rect(20px auto auto 20px);
			overflow: visible;
		}

		.p {
			position: relative;
			z-index: 2;
			background: #ddd;
		}
	</style>
</head>

<body>
	<div class="bg"></div>
	<div class="p">
		111<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		111<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		111<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		111<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		111<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		111<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	</div>
</body>
</html>

psywalker · June 22, 2009

к сожалению в Ие6 при заполении текстом пропадают рамки(((

Great Rash · June 22, 2009

Черт, когда же это говно умрет...

psywalker · June 22, 2009

Черт, когда же это говно умрет...

Да не то слово "Говно"...хуже

Great Rash · June 22, 2009

Не поленился, настроил виртуальную машину с шестым ИЕ.

Теперь должно работать везде.

На тупые маргины внимания не обращать, думаю минус один пиксель справа и плюс один пиксель слева - не большой криминал

<?xml version="1.0" encoding="utf-8"?>
<!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</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html {
			background: #000;
		}

		body {
			height: 100%;
		}

		.bg {
			background: #ddd;
			height: 100%;
			width: 100%;
			position: absolute;
			z-index: 1;
			bottom: 10px;
			right: 10px;
			clip: rect(20px auto auto 20px);
			overflow: visible;
		}

		.p {
			position: relative;
			z-index: 2;
			bottom: 10px;
			margin: 20px 11px 0 9px;
			background: #ddd;
		}
	</style>
</head>

<body>
	<div class="bg"></div>
	<div class="p">
		111<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		111<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		111<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		111<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		111<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	</div>
</body>
</html>

Даже наверно лучше так написать, чтоб было совсем хорошо:

.p {
	position: relative;
	z-index: 2;
	bottom: 10px;
	margin: 20px 10px 0 10px;
	background: #ddd;
}

*html .p {
	margin: 20px 11px 0 9px;
}

Блин, кажись в ИЕ6 все-таки есть глюк. Уж не знаю виновата ли в этом моя виртуальная машина или сам ИЕ. Но при первом запуске в нем сверху отступа нет вообще, а снизу отступ - 20 пикселей. А вот если изменить размер окна, то все становится ок... вот отстой то...

Да, и можно убрать специальный стиль для ИЕ6, и без него вот так - margin: 20px 10px 0 10px;, работает нормально (не считая проблемы до ресайза).

Edited June 22, 2009 by Great Rash

psywalker · June 22, 2009

Блин, кажись в ИЕ6 все-таки есть глюк. Уж не знаю виновата ли в этом моя виртуальная машина или сам ИЕ. Но при первом запуске в нем сверху отступа нет вообще, а снизу отступ - 20 пикселей. А вот если изменить размер окна, то все становится ок... вот отстой то...
Да, и можно убрать специальный стиль для ИЕ6, и без него вот так - margin: 20px 10px 0 10px;, работает нормально (не считая проблемы до ресайза).

Я не заметил глюков А насчёт этого *html .p {margin: 20px 10px 0 10px;} убрать не можно, а даже нужно, потому что в ИЕ6 в противном случае рамка по высоте прерывается на ста процентах, а потом как будто бы начинается сначала, это заметно по правой границе...

Edited June 22, 2009 by psywalker

Great Rash · June 22, 2009

Ну значит виновата виртуалка.

Можно считать решение найденным?

psywalker · June 22, 2009

Great Rash

Конечно же друг, молодец!

Nekromancer · June 22, 2009

в чём решение?

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

psywalker · June 22, 2009

Nekromancer

а ну-ка...

Nekromancer · June 22, 2009

соврал, в 2.. но это ничё не поменяло..

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title></title>
  <style type="text/css">
	html, body {width: 100%; height: 100%;margin: 0; padding: 0; background: black;}
	div.content {background: grey; postition: relative;}
  </style>
</head>
<body>
<div style="overflow: hidden;">
<div style="margin: 10px" class="content">
		111<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		111<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		111<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		111<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		111<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</div>
</body>
</html>

Nekromancer · June 22, 2009

а чё ие6 не понимает клип чтоле? эту строчку не пробовали убирать?

<?xml version="1.0" encoding="utf-8"?>

ну да, вариант хорош конеша

Edited June 22, 2009 by Nekromancer

psywalker · June 22, 2009

Нормал затею добили до конца, Отлично эксперты!

Great Rash · June 22, 2009

в чём решение?
в том что страница прокручивается и сверху и снизу отступы, так это 1м дивом делается..

Камрад, вы не в теме. Видимо невнимательно прочли требования.

Интересно топикстартеру это еще надо?

psywalker · June 22, 2009

Интересно топикстартеру это еще надо?

Помоему это уже чисто спортивный интерес :D , но я только ЗА!

А камрад который не в теме, дело говорит, строчечка дело меняем в ИЕ6

<?xml version="1.0" encoding="utf-8"?>

Edited June 22, 2009 by psywalker

Sign In

Отступы

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

58 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

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