Kenshi24

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

Вот приведу пример, явно тень от одного блока заходит на второй блок http://jsfiddle.net/hyTbf/

Я знаю что такое box-shadow, вы мой пост полностью читали?) Нужно как-то многоугольник сделать с тенью, суть поста такая) А где вы там увидели многоугольник? Этот многоугольник состоит из нескольких блоков если что где для каждого задана тень в зависимости от его положения. Верно, но как сделать, чтобы тень от одного не накладывалась на сам другой блок.

Я знаю что такое box-shadow, вы мой пост полностью читали?) Нужно как-то многоугольник сделать с тенью, суть поста такая)

Нужна идея как можно сделать вот такое меню, точнее как сделать, я примерно знаю, но проблема в тенях, когда 2 div'a стоят рядом (белые поля в данном примере) и нужно, чтобы они отбрасывали общую тень (не отбрасывая ее друг на друга) вот тут начинаются проблемы:

А этот способ прижатия подвала к низу страницы нигде не встречал, видел только с помощью отрицательного отступа и доп. блока footer-push этот кажется попроще, между ними есть разница вообще, в смысле когда какой лучше использовать?

Спасибо! Все понял! А такая модель будет работать во всех браузерах?

Спасибо! Все понял!

Там нельзя одновременно прижать футер и сделать чтобы колонки занимали всю высоту, в этом-то и вся сложность

Доброго времени суток, помогите сделать макет будущей страницы, пробовал разными способами, но так, как хочу не получается, табличную верстку делать не хочется. Вот что пока есть: http://jsfiddle.net/KfWLM/3/ Вот что нужно:

Ну я пробовал сделать для .content свойство height: 100%; но ничего не вышло http://jsfiddle.net/5Y3qw/1/

Не совсем то, нужно, чтобы оба блока занимали 100% высоты родителя )

Cделал верстку, с разделением центра на левую и правую часть, с прижатым к низу футером. Но центральные левый и правый блок никак не получается растянуть на все свободное пространство, т.к. контейнеру, в котором он находится присвоено: min-height: 100%;height: auto !important;height: 100%;Cделано чтобы прижать футер к низу страницы c с использованием доп блока : <div class="footer-push"></div>Нужно придумать какое-то решение, желательно кроссбраузерное и без использования таблиц, чтобы как-то прижать левый и правый блок к низу. Вот верстка: http://jsfiddle.net/KfWLM/1/ Скриншот страницы:

Доброго времени суток, сделал верстку, блочная, с разделением центра на левую и правую часть, с прижатым к низу футером. Но есть одна проблема, центральные левый и правый блок никак не получается растянуть на все свободное пространство, т.к. контейнеру, в котором он находится присвоено: min-height: 100%;height: auto !important;height: 100%;Cделано чтобы прижать футер к низу страницы c с использованием доп блока : <div class="footer-push"></div>Нужно придумать какое-то решение, желательно кроссбраузерное и без использования таблиц, чтобы как-то прижать левый и правый блок к низу. Вот верстка: http://jsfiddle.net/KfWLM/1/ Скриншот страницы:

А можно в перимере?)

Ну хотелось бы без вмешательства табличной верстки

В стилях разве не в таблицы отображение сделано?

Тогда так: http://jsfiddle.net/UL8Ak/3/ Хотелось бы без использования таблиц

Все современные, полагаю Да они должны быть одинаковой высоты, как бы прижимаясь к низу wrap Верстка блочная, таблицы не подойдут))

Как сделать, чтобы красный блок растягивался по высоте на все свободное пространство внутри желтого блока? http://jsfiddle.net/UL8Ak/2/

Как считаете, допустимо ли применение этого шрифта в серьезных веб проектах?

Заработало, спс

Доброго времени суток! Пытаюсь добавить на страничку сторонний шрифт, во всех браузерах работает, а в firefox нет: @font-face { font-family: 'Open Sans Light'; src: url('font/OpenSansLight.ttf');}Вот что по этому поводу пишут на хабрe: http://habrahabr.ru/sandbox/50935/ Но для решения этой проблемы они предлагают изменить настройку браузера, у меня этот способ не заработал. Есть какие-нибудь способы обойти этот баг? И этот баг проявляется только на локальных страничках с локальными шрифтами или как (тут я тоже не совсем понял)?

Я не понимаю еще зачем там нужен margin-right: -100%; Так что, какой способ валиднее и какой лучше использовать?

Имеется: два столбца, левый - фиксед, правый - резинка, обернуты контейнером. Требуется: подобрать способ разметки, желательно простой и удобный, или указать на достоинства и недостатки приведенных ниже способов, найденных мной в интернете. 1й: http://jsfiddle.net/2ydUW/3/ 2й: http://jsfiddle.net/2ydUW/2/ HTML: <!DOCTYPE html><html> <head> <title>var. 2</title> <link rel="stylesheet" href="css/main.css"> <script src=""></script> </head> <body> <div class="wrap"> <div class="leftColumn"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis odio odio, vel dignissim elit sodales eu. Phasellus in lobortis nisl. In nunc lectus, sollicitudin a massa et, gravida malesuada nibh. Nulla sed metus sed ipsum gravida tincidunt ac sed nulla. Phasellus sed ultricies mauris, sit amet scelerisque eros. Quisque eu condimentum nibh. </div> <div class="rightColumn"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis odio odio, vel dignissim elit sodales eu. Phasellus in lobortis nisl. In nunc lectus, sollicitudin a massa et, gravida malesuada nibh. Nulla sed metus sed ipsum gravida tincidunt ac sed nulla. Phasellus sed ultricies mauris, sit amet scelerisque eros. Quisque eu condimentum nibh. </div> <div class="clear"></div> </div> </body></html>Ну и собственно 2 варианта CSS, первый проще, но раз есть второй, значит для чего-то он нужен. html, body { height: 100%; background-color: #f2f3f4; font-size: 95%;}.leftColumn { width: 15em; float: left; background: #49948b; color: #fff;}.rightColumn { margin-left: 15em; background-color: #457fa3; color: #fff;}.wrap{ background-color: #aaa;}.clear { clear: both; float: none; font-size: 0; height: 0; line-height: 0;}html, body { height: 100%; background-color: #f2f3f4; font-size: 95%;}.leftColumn { float: left; margin: 0 0 0 -15em; overflow: visible; width: 15em; background-color: #49948b; color: #fff; position: relative;}.rightColumn { float: left; margin-right: -100%; width: 100%; background-color: #457fa3; color: #fff; position: relative;}.wrap{ padding-left: 15em; background-color: #aaa;}.clear { clear: both; float: none; font-size: 0; height: 0; line-height: 0;}