|
12.5 Кб |
|
| Добрый день. Помогите плиз. Я новичек. Горизонтальное меню. Ссылки - в виде картинок. Картинки заменяют текст.
Где ошибка? После последней попытки картинки вернулись в вертикаль, , не отображены полностью, list-style не активен, текст ссылок виден ( не нужен, так как имеется на изображениях). Зеленый фон тоже исчез)).
Перепробовала несколько вариантов, в лучшем случае вставляется крайняя картинка, остальные в ряд не выстраиваются.
HTML
<div class="topmenu">
<ul>
<li id="rull">
<a href="#" class="topmenu" title="Правила"><span>ПРАВИЛА</span></a>
</li>
<li>
<img src="images/frontpage_1.png" alt="">
</li>
<li id="next">
<a href="#" class="topmenu" title="Кто рядом"><span>КТО РЯДОМ</span></a>
</li>
<li>
<img src="images/frontpage_1.png" alt="">
</li>
<li id="meeting">
<a href="#" class="topmenu" title="Встречи"><span>ВСТРЕЧИ</span></a>
</li>
<li>
<img src="images/frontpage_1.png" alt="">
</li>
<li id="journal">
<a href="#" class="topmenu" title="Дневники"><span>ДНЕВНИКИ</span></a>
</li>
<li>
<img src="images/frontpage_1.png" alt="">
</li>
<li id="travel">
<a href="#" class="topmenu" title="Попутчики"><span>ПОПУТЧИКИ</span></a>
</li>
<li>
<img src="images/frontpage_1.png" alt="">
</li>
<li id="top">
<a href="#" class="topmenu" title="ТОП-100"><span>ТОП-100</span></a>
</li>
<li>
<img src="images/frontpage_1.png" alt="">
</li>
<li id="search">
<a href="#" class="topmenu" title="Поиск"><span>ПОИСК</span></a>
</li>
<li>
<img src="images/frontpage_1.png" alt="">
</li>
<li id="main">
<a href="#" class="topmenu" title="Главная"><span>ГЛАВНАЯ</span></a>
</li>
</ul>
</div>
CSS
#topmenu {
background:url("../images/frontpage_2.png") repeat-x; /*зеленый фон меню - пропал*/
border-bottom:3px solid d42a28;
height:40px;
padding-top:10px;
}
#topmenu ul {
list-style:none; /*не работает*/
margin:0;
padding:0;
float:right;
}
#topmenu ul li {
float: right;
padding-right:20px;
margin-top: -15px;
}
#topmenu ul li img {
margin-top: -2px; /*разделитель картинка*/
}
#topmenu a span{
display: none; /*не работает*/
}
#rull a {
display:blok;
width:40px;
height:40px;
background:url(../images/icon_5.png);
}
#next a {
display:blok;
width:40px;
height:40px;
background:url(../images/icon_4.png);
}
#meeting a {
display:blok;
width:40px;
height:40px;
background:url(../images/icon_1.png);
}
#journal a {
display:blok;
width:40px;
height:40px;
background:url(../images/icon_2.png);
}
#travel a {
display:blok;
width:40px;
height:40px;
background:url(../images/icon_7.png);
}
#top a {
display:blok;
width:40px;
height:40px;
background:url(../images/icon_3.png);
}
#search a {
display:blok;
width:40px;
height:40px;
background:url(../images/icon_6.png);
}
#main a {
display:blok;
width:40px;
height:40px;
background:url(../images/icon_8.png);
}
картинку прилагаю. до того как id сменила на класс, была зеленая панель, на ней отображалась только крайняя правая картинка с заменой текста...
запуталась. | |
|
|