Форум hotibo.ru

Aron · 12.02.2011 10:34

Подскажите пожайлуста код :
Резиновая верстка на 2-3 колонки с нижним footer прижатым к низу, с колонками одинаковой высоты.
Так чтобы колонки в зависимости от контента растягивались на всю высоту контента и имели одинаковою высоту.
В IE footer лезит наверх, а в Opere нельзя ограничить высоту колонок когда я их тяну.
Спасибо огромное всем.

Проба

headBlock

leftBlock

rightBlock

centerContent

footBlock

alemiks · #2 12.02.2011 12:19

я бы не парился, сделал скелет таблицей

Artem.Chertov · #3 12.02.2011 15:05

Если я всё правильно понял, попробуйте начать с этого

Код:

* {
 margin: 0px;
 padding: 0px;
}
body {
 height: 100%;
 background-color: #f00;
}
#left {
 width: 50%;
 height: 100%;
 background-color: #555;
}
#right {
 position: absolute;
 top: 0px;
 left: 50%;
 width: 50%;
}
#footer {
 width: 100%;
 height: 100px;
 background-color: #333;
 position: absolute;
 bottom: 0px;
}
l
r
f

Аня · #4 12.02.2011 21:10

Про footer читайте здесь http://webtest.chebykin.ru/articles/footer/
Если вдруг у вас с флоатами будет проблема при таком методе, то читайте тут /forum/viewtopic.php?id=462

LiveKillers · 15.02.2011 03:53

Кстати, насчёт footer'a небольшой совет: все приводимые в сети методы "прижатия" footer'a вниз при малом количестве контента не работают в IE5 (если не использовать таблицы, разумеется). Эту проблему можно решить с помощью CSS-свойства IE expression

Аня · #6 15.02.2011 09:15

Безобразие. Наверно, в NN4 они тоже не очень хорошо работают. Вопрос только в таком - а стоит ли поддерживать такие браузеры?
На мой взгляд - только по причине очень сильного желания заказчика, если не удалось переубедить его.

alemiks · 16.02.2011 15:16

Аня написал:

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

при чём здесь заказчик? а если его убедить на opera9, остальные можно не поддерживать? к слову, ie5 пользуются больше,чем opera и safari

Аня · #8 16.02.2011 16:22

Если вы тестируете на старых браузерах, то я рада за вас.
Я, например, не вижу смысла поддерживать их, если основная аудитория - не пользователи устаревших браузеров.
В опере все смотрится по умолчанию как минимум приемлемо, как обычно - хорошо. С ней как раз проблем не возникает. Что напишешь - ровно то и покажет. В отличие от ... хм, некоторых других. Так что на поддержку новых браузеров затраты времени и усилий минимальны.
А если верстать под старые...ну удачи.

tapazukk · 16.02.2011 19:08

Например на Mac'ax MacIE очень схоже ведет себя с ИЕ 5-х версий, тк под рукой маинтоша нет, то проще это предвидеть и снизить шанс некорректого отображения.

Del'ka · #10 16.02.2011 19:33

шапку - позицировать абсолютно (заодно уберёшь мусор - поисковики сразу контент скушают)

левый, правый, центральный блок требуют бэкграунда?
если нет - первым блоком на странице ставишь центральный, делаешь ему paddin'ы под шапку, лево и право.
лево, право - позицируешь абсолютно.
футер идёт после центра, шапка - самой последней.

если бэкграунд нужен:

Код:

    
      
      
      
      
    
#content_block {background: url("../img/bg_content_block.jpg") repeat-y; overflow: hidden} /* фон левой части */
  #right {float: right; background: #9a1b26 url("../img/bg_right.jpg") no-repeat}  /* фон правой части */

всё супер, но в Особенном Браузере глючит! что делать?

а вот что:

Код:

Отредактированно Del'ka (16.02.2011 19:42)

alemiks · #11 16.02.2011 22:50

tapazukk написал:

Например на Mac'ax MacIE очень схоже ведет себя с ИЕ 5-х версий, тк под рукой маинтоша нет, то проще это предвидеть и снизить шанс некорректого отображения.

ну здрасьте... macIE и winIE на разных движках работают, macIE более приближен к стандартам, чем IE6 и уж тем более IE5. например, поддержка png появилась в 2000 г.

tapazukk · 16.02.2011 23:59

Да нет, увы за маком я не сидел, но когда при версте обнаруживались баги, то правил под ИЕ 5,01, и странным образом на маке они пропадали. конечно чушь спорол, но это субективное наблюдение.К сожалению под винду не поставить браузер, что на маке, хотя есть эмуляция сафари (http://browsing.ru/2006/10/05/swift-01/) .

alemiks · #13 17.02.2011 00:31

tapazukk написал:

К сожалению под винду не поставить браузер, что на маке

самый простой выход — смотреть скриншоты сайта в safari http://danvine.com/icapture/
100% вариант — поставить macos на vmware (или приобрести живого мака )

kaskad095 · 19.05.2014 14:34

Вот такой вариант устроит?
br>"http://w3.org/TR/html4/loose.dtd"> float_body_lcr_no_relative



  

    


      Делаем колонку длиннее
MIDDLE Content

      width:500px;

    

    

      Делаем колонку длиннее
MIDDLE Left

    


    

      Делаем колонку длиннее
MIDDLE Right

    

  

  Footer

Форум hotibo.ru

#1 12.02.2011 10:34

Резиновая верстка на 2-3 колонки с нижним footer прижатым к низу

#2 12.02.2011 12:19

Re: Резиновая верстка на 2-3 колонки с нижним footer прижатым к низу

#3 12.02.2011 15:05

Re: Резиновая верстка на 2-3 колонки с нижним footer прижатым к низу

Код:

#4 12.02.2011 21:10

Re: Резиновая верстка на 2-3 колонки с нижним footer прижатым к низу

#5 15.02.2011 03:53

Re: Резиновая верстка на 2-3 колонки с нижним footer прижатым к низу

#6 15.02.2011 09:15

Re: Резиновая верстка на 2-3 колонки с нижним footer прижатым к низу

#7 16.02.2011 15:16

Re: Резиновая верстка на 2-3 колонки с нижним footer прижатым к низу

Аня написал:

#8 16.02.2011 16:22

Re: Резиновая верстка на 2-3 колонки с нижним footer прижатым к низу

#9 16.02.2011 19:08

Re: Резиновая верстка на 2-3 колонки с нижним footer прижатым к низу

#10 16.02.2011 19:33

Re: Резиновая верстка на 2-3 колонки с нижним footer прижатым к низу

Код:

Код:

#11 16.02.2011 22:50

Re: Резиновая верстка на 2-3 колонки с нижним footer прижатым к низу

tapazukk написал:

#12 16.02.2011 23:59

Re: Резиновая верстка на 2-3 колонки с нижним footer прижатым к низу

#13 17.02.2011 00:31

Re: Резиновая верстка на 2-3 колонки с нижним footer прижатым к низу

tapazukk написал:

#14 19.05.2014 14:34

Re: Резиновая верстка на 2-3 колонки с нижним footer прижатым к низу

Board footer