LINUX.ORG.RU
Форум — Web-development  

div - 100%-margins

 


0

1

есть шаблон: ===========

<html xmlns="http://www.w3.org/1999/xhtml" lang=«ru»>

<head>

<title>template - width 1024 center</title>

<meta http-equiv=«Content-Type» content=«text/html; charset=Windows-1251»>

<style>

* {margin: 0; padding: 0}

html, body {height: 100%}

body {

background: #CCFF33;

}

#content {height: auto !important; height: 100%; min-height: 100%; background: #FFFFCC}

#content .menu {width: 1024px; margin: 0 auto; padding: 105px 20px 5px 20px; border: 1px solid red;}

#content .container {width: 1024px; margin: 0 auto; padding: 30px 20px 60px 20px; border: 1px solid red;}

#footer {height: 50px; margin-top: -50px; background: #CCFFFF}

#footer .container {width: 1024px; margin: 0 auto; padding: 5px; border: 1px solid red;}

#header {width: 100%; height: 100px; position: absolute; top: 0; left: 0; background: #CCFFCC }

#header .container {width: 1024px; margin: 0 auto; padding: 20px; border: 1px solid red;}

/* FIX FOR IE6 */

*html body { text-align: center;}

*html div.menu { text-align: left;}

*html div.container { text-align: left;}

</style>

</head>

<body>

<div id=«header»><div class=«container»>Шапка</div></div>

<div id=«content»>

<div class=«menu»><a href=«#»>1</a> <a href=«#»>2</a> <a href=«#»>3</a> <a href=«#»>4</a> <a href=«#»>5</a></div> <div class=«container»>

<h3>Content header</h3>

<br /><br />

content<br />

content<br />

content<br />

content<br />

content<br />

content<br />

</div>

</div>

<div id=«footer»><div class=«container»>Подвал</div></div>

</body>

</html>

===========

сейчас как бы схема такая по высоте:

header - 100px

content - 100%

footer - 50px

у контента выставлены padding для header и footer

хотелось бы следующее:

------------------------------

| отступ (margin) высотой 100px |

------------------------------ | |

| |

| Контент - 100%-150px

| |

------------------------------

| отступ (margin) высотой 50px |

------------------------------

можно как нибудь проставить у content внешние отступы без появления скролла вертикального? или можно как нибудь сделать div внутри контента чтоб растягивался от header до footer и по высоте?

стоит задача сделать блок content со скругленными углами и на данном шаблоне все углы скрываются в header и footer

очень нужно!!! помогите пожалуйста!



Последнее исправление: persten (всего исправлений: 2)
← Посоветуйте плагины для Eclipse
подскажите cms по функционалу... →

Если хочешь, чтобы кто-то хотя бы попытался тебе помочь - выложи код на pastebin, в нормальном виде с отступами.

Alve ★★★★★
()

Воспользоваться padding'ом вместо margin и вложить ещё один div если надо.

Deleted
()

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

Правильно ли я понимаю, что сайт должен всегда помещаться по высоте, без появления вертикального скрола? Если да, то тебе поможет этот пример. Посмотри как реализованы header, content и footer - там все легко.

стоит задача сделать блок content со скругленными углами и на данном шаблоне все углы скрываются в header и footer

Если сайт со 100%-й высотой - то, что тебе нужно, то мой пример, данный выше, решит твою проблему и с углами у content'а.

P.S. если я что-то понял не так, то напиши подробнее и менее сумбурно, если можно )

Boba_Fett ★
()

Если хочешь, чтобы кто-то хотя бы попытался тебе помочь - выложи код на pastebin, в нормальном виде с отступами. Alve ** (14.06.2012 0:15:04)

извиняюсь, просто не нашел изначально оформления кода

вот код: 

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<title>template - width 1024 center</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">

<style>
* {margin: 0; padding: 0}
html, body {height: 100%}

body {
  background: #CCFF33;
}

#content {height: auto !important; height: 100%; min-height: 100%; background: #FFFFCC}
#content .menu {width: 1024px; margin: 0 auto; padding: 105px 20px 5px 20px; border: 1px solid red;}
#content .container {width: 1024px; margin: 0 auto; padding: 30px 20px 60px 20px; border: 1px solid red;}

#footer {height: 50px; margin-top: -50px; background: #CCFFFF}
#footer .container {width: 1024px; margin: 0 auto; padding: 5px; border: 1px solid red;}

#header {width: 100%; height: 100px; position: absolute; top: 0; left: 0; background: #CCFFCC }
#header .container {width: 1024px; margin: 0 auto; padding: 20px; border: 1px solid red;}

/* FIX FOR IE6 */
*html body { text-align: center;}
*html div.menu { text-align: left;}
*html div.container { text-align: left;}
</style>
</head>

<body>
<div id="header"><div class="container">Шапка</div></div>
<div id="content">
  <div class="menu"><a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a></div>
  <div class="container">
    <h3>Content header</h3>
    <br /><br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
  </div>
</div>
<div id="footer"><div class="container">Подвал</div></div>
</body>
</html>

если удобней на pastebin: http://pastebin.com/J8g5qVtX

Воспользоваться padding'ом вместо margin и вложить ещё один div если надо. Mystra_x64 ***** (14.06.2012 1:59:52)

пробовал вложить в div и раятнуть на 100% высоты - в итоге - вложенный div растянулся именно на 100% размера страницы и появился вертикальный скролл

Правильно ли я понимаю, что сайт должен всегда помещаться по высоте, без появления вертикального скрола? Если да, то тебе поможет этот пример. Посмотри как реализованы header, content и footer - там все легко.

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

persten
() автор топика
Ответ на: комментарий от persten

в этом примере при уменьшении окна все таки появляется вертикальный скролл

Это ограничение было сознательно сделано на этапе разработки по требованию заказчика, поэтому и был выставлен минимальный размер окна, при котором должен был появляться скрол. Однако, ничто не мешает такое ограничение убрать, конструктивных противопоказаний нет. Делаешь ту же разметку, но не задаешь минимальные размеры - и все работает. Области content так же задай overflow: hidden, дабы контент не расползался, если не помещается и скрола не будет.

Boba_Fett ★
()
Ответ на: комментарий от Boba_Fett

я с примером вашим разобрался код такой получился: 

<html xml:lang="ru" xmlns="://www.w3.org/1999/xhtml"><head>
	<title> -  </title>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <style type="text/css">
html {
	height: 100%;
	overflow: auto;
	border: 0;
	font-size: 100.01%;
}
body {
  height: 100%;
  margin: 0;
  cursor: default;
  background: #dadeb9;
  font: 0.625em Tahoma, Helvetica, Arial, sans-serif;
}

#container {
  width: 1024px;
  margin: 0 auto;
  
  height: 100%;
  min-width: 1000px;
  min-height: 600px;
  position: relative;
  _height: expression((document.body.clientHeight < 600) ? '600px' : '100%');
}

#header {
  width: 100%;
  height: 59px;
  border-bottom: 1px solid #999999;
}
#content {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  /*position: relative;*/
  position: absolute;
  top: 75px;
  bottom: 47px;
  *height: expression((container.clientHeight - 123) + "px");
  
  background: #FFFFFF;
  border: 1px solid #000000;
  
  box-shadow: 0 0 15px 0 #555555;
  -webkit-box-shadow: 0 0 15px 0 #555555;
  -moz-box-shadow: 0 0 15px 0 #555555;
  
  border-radius: 15px 15px 15px 15px;
  -moz-border-radius: 15px 15px 15px 15px;
  -webkit-border-radius: 15px 15px 15px 15px;
  behavior: url(css/PIE/PIE.htc);
  
  /*overflow: scroll;*/
  
}
#footer {
  width: 100%;
  height: 39px;
  position: absolute;
  bottom: 0;
  z-index: 1000;
  border-top: 1px solid #999999;
  background: #eeedd8;
}
/* IE 6 FIX */
* html body { text-align: center;}
* html #header  { text-align: left;}
* html #container { text-align: left;}
  </style>
<body>
	<div id="container">
		<div id="header" style="background: #ffaadd;">
			HEADER
		</div>
		<div id="content">
			CONTENT
		</div>
		<div id="footer">
			FOOTER - COPYRIGHT<br />
		</div>
	</div>
</body>
</html>
все хорошо - контент от хедера до футера, скругленные углы сделал при помощи border-radius и PIE для IE

одна проблема теперь появилась - если контента много, то он не помещается в блоке content, как нибудь можно это побороть? хотелось бы чтобы если контента много то чтоб страница продолжалась дальше и контент помещался весь

persten
() автор топика
Ответ на: комментарий от persten

хотелось бы чтобы если контента много то чтоб страница продолжалась дальше и контент помещался весь

О, так это уже другой шаблон требуется, этот не подходит, т.к. создан для веб-приложения, которое всегда должно помещаться в окне браузера без вертикального скрола (сам контент, если не помещался, скролился непосредственно внутри области content). Я поэтому и спросил, правильно ли понял про 100% высоту. Тут немного покумекать придется.

Boba_Fett ★
()
Ответ на: комментарий от persten

Вот, посидел немножко в свободное время, получился следующий шаблон, который отвечает требованиям:

<!doctype html>
<html>
<head>
<style>
* {
	margin: 0;
	padding: 0;
}
html, body {
	height: 100%;
}
#wrap-table {
	width: 960px;
	margin: auto;
	display: table;
	height: 100%;
}
#header-cell {
	height: 200px;
	display: table-cell;
}
#header {
	margin-bottom: 20px;
	height: 180px;
	background: steelblue;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
}
#content-row {
	display: table-row;
}
#content-cell {
	display: table-cell;
	border-radius: 15px;
	background: silver;
}
#content {
	min-height: 30px;
}
#footer-cell {
	height: 200px;
	display: table-cell;
}
#footer {
	height: 180px;
	margin-top: 20px;
	background: pink;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}
p {
	margin: 20px;
}
</style>
</head>
<body>
	<div id="wrap-table">
		<div id="header-cell">
			<div id="header"></div>
		</div>
		<div id="content-row">
			<div id="content-cell">
				<div id="content"></div>
			</div>
		</div>
		<div id="footer-cell">
			<div id="footer"></div>
		</div>
	</div>
</body>
</html>

P.S. должно работать во всех современных поп-браузерах (в IE - начиная с 8-го).

Boba_Fett ★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← Посоветуйте плагины для Eclipse
Web-development
подскажите cms по функционалу... →