DIV прижат к низу окна. Как теперь середину расстянуть на всё простр.? « Верстка и оформление

Сообщения: 237 Репутация: N Группа: Адекваты

9 сентября 2009 г. 21:27, спустя 2 часа 30 минут 16 секунд

Нифига у меня не получается. Ни таблицами ни дивами …

Скотина IE … то так не так, то то ни сё.

Подожду, пока Тимур выспится … может что получится …

Timur

Сообщения: 1068 Репутация: N Группа: Джедаи

9 сентября 2009 г. 22:24, спустя 57 минут 7 секунд

AndryG, мне всю ночь делать лабы по метоптам, так что врядли сегодня дождешься.

Дабы рамку поставить. :) (и не надо ржать :))))) )

хм. А если например нижний край рамки поместить в футер, а верхний - в хеадер? (заверни для этого их в другие блоки и установи им border-top и border-bottom соответственно). Слева и справа сделай рамку через background, а что б не воротить лишние дивы используй body и родительский блок шапки и подвала. Сделай gif'ку 1x1 и —

body { background:url(border_1x1.gif) repeat-y left top; } /* левая сторона рамки  */
#content { background:url(border_1x1.gif) repeat-y right top; } /* правая сторона рамки */

где #content — блок, в котором находятся шапка и подвал

это так, фантазия, как вариант. Попозже попробую сделать нормально …

AndryG

Сообщения: 237 Репутация: N Группа: Адекваты

9 сентября 2009 г. 22:29, спустя 4 минуты 44 секунды

Я две недели колупался %) и сегодня не жду ничего.
Тоже думал про изврат с картинками… захотелось нормально … жена скоро с дома выгонит или комп выбросит с этой версткой :)

mario

Сообщения: 6067 Репутация: N Группа: Джедаи

9 сентября 2009 г. 23:03, спустя 34 минуты 34 секунды

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


#header
{
width:100%;
height: 50px; /*хз сколько тебе надо? :)*/
background: #CBE0CB;
border: 1px solid #208316;
color: #008040;
}
#content
{
width:100%;
height: auto;
background: #E7EEE7;
border: 1px solid #FF0000;
color: #000000;
}
#footer
{
width:100%;
height: 50px; /*хз сколько тебе надо? :)*/
background: #CBE0CB;
border: 1px solid #208316;
color: #000000;
}

не пробывал, но не ужели это не так?

Спустя 26 сек.

щас погоди, забыл прижать футер. Щас прижмем

mario

Сообщения: 6067 Репутация: N Группа: Джедаи

9 сентября 2009 г. 23:16, спустя 12 минут 29 секунд

в общем завтра, щас уставший… я спать. всем споки! :)

AndryG

Сообщения: 237 Репутация: N Группа: Адекваты

10 сентября 2009 г. 10:05, спустя 10 часов 49 минут 23 секунды

Не надо header.
Под менюшкой может появляться доп. строка меню, похожая панель сообщений … одним словом, высота блока неизвестна.
Пусть идет в основном блоке.

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

Спустя 45 сек.

И уменя ширина фиксированная под 1024 расширение.

Givi

Сообщения: 2284 Репутация: N Группа: Адекваты

10 сентября 2009 г. 10:25, спустя 19 минут 25 секунд

AndryG, я скинул ссылку, где все колонки растягиваются на высоту в 100% при опущенном вниз футере. http://pyha.ru/forum/topic/3381.msg69251#msg69251

AndryG

Сообщения: 237 Репутация: N Группа: Адекваты

10 сентября 2009 г. 11:20, спустя 55 минут 41 секунду

Да, я видел, спасибо. Хорошо, что с текстом пояснений - есть на чем поучится.
Вчера не мог зайти туда.

Желания у меня, видать, неправильные… никто (и по Вашей ссылке тоже) не тянет центральный див на всю высоту. :)

Вернулся опять к первоначальному вариант.

Пробую через JS устанавливать высоту центрального блока.

Если в FF ещё хоть нечто получается - надо считать толком все границы/отступы и всё становится на место.
То IE, при появлении полос прокутки, упорно считает их в высоту/ширина окна и получается вообще попа.

Пока остановился на варианте установки высоты только в событии onload.
Фигня полная … понимаю, но надо дальше двигаться, а то я на этой верстке свихнусь :)

AndryG

Сообщения: 237 Репутация: N Группа: Адекваты

14 сентября 2009 г. 13:21, спустя 4 дня 2 часа

Продолжаю колупать …


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <link rel="icon" href="http://work.spider/favicon.ico" type="image/x-icon">
  <link rel="STYLESHEET" type="text/css" href="12_files/default.css">
  <title></title>
  <script type="text/javascript" src="12_files/jquery.js"></script>
  <script>
    $(window).ready(function(){
      $('#scl_main').height(
        $('#scl_content').height() - $('#scl_main').position().top - $('#scl_footer_ground').height() - 2
      );
    });
  </script>
</head>
<body id="body" style="background-color: rgb(231, 238, 231); font-family: Arial,sans-serif; font-size: 10pt;">
<div id="scl_content">
<div id="main_menu" class="main_menu">
 .:: <a href="http://work.spider/">Головна</a> ::.
</div>
<div id=scl_main>content</div>
<div id="scl_footer_ground"> </div>
</div> <!–scl_content–>
<div id="scl_footer"></div>
</body>
</html>

Устанавливаю высоту центрального дива через JS. Пока только при загрузке страницы.


    $(window).ready(function(){
      $('#scl_main').height(
        $('#scl_content').height() - $('#scl_main').position().top - $('#scl_footer_ground').height() - 2
      );
    });

Не могу найти 1 пиксель высоты … видать наткнулся на глюк IE6,7.

FF3, IE8 показывает нормально. А в младших IE (6,7) появляется один лишний бит высоты и полоса прокрутки вместе с ним

Поможете найти?

12.rar (75)
12.png (128)

Trej Gun

Сообщения: 5305 Репутация: N Группа: в ухо

14 сентября 2009 г. 14:07, спустя 46 минут 25 секунд

падинги и маргины посмотри или бордер

AndryG

Сообщения: 237 Репутация: N Группа: Адекваты

14 сентября 2009 г. 14:59, спустя 51 минуту 17 секунд

перерыл я уже все маргины и паддингы … не нашёл … вот и прошу помощи.

Ещё фигня … если в скрипте поставить минус три, а не два.

То над футером получается зазор два пикселя … о тех пор, пока контент меньше окна … потом будет единича

artoodetoo

Сообщения: 5147 Репутация: N Группа: в ухо

16 сентября 2009 г. 17:59, спустя 2 дня 3 часа

http://ryanfait.com/sticky-footer/

ιιlllιlllι унц-унц

AndryG

Сообщения: 237 Репутация: N Группа: Адекваты

16 сентября 2009 г. 18:31, спустя 31 минуту 22 секунды

Прижатый футер уже реализован. По такому же алгоритму.
Проблема теперь растянуть центральный DIV (в я content написал на примере выше) от верха до футера.

В Вашем примере этого нет.

Я уже смирился и с его однократной подгонкой через JS при загрузке страницы. Нефиг изменять размер окна после загрузки страницы :) Но полоса прокрутки в IE6 при "короткой" странице ещё бесит.

artoodetoo

Сообщения: 5147 Репутация: N Группа: в ухо

17 сентября 2009 г. 7:52, спустя 13 часов 21 минуту 1 секунду

Зачем загонять себя в угол? В трюке Раяна Фейта нет отдельного DIV для "центрального блока". Но если объявить background для <DIV class="wrapper">, то будет нужная иллюзия.
Нет же тебе надо именно рамку чтобы потрахаться с IE6! Костыли JS впендюрил. Пойми, чем сложнее вёрстка, тем легче она косячится когда что-то добавляешь. Не лучше ли успокоиться на простом и работающем?

ιιlllιlllι унц-унц

Timur

Сообщения: 1068 Репутация: N Группа: Джедаи

18 сентября 2009 г. 18:46, спустя 1 день 10 часов 53 минуты

Я наконец-то сдал летнюю сессию, поэтому как и обещал:

Если вкратце — для рамки контентной части используется отдельный пустой блок #border_box. Он спозиционирован абсолютно, относительно блока #page.
#page растянут на весь документ, #border_box отступает от него на высоту шапки и подвала.
+ подвал прижат способом с отрицательным маргином

Если подробнее —

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 <div id="page">
  <div id="header"></div>
  <div id="border_box"></div>
  <div id="content">
   CSS используется создателями веб-страниц для задания цветов, шрифтов, 
   расположения и других аспектов представления документа. Основной целью 
   разработки CSS являлось разделение содержимого (написанного на HTML или 
   другом языке разметки) и представления документа (написанного на CSS). 
   Это разделение может увеличить доступность документа, предоставить большую 
   гибкость и возможность управления его представлением, а также уменьшить 
   сложность и повторяемость в структурном содержимом. Кроме того, CSS 
   позволяет представлять один и тот же документ в различных стилях или 
   методах вывода, таких как экранное представление, печать, чтение голосом 
   (специальным голосовым браузером или программой чтения с экрана), или 
   при выводе устройствами, использующими Шрифт Брайля.
  </div>
  <div id="footer_clear"></div>
 </div>
 
 <div id="footer"></div>
</body>
</html>

html,body {
    height:100%; /* страницу по всей высоте окна */
    margin:0;
    padding:0;
    overflow:auto; /* заставляет футер прижиматься при строгом доктайпе */
}

body {
     /* без этого отступы у #border_box расчитываются от края окна */
    position:relative;
}
#page {
    position:relative; /* для позиционирования #border_box */
    min-height:100%;
}
*html #page {
    height:100%; /* ie6 не знает min-height */
}

#header {
    background:#cec;
    border:1px solid #090;
    height:50px;
}

#border_box {
    position:absolute;
    border:2px solid #f00;
    left:0;    
    right:0;
    
    /* высота (50px) + верхня рамка (1px) + нижняя рамка (1px) подвала */
    bottom:52px;
    
    /* высота (50px) + верхня рамка (1px) + нижняя рамка (1px) шапки */
    top:52px;
}
*html #border_box {
    /* 
     * в IE6 не работает автоматический расчет размеров, поэтому придется 
     * использовать экспрешины;
     * важно: расчет идет относительно блока #page, а не body (иначе будет 
     * расчитываться от размеров окна, что нежелатель) 
     */
    
    /* 4px = толщина левой и правой рамки */
    width:expression(document.getElementById('page').offsetWidth-4);
    
    /* отступы сверху и снизу и рамка сверху и снизу (52px + 52px + 2px + 2px) */
    height:expression(document.getElementById('page').offsetHeight-108);
}

#footer_clear {
    /* 
     * чтобы подвал не налезал на контент 
     * (высота подвала (50px) + верхняя и нижняя рамка (1px + 1px) 
     */
    height:52px;
}
#footer {
    background:#cec;
    border:1px solid #090;
    height:50px;
    margin-top:-52px; /* поднимаем подвал на 52px над #page */
}

Работает везде. Строгий доктайп при этом необязателен (фактически без него даже можно убрать overflow:auto у html,body, но оно вроде не мешает). Недостаток — несемантично использовать отдельный див только для рамки.

DIV прижат к низу окна. Как теперь середину расстянуть на всё простр.?

Войти