Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В. C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В. MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Горизонтальное меню с картинками
 
 автор: Reola   (08.03.2016 в 15:08)   письмо автору
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 сменила на класс, была зеленая панель, на ней отображалась только крайняя правая картинка с заменой текста...
запуталась.

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования