Форум Сайтостроение Веб-строительство

div - 100%-margins

P
На сайте с 16.06.2012
Offline
0
persten
3775

есть шаблон: 


<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

страница растянута по высоте на 100%

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

header - 100px

content - 100%

footer - 50px

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

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

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

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

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

| |

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

| |

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

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

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

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

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

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

Desesperada
На сайте с 11.10.2010
Offline
77
Desesperada
#1

обернуть все это дело во wrapper какой-нибудь и уже ему высоту 100%, а от него отталкиваются все остальные div

хедер, под ним контент

а футер прижать к краю монитора

Создание/наполнение сайтов ICQ 7860919 Принимаю предзаказы на сателлиты/гс в индексе
Рубака
На сайте с 11.03.2011
Offline
12
Рубака
#2

Ох, что-то вы понаписали=) Три раза перчитал, и до конца не уверен что понял.

По этому есть вопросы:

1. Так мы оставляем все таки структуру ту чту есть, просто добавляем закругленные края к диву content?

2. Вы уже придумали каким образом будете закруглять углы? Лично я знаю несколько способов.

JS OffSet определение позиции В Россию пришел реальный Нужна помощь, дизайнеры!
P
На сайте с 16.06.2012
Offline
0
persten
#3
Рубака:

2. Вы уже придумали каким образом будете закруглять углы? Лично я знаю несколько способов.

закругленные края хочу сделать при помощи border-radius и PIE для IE

Рубака:

1. Так мы оставляем все таки структуру ту чту есть, просто добавляем закругленные края к диву content?

сейчас если делать закругленные края при помощи border-radius, то они скрываются в header и footer, так что предложенная мной структура не подходит - требуется либо как то доработать ее, либо же может есть какой нибудь шаблон, который подойдет под мои нужды 😕 ???

Рубака:
Лично я знаю несколько способов.

может вы подскажите как можно закруглить края не используя border-radius и в то же время не меняя текущей структуры документа?

css закругление углов Не работает border-radius.htc для CSS: вогнутый угол у
Desesperada
На сайте с 11.10.2010
Offline
77
Desesperada
#4
persten:
может вы подскажите как можно закруглить края не используя border-radius и в то же время не меняя текущей структуры документа?

ещё есть десяток способов)

от фона до скрипта

Рубака
На сайте с 11.03.2011
Offline
12
Рубака
#5

Конечно если задавать диву контент закругленные края то они будут под шапкой и подвалом. В целом ваша структура странная но если она вас устраивает и вам всего лишь нужно добавить углы, можно добавить еще один див в див content. 


<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;}



#content_radius {

	width: 100%;

	height: 100%;

	float: left;

	min-height: 100%; 

	border-radius: 8px;

	}

	





/* 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 id="content_radius">

	    <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>

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

</body>

</html>

Я советую не пользоваться хаками для создания закругленных углов. Проще добавить еще один див (обернув content_radius), не использовать не кроссбраузерный стиль border-radius, а добваить к каждому диву бэкграунд (top и bottom). 


<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;}



#content_radius_top {

	width: 100%;

	height: 100%;

	float: left;

	min-height: 100%;

	background: url(путь до картинки с полоской в 1024 шириной и скажем 10px высотой с закруглениями) top no-repeat;

	}

	

#content_radius_bottom {

	width: 100%;

	height: 100%;

	float: left;

	min-height: 100%;

	background: url(путь до картинки с полоской в 1024 шириной и скажем 10px высотой с закруглениями) bottom no-repeat;

	}

	





/* 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 id="content_radius_top">

	<div id="content_radius_bottom">

	    <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>

</div>

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

</body>

</html>

Есть еще вариант =)

---------- Добавлено 17.06.2012 в 17:43 ----------

Подправил код, обернув сайт дивом (как вам советовал Desesperada), и переделал чуть верстку. А то боюсь из нерабочих примеров вам нечего не понять. 


<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;

}





#conteiner {

	margin: 0 auto;

	width: 1024px;

	}

	

.container {

	float: left;

	width: 100%;

	margin-bottom: 50px;

	}



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

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





#footer {height: 50px; margin-top: -50px; background: #CCFFFF; float: left; width: 100%;}

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



#header {width: 100%; height: 100px; background: #CCFFCC; float: left;}

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



#content_radius_top {

	width: 100%;

	height: 100%;

	float: left;

	min-height: 100%;

	background: url(путь до картинки с полоской в 1024 шириной и скажем 10px высотой с закруглениями) top no-repeat;

	}

	

#content_radius_bottom {

	width: 100%;

	height: 100%;

	float: left;

	min-height: 100%;

	background: url(путь до картинки с полоской в 1024 шириной и скажем 10px высотой с закруглениями) bottom no-repeat;

	}

	





/* 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="conteiner">

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

	<div id="content">

	    <div id="content_radius_top">

		<div id="content_radius_bottom">

		    <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>

	</div>

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



</div>

</body>

</html>
Нужен блок с закруглёнными Замена тегов P на Рекламная сеть Яндекса считает

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий