forum.okis.ru
http://forum.okis.ru/

Помогите отредактировать код горизонтального меню
http://forum.okis.ru/viewtopic.php?f=10&t=3723		 Страница 1 из 2
Автор:  OxxxyKot [ 08 фев 2013, 07:21 ]
Заголовок сообщения:  Помогите отредактировать код горизонтального меню
Помогите начинающему))
HTML код вставляю в метатеги:

<ul id="menu">
<li><a href="http://europarts-avto.ru/index.html" title="Главная"><img src="http://europarts-avto.ru/img/europarts-avto_r/GorizontMenu/home.png" alt="Home" class="home" /></a></li>
<li><a href="http://europarts-avto.ru/photoalbum.html" title="Фотографии">Фотографии</a></li>
<li><a href="http://europarts-avto.ru/sklad.html" title="Склад">Склад</a></li>
<li><a href="http://europarts-avto.ru/contacts.html" title="Контакты">Контакты</a></li>
<li><a href="http://europarts-avto.ru/zakaz.html" title="Заказать">Заказать</a></li>
</ul>

CSS код:

<style type="text/css">

body {font: 11px Arial, Helvetica, sans-serif;
}
#menu {font: 11px Arial, Helvetica, sans-serif;
background-image:url('http://europarts-avto.ru/img/europarts-avto_r/GorizontMenu/bc_bg.png');
background-repeat:repeat-x;
height:30px;
line-height:30px;
color:#9b9b9b;
border:solid 1px #cacaca;
width:100%;
overflow:hidden;
margin:0px;
padding:0px;
}
#menu li {list-style-type:none;
float:left;
padding-left:10px;
}
#menu a {height:30px;
display:block;
background-image:url('http://europarts-avto.ru/img/europarts-avto_r/GorizontMenu/bc_separator.png');
background-repeat:no-repeat;
background-position:right;
padding-right: 15px;
text-decoration: none;
color:#454545;
}
.home {border:none;
margin: 8px 0px;
}
#menu a:hover{color: gray;
}
</style>

Меню появляется над шапкой, и кнопки не активны, помогите пожалуйста, на форуме ничего внятного не нашел.
Автор:  PhotoShopRND [ 08 фев 2013, 11:45 ]
Заголовок сообщения:  Re: Помогите отредактировать код горизонтального меню
А куда именно вы хотите его поставить?
Автор:  OxxxyKot [ 08 фев 2013, 12:12 ]
Заголовок сообщения:  Re: Помогите отредактировать код горизонтального меню
Как и в большинстве случаев под шапку, перекопал весь форум но внятного ответа так и не нашел, пытался сам - без успеха, решил обратиться к Вам за помощью.
Автор:  OxxxyKot [ 08 фев 2013, 12:19 ]
Заголовок сообщения:  Re: Помогите отредактировать код горизонтального меню
HTML код вставил в поле для рекламы, меню появилось, но располагается под названиями страниц, как поднять чуть выше?
Автор:  PhotoShopRND [ 08 фев 2013, 12:21 ]
Заголовок сообщения:  Re: Помогите отредактировать код горизонтального меню
Так? http://test007.okis.ru

html в размещение рекламы под меню:

Код:
<div id=topmenu>
<ul id="menu">
<li><a href="http://europarts-avto.ru/index.html" title="Главная"><img src="http://europarts-avto.ru/img/europarts-avto_r/GorizontMenu/home.png" alt="Home" class="home" /></a></li>
<li><a href="http://europarts-avto.ru/photoalbum.html" title="Фотографии">Фотографии</a></li>
<li><a href="http://europarts-avto.ru/sklad.html" title="Склад">Склад</a></li>
<li><a href="http://europarts-avto.ru/contacts.html" title="Контакты">Контакты</a></li>
<li><a href="http://europarts-avto.ru/zakaz.html" title="Заказать">Заказать</a></li>
</ul>
</div>


css в редактор css естественно...

Код:
div.art-header {
height: 200px;
}

#topmenu {
position: absolute;
top:-45px;
width:978px;
}

#menu {font: 11px Arial, Helvetica, sans-serif;
 background-image:url('http://europarts-avto.ru/img/europarts-avto_r/GorizontMenu/bc_bg.png');
 background-repeat:repeat-x;
 height:30px;
 line-height:30px;
 color:#9b9b9b;
 border:solid 1px #cacaca;
 width:100%;
 overflow:hidden;
 margin:0px;
 padding:0px;
 }
 #menu li {list-style-type:none;
 float:left;
 padding-left:10px;
 }
 #menu a {height:30px;
 display:block;
 background-image:url('http://europarts-avto.ru/img/europarts-avto_r/GorizontMenu/bc_separator.png');
 background-repeat:no-repeat;
 background-position:right;
 padding-right: 15px;
 text-decoration: none;
 color:#454545;
 }
 .home {border:none;
 margin: 8px 0px;
 }
#menu a:hover{color: gray;
 }


Как видите, я увеличил высоту шапки на 50px что бы было куда менюшку втыкать. Все воткнул в контеунер div id=topmenu и задал этому контейнеру, ширину. Прописал позиционирование как абсолютное и указал где ему быть...
Автор:  OxxxyKot [ 08 фев 2013, 12:35 ]
Заголовок сообщения:  Re: Помогите отредактировать код горизонтального меню
Но мне нужно что бы меню слева вообще не было, я в ксс прописал код который убирает меню слева, потом который вы указали, и в рекламу под меню вставил хтмл код, у меня ничего не появилось...
Автор:  PhotoShopRND [ 08 фев 2013, 12:41 ]
Заголовок сообщения:  Re: Помогите отредактировать код горизонтального меню
OxxxyKot писал(а):
я в ксс прописал код который убирает меню слева, потом который вы указали, и в рекламу под меню вставил хтмл код, у меня ничего не появилось...


Само собой... вы же его и скрыли :) проявите фантазию, разместите его под новостями и сместите влево к примеру.
Автор:  OxxxyKot [ 08 фев 2013, 12:45 ]
Заголовок сообщения:  Re: Помогите отредактировать код горизонтального меню
Голова уже не соображает, кинул под новости, появился только кусочек, как влево то его сместить...вы уж извините за мою назойливость, реально устал уже...
Автор:  PhotoShopRND [ 08 фев 2013, 12:47 ]
Заголовок сообщения:  Re: Помогите отредактировать код горизонтального меню
http://htmlbook.ru/css/position
Автор:  OxxxyKot [ 08 фев 2013, 13:04 ]
Заголовок сообщения:  Re: Помогите отредактировать код горизонтального меню
Не получается.... хтмл код под новостями, ксс выглядит так? Позицию поменял на left.

div.art-header {
height: 200px;
}

#topmenu {
position: left;
top:-45px;
width:978px;
}
#menu {font: 16px Arial, Helvetica, sans-serif;
background-image:url('http://europarts-avto.ru/img/europarts-avto_r/GorizontMenu/bc_bg.png');
background-repeat:repeat-x;
height:30px;
line-height:30px;
color:#9b9b9b;
border:solid 1px #cacaca;
width:100%;
overflow:hidden;
margin:0px;
padding:0px;
}
#menu li {list-style-type:none;
float:left;
padding-left:10px;
}
#menu a {height:30px;
display:block;
background-image:url('http://europarts-avto.ru/img/europarts-avto_r/GorizontMenu/bc_separator.png');
background-repeat:no-repeat;
background-position:right;
padding-right: 15px;
text-decoration: none;
color:#454545;
}
.home {border:none;
margin: 8px 0px;
}
#menu a:hover{color: gray;
}
</style>
Страница 1 из 2 Часовой пояс: UTC + 3 часа [ Летнее время ]
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/