Форум XHTML.ru <!-- по-русски -->

Сайты - по стандартам, но не стандартные сайты!


#1 13.06.2012 23:43

persten20
Новичок
Зарегистрирован: 13.06.2012
Сообщений: 1

div - 100%-margins

есть шаблон:

Код:

<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

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

Нет на форуме

 

#2 11.10.2013 11:43

blackand
Новичок
Откуда: Украина
Зарегистрирован: 11.10.2013
Сообщений: 2
Вебсайт

Re: div - 100%-margins

На счет ширины, тут только яваскриптом вычислять. От процентов отступы корректно работать не будут. т.к. некоторые браузеры считают высоту с бордером, другие нет, третьи с отступом и т.д

Скругленные углы нужно делать border-radius: 5px;  например. Однако это свойство для CSS3. Зато быстро и не громоздко в коде страницы


[url=http://www.lispert.com/]Litecoin[/url] - электронное серебро

Нет на форуме

 

Board footer

Работает на PunBB
© 2002—2005 Rickard Andersson