okunev2

вроде разобрался просто надо было ссылкам дать display: block; и line-height: 12px; ну и поиграться под ИЕ отступами списков в условных комментариях

Скачать файл верстка.zip

уже все перепробывал, не пойму Под ИЕ то можно как-то подправить, а вот как быть с Мозилой

да знаю я это, просто не понятно из-за того что все на js завязано. где точно под ИЕ можно сделать, но как это себя поведет в Мозиле куда прописали, на какое условие?

я пробывал разные варианты, но не получается, всеравно все пляшет

Вот такая вот проблема, не знаю как избавится от кривоты в IE и Мозиле, сделать как в Опере ровно: /* Treeview */ #ex2 {margin: 0 12px 26px 30px;} #ex2 ul li a.first {font: bold 12px Tahoma; color: #000000;} .treeview, .treeview ul {padding: 0; margin: 0; list-style: none;} .treeview ul {background-color: none; margin-top: 4px;} .treeview .hitarea {background: url('./images/treeview-default.gif') -64px -25px no-repeat; width: 16px; height: 16px; margin: 1px 0 0 -16px; float: left; cursor: pointer;} /* fix for IE6 */ * html .hitarea {display: inline; float: none;} .treeview li {margin: 0; padding: 5px 0 5px 14px; display: block; } .treeview a {margin-left: 2px; font: normal 12px Tahoma; color: #000000; text-decoration: none;} .treeview a.hover {text-decoration: none; cursor: pointer;} .treeview a.selected {margin-left: -2px; padding: 4px 5px 4px 5px; background-color: #b5b5b5;} #treecontrol {margin: 1em 0; display: none;} .treeview li {background-position: 0 0; background-repeat: no-repeat;} .treeview li.collapsable, .treeview li.expandable {background-position: 0 -176px;} .treeview .expandable-hitarea {background-position: -80px -3px;} .treeview li.last {background-position: 0 -1765px;} .treeview li.lastCollapsable, .treeview li.lastExpandable {background-image: url('./images/treeview-default.gif');} .treeview li.lastCollapsable {background-position: -2px -109px;} .treeview li.lastExpandable {background-position: -34px -65px;} .treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea {background-position: 0;} .treeview-gray li {background-image: url('./images/treeview-gray-line.gif');} .treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable {background-image: url('./images/treeview-gray.gif');} <div id="ex2"> <ul id="navigation"> <li><a href="?1" class="first">Фото</a> <ul> <li><a href="?1.1">Фотоаппараты</a> <ul> <li><a href="?1111">test</a></li> <li><a href="?11112">test</a></li> <li><a href="?11113">test</a></li> </ul> </li> <li><a href="?1.2">Объективы</a> <ul> <li><a href="?1.2.777">Для Canon</a></li> <li><a href="?1.2.0">Для Nikon</a> <ul> <li><a href="?1.2.0.1">Nikkor Af 346 4237 753 2462 773</a></li> <li><a href="?1.2.0.2">Nikkor Af 346 4237 753 2462 773</a></li> <li><a href="?1.2.0.3">Nikkor Af 346 4237 753 2462 773</a></li> <li><a href="?1.2.0.4">Nikkor Af 346 4237 753 2462 773</a></li> <li><a href="?1.2.0.5">Nikkor Af 346 4237 753 2462 773</a></li> </ul> </li> <li><a href="?1.2.1">Item 1.2.1</a> <ul> <li><a href="?1.2.1.0">Item 1.2.1.0</a></li> </ul> </li> <li><a href="?1.2.2">Item 1.2.2</a> <ul> <li><a href="?1.2.2.0">Item 1.2.2.0</a></li> <li><a href="?1.2.2.1">Item 1.2.2.1</a></li> <li><a href="?1.2.2.2">Item 1.2.2.2</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div>

да это понятно, но нужно чтобы девочка которая наполняет сайт видело тоже самое на сайте что и в редакторе, она дуб в стилях. так тупой пример привожу

На сайте так обнуляеться в стилях все: * { margin: 0px; padding: 0px; } И когда создается контент, на страницу к примеру таблица и в теге table указываются отступы и прочее, то они не работают: <table border="1" bordercolor="#FFFFFF" cellpadding="10" cellspacing="0" width="100"> Как быть, чтобы все обнулялось, но в таблице нет?

ни разу такого не делал, и как быть с этим ява скриптом, нету примеров, был бы благодарен

ребят, вот дизайнер нарисовал, голову сломал как верстануть меню слева. Центр фиксировано 1024 выделено красными линями, а слева меню ещё тянется фоном.

нет, это цельная картинка в макете

Есть фон на сайте, как узнать какую часть минимальную можно тянуть, фон неоднородный похож на песок. Где в фотошопе можно глянуть какой размер минимальный повторения этого repeat?

Ребят, подскажите может кто сталкивался. Есть блок с текстом, к примеру вывести в нем первые 3 строки текста, а при клике по ссылке снизу чтобы блок разъезжался вниз и было видно весь текст, при повторном клике чтобы обратно все сворачивалось? Есть такой пример, но он скрывает сразу весь текст, а нужно показать какое-то скрытое количество текста из всего скрытого <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Раскрытие и скрытие div с помощью jquery</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <script type="text/javascript" src="jquery-1.4.1.min.js"></script> <script> function facechange (objName) { if ( $(objName).css('display') == 'none' ) { $(objName).animate({height: 'show'}, 400); } else { $(objName).animate({height: 'hide'}, 200); } } </script> </head> <body> <div id="divId" style="display: none;"> Текст в скрытом слое <br> Текст в скрытом слое <br> Текст в скрытом слое <br> Текст в скрытом слое <br> </div> <a href="#" onclick="facechange('#divId'); return false">Открыть/Закрыть</a> </body> </html>

проверил в ИЕ6 и ИЕ7 это не работает: display: inline; zoom: 1;

а куда в мой css применить? display: inline; zoom: 1;

В ИЕ начнутся проблемы

Столкнулся с такой проблемой, как кросбраузерно выравнять меню по центру, когда меньше пунктов то меню прижимается к правому краю: .header-menu { position: absolute; width: 930px; height: 31px; background: url('../images/bg_menu.jpg') repeat-x; bottom: 0; } .header-menu ul { position: relative; padding: 4px 50px 2px 0; margin: 0; display: block; overflow: hidden; } .header-menu ul li { float: right; display: block; padding: 0 12px 0 18px; text-align: center; } .header-menu ul li span { display: block; font: normal 13px Arial; padding-top: 2px; padding-left: 32px; background: url('../images/pkt.jpg') 0 5px no-repeat; } .header-menu ul li a { display: block; font: normal 13px Arial; color: #ffffff; text-decoration: none; text-align: center; } .header-menu ul li a:hover { text-decoration: underline; } <div class="header-menu"> <ul> <li><span style='background-image: none;'><a href="/">Главная</a></span></li> <li><span><a href="/">О проекте</a></span></li> <li><span><a href="/">Новости</a></span></li> <li><span><a href="/">Помощь</a></span></li> <li><span><a href="/">Вопросы и ответы</a></span></li> <li><span><a href="/">Форум</a></span></li> <li><span><a href="/">Контакты</a></span></li>"; </ul> </div>

Я понимаю как. но не могу понять как реализовать стык между пунктами

Ребята, подскажите, или может есть пример как можно верстануть списком (дивами) такое меню, не могу логику уловить. Буду благодарен

да я тоже склоняюсь к списку. только с block и float, тогда можно обойтись меньшим количеством стилей и получится кросбраузерно

т.е. один див с фоном белым тянучка по бокам с отступами от цифры, слева в этом же диве бэкграундом картинка левого края, а в другом диве картинка справа, так? а есть пример валидный, кросбраузерно, буду благодарен за пинок в нужном направлении

а если без js и с несколькими завернутыми дивами?

Ребят как одним дивом (кросбраузерно) например сделать такое, чтобы тянулось по ширине: <div class="number">10</div> Тянется только белый блок вокруг номера страницы с округлыми краями.

А такая конструкция для применения стилей для вложенных списков правильна и валидна? .goods ul ul { width: 160px; border: 2px dashed #cc0000; } .goods ul ul ul { width: 160px; border: 3px dashed #cc0000; }