nvgudz

Спасибо, что заметил строчка в цсс .content_bg { background: #ddf2d8;} /* то что тянеться справа */ после .info_bg { background: #980000; } /* то что тянеться слева внизу */ стерлась... Приношу извенения. Все исправлено. П.с.: для работы, а не наглядности, коды цсс и хтмл можно хорошо сократить.

Да, точно интересная задача Понравилась. Решение есть. Для дивов. Только один момент, прошу не критиковать за именно такое решение для ИЕ, ну и также за названия классов, отсутствие спрайтов... ))) Png в бекграунде только для красочности не белее. Итакс, у нас есть общий бекграунд - градиент по вертикали (fon1.png). Есть хедер, определенной фиксированной высоты. Для того, чтоб добиться "нормального" перемещения уголков вырезаем еще один градиент (menu_bg1.png), отняв сверху от бг_номер 1 высоту хедера. tl,tr,bl,br,ctl,ctr,cbl,cbr - это пнг-ешки уголков (верхний, правый, нижний, левый) меню и контента соотвественно. Собственно цсс (максимально полный): html, body {margin:0; padding:0; color: #000;font:12px Helvetica, sans-serif; background:#014250 url(../images/fon1.png) repeat-x; } /* обнуляем элементы, чтоб не мучаться */ img{border: 0;} a{color:#044170;text-decoration:underline;} a:hover{text-decoration:none; } a img{border: none;} div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-family: inherit; list-style-type: none; } /* общий валидный хак-фикс */ .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} .clearfix{ display: inline-block;} *html .clearfix{ display: inline-block; } html[xmlns] .clearfix{ display: block;} * html .clearfix{ height: 1%;} .header{ height: 80px; background:#cecece; color: #fff; text-align: center; overflow: hidden; line-height: 80px; }/* хедер */ .info_bg { background: #980000; } /* то что тянеться слева внизу */ .content_bg { background: #ddf2d8;} /* то что тянеться справа */ .info {color: #fff; padding: 10px; } /* колонки для всех браузеров */ .outer_block { display:table; border-spacing: 0; } /* контейнер для колонок */ .b_left_content,.b_right_content,.b_middle_content { display: table-cell; height: 100%; vertical-align: top;} /* три колонки */ .b_left_content_padd,.b_left_content_padd1{ width: 170px; } /* распорка для левой колонки */ .b_left_content_padd1{ background:#014250 url(../images/menu_bg1.png) repeat-x; padding-bottom: 25px; } /* прозрачные уголки на бекграунде + отступ снизу менюхи */ .b_right_content_padd { background:#014250 url(../images/menu_bg1.png) repeat-x; }/* прозрачные уголки на бекграунде контента */ .b_middle_content_padd{ width: 15px; height: 5px; overflow: hidden;}/* распорка для средней колонки, тут с ограниченной высотой */ .b_right_content{ width:100%; } /* контейнера для уголков */ .b_rounded{min-height: 5px; } *html .b_rounded { height: 5px; } .for_top_bottom_corners{padding: 5px 0; } .for_top_corners{padding: 5px 0 0 0; } .b_top_block,.b_bott_block{display:block; position: relative; width:100%;height:5px; overflow: hidden;} .b_top_block *,.b_bott_block * { display: block } .b_top_block { top: 0; } .b_bott_block { bottom: 0; } /* /контейнера для уголков */ /* уголки с фоном между ними */ .repeat_x{ margin: 0 5px; height: 100%; } .tl,.bl { position: absolute;left:0; width: 5px; height: 5px; } .tr,.br { position: absolute;right:0; width: 5px; height: 5px; } .menu_left .tl { background: url(../images/tl.png) } .menu_left .tr { background: url(../images/tr.png) } .menu_left .bl { background: url(../images/bl.png) } .menu_left .br { background: url(../images/br.png) } .content .tl { background: url(../images/ctl.png) } .content .tr { background: url(../images/ctr.png) } .content .bl { background: url(../images/cbl.png) } .content .br { background: url(../images/cbr.png) } .menu_left .repeat_x,.menu_inner{ background: #fff; } .menu_inner li { padding-bottom: 3px; } .content .repeat_x,.content_inner { background: #ddf2d8; } .menu_inner,.content_inner { padding: 0 10px; } /* /уголки с фоном между ними */ /* хакаем ИЕ (в жизни проще выносить в цсс для ИЕ) - колонки для ИЕ */ *html .outer_block,*html .b_left_content,*html .b_right_content,*html .b_middle_content { display: block; } *html .b_left_content,*html .b_middle_content { float: left; } *html .ie .b_left_content,*html .ie .b_middle_content,*html .ie .b_right_content { height: expression((parentNode.offsetHeight)); } *html .b_left_content { width: 170px; } *html .b_right_content { width: auto; } *+html .outer_block,*+html .b_left_content,*+html .b_right_content,*+html .b_middle_content { display: block;} *+html .b_left_content,*+html .b_middle_content { float: left;} *+html .ie .b_left_content,*+html .ie .b_middle_content,*+html .ie .b_right_content { height: expression((parentNode.offsetHeight)); } *+html .b_left_content { width: 170px; } *+html .b_right_content { width: auto;} /* фильтры для 6 осла */ *html .tl,*html .bl,*html .tr,*html .br{ background: none!important; } *html .menu_left .tl {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tl.png', sizingMethod='crop');} *html .menu_left .tr {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tr.png', sizingMethod='crop');} *html .menu_left .bl {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bl.png', sizingMethod='crop');} *html .menu_left .br {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/br.png', sizingMethod='crop');} *html .content .tl {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ctl.png', sizingMethod='crop');} *html .content .tr {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/ctr.png', sizingMethod='crop');} *html .content .bl {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/cbl.png', sizingMethod='crop');} *html .content .br {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/cbr.png', sizingMethod='crop');} и html (специально по несколько классов, чтоб не запутаться в параметрах и свойствах окончательно) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Тянем-потянем, а вытянуть не можем</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <link rel="stylesheet" href="css/css.css" type="text/css" /> </head> <body> <div class="header"><h2>header</h2></div> <div class="outer_block ie"> <div class="b_left_content info_bg"> <div class="b_left_content_padd1"> <div class="b_rounded menu_left clearfix"> <span class="b_top_block"><span class="tr"></span><span class="tl"></span><span class="repeat_x"></span></span> <ul class="menu_inner"> <li><a href="">MEnu Item</a></li> <li><a href="">MEnu2 Item</a></li> <li><a href="">MEnu333 Item</a></li> <li><a href="">MEnu4 Item</a></li> <li><a href="">MEnu56cxc Item</a></li> <li><a href="">MEnu56cxc Item</a></li> </ul> <span class="b_bott_block"><span class="br"></span><span class="bl"></span><span class="repeat_x"></span></span> </div> </div> <div class="b_rounded menu_left" style="margin-top:-5px;"><span class="b_bott_block"><span class="tr"></span><span class="tl"></span><span class="repeat_x"></span></span></div> <div class="info">Моё любимое инфо Мона и с кружочками</div> А здесь просто текст на красном фоне. Без отступов. Уголки для этого визуального блока можна не задавать Чтоб не потерять пиксели снизу, вместо уголков добавить полоску. style="margin-top:-5px;" - только для наглядности. </div> <div class="b_middle_content"><div class="b_middle_content_padd"></div></div> <div class="b_right_content content_bg"> <div class="b_right_content_padd"> <div class="b_rounded content clearfix"> <span class="b_top_block"><span class="tr"></span><span class="tl"></span><span class="repeat_x"></span></span> <div class="content_inner"> Похоже, здесь был контент <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Похоже, здесь был контент<br /> Похоже, здесь был контент <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Похоже, здесь был контент<br /> Похоже, здесь был контент <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Похоже, здесь был контент<br /> Похоже, здесь был контент <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Похоже, здесь был контент<br /> </div> </div> </div> </div> </div> <!-- нижние уголки или линии, как вам угодно --> <div class="outer_block"> <div class="b_left_content"> <div class="b_left_content_padd"><div class="b_rounded menu_left clearfix"><span class="b_bott_block"><span class="br"></span><span class="bl"></span><span class="repeat_x"></span></span></div></div> </div> <div class="b_middle_content clearfix"><div class="b_middle_content_padd"></div></div> <div class="b_right_content"> <div class="b_rounded content clearfix"> <span class="b_bott_block"><span class="br"></span><span class="bl"></span><span class="repeat_x"></span></span> </div> </div> </div> <!-- /нижние уголки или линии, как вам угодно --> </body> </html>

Можно очень аккуратно поиграться с экспрешном для ИЕ и ему подобных (хотя, я не являюсь сторонником данного метода). Для остальных браузеров через display:table; & display:table-cell. Решение включает добавления еще одного элемента в хтмл. ЦСС: /* only for good display, you may remove this */ html,body{ margin:0; padding:0; } ul,ul li{ list-style-type:none; margin:0; padding:0; } #services{ width:20%; } /* only for good display, you may remove this */ #services ul li a { font: bold 0.9em "Trebuchet MS", Arial, Helvetica, sans-serif; text-transform: uppercase; color: #69768d; text-decoration: none; height: 50px; padding: 0 55px; margin-bottom: 10px; border-bottom: 1px dotted #ccc; /* new style */ display:table; width:100%; /* new style */ } #services ul li a span{ display: table-cell; vertical-align:bottom; } /* for IE > 5 */ *html #services ul li,*html #services ul li a{ display:block;} *+html #services ul li,*+html #services ul li a{ display:block; } *html #services ul li a span{ display:block;margin-top: expression((parentNode.offsetHeight)-(parseInt(offsetHeight)) <0 ? "0" :(parentNode.offsetHeight)-(parseInt(offsetHeight)) +'px'); } *+html #services ul li a span{ display:block;margin-top: expression((parentNode.offsetHeight)-(parseInt(offsetHeight)) <0 ? "0" :(parentNode.offsetHeight)-(parseInt(offsetHeight)) +'px'); } /* for IE > 5 */ /* you have got your own pictures */ #services ul li .mNav01 {background: url(http://www.dimonn.com/Olsi/images/c3.gif) no-repeat;} #services ul li .mNav02 {background: url(http://www.dimonn.com/Olsi/images/c1.gif) no-repeat;} #services ul li .mNav03 {background: url(http://www.dimonn.com/Olsi/images/c2.gif) no-repeat;} #services ul li .mNav04 {background: url(http://www.dimonn.com/Olsi/images/c3.gif) no-repeat;} #services ul li .mNav05 {background: url(http://www.dimonn.com/Olsi/images/c1.gif) no-repeat;} #services ul li .mNav01:hover {background: url(http://www.dimonn.com/Olsi/images/c2.gif) no-repeat;} #services ul li .mNav02:hover {background: url(http://www.dimonn.com/Olsi/images/c3.gif) no-repeat;} #services ul li .mNav03:hover {background: url(http://www.dimonn.com/Olsi/images/c1.gif) no-repeat;} #services ul li .mNav04:hover {background: url(http://www.dimonn.com/Olsi/images/c2.gif) no-repeat;} #services ul li .mNav05:hover {background: url(http://www.dimonn.com/Olsi/images/c3.gif) no-repeat;} /* you have got your own pictures */ ХТМЛ: <div id="services"> <ul> <li><a href="#" class="mNav01"><span>Системы безопастности</span></a></li> <li><a href="#" class="mNav02"><span>Контроль доступа</span></a></li> <li><a href="#" class="mNav03"><span>Системы видеонаблюдения</span></a></li> <li><a href="#" class="mNav04"><span>Охрана периметра</span></a></li> <li><a href="#" class="mNav05"><span>Системы оповещения</span></a></li> </ul> </div>

Да, цель таблицы не ясна. И какая основная проблема - тоже. Насчет "убрать кавычки" - это бред. Ошибка, которая бросается в глаза - это "незакрый" - у него в конце отсутствует точка с запятой ;. Должен выглядеть так:

Понимаю, у меня бывало такое ((((. Прошу прощения, что называется - вырвалось А с отступом разобрались? Все нормально?

А рисуночек pix.gif точно есть на сервере в том месте, куда src его ведет? Похоже его там нет

Ответы 2 шт 1. первый, как писал klierik обычный и притный на вид <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <style type="text/css"> #container{padding-left:270px; font: 11px Tahoma,sasns-serif;} #content{margin-right:245px; } #center{position:relative;width:100%;float:left; margin: 0 -1px; } #left{width:270px;margin-left:-269px;position:relative;float:left;} #right{width:245px;margin-right:-244px;position:relative;float:right; text-align: left; } /* clear without structural mark-up from PIE website*//* do not change or amalgamate clearfix styles*/ .clear:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} .clear {display:inline-block;} /* mac hide */ * html .clear {height: 1%;} .clear {display: block;} /* End hide */ </style> </head> <body> <div id="container"> <div id="content" class="clear"> <div id="left">текст левой колонки</div> <div id="right">текст правой</div> <div id="center">текст центpа</div> </div> </div> </body> </html> 2. Перекареженный, но работающий: -если нет правой, что б центральная занимала все оставшееся место - (убирается весь правый блок) -если нет ни правой ни левой что б центральная была строго по центру - (убирается контент левого и правого блока) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <style type="text/css"> #container{margin-left:270px; font: 11px Tahoma,sasns-serif; } #content{/*margin-right:288px;*/ } #center{position:relative; } #left{width:270px;margin-left:-269px;position:relative;left:-1px;float:left;} #right{width:245px;position:relative;float:right; text-align: left; } /* clear without structural mark-up from PIE website*//* do not change or amalgamate clearfix styles*/ .clear:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} .clear {display:inline-block;} /* mac hide */ * html .clear {height: 1%;} .clear {display: block;} /* End hide */ </style> </head> <body> <div id="container" class="clear"> <div id="right">текст правой</div> <div id="content" class="clear"> <div id="left">текст левой колонки</div> <div id="center">текст центpа</div> </div> </div> </body> </html>

Можно немного точнее оформить требование? А то мысль по древу растеклась

Во-первых: вылазит менюшка в ИЕ6 из-под флеша paasivu palvelut matkakohteet yhteystiedot TILAUS е? бы поместить в див с id="flashcontent", там она по идее и должна стоять, как замещающий текст вместо флешки. А так два меню, и на втором у собачки туловище с головой от лап оторвало, жутковато... +1 На форуме точно есть темы как пнг под ие "фильтровать".

Жесть конкретно к отступу в ИЕ6, ИЕ5, ИЕ5.5 в цсс есть строка * html #content h2 { height: 50px; position: relative; } вот height: 50px; и играет злую штуку с отступом, все остальное по верстке и css - тупо жесть, без комментов.

, ясно. Эх, тут столько недочетов, лишнего и непродуманного - вывод учиться и еще раз учиться. 1) Если таблица не "обнулена" в стилях, ее лучше писать так: а) Если все элементы таблицы в td выровнены по верхнему краю, то в цсс table.main td{ vertical-align: top; }, а в хтмл 2) ... уже давно не пишут в хтмл, все через стили 3) - при разном заполненинии контентом таблицы может верстку "повести", лучше его избегать4) Все это набросок, а так, учиться и, еще раз, учиться.

Если поиграться с экспрешном, то можно достичь желаемого, но с моей точки зрения экспрешн - не панацея и имеет много недостатков, поэтому лучше им не злоупотреблять. В данном случае введен еще один элемент span, т.к. margin-left: 17px b margin-right: 17px у navtext при эскпрешне ширины "вешает" ИЕ . Все одним кодом: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <style type="text/css"> <!-- .navnotselected { float:left; width: auto; height: 51px; } .navtext { font:14px Verdana, Arial, Helvetica, sans-serif; color: #333333; margin-top: 5px; text-align: center; width: expression(parseInt(this.parentNode.offsetWidth) + 'px'); } .navtext span{ display: block; margin: 0 17px; } .navnotselectedbar1 { background: #dcf1ff; font-size:1px; height:expression(this.scrollHeight < 2? "2px" : "auto" ); min-height: 2px; margin-top:1px; overflow: hidden; width: expression(parseInt(this.parentNode.offsetWidth) + 'px'); } .navnotselectedbar2 { background: #ff0000; /* изменен цвет для наглядности */ font-size:1px; height:expression(this.scrollHeight < 4? "4px" : "auto" ); min-height: 4px; overflow: hidden; width: expression(parseInt(this.parentNode.offsetWidth) + 'px'); } --> </style> </head> <body> <div class="navnotselected"> <div class="navtext"> <span>Text</span> </div> <div class="navnotselectedbar1"></div> <div class="navnotselectedbar2"></div> </div> </body> </html> Есть более простые способы создания такого вида...

В продолжение темы - Градиент, углы, border - html and css http://trifler.ru/blog/post_1186248660.html Было использовано на практике, результат неплохой.

Если честно, ничего не понятно из вышеизложенного. А какой при этом html-код? И что за 3 блока внутри этого блока? Опиши подробнее.

Эм, проблема ясна. 'collapse' для скрипта тож непонятен, как недопустимый аргумент. А ФФ четко и прямо понимает игру display ='none' - display ='block'. Предлагаю решение с определением ИЕ quot;-//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=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <table width="70%" border="1"> <tr> <td> 1 </td> <td class="dd" id="id1"> 2 </td> <td class="dd" id="id2"> 3 </td> <td> 4 </td> </tr> </table> <script type="text/javascript"> var ua = navigator.userAgent.toLowerCase(); var isIE = ( (ua.indexOf("msie") != -1) && (ua.indexOf("opera") == -1) && (ua.indexOf("webtv") == -1) ); function hide() { document.getElementById('id1').style.display = 'none'; document.getElementById('id2').style.display = 'none'; } function show() { var displayState = 'block'; if(!isIE) displayState = 'table-cell'; document.getElementById('id1').style.display = displayState; document.getElementById('id2').style.display = displayState; } </script> <input type="button" value="1" onclick="hide()" /> <input type="button" value="2" onclick="show()" /> </body> </html> Прошу сильно не судить, я по java-скриптам не сильно... Но работает в ФФ, Опере, ИЕ (от 5 до 7), Сафари, Макстоне

Есть такая трабла с ИЕ до 7 версии (марджинг плавающего элемента на новую строку переносить) Решается добавлением еще одного блочного элемента в див class="content". Соотвественно, немного стили меняются. <style type="text/css"> .content{ position: relative; float: left; clear: inherit; padding: 20px; /* можно паддинг не ставить, тогда у .content span добавить марджинг на 20рх */ } .content span{ height: 100px; width: 100px; background: #fff; display: block; } </style> В html-e все просто: <div style="width: 100%; background: #d6edd3;"> Слово<br clear="right"> <div class="content"><span>1 1 1</span></div> <div class="content"><span>2 2 2</span></div> <div class="content"><span>3 3 3</span></div> <div class="content"><span>4 4 4</span></div> <div class="content"><span>5 5 5</span></div> <div class="content"><span>6 6 6</span></div> <div class="content"><span>7 7 7</span></div> <div class="content"><span>8 8 8</span></div> <div class="content"><span>9 9 9</span></div> <div class="content"><span>10 10 10</span></div> <div class="content"><span>11 11 11</span></div> <div class="content"><span>12 12 12</span></div> <br clear="left"> </div> P.S.: вместо span c display: block можно просто див использовать (по необходимости, сложности, желанию)

Для css div.min_height{ min-height: 120px;/* FF, Opera, IE7 */ height:expression(this.scrollHeight < 120? "120px" : "auto" ); /* IE 5 - IE 6 */ background: url(img.jpg) no-repeat left bottom; /* или background: url(img.jpg) no-repeat center bottom;*/ width:225px; } для html <div class="min_height"> text texttext tex t text te xt text texttext tex t text te xt text texttext tex t text te xt ..... </div>

добавь хтмл в html,body { height: 100%; margin: 0 0 0 0; }

вот такое можно применить .paging{ text-align: center; <!--необходимо для ИЕ 5, ИЕ5.5, остальные браузеры тоже понимают на ура --> } .nv-pager { clear:both; height:35px; margin: 10px auto 0 auto; <!--понимает большинство, ИЕ 5, ИЕ5.5 - нет --> width:62px; <!-- ширина двух ссылок + расстояние между ними --> } при использовании .paging{ text-align: center; } можно отказаться от margin: 10px auto 0 auto; и записать его как было margin-top:10px; Пс.: зачем в примере для ссылок приведен style="display:none; border:none;" ?

Тут внесены небольшие изменения. Если вопрос еще актуален, предлагаю: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <style type="text/css"> html,body{margin: 0;padding: 0;}<!-- для наглядности --> .mainBanner { width: 100%; height: 164px;min-width: 748px; background: url(img/fonBanner.jpg) repeat-x;} * HTML{width: expression(this.scrollWidth < 748? "748px" : "auto" );} <!-- IE5, IE5.5 - по желанию --> .secondBanner {position: relative;left: 63%;margin-top: -144px;width: 251px;} .secondBanner img{position: absolute;} </style> </head> <body> <div class="mainBanner"> <img src="im.jpg" border="0" alt="" width="748" height="164"/><div class="secondBanner"> <img src="src="im.jpg" border="0" alt="" width="251" height="121"/></div> </div> <p>fdfsdfsd</p> </body> </html> И еще небольшие дополнение, чтобы не было "полосы" (отступа) внизу после рисунков (ИЕ в основном) их необходимо закрывать как в первом примере: ... <img src="im.jpg" border="0" alt="" width="748" height="164"/><div class="secondBanner"> <img src="src="im.jpg" border="0" alt="" width="251" height="121"/></div>...... или так ... <img src="im.jpg" border="0" alt="" width="748" height="164"/><br/> <div class="secondBanner"> <img src="src="im.jpg" border="0" alt="" width="251" height="121"/></br> </div>......