Рамка вокруг сайта слоями <DIV>

komusite · 10.05.2009

Здравствуйте все.

Представте себе сайт внутри рамки. Или рамку вокруг сайта

. Короче говоря нужно что бы футер был прижат к низу страницы и при этом рамка полностью рисовалась на всю высоту. Никак не могу заставить рисоваться правый орнамент. На картинке он обозначен знаком восклицания. Подскажите как его сделать, пожалуйста.

Верстка на DIV-ах . Делаю просто- вкладываю один DIV в другой, а орнамент запихаю в background.

**********************************************************

Код:

html {height: 100%}
body {
 min-height: 100%;
 height: auto !important;
 height: 100%;
  background: url(images/oblaka.gif) #91bfe4;
}

#wrapperL {
 min-width: 1000px;
 min-height: 100%;
 height: auto !important;
 height: 100%;
 background: url(images/main_left.gif) repeat-y;
}

#wrapperR {
 min-width: 1000px;
 width: 100%;
 min-height: 500px;
 height: auto !important;
 height: 100%;
 background: url(images/main_right.gif) repeat-y 100% 0%;
}

#header
{
width:100%;
height: 93px;
}
#header_middle
{
background: url(images/header_middle.gif) repeat-x;
}
#header_left
{
background: url(images/header_left.gif) no-repeat;
}
#header_right
{
background: url(images/header_right.gif) no-repeat 100% 0%;
}

#middle {
 width: 100%;
 padding: 0 0 100px;
 height: 1%;
 margin: 0px 85px;
}

#left {
 width: 200px;
 float: left;
}

#content {
padding-left: 200px;
}

#footer {
 margin: -100px auto 0;
 height: 100px;
}
</style>

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

<div id="wrapperL">
  <div id="wrapperR">
    
    <div id="header">
 	</div>

 
 <div id="middle">
 			  <div id="left">
 		   </div><!-- #left-->

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

</div>
</div>

<div id="footer">
</div>

komusite · 11.05.2009

Вот нашел класную рамку. То что нада. Только IE6 ее не работает. Подскажите как можно его заставить. Пожалуйста.

Код:

<style type="text/css">


#top, #bottom, #left, #right {
background: #a5ebff;
position: fixed;
}
#left, #right {
top: 0; bottom: 0;
width: 15px;
}
#left { left: 0; }
#right { right: 0; }
#top, #bottom {
left: 0; right: 0;
height: 15px;
}
#top { top: 0; }
#bottom { bottom: 0; }


</style>
</head>

<body>

<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>

</body>

Creator · 11.05.2009

В общем у меня получилось следующее:

Код:

<!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>
  <style type="text/css">

  body { position: absolute; margin: 0; height: 96%; width: 100%;}

  #main {
  height: 100%;
  width: auto;
  border: 15px solid #a5ebff;
  }

  </style>
</head>

<body>

<div id="main">asdasd</div>


</body>
</html>

P.S. Вы достаточно сложный код привели, я так и не смог запустить его под ИЕ.

komusite · 12.05.2009

Дело в том что нужно не просто цветом залить рамку, а фоновым изображением, орнаментом так сказать. Все получается кроме одного - правый орнамент не растягивается на всю высоту странички, а растягивается в зависимости от содержимого, а это не есть ГУД.

komusite · 12.05.2009

ну .... короче вроде бы я разобрался как ето замутить, но еще есть траблы. Скоро выложу готовый код. А пачиму эта нихто не хочет помочь? Неужели тема такая не актуальная ?

Creator · 13.05.2009

Выкладывайте)

А помочь готовы многие, по возможности)

komusite · 13.05.2009

Вот готовый код. Работает в последних броузерах SAFARI OPERA MOZILA также в IE7 IE6

Для IE6 не забываем делать доп файл css со следующим содержанием : body{height: 100%;}

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/DTD/transitional.dtd">
<html>
<head>
<title>Мегакорпорация</title>
 <!--[if lte IE 6]><link rel="stylesheet" href="style_ie.css" type="text/css" media="screen" /><![endif]-->
<style type="text/css">

/* фон всего сайта - голубое небо и облачка */
html 
{
  height:100%;
  background: url(images/oblaka.gif) #91bfe4;
}

/* бодя будет выполнять роль левого орнамента */
body {
  padding:0;
  margin:0px;
  min-height:100%;
  position:absolute; 
  z-index:0;
  width: 100%;
  background: url(images/main_left.gif) repeat-y;
  /* для ie6 добавим еще  height:100%; в отдельном CSS файле */
}


/* слой высотой в 100% и повторения орнамента по Y у него к сожалению не наблюдается
   его задача отрисовать правый орнамент который будет доставать аж до 
   футера когда контента очень мало.
*/   
#right_ornament_1 {
  position:absolute;
  height:100%;
  width:100%; 
  z-index:-1;
  background: url(images/main_right.gif) repeat-y 100% 0%;
}

/* слой "без высоты" тоесть высота слоя зависит он количества контента
   и если контента будет много - слой растянится на всю высоту контента
   и опять орнамент будет доставать аж до футера
*/
#right_ornament_2
{
  width:100%; 
  background: url(images/main_right.gif) repeat-y 100% 0%;
}

/* ну просто ХеДР фиксированой высоты */
#header
{
height: 93px;
background: url(images/header_middle.gif) repeat-x;
}

/* футер фиксированой высоты который будет прижат к низу*/
#footer{
  position:absolute; 
  bottom:0;
  height:142px; 
  width:100%;
  padding: 0;
  background: url(images/footer_pole1.gif) repeat-x #91bfe4;
}

/* центральный слой делаем отступы по 85 справа и слева что бы 
было видно орнаменты и падинг 142 место для футера
а после этого - overflow: hidden; футер растянется на всю высоту
содержимого, без этого броузеры фривольничают */

#content {
  margin: 0px 85px;
  padding-bottom: 142px;
  overflow: hidden;
}

/* левая колонка для меню фиксированой ширины в 200 пикс*/
#left
{
float: left;
background: #668800;
width: 200px;
}

/* правая колонка - РЕЗИНОВАЯ 
паддинг 200 пикс нужен как место для левой колонки*/

#right
{
padding-left: 200px;
}

/* слой специально для уродца IE6 незнаю как, но методом проб и ошибок
я его сделал */
#CON
{
  width: 100%;
  overflow: hidden;
  float: left;
  padding-bottom: 1px;
}


</style>
</head>


<body>
<div id="right_ornament_1"></div>

 		 <div id ="right_ornament_2">
 			  <div id="header"> </div>
 		  
 			  <div id="content">
 				   <div id="left">левое меню </div>
 				   <div id="right"> 
 						<div id ="CON">правая резиновая колонка </div> 
 				  </div>
 			  </div>
 		 </div>

<div id="footer"> </div>
<body>
</html>

Рамка вокруг сайта слоями <DIV>

komusite

Active Member

komusite

Active Member

Creator

Administrator

komusite

Active Member

komusite

Active Member

Creator

Administrator

komusite

Active Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей