rb88

"полосатая таблиц на js" ? совсем нет.

Спасибо за ответ. Более-менее прояснил ситуацию. Да, я пытался заморочиться другим способом исходя из position() и значения @rowspan, но в итоге моя конструкция срабатывала на две объединенных колонки максимум. Буду пробовать с учетом твоих рекомендаций.

Добрый день! Возможно данная задача (см. рисунок) для некоторых покажется простой, но для меня, как для начинающего в xslt - доставляет трудности. Задача в следующем: необходим раскрасить таблицу с учетом rowspan. Обычно я использовал проверку "position() mod 2 = 0", но тут это не прокатит. Решение вроде бы витает где-то рядом, но все же витает Заранее благодарен. <?xml version="1.0" encoding="UTF-8" ?> <table border="1"> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr> <tr> <td>a</td> <td colspan="2" rowspan="2">b</td> <td>c</td> <td>d</td> <td>f</td> </tr> <tr> <td>s</td> <td>b</td> <td>c</td> <td>d</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td colspan="2">d</td> <td>e</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> </tr> <tr> <td colspan="3">a</td> <td>b</td> <td>c</td> <td>d</td> </tr> </table>

Разобрался! Спасибо большое, парни! А чем смущает, в принципе?

да, именно это. не могу врубиться... блок добавил, правило добавил, что не так делаю? <style> div.round-box {background: url('i/t.gif') 0 0 repeat-x; height: 100%; border: 0px solid red;} div.round-box .line-l {background: url('i/l.gif') 0 0 repeat-y;} div.round-box .line-r {background: url('i/r.gif') 100% 0 repeat-y;} div.round-box .line-b {background: url('i/b.gif') 0 100% repeat-x;} div.round-box .tl {background: url('i/tl.gif') 0 0 no-repeat;} div.round-box .tr {background: url('i/tr.gif') 100% 0 no-repeat;} div.round-box .bl {background: url('i/bl.gif') 0 100% no-repeat;} div.round-box .br {background: url('i/br.gif') 100% 100% no-repeat; padding: 20px;} div#test {position: absolute; width: 70px; height: 100%; top: 0; right: 0; bottom: 0; background: transparent url('i/overflow.png') repeat-y 100% 0;} div.round-box .content {padding: 15px 70px 15px 15px; background: transparent url('i/overflow.png') repeat-y 100% 0;} div.round-box .content div.l {overflow: hidden;} </style> <div class="round-box"> <div class="line-l"><div class="line-r"><div class="line-b"> <div class="tl"><div class="tr"><div class="bl"><div class="br"> <div id="test"></div> <div class="content"> <div class="l">В 2007-м досрочный уход из профессионального тура 4-й ракетки мира Ким Клийстерс стал сенсацией. Или не стал. Уже и не припомнить. Много мячей с тех пор улетело, да и суперзвездой Клийстерс все-таки не была. И кто бы мог подумать, что, вернувшись два года спустя совсем взрослой женщиной, Ким с таким изяществом примерит на себя статус «icon».</div> </div></div></div></div> </div></div></div></div> это достаточно стандартно, с помощью таблиц легко осуществить, как в новой почте Яндекса, например.

В принципе сейчас так и осуществленно, только увы не работает прозрачность png фона, на втором примере в скриншоте это заметно, даже если поставить transparent в background. div.round-box .content {padding: 15px 70px 15px 15px; background: url('i/overflow.png') repeat-y 100% 0;} и он будет тянуться по горизонтали и вертикали в зависимости от контента?

Добрый вечер! Есть задача обрезать контент внутри блока (делаю при помощи overflow: hidden;) далее нужно добавить красоты, плавного(градиентного) ухода текста, т.е. положить сверху див в png с градиентным фоном. Получается, что нужно два дива одинаковой высоты, т.к. контент тянется (что уже напрягает), плюс див с градиентом должен лежать поверх дива с контентом. Дабы не возникало вопросов по поводу "коммерческого отдела" выкладываю код и изображение. <style type="text/css"> div.round-box {background: url('i/t.gif') 0 0 repeat-x; height: 100%;} div.round-box .line-l {background: url('i/l.gif') 0 0 repeat-y;} div.round-box .line-r {background: url('i/r.gif') 100% 0 repeat-y;} div.round-box .line-b {background: url('i/b.gif') 0 100% repeat-x;} div.round-box .tl {background: url('i/tl.gif') 0 0 no-repeat;} div.round-box .tr {background: url('i/tr.gif') 100% 0 no-repeat;} div.round-box .bl {background: url('i/bl.gif') 0 100% no-repeat;} div.round-box .br {background: url('i/br.gif') 100% 100% no-repeat; padding: 20px;} div.round-box .content {padding: 15px 70px 15px 15px; background: url('i/overflow.png') repeat-y 100% 0;} div.round-box .content div.l {overflow: hidden;} </style> <div class="round-box"> <div class="line-l"><div class="line-r"><div class="line-b"> <div class="tl"><div class="tr"><div class="bl"><div class="br"> <div class="content"> <div class="l">В 2007-м досрочный уход из профессионального тура 4-й ракетки мира Ким Клийстерс стал сенсацией. Или не стал. Уже и не припомнить. Много мячей с тех пор улетело, да и суперзвездой Клийстерс все-таки не была. И кто бы мог подумать, что, вернувшись два года спустя совсем взрослой женщиной, Ким с таким изяществом примерит на себя статус «icon».</div> </div></div></div></div> </div></div></div></div> Буду признателен за помощь!

большое спасибо.

Ваше мнение ошибочно. Коли уж решили переносить в "коммерческий отдел" - можете удалять пост. Спасибо за помощь, блин.

Добрый вечер! Возникла следующая ситуация, требуется сверстать блок (см. изображение) с помощью блочной верстки, с прозрачными png тенями и закругленными углами. Блок должен быть тянущимся. Мозги уже начинают туго соображать, хочется услышать свежие мнение - кто как бы это сверстал? Заранее благодарен.