Unger
-
Posts
9 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Unger
-
-
Перепишите так:
#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:5px;
width:197px;
margin-left:1px;
height:31px;
color:#FFFFFF;
}
.menu #bl_2 a:hover{
background:url('../images/bl_1_hover.GIF');
margin-top:1px;
width:197px;
margin-left:1px;
height:31px;
color:#FFFFFF;
}
.menu #bl_3 a:hover{
background:url('../images/bl_1_hover.GIF');
margin-top:1px;
width:197px;
margin-left:1px;
height:31px;
color:#FFFFFF;
}И еще, в CSS есть механизм наследования, это очень полезная штука, изучите, не пожалеете)
Не не катит, просто смещается images/bl_1_hover а текст так и прыгает
-
#bl_1{
...
margin-top:5px;
...
}
.menu #bl_1 a:hover{
...
margin-top:1px;
...
}
прыгает, я так понимаю он - .menu #bl_1 a:hover на 4px
Скорей всего, они все три прыгают .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{
...
margin-top:1px;
...
}
прыгает, я так понимаю он - .menu #bl_1 a:hover на 4px
#bl_1{
...
margin-top:5px;
...
} (это зделан фон ссылки)
а
.menu #bl_1 a:hover{
я хотел зделать ка подсветка а оно почему то тянет текст туда куда не надо.
-
А в каком браузере у вас "прыгает"? Ваш код в 4-й мозилле,5-й сафари, опере 11 и хроме смотрится нормально, ие 8 тоже не прыгает, там другой косяк вылезает(
Очень интересно! В мозиле версии 3.5.17, опера 10
Может дадите адрес ящика я скину архивом со всеми картинками будет наглядней?
-
Вы не могли бы сбросить HTML и CSS файлы? Что-то у меня некорректно "читает" Ваш код.
Пожалуйста.
<!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;
}
-
1. Код надо помещать в спец.теги для этого.
2. По сабжу: Замени в ховере margin-top:1px; на margin-top:5px;
Спасибо но текст по прежнему смещается вверх а сам ховер на 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;
}
-
Как сделать выпадающее меню?
-
Как сделать чтобы страничка отображалась в браузерах по средине ?
Верстка
in HTML Coding
Posted
Я вот попробовал убрать у .menu #bl_1 a:hover{
margin-top:0px; и margin-left:0px; теперь текст на месте но hover подсвечивает не по фону