Jump to content
  • 0

Верстка

Unger

Asked by Unger,

 Share

Question

Unger Explorer

Unger

Posted
Posted (edited)

Привет всем!!! Народ подскажите пожалуйста как сделать что бы при наведении в ссылке текст не смещался в левый верхний угол? вот код:

<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;

}

Edited by Unger
Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0
Unger Explorer

Unger

Posted
  • Author
Posted

1. Код надо помещать в спец.теги для этого.

2. По сабжу: Замени в ховере margin-top:1px; на margin-top:5px;

Спасибо но текст по прежнему смещается вверх а сам ховер на 5px вниз :) есть ещё варианты?

Link to comment
Share on other sites
  • 0
hisbvdis Explorer

hisbvdis

Posted
Posted

Спасибо но текст по прежнему смещается вверх а сам ховер на 5px вниз :) есть ещё варианты?

Вы не могли бы сбросить HTML и CSS файлы? Что-то у меня некорректно "читает" Ваш код.

9d43b24f9c62e33b459a85b84dcf79e9.jpg

Link to comment
Share on other sites
  • 0
Unger Explorer

Unger

Posted
  • Author
Posted

Вы не могли бы сбросить HTML и CSS файлы? Что-то у меня некорректно "читает" Ваш код.

9d43b24f9c62e33b459a85b84dcf79e9.jpg

Пожалуйста.

<!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;

}

Link to comment
Share on other sites
  • 0
Unger Explorer

Unger

Posted
  • Author
Posted (edited)

А в каком браузере у вас "прыгает"? Ваш код в 4-й мозилле,5-й сафари, опере 11 и хроме смотрится нормально, ие 8 тоже не прыгает, там другой косяк вылезает(

Очень интересно! В мозиле версии 3.5.17, опера 10 :)

Может дадите адрес ящика я скину архивом со всеми картинками будет наглядней?

Edited by Unger
Link to comment
Share on other sites
  • 0
Unger Explorer

Unger

Posted
  • Author
Posted

#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{

я хотел зделать ка подсветка а оно почему то тянет текст туда куда не надо.

Link to comment
Share on other sites
  • 0
notTrue Explorer

notTrue

Posted
Posted (edited)

Скорей всего, они все три прыгают .menu #bl_1 a:hover{, .menu #bl_2 a:hover{, .menu #bl_3 a:hover{

Перепишите так:

#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 есть механизм наследования, это очень полезная штука, изучите, не пожалеете:))

Edited by notTrue
Link to comment
Share on other sites
  • 0
Unger Explorer

Unger

Posted
  • Author
Posted

Перепишите так:

#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 а текст так и прыгает :)

Link to comment
Share on other sites
  • 0
notTrue Explorer

notTrue

Posted
Posted

#bl_1{

...

margin-top:5px;

...

} (это зделан фон ссылки)

а

.menu #bl_1 a:hover{

я хотел зделать ка подсветка а оно почему то тянет текст туда куда не надо.

Как сделали, так и "тянет"- ссылка с верхним отступом 5px,при наведении верхний отступ 1px. Как вы думаете,куда она сместится??Есть подозрение, что на 4px вверх.

Link to comment
Share on other sites
  • 0
Unger Explorer

Unger

Posted
  • Author
Posted

Как сделали, так и "тянет"- ссылка с верхним отступом 5px,при наведении верхний отступ 1px. Как вы думаете,куда она сместится??Есть подозрение, что на 4px вверх.

Я вот попробовал убрать у .menu #bl_1 a:hover{

margin-top:0px; и margin-left:0px; теперь текст на месте но hover подсвечивает не по фону

Link to comment
Share on other sites
  • 0
notTrue Explorer

notTrue

Posted
Posted

Что и требовалось доказать))

1. Маржины заданы в родительских элементах #bl_1 #bl_2 #bl_3

задавая отступы в дочерних элементах .menu #bl_1 a:hover .menu #bl_1 a:hover .menu #bl_2 a:hover .menu #bl_3 a:hover ты сдвигал текст.

2.Фон при наведении меняется из-за того, что стоит у элементов #bl_1 a:hover .menu #bl_1 a:hover .menu #bl_2 a:hover .menu #bl_3 фоновое изображение bl_1_hover.GIF', а у #bl_1 #bl_2 #bl_3 - bl_1.GIF.

Link to comment
Share on other sites
  • 0
notTrue Explorer

notTrue

Posted
Posted

Что и требовалось доказать))

1. Маржины заданы в родительских элементах #bl_1 #bl_2 #bl_3

задавая отступы в дочерних элементах .menu #bl_1 a:hover .menu #bl_1 a:hover .menu #bl_2 a:hover .menu #bl_3 a:hover ты сдвигал текст.

2.Фон при наведении меняется из-за того, что стоит у элементов #bl_1 a:hover .menu #bl_1 a:hover .menu #bl_2 a:hover .menu #bl_3 фоновое изображение bl_1_hover.GIF', а у #bl_1 #bl_2 #bl_3 - bl_1.GIF

Код 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.GIF') repeat-x;
width:197px;
height:30px;
color:#ffca00;

}
.menu #bl_2 a:hover{
background:url('../images/bl_1.GIF') repeat-x;
width:197px;
height:31px;
color:#ffca00;
}
.menu #bl_3 a:hover{
background:url('../images/bl_1.GIF') repeat-x;
width:197px;
height:30px;
color:#ffca00;
}


/* конец подсветка/
——————*/




#bl_1_1{
background:url('../images/bl_1_1.gif') repeat-x;
margin-top:1px;
width:197px;
margin-left:5px;
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{
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;
}

Код HTML:

<!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, удалены пара строк.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • 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

  I accept