Jump to content

nvgudz

Newbie
  • Posts

    20
  • Joined

  • Last visited

nvgudz's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. Спасибо, что заметил строчка в цсс .content_bg { background: #ddf2d8;} /* то что тянеться справа */ после .info_bg { background: #980000; } /* то что тянеться слева внизу */ стерлась... Приношу извенения. Все исправлено. П.с.: для работы, а не наглядности, коды цсс и хтмл можно хорошо сократить.
  2. Да, точно интересная задача Понравилась. Решение есть. Для дивов. Только один момент, прошу не критиковать за именно такое решение для ИЕ, ну и также за названия классов, отсутствие спрайтов... ))) 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>
  3. Можно очень аккуратно поиграться с экспрешном для ИЕ и ему подобных (хотя, я не являюсь сторонником данного метода). Для остальных браузеров через 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>
  4. Да, цель таблицы не ясна. И какая основная проблема - тоже. Насчет "убрать кавычки" - это бред. Ошибка, которая бросается в глаза - это "незакрый" - у него в конце отсутствует точка с запятой ;. Должен выглядеть так:
  5. Понимаю, у меня бывало такое ((((. Прошу прощения, что называется - вырвалось А с отступом разобрались? Все нормально?
  6. А рисуночек pix.gif точно есть на сервере в том месте, куда src его ведет? Похоже его там нет
  7. nvgudz

    Квест

    Ответы 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>
  8. nvgudz

    Квест

    Можно немного точнее оформить требование? А то мысль по древу растеклась
  9. Во-первых: вылазит менюшка в ИЕ6 из-под флеша paasivu palvelut matkakohteet yhteystiedot TILAUS е? бы поместить в див с id="flashcontent", там она по идее и должна стоять, как замещающий текст вместо флешки. А так два меню, и на втором у собачки туловище с головой от лап оторвало, жутковато... +1 На форуме точно есть темы как пнг под ие "фильтровать".
  10. Жесть конкретно к отступу в ИЕ6, ИЕ5, ИЕ5.5 в цсс есть строка * html #content h2 { height: 50px; position: relative; } вот height: 50px; и играет злую штуку с отступом, все остальное по верстке и css - тупо жесть, без комментов.
  11. , ясно. Эх, тут столько недочетов, лишнего и непродуманного - вывод учиться и еще раз учиться. 1) Если таблица не "обнулена" в стилях, ее лучше писать так: а) Если все элементы таблицы в td выровнены по верхнему краю, то в цсс table.main td{ vertical-align: top; }, а в хтмл 2) ... уже давно не пишут в хтмл, все через стили 3) - при разном заполненинии контентом таблицы может верстку "повести", лучше его избегать4) Все это набросок, а так, учиться и, еще раз, учиться.
  12. Если поиграться с экспрешном, то можно достичь желаемого, но с моей точки зрения экспрешн - не панацея и имеет много недостатков, поэтому лучше им не злоупотреблять. В данном случае введен еще один элемент 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> Есть более простые способы создания такого вида...
  13. В продолжение темы - Градиент, углы, border - html and css http://trifler.ru/blog/post_1186248660.html Было использовано на практике, результат неплохой.
  14. Если честно, ничего не понятно из вышеизложенного. А какой при этом html-код? И что за 3 блока внутри этого блока? Опиши подробнее.
  15. Эм, проблема ясна. '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), Сафари, Макстоне
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy