Unger
-
Posts
9 -
Joined
-
Last visited
Unger's Achievements
Explorer (1/14)
0
Reputation
-
Я вот попробовал убрать у .menu #bl_1 a:hover{ margin-top:0px; и margin-left:0px; теперь текст на месте но hover подсвечивает не по фону
-
Не не катит, просто смещается images/bl_1_hover а текст так и прыгает
-
Скорей всего, они все три прыгают .menu #bl_1 a:hover{, .menu #bl_2 a:hover{, .menu #bl_3 a:hover{ #bl_1{ ... margin-top:5px; ... } (это зделан фон ссылки) а .menu #bl_1 a:hover{ я хотел зделать ка подсветка а оно почему то тянет текст туда куда не надо.
-
Очень интересно! В мозиле версии 3.5.17, опера 10 Может дадите адрес ящика я скину архивом со всеми картинками будет наглядней?
-
Пожалуйста. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta name="description" content="<?=$page_keywords?>"> <meta name="keywords" content="<?=$page_description?>"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title><?=$page_title?></title> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div align="center"> <div id="border"> <div id="white"> <div id="menu"> <!-- левое меню --> <div class="one"> <div class="item"><a href="#">о нас</a></div> <div class="item"><a href="#">услуги</a></div> <div class="item"><a href="#">предложения</a></div> <div class="item"><a href="#">каталог продукции</a></div> <div class="item"><a href="#">портфолио</a></div> <div class="item"><a href="#">контакты</a></div> </div> <!-- правое меню --> <div class="two"> <a href="#">главная</a> <span>|</span> <a href="#">карта сайта</a> <span>|</span> <a href="#">e-mail</a> </div> </div><!--/end of #menu--> <!-- шапка --> <div id="shapka"> <div id="shapka2"> <div id="shapka3"> <div id="shapka_cen"></div> <div id="elit">Элитные отделочные материалы</div> <!--/end of #text--> </div> <!--/end of #shapka3--> </div><!--/end of #shapka2--> </div><!--/end of #shapka--> <!-- начало теблицы контента --> <table cellpadding="0" cellspacing="0"> <tr> <td class="left"> <div id="left"> <!-- новости компании --> <div class="top"></div> <div class="filtr"> <div id="fil">фильтр</div> <div class="for"> <select name="selekt" style="width:184px; margin-left:5px; margin-top:10px; background-color: #CCCCCC;"> <option>Наименование</option> </select> <div id="fil_2">разделы каталога</div> <div class="menu" > <div id="bl_1"><a href class="tek"="#">Наименование</a></div> <div id="bl_2"><a href class="tek"="#">Мозаика</a></div> <div id="bl_3"><a href class="tek"="#">Материалы</a></div> <div class="menu_2"> <div id="bl_1_1"><a href class="tek_2"="#">Способы укладки</a></div> <div id="bl_1_1"><a href class="tek_2"="#">Техника</a></div> <div id="bl_1_1"><a href class="tek_2"="#">Укладка мозаики на сетку</a></div> <div id="bl_1_3"><a href class="tek"="#">наименование</a> </div> </div> </div> </div> </div> <div class="news"> <div id="fil">новости компании</div> <div class="date">02.02.07 ::</div> <div class="text">Самая полная и самая разнообразная информация о Вашей компании.</div> <a href="#" class="podrobnee"><img src="images/dot_01.gif" alt="" border=0>подробнее</a> <div class="date">25.01.07 ::</div> <div class="text">Самая полная и самая разнообразная информация о Вашей компании.</div> <a href="#" class="podrobnee"><img src="images/dot_01.gif" alt="" border=0>подробнее</a> </div> <div class="bottom"></div> <!--/end of .news--> <!-- cпецпредложение --> <!--/end of .corner--> <!--/end of .offer--> </div><!--/end of #left--> </td> <td id="right"> <div class="obzor">обзор услуг</div> <p> <div class="tekst">Компания ПО "Л&К компани" специализируется на поставках и работах с широким спектром высококачественных зарубежных, комплектующих, метериалов и оборудования. Основная сфера деятельности сервисное обслуживание конвейерного и промышленного оборудования.Изготовление промышленных резинотехнических изделий. Поставка специальных клеёв, составов и материалов для стыковки и ремонта конвейерных лент. Подготовки персонала технологиям стыковки и сервисного обслуживания конвейерных лент методами холодной и горячей вулканизации. Проведение геологоразведочных работ, исследование береговых прибережных и морских грунтов в портах и при строительстве морских сооружений. Исследование дамб и береговых укреплений без их разрушения. Подготовка материалов для строительного надзора. Рекомендации по охране окружающей среды. Управление и контроль строительством.<p> Компания ПО "Л&К компани" специализируется на поставках и работах с широким спектром высококачественных зарубежных, комплектующих, метериалов и оборудования. Основная сфера деятельности сервисное обслуживание конвейерного и промышленного оборудования.Изготовление промышленных резинотехнических изделий. Поставка специальных клеёв, составов и материалов для стыковки и ремонта конвейерных лент. Подготовки персонала технологиям стыковки и сервисного обслуживания конвейерных лент методами холодной и горячей вулканизации. Проведение геологоразведочных работ, исследование береговых прибережных и морских грунтов в портах и при строительстве морских сооружений. Исследование дамб и береговых укреплений без их разрушения. Подготовка материалов для строительного надзора. Рекомендации по охране окружающей среды. Управление и контроль строительством.</p></div> <!--/end of .content_01_bg_01--> <!-- почему мы --> <!--/end of #why--> <!-- обзор услуг --> <!--/end of #services--> <!--/end of #services--> <br class="clearer"> <div class="copyright">Copyright © 2007 БизнесНовости.Ру. Все права защищены.</div></td></tr></table> </tr> </table> <!--конец таблицы контента--> </div><!--/end of #white--> </div><!--/end of #border--> </div> </body> </html> CSS body { width:980px; background-color: #000000; padding-left:10%; padding-top:10%; } .main{ width:764px; margin:auto; } table { width: 100%; } td { vertical-align: top; } #border { background-color:#A49F8C; border:2px solid #7C7455; padding:4px; } #white { background-color: #000000; padding:10px 7px; text-align:left; } *html #white, *html #border { width: 100%; } *html #menu { height: 53px; } #menu { background-image:url('../images/menu_bg.gif'); height:48px; } #menu .one { float: left; } #menu img { margin: 0 20px; } #menu .one .item { background-image:url('../images/separator.gif'); background-position:right; background-repeat:no-repeat; float:left; height:34px; padding:20px 20px 0 22px; } *html #menu .one .item, *html #menu .two { height: 42px; } #menu .two { float:right; height:28px; padding:14px 7px 0; } #menu .two span { padding: 0 5px; } #shapka, #shapka2, #shapka3 { height:153px; } #shapka { background-image:url('../images/shapka_bg.gif'); border-bottom:1px solid #ffca00; } #shapka2, #shapka3, #left, #left .offer .corner { background-repeat:no-repeat; } #shapka2 { background-image:url('../images/shapka_bg_01.jpg'); background-position:left; } #shapka3 { background-image:url('../images/shapka_bg_02.jpg'); background-position:right; } #shapka_cen{ background-image:url('../images/shapka_bg_cen1.gif'); position: absolute; width:233px; height:134px; margin-left:370px; margin-top:9px; } #text { float:right; padding:45px 120px 0 0; text-align:left; } #text .slogan { position: relative; top: -8px; } .text{ margin-left:5px; margin-right:10px; } .tekst{ color:#FFFFFF; margin-left:20px; margin-right:30px; font-size:11px; font-family:Arial, Helvetica, sans-serif; } td.left, #left { width: 206px; } .filtr{ background:url('../images/news_bg1.gif'); background-repeat:repeat-y; } #fil{ font-family: Arial; font-size:18px; color:#ffca00; margin-left:5px; font-variant:small-caps; font-weight:600; } .obzor{ font-family: Arial; font-size:18px; font-variant: small-caps; font-weight: 600; color:#ffca00; margin-left:20px; margin-top:10px; } #fil_2{ font-family: Arial; font-size:18px; color:#ffca00; margin-left:5px; margin-top:4px; font-variant:small-caps; font-weight:600; } #bl_1{ background:url('../images/bl_1.GIF') repeat-x; width:197px; margin-top:5px; margin-left:1px; height:31px; color:#FFFFFF; } #bl_2{ background:url('../images/bl_1.GIF') repeat-x; margin-top:1px; width:197px; margin-left:1px; height:31px; color:#FFFFFF; } #bl_3{ background:url('../images/bl_1.GIF') repeat-x; margin-top:1px; width:197px; margin-left:1px; height:31px; color:#FFFFFF; } /*начало подсветка/ ——————*/ .menu #bl_1 a:hover{ background:url('../images/bl_1_hover.GIF'); margin-top:1px; width:197px; margin-left:0px; height:30px; color:#FFFFFF; } .menu #bl_2 a:hover{ background:url('../images/bl_1_hover.GIF'); margin-top:0px; width:197px; margin-left:0px; height:31px; color:#FFFFFF; } .menu #bl_3 a:hover{ background:url('../images/bl_1_hover.GIF'); margin-top:1px; width:197px; margin-left:0px; height:30px; color:#FFFFFF; } /* конец подсветка/ ——————*/ #bl_1_1{ background:url('../images/bl_1_1.gif') repeat-x; margin-top:1px; width:197px; margin-left:1px; height:21px; color:#FFFFFF; } #bl_1_3{ background:url('../images/bl_1.GIF') repeat-x; width:197px; margin-top:2px; margin-left:1px; height:31px; color:#FFFFFF; } .menu_2 a:hover{ color:#ffca00; } .menu_2 #bl_1_3 a:hover{ color:#FFFFFF;} .top{ background:url('../images/news_bg_top.gif'); margin-top:10px; background-repeat:no-repeat; height:2px; } .bottom{ background:url('../images/news_bg_bottom.gif'); background-repeat:no-repeat; height:3px; margin-bottom:5px; width:199px; } .tek{ position: absolute; margin-top:5px; font-size: 12px; text-decoration:none; margin-left:5px; font-weight:bold; } .tek_2{ position:absolute; margin-top:2px; font-size:11px; text-decoration:none; margin-left:5px; font-weight: 300; } #elit{ position:relative; padding-top:132px; color:#FFFFFF; font-size:14px; margin-left:5px; font-weight:900 } #left .news { background-color:#DFD7B8; background-image:url('../images/news_bg1.gif'); background-position: bottom; background-repeat:repeat-y; padding:15px 8px 19px 0px; width:191px; } #left .news .date { padding: 15px 0 0 15px; } #left .news .podrobnee { color:#ffca00; float: right; } #left .news .podrobnee img, .services .podrobnee2 img { margin-right: 3px; position: relative; top: -1px; } #left .offer { background-image:url('../images/offer_bg.gif'); background-position:right bottom; border-right:1px solid #C2B999; float:left; width:198px; } #left .offer .corner { background-image:url('../images/offer_corner.gif'); background-position:right bottom; padding:6px 16px 15px 14px; width:168px; } #left .offer .image, #left .offer .text { float: left; padding-top: 6px; } #left .offer .text { padding-left:16px; width:104px; } *html #left .offer .text { width: 120px; } #right .content_01_bg_02 { background-image:url('../images/content_01_bg_02.jpg'); background-repeat:no-repeat; height:217px; } .content_01_bg_01 { background-image:url('../images/content_01_bg_01.gif'); background-position:left bottom; background-repeat:repeat-x; height:217px; } .time { padding: 4% 20px 0 163px; } .time p { margin: 0; } .time p.text { padding-top: 26px; } .links01,.links02 { float:left; padding:13px 0; width:144px; } .clearer { clear: both; } .links01 a img,.links02 a img, .square{ margin:-2px 4px 0px 12px; } .links03 a img,.dot { margin: 0 5px 0 12px; } .links03{ height:15px; } .links03 div{ height:15px; float:left; } .dot2 { margin: 0 5px 0 0px; } .links03 { background-color:#F0F1EF; height:15px; text-align:center; } .services { margin-bottom:10px; margin-right:200px; } .services .title { padding-left:17px; padding-top:17px; } .services .image { float:left; height:68px; text-align:center; width:93px; } .services .podrobnee2 { float: right; } .services .text { height:70px; margin-left:93px; } .services .pod { height:15px; margin-left:93px; } .sep { height: 15px; } #why { float:right; padding:20px 18px; width:164px; } *html #why { width: 200px; } #why .shadow { background-image:url('../images/left_shadow.gif'); background-position:right bottom; background-repeat:no-repeat; width:171px; } #why .shadow .text { background-color:#D8D0B1; background-image:url('../images/why_corner.jpg'); background-position:right bottom; background-repeat:no-repeat; border-top:7px solid #A49F8C; width:164px; } #why .shadow .text .title { background-image:url('../images/offer_bg.gif'); height:24px; padding:8px 0 0; text-align:center; } *html #why .shadow .text .title { height: 32px; } #why .shadow .text .image { padding:7px 0 0; text-align:center; } #why .shadow .text .words { padding: 7px 0 10px 12px; } #line { background-color:#A49F8C; height:7px; margin-top:17px; overflow:hidden; } .copyright { color:#7f7f7f; margin-left:250px; position: absolute; left: 130px; top: 805px; } #in_cont{ padding:10px 0px 0px 0px; } .pagetitle h1{ font-size:20px; color:#a49f8c; }
-
Спасибо но текст по прежнему смещается вверх а сам ховер на 5px вниз есть ещё варианты?
-
Привет всем!!! Народ подскажите пожалуйста как сделать что бы при наведении в ссылке текст не смещался в левый верхний угол? вот код: <div class="menu" > <div id="bl_1"><a href class="tek"="#">Наименование</a></div> <div id="bl_2"><a href class="tek"="#">Мозаика</a></div> <div id="bl_3"><a href class="tek"="#">Материалы</a> </div> CSS .tek{ position: absolute; margin-top:5px; font-size: 12px; text-decoration:none; margin-left:5px; font-weight:bold; } .menu #bl_1 a:hover{ background:url('../images/bl_1_hover.GIF'); margin-top:1px; width:197px; margin-left:0px; height:30px; color:#FFFFFF; position: fixed; } .menu #bl_2 a:hover{ background:url('../images/bl_1_hover.GIF'); margin-top:0px; width:197px; margin-left:0px; height:31px; color:#FFFFFF; } .menu #bl_3 a:hover{ background:url('../images/bl_1_hover.GIF'); margin-top:1px; width:197px; margin-left:0px; height:30px; color:#FFFFFF; }
-
Как сделать выпадающее меню?
-
Как сделать чтобы страничка отображалась в браузерах по средине ?