PDA-версия   Home   Карта сайта   E-Mail
 
 E-mailПароль 
  

 
Забыл пароль  Регистрация
  Главная / О себе / Техноблог / Профессиональное: Верстка по сценарию...

Сейчас на сайте

2 пользователей в том числе:
В чате 0 пользователей в том числе:
   

Техноблог

Профессиональное: Верстка по сценарию...

 Как известно, трехсекционная схема веб-шаблона, снабженная к тому же "хедером" и "футером" легко получается только при использовании таблицы. С помощью SCC можно получить только то или иное приближение к идеалу.
 
 В незапамятные времена нашел я в сети вот такое решение:
 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
 <!-- saved from url=(0051)http://www.alistapart.com/d/negativemargins/ex5.htm -->
 <HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Example 5: Negative Margins</TITLE>
 <META http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
 <STYLE type=text/css media=screen>#header {
  BORDER-RIGHT: #cecea5 1px solid; BORDER-TOP: #cecea5 1px solid; BACKGROUND: #d7dabd; BORDER-LEFT: #cecea5 1px solid; BORDER-BOTTOM: #cecea5 1px solid
 }
 #outer_wrapper {
  BACKGROUND: url(background_3.gif) #fff repeat-y left 50%
 }
 #wrapper {
  BACKGROUND: url(background_2.gif) repeat-y right 50%
 }
 #container {
  BACKGROUND: url(background_2.gif) repeat-y right 50%; FLOAT: left; WIDTH: 100%; MARGIN-RIGHT: -200px
 }
 #content {
  BACKGROUND: url(background_3.gif) repeat-y left 50%; MARGIN-RIGHT: 200px
 }
 #main {
  MARGIN-LEFT: 150px
 }
 #left {
  FLOAT: left; WIDTH: 150px
 }
 #sidebar {
  FLOAT: right; WIDTH: 200px
 }
 #footer {
  BORDER-RIGHT: #cecea5 1px solid; BORDER-TOP: #cecea5 1px solid; BACKGROUND: #d7dabd; BORDER-LEFT: #cecea5 1px solid; BORDER-BOTTOM: #cecea5 1px solid
 }
 H1 {
  MARGIN-TOP: 0px
 }
 .last {
  MARGIN-BOTTOM: 0px
 }
 .clearing {
  CLEAR: both; HEIGHT: 0px
 }
 </STYLE>
 
 <META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
 <BODY>
 <DIV id=header>header</DIV>
 <DIV id=outer_wrapper>
 <DIV id=wrapper>
 <DIV id=container>
 <DIV id=content>
 <DIV id=left>
 <H1>navbar</H1>
 <UL>
  <LI>link one
  <LI>link two </LI></UL></DIV>
 <DIV id=main>
 <H1>content</H1>
 <P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius
 eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora
 torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi
 lectus, placerat nec, mollis quis, posuere eget, arcu.</P>
 <P class=last>Donec euismod. Praesent mauris mi, adipiscing non, mollis eget,
 adipiscing ac, erat. Integer nonummy mauris sit amet metus. In adipiscing,
 ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet urna
 diam sed tellus. Etiam semper sapien eget metus.</P></DIV></DIV></DIV>
 <DIV id=sidebar>
 <H1>sidebar</H1>
 <P>Here be your sidebar. Add whatever content you may desire.</P></DIV>
 <DIV class=clearing></DIV></DIV></DIV>
 <DIV id=footer>footer</DIV></BODY></HTML>

 
 А кто может предложить иные варианты?
 
 Вот это можно взять за основу. Простая верстка, имеющая только "хедер" и "футер":
 <!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>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title>Прижимаем футер к низу с помощью css</title>
 
 <style>
 html, body{
  padding:0;
  margin:0;
  height:100%; /* Задаём 100% высоту для html и body */
  position:relative; /* Если этого не задать, в Опере почему-то футер не прижимается сразу,
  прижимается только после ресайза окна, какой-то странный глюк*/
  }
  #container{
  width: 990px;
  margin: 0 auto;
  background:#FFF; /* Просто, чтобы было видно контейнер */
  min-height:100%; /* Задаем минимальную высоту 100% */
  _height:100%; /* Задаем высоту 100% в ИЕ6 с помощью хака */
  }
  #main{
  padding-bottom:107px; /* Задаём нижний отступ, равный высоте футера, можно задать и больше,
  но главное, чтобы не было меньше, иначе футер налезет на контент*/
  }
  #footer{
  clear: both;
  width: 990px;
  margin: 0 auto;
  background:#36F;
  height:107px; /* высота футера */
  margin-top:-107px; /* отрицательный маргин, равный высоте футера */
  position:relative; /* Чтобы футер "всплыл" из под дива #container, если этого не сделать, то ссылки в футере не кликабельны и нельзя выделить текст*/
  background: url(images/footer.jpg) no-repeat;
  }
 
  #header{
  position:relative;
  background: url(images/header.jpg) no-repeat;
  height: 174px;
  }
 </style>
 <body>
  <div id="container">
  <div id="main" style="background-color:#00ff00;">
  s
  <div style="clear: both; font-size: 0px; height: 24px;">&nbsp;</div>
  </div>
  </div>
  <div id="footer" style="background-color:#ff0000;">
  f
  </div>
 </body>
 </html>


Теги:
  Вставить в блог: Livejournal   Я.ру   Buzz



PDF-версия


Оставьте свой комментарий

Введите код с картинки
Имя пользователя
E-mail
Домашняя страница
Подключить файл или картинку

   

UFORUM

 

Уфологический форум. Аномальные явления, уфология, непознанное.
Общий форум сайта

Анкеты очевидцев
Если Вы наблюдали НЛО, неизвестное животное или другое аномальное явление, расскажите об этом здесь.
Анкета очевидца НЛО
Анкета очевидца АЯ
Анкета очевидца неизвестного животного
Анкета очевидца АЯ в космосе

 

Мысли вслух
Что-то, подобное дневнику или блогу - мысли вслух, не обязательно мои, но и не всегда чужие. Иногда это веселые истории, иногда - заметки для памяти, иногда что-то любопытное, иногда - сухие научные факты. А в общем - всего понемножку. Ваши комментарии приветствуются.

- Главная - Стихи - Фотография - Проза - Уфология - О себе - Фотоальбом - Новости - Контакты -