Jump to content
  • 0

Отступы

Cabalist

Asked by Cabalist,

 Share

Question

Cabalist Explorer

Cabalist

Posted
Posted

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

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

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

Link to comment
Share on other sites
  • Answers 58
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

58 answers to this question

Recommended Posts

  • 0
Cabalist Explorer

Cabalist

Posted
  • Author
Posted

klierik,то что скролл из-за эти 10 пикселей появляется это я уже понял,и если я их уберу,его конечно же не будет,но это не выход...мне нужно сделать как на картинке,с отступами но без скрола,такое вообще возможно? :)

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted (edited)

Пока только так... проверял в Мозилле, ИЕ7, ИЕ8:

<?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,
		body {
			height: 100%;
			background: red;
		}

		.d1 {
			height: 100%;
			margin: -10px 10px;
			background: #fff;
		}

		.d1 p {
			padding-top: 20px;
		}

		.d2 {
			position: absolute;
			top: 0px;
			left: -10px;
			width: 100%;
			height: 10px;
			background: red;
		}
	</style>
</head>

<body>

	<div class="d1">
		<div class="d2"></div>
		<p>
			111
		</p>
	</div>

</body>
</html>

UPD:

Проверил в Опере, Сафари, и Хроме - тоже работает как ни странно :)

Edited by Great Rash
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted (edited)

Cabalist

Дружище, а вот тебе варианты-обманки, никто не узнает, что ты так поступил, а ты так сделаешь!

Только отступы под себя подгони, какие нада, и не бойся "%" - это так кажется))

<?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,body { height: 100%;background: red; }

			div.one { 
							  height: 98%; 
							  background: red; 
							  margin: 0 10px; 
							  padding-top: 10px;
						 }
			div.two { height: 100%; background: #fff; }

	</style>
</head>

<body>

 	<div class="one">
			<div class="two">123456789</div>
		</div>

</body>
</html>

И вот ещё меньше, вообще приятный: :)

<?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>padding</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,body { 
						   height: 98%; 
						   background: red; 
						   margin: 0 5px; 
						   padding-top: 5px;
				   }

			div.one { height: 100%; background:#fff; padding-bottom: 15px;  }

	</style>
</head>

<body>
	<div class="one">123456678</div>
</body>
</html>

Да, и ещё: Первый вариант работает везде, даже в ИЕ6, а вот второй надо подгонять немного под ИЕ6-7 отдельно, там div надо поставить 98%, вместо 100%, а так в целом работает опять-же везде

Edited by psywalker
Link to comment
Share on other sites
  • 0
Cabalist Explorer

Cabalist

Posted
  • Author
Posted

Great Rash,зря в ИЕ 6 не проверили :) у меня вот что там выходит 349a5.jpg

Поэтому придётся внести некоторые изменения для ишака.

Вот так вот и ослик шестой поймёт:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html,
		body {
			height: 100%;
			background: red;
		}

		.d1 {
			height: 100%;
			margin: -10px 10px;
			background: #fff;
		}

		.d1 p {
			padding-top: 20px;
		}

		.d2 {
			position: absolute;
			top: 0px;
			_top: auto;
			left: -10px;
			_left: auto;
			width: 100%;
			height: 10px;
			background: red;
		}
	</style>
</head>

<body>

	<div class="d1">
		<div class="d2"></div>
		<p>
			111
		</p>
	</div>

</body>
</html>

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

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
* { margin: 0px; padding: 0px; border: 0px; }	
html, body {
	height: 100%;
	background: #fff;
}
.main {
	height: 100%;
	margin: 0px 10px;
	background: #a4987e;
	position: relative;
	overflow: hidden;
}
.top {
	_margin-top: -10px;
	height: 10px;
	background: #fff;
}
.bottom {
	position: absolute;
	bottom: 0px;
	height: 10px;
	_margin-bottom: -10px;
	width: 100%;
	background: #fff;
}
</style>
</head>
<body>

	<div class="main">

		<div class="top"></div>

		<div class="bottom"></div>

	</div>

</body>
</html>

Но мне всё таки хочется без обмана:) Можно ли так сделать?

psywalker,сорри пропустил твой пост,слишком долго свой строчил))Но опять же обманки))а без них нельзя?:(

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted (edited)

К сожалению я не знаю, может и можно,Great Rash наверняка что нибудь придумает, но у моя обманка затрачивает минимум материала, это знаю точно!)))

Кстати есть вообще прикольный вариант, где элементы вообще не нужны)), но только жаль, в ИЕ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>padding</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 {			
			   height: 98%;
			   background: red;
			   margin: 0 5px;
			   padding-top: 5px;
		 }
		 body { 
		 	height: 99%; 
			background:#fff; 
			padding-bottom: 15px;
 			}
	 </style>
</head>

<body>
</body>
</html>

Edited by psywalker
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
  Quote
жаль только ещё и в ИЕ 7 косячит

В ИЕ7 легко исправить, просто в отдельном файле для ИЕ7 поставь body не 99% высоту, а 98%..А вот ИЕ6 пока решение не нашёл к сожалению, может кто-то сможет помочь :)

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted

Что-то без обмана никак... кумекал кумекал, да нифига не накумекал. Надо будет еще побиться над этой задачкой.

Но думаю, что без хаков тут точно не обойтись.

2psywalker:

Камрад, проценты не катят :) В моем варианте поля останутся 10 пикселей, при любом размере повысоте. А в вашем?

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Great Rash

  Quote
Камрад, проценты не катят smile.gif В моем варианте поля останутся 10 пикселей, при любом размере повысоте. А в вашем?

А я конечно-же учитывал этот вариант, а сделал свой по нескольким причинам:

1) Я не смог придумать вариант лучше вашего :)

2) Я придумал способ, который требует мало элементов, и посчитал, что человеку нужно именно что-бы body был 100%, и вообще задача!

3) И вообще малоли пригодиться :)

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Great Rash

  Quote
Вообще конечно таблицами это делается на раз два, но ведь мы - ребята из Вилларибо! Так что сегодня надо подумать.

Конечно-же, я ещё вчера хотел написать, времени не было, что мы, а вы особенно, далеко не всё ещё выжили из этих вариантов, наверняка из всего этого можно сделать конфетку..надо поразмыслить, согласен на 100%... :)

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted (edited)

Пока удалось только улучшить первый вариант, кому не лень посмотрите в ИЕ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,
		body {
			height: 100%;
			background: red;
		}

		.d1 {
			position: relative;
			z-index: 1;
			height: 100%;
			margin: -20px 10px 0 10px;
			background: white;
		}

		.d2 {
			position: relative;
			z-index: 2;
			height: 10px;
			background: red;
		}

		p {
			padding-top: 20px;
		}
	</style>
</head>

<body>

	<div class="d2"></div>
	<div class="d1">
		<p>CSS rules the world!</p>
	</div>

</body>
</html>

UPD:

Удалось избавится от второго дива:

<?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,
		body {
			height: 100%;
			background: red;
		}

		.d1 {
			position: relative;
			top: -10px;
			height: 100%;
			margin: 0 10px 0 10px;
			background: white;
		}

		p {
			border-top: red 20px solid;
		}
	</style>
</head>

<body>

	<div class="d1">
		<p>CSS rules the world!</p>
	</div>

</body>
</html>

Edited by Great Rash
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted (edited)

Блин, в ИЕ6 косяк с верхом, он явно больше нижнего по высоте, и исправить у меня почему-то не получилось, и кстати в первом вашем варианте тоже в ИЕ6 траблы с верхом..да и вообще всё это не то, где то вы рядом, чего-то не хватает, ща я тоже попробую один вариант.. :)

Воо, второй вариант хороший, отлично! Может даже это конечный будет, пока этот вариант однозначно лидер, гуд! :)

Edited by psywalker
Link to comment
Share on other sites
  • 0
Zippovich Explorer

Zippovich

Posted
Posted

боди тянешь на 100% во все стороны, делаешь его релятив

внутренний слой абсолютным позиционированием прижимаешь к краям боди на расстоянии 10px от краев. Сам не пробовал, но думаю сработает.

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted
  Quote
боди тянешь на 100% во все стороны, делаешь его релятив

внутренний слой абсолютным позиционированием прижимаешь к краям боди на расстоянии 10px от краев. Сам не пробовал, но думаю сработает.

Не будет тянуться по высоте, если контент больше высоты окна. Плюс не будет работать в ИЕ6.

  Quote
Однако, чем люди балуются )))

Знаете способ? Я с удовольствием перейму опыт.

Link to comment
Share on other sites
  • 0
Searcher Explorer

Searcher

Posted
Posted

не самый красивый вариант, но при абсолютном позиционировании достаточно указать top:10px; left:10px; right:10px; bottom:10px; а для ИЕ6 высоту expression(parentNode.offsetHeight-10+'px'); и также ширину, и усё ))

это по высоте не будет тянутся...

как-то тут на форуме тоже совместно делали разметку, поковыряйтесь, из неё можно сделать то, что вам нужно:

<!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>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html, body {height:100%; margin:0; padding:0;}

#wrapper {position:relative; width:80%; *height:100%; min-height:100%; margin: 0px auto; background: url(http://4play.com.ua/img/l.jpg) left repeat-y silver;}
#page {padding: 80px 110px;}


#t {position:absolute; background: url(http://4play.com.ua/img/t.jpg) top repeat-x; top:0; height:71px; width:100%;}
#b {position:absolute; background: url(http://4play.com.ua/img/b.jpg) bottom repeat-x; bottom:0; height:71px; width:100%;}
#r {position:absolute; background: url(http://4play.com.ua/img/r.jpg) right repeat-y; right:0; height:100%; width:101px;}
#r1 {background: url(http://4play.com.ua/img/r.jpg) right repeat-y; height:100%; width:100%;}

#tl {position:absolute; background: url(http://4play.com.ua/img/tl.jpg) top left no-repeat; top:0; left:0; height:71px; width:101px;}
#tr {position:absolute; background: url(http://4play.com.ua/img/tr.jpg) top right no-repeat; top:0; right:0; height:71px; width:101px;}
#bl {position:absolute; background: url(http://4play.com.ua/img/bl.jpg) bottom left no-repeat; bottom:0; left:0; height:71px; width:101px;}
#br {position:absolute; background: url(http://4play.com.ua/img/br.jpg) bottom right no-repeat; bottom:0; right:0; height:71px; width:101px;}

</style>
</head>
<body>
<div id="wrapper">
<div id="r1">

<div id="t"></div>
<div id="b"></div>
<div id="r"></div>
<div id="tl"></div>
<div id="tr"></div>
<div id="bl"></div>
<div id="br"></div>

<div id="page">
content content content content content content content content content content content content content content content content 
content content content content content content content content content content content content content content content content 
content content content content content content content content content content content content content content content content 
content content content content content content content content content content content content content content content content 
content content content content content content content content content content content content content content content content 
content content content content content content content content content content content content content content content content 
</div>


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

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted

Ничего подходящего под требуемую задачу (фиксированные отступы со всех сторон при 100% высоте и ширине) из этой разметки не получится.

  Quote
не самый красивый вариант, но при абсолютном позиционировании достаточно указать top:10px; left:10px; right:10px; bottom:10px; а для ИЕ6 высоту expression(parentNode.offsetHeight-10+'px'); и также ширину, и усё ))

Если уж на то пошло, то экспрешна придется 2 писать - еще один для ширины. Но это слишком глючная технология, чтобы ей пользоваться в серьезных проектах.

Link to comment
Share on other sites
  • 0
AjiTae Explorer

AjiTae

Posted
Posted (edited)

Присоединяюсь к прикладному бреду и извращениям.))

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html >
<head>
	<title>=\</title>
	<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 {background: #ddd;}
	</style>
</head>

<body>
<div class="bg"></div>
<p class="p">Oh, freak!=\</p>
</body>
</html>

Пашет в фф3 и ие6(остальных нет под рукой чтоб проверить).

Основная фишка в том, что при растягивании по высоте отступ сохраняется и не происходит бяк как в пред. примерах.))

Edited by AjiTae
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept