Отступы

Cabalist · June 17, 2009

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

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

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

Cabalist · June 22, 2009

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

А как же Я если чесно не ожидал что мне так развёрнуто ответят на мой вопрос

psywalker · June 22, 2009

Cabalist

А как же smile.gif Я если чесно не ожидал что мне так развёрнуто ответят на мой вопрос smile.gif

А как ты думал? На этом форуме по-другому не бывает

Cabalist · June 22, 2009

Ну тогда это лучший форум из тех что я видел Огромное всем спасибо за решённую проблему!

psywalker · June 22, 2009

Ну тогда это лучший форум из тех что я видел smile.gif Огромное всем спасибо за решённую проблему!

Тыы думаешь она решённая?? хаахха, наивный ты человек.. мы только начали её решать, щас Камрады передохнут и снова думать возьмутся :D

mishka · May 28, 2010

Тыы думаешь она решённая?? хаахха, наивный ты человек.. мы только начали её решать, щас Камрады передохнут и снова думать возьмутся

Ну отдохнули годик и снова взялись

Я бы задачу так решил

<!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>test</title>
	<style type="text/css">
		html{height:100%;}
		body{
			margin:0;
			height:100%;
			background:#d03900;
		}
		.bt, .bb{
			height:10px;
			background:#d03900;
			overflow:hidden;
			margin:-10px 0 0;
			position:relative;
		}
		.bt{margin:0 0 -10px;}
		#wrapper{
			min-height:100%;
			margin:0 10px;
			background:#fff;
		}
		* html #wrapper{height:100%;}
		#main{
			padding:10px;
		}
	</style>
</head>
<body>
	<div class="bt"></div>
	<div id="wrapper">
		<div id="main">
			<p>Lorem ipsum dolor sit amet consectetuer auctor sed neque rhoncus elit. Malesuada quis leo pretium Nulla consectetuer quam sit Suspendisse at sed. Vestibulum nunc Integer Lorem eget Phasellus convallis neque convallis ut Nulla. Nibh quis eleifend nec et habitant senectus eget wisi morbi ante. Neque adipiscing nec pede nunc a tellus semper eget nibh Vivamus. Diam.</p>
			<p>Ligula eleifend ac dictum ut elit felis massa Maecenas congue in. Justo et id et pretium enim consequat feugiat nascetur auctor Nam. Id vestibulum justo parturient diam pretium lorem ante dui gravida auctor. Lorem Sed egestas a Curabitur Quisque et sociis aliquam commodo suscipit. Consectetuer mauris Ut turpis wisi.</p>
		</div>
	</div>
	<div class="bb"></div>
</body>
</html>

Edited May 28, 2010 by mishka2

psywalker · May 28, 2010

Да Медведь, неплохо. Но я бы скорее всего тупо полоски фона повесил на body и html, нижние и верхние. Ну а боковые полосы можно было и на главный контейнер прицепить, бордерами обычными. В итоге всего один элемент используется и пару полосок 1х10 гиф фона.

mishka · May 28, 2010

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

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

Если с картинками делать то тогда так:

<!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>test</title>
	<style type="text/css">
		html{
			height:100%;
		}
		body{
			margin:0;
			height:100%;
			background:url(bg.gif) repeat-x;
		}
		#wrapper{
			min-height:100%;
			border-style:solid;
			border-width:0 10px;
			border-color:#d03900;
			overflow:hidden;
			background:url(bg.gif) repeat-x 0 100%;
		}
		* html #wrapper{
			height:100%;
			overflow:visible;
		}
	</style>
</head>
<body>
	<div id="wrapper">
			<p>Lorem ipsum dolor sit amet consectetuer Vestibulum convallis platea condimentum felis. Vitae magnis cursus orci turpis accumsan montes orci interdum ligula Vestibulum. Ullamcorper dignissim vel interdum et eros sagittis facilisi metus mus vel. Nunc Nam nibh tincidunt elit id lacinia non dui lorem lobortis. Diam eu eget In Ut a laoreet eget convallis et faucibus. Tellus facilisi mollis sapien sagittis.</p>
			<p>Penatibus vestibulum Nullam elit pede condimentum wisi fermentum et nonummy nunc. Lorem id dolor hendrerit et laoreet quis Curabitur cursus et interdum. Turpis Nam nec Cras rhoncus accumsan vitae et ut Nunc congue. Suspendisse ornare Lorem nibh gravida pretium sollicitudin laoreet Lorem laoreet tincidunt. Elit tortor sit accumsan Phasellus pretium tellus magnis nibh orci nascetur. Dolor urna turpis ullamcorper Sed Nunc.</p>
	</div>
</body>
</html>

Edited May 28, 2010 by Searcher

psywalker · May 28, 2010

Ну да, я так и хотел, ошибся просто

Sign In

Отступы

Question

Cabalist

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

Cabalist

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Cabalist

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information