Такой вопрос. хочется сделать так. делаю так: HTML: <td onMouseOver="this.style.backgroundColor='#f2f1f1'" onMouseOut="this.style.backgroundColor='#ffffff'" height="18" align="left" valign="middle"><h2><a href="../produkcija.php">О компании</a></h2></td> [css]h2 { margin:0px; font:bold 12px Verdana; color: #03699d; } h2 a { padding-left:10px; color: #03699d; text-decoration: none; background: transparent url(img/menu_blue.jpg) no-repeat; } h2 a:hover { color: #0099FF; text-decoration: underline; background:transparent url(img/menu_red.jpg) no-repeat; }[/css] а получается так:
Да точно у таблицы убрал cellspacing. Но теперь фоновый булет к левому краю прилип, а вот по высоте не доходит до краев. Высота фонового рисунка 18px и высота ячейки 18
Если высоту ячейки не прописываю: HTML: <td onMouseOver="this.style.backgroundColor='#f2f1f1'" onMouseOut="this.style.backgroundColor='#ffffff'" align="left" valign="middle"><h2><a href="../produkcija.php">О компании</a></h2></td> то синий прямоугольник выводит от края до края по вертикали, а если прописать height="18", то прямоугольник синий не доходит до краев по вертикали! Из-за чего это может быть?? Вот как у меня получается
HTML: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style> .myclass { background-image: url('colors.jpg');} .menu {border: solid #0f96d8; border-width: 2px; 2px 1px 1px; padding: 0; width: 100px;} .menu li {border-bottom: 1px solid #0f96d8; background-color: #0f96d8; padding-left: 5px; margin: 0px; list-style-type: none; height: 20px;} .menu li:hover { background-color: #de5754;} .menu a {font: bold 12px Verdana; color: #03699d; background-color: #ffffff; line-height: 20px; display: block; padding-left: 5px; text-decoration: none;} .menu a:hover {background-color: #f2f1f1; color: #0099FF; text-decoration: underline;} </style> </head> <body> <ul class="menu" style=""> <li><a href="#">О компании</a></li> <li><a href="#">Услуги</a></li> </ul> Говнокод, а еще его надо под html допилить. Но в FF нормально.
Если делать так: HTML: <td onMouseOver="this.style.backgroundColor='#f2f1f1'" onMouseOut="this.style.backgroundColor='#ffffff'" height="18" align="left" valign="middle"><a href="../produkcija.php">О компании</a></td> [css]a { padding-left:10px; color: #03699d; text-decoration: none; background: transparent url(img/menu_blue.jpg) no-repeat; } a:hover { color: #0099FF; text-decoration: underline; background:transparent url(img/menu_red.jpg) no-repeat; }[/css] То все нормально, а вот если тегом <h2> то косяк по вертикали
[css]h2 { height:24px; margin:0px; font:bold 14px Arial; color: #03699d; } [/css] Прописал так. Прилипла к верхнему краю, а снизу все равно зазор, хотя размер фонового рисунка 24px.
а зачем вообще h2 в меню? и зачем использовать фоновый рисунок там, где можно использовать border? и зачем использовать таблицы там, где удобнее списки? и для чего делать смену цвета фона с помощью javascript? это я к тому что можно всё упростить, но если этого делать нельзя, то можно просто сделать фоновый рисунок больше 24px и можно поставить padding:0; для h2
Сделал высотой 40 px рисунок фоновый и ничего не изменилось, прописал padding:0; Просто у меня будет немного другой рисунок, точнее к этому еще для подменю добавится кое-что, и борером не обойтись
проблему почти решил так: HTML: <ul> <li><a href="#">О компании</a></li> <li><a href="#">Работа и услуги</a></li> <li class="menu_2"><a href="../proektirowanie.php">проектирование металлоконструкций</a></li> <li><a href="../izgotowlenije_metal.php">изготовление металлоконструкций</a></li></ul> [css].menu ul { margin: 0px; padding:0px; border: 1px solid #0f96d8; border-bottom:none; } .menu li { border-bottom: 1px solid #0f96d8; border-left: 5px solid #0f96d8; background-color: #ffffff; margin: 0px; padding-left: 10px; list-style-type: none; height:24px; } .menu li:hover { border-left: 5px solid #e04c4c; background-color: #f2f1f1; padding-left: 10px; margin: 0px; list-style-type: none; } .menu_2 { list-style-image:url(img/menu_bluered.jpg); } [/css] Но img/menu_bluered.jpg выходит влево за границы таблицы и не по центру, как его подвинуть??
HTML: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <style> ul.menu {width:256px; border:#6ea3c2 1px solid; border-left:#000 1px solid; padding:0; margin:0;} ul.menu li {list-style-type:none; border-bottom:#50afdf 1px solid; border-right:#50afdf 1px solid; border-left:#e14d4d 5px solid; padding:1px 4px 3px 8px;} ul.menu li:first-child {border-top:#50afdf 1px solid;} ul.menu li.sub {border-left:#50afdf 5px solid; padding-left:23px; background:url(square-blue.jpg) 9px 50% no-repeat;} ul.menu li:hover {border-left:#e14d4d 5px solid;} ul.menu li.sub:hover {background:url(square-red.jpg) 9px 50% no-repeat;} ul.menu li a {color:#1272a2; font-family:Arial; font-size:12px; font-weight:bold; text-decoration:none;} ul.menu li a:hover {text-decoration:underline;} </style> </head> <body> <ul class="menu"> <li><a href="#">О компании</a></li> <li><a href="#">Работа и услуги</a></li> <li class="sub"><a href="#">проектирование металлоконструкций</a></li> <li class="sub"><a href="#">изготовление металлоконструкций</a></li> <li class="sub"><a href="#">монтаж металлоконструкций</a></li> <li><a href="#">Продукция</a></li> <li class="sub"><a href="#">арочные здания</a></li> </ul> </body> </html> square-blue.jpg и square-red.jpg - картинки 7х7 пикселей