Xpoint
   [напомнить пароль]

Layout на 3 колонки, тянущийся блок. Поможете отимизировать?

Метки: [без меток]
2008-03-31 23:45:45 [обр] Ворон(0/3)[досье]

Приятного времени суток.

  1. Написал никуда не подглядывая по своему разумению трех колоночный layout. Хотелось бы узнать что вы о нем думаете. Может обнаружите какой то баг или способ улучшить.
  1. Нужно написать блок с коуглокраями, который будет тянуться по высоте и ширине.

Сначала попробовал сделать border и потом 4мя вложенными блоками расставить уголки с помощью
Код:

position:relative;
top:-px;
left:-px;

Но у меня не вышло сделать это кроссбраузерно.
В результате сделал так:
Код:

               <!--Блок с тонкой границей. Начало.-->
               <div class="footer_menu_container thin_border_block-l">
                  <div><div><div><div><div><div><div>
                     <!--Содержимое блока с тонкой границей. Начало.-->
                     Содержимое
                     <!--Содержимое блока с тонкой границей. Конец.-->
                  </div></div></div></div></div></div></div>
               </div>
               <!--Блок с тонкой границей. Конец.-->

Код:

.thin_border_block-l{
display:block;
background:url("../img/blue_point.gif") 0 0 repeat-x;
}

.thin_border_block-l>div{
background:url("../img/blue_point.gif") 0 100% repeat-x;
}

.thin_border_block-l>div>div{
background:url("../img/blue_point.gif") 0 0 repeat-y;
}

.thin_border_block-l>div>div>div{
background:url("../img/blue_point.gif") 100% 0 repeat-y;
}

.thin_border_block-l>div>div>div>div{
background:url("../img/corner_right_bottom.gif") 100% 100% no-repeat;
}

.thin_border_block-l>div>div>div>div>div{
background:url("../img/corner_left_bottom.gif") 0 100% no-repeat;
}

.thin_border_block-l>div>div>div>div>div>div{
background:url("../img/corner_left_top.gif") 0 0 no-repeat;
}

.thin_border_block-l>div>div>div>div>div>div>div{
background:url("../img/corner_right_top.gif") 100% 0 no-repeat;
}

Но структура какая то ну очень уж громоздкая.
8 блоков, которые работаю ТОЛЬКО на представление.
Мне не нравиться.
Подскажете как улучшить?

Страничка:
http://nightfolk.net/work/vsesvoi/template.html

С уважением и надеждой на вашу подсказку. Ворон.

спустя 5 часов [обр] Илья Cтpeльцын aka SelenIT(15/171)[досье]
Вот пример, как можно навесить 4 уголка без дополнительной разметки (кроме IE) — http://habrahabr.ru/blog/css/27019.html. Сам только что узнал :).
спустя 7 часов [обр] Ворон(0/3)[досье]

Спасибо конечно, но одно дело уголки, а другое - бордер с закругленными краями. :(
Хотя за ссылку - спасибо!

Я потихоньку схожу с ума.

http://nightfolk.net/work/vsesvoi/template.html
Метод с 8 блоками заглючил в ie7.
http://nightfolk.net/work/bag.jpg
Подскажите пожалуйста в чем может быть дело?

http://nightfolk.net/work/vsesvoi2/template.html
Работает в опере и ff. (6 блоков)
Совершенно непонятно почему не работает в ie. Есть идеи как его в ie запустить?

.thin_border_block-l{
display:block;
padding:1px;
background-color:#a1c1ff; 
}

.thin_border_block-l>div{
display:block;
background-color:#fff; 
}

.thin_border_block-l>div>div{
background:url("../img/corner_left_top.gif") 0 0 no-repeat; 
position:relative;
display:block;
top:-1px;
left:-1px;
}

.thin_border_block-l>div>div>div{
background:url("../img/corner_right_top.gif") 100% 0 no-repeat; 
display:block;
position:relative;
top:0;
right:-2px;
}

.thin_border_block-l>div>div>div>div{
background:url("../img/corner_right_bottom.gif") 100% 100% no-repeat; 
display:block;
position:relative;
bottom:-2px;
right:0;
}

.thin_border_block-l>div>div>div>div>div{
display:block;
background:url("../img/corner_left_bottom.gif") 0 100% no-repeat; 
position:relative;
bottom:0;
left:-2px;
}
спустя 59 минут [обр] Ворон(0/3)[досье]
http://habrahabr.ru/blog/css/27019.html
Для xhtml 1.1 не работает.
только для xhtml 1.0
спустя 1 час 32 минуты [обр] Илья Cтpeльцын aka SelenIT(15/171)[досье]
Для xhtml 1.1 не работает.
только для xhtml 1.0

Быть такого не может. В каком браузере такие чудеса?

Только что проверил пример с хабрахабра, поменяв доктайп на 1.1 — в FF2, Opera 9 и Safari 3.1 все работает как в оригинале, и в text/html, и в application/xhtml+xml. Вот IE8 отказался наотрез… вообще эта бета меня все больше разочаровывает.

Powered by POEM™ Engine Copyright © 2002-2005