Проблема с меню

ret · June 4, 2010

В общем мне нужно чтобы меню в css разпологалось горизонтально, оно состоит из рисунков и разбито на классы.

#menu_graf { width:100px; background:#0000FF;}
#menu_graf a { text-decoration:none; }
#menu_graf div { width:100px; height:30px; cursor:pointer; }
#menu_graf a.knopka1 { background: url("images/button_1.gif") no-repeat; }
#menu_graf a.knopka1 div { background: url("images/button_1.gif") no-repeat; }
#menu_graf a.knopka1:hover { background: url("images/button_1_hover.gif") no-repeat; }
#menu_graf a.knopka1:hover div { background: url("images/button_1_hover.gif") no-repeat; }

А вот следующая кнопка разпологается сразу после предыдущего, как сделать чтобы было горизонтально.

#menu_graf a.knopka2 { background: url("images/button_2.gif") no-repeat; }
#menu_graf a.knopka2 div { background: url("images/button_2.gif") no-repeat; }
#menu_graf a.knopka2:hover { background: url("images/button_2_hover.gif") no-repeat; }
#menu_graf a.knopka2:hover div { background: url("images/button_2_hover.gif") no-repeat; }

<div id="menu_graf">
<a class="knopka1" href="#"><div> </div></a>
<a class="knopka2" href="#"><div> </div></a>
<a class="knopka3" href="#"><div> </div></a>
<a class="knopka4" href="#"><div> </div></a>
</div>

ret · June 8, 2010

вставил в

#menu a {

display:inline-block;

}

и все заработало!

Тогда у меня другой вопрос).

Как тогда разположить меню горизонтальным?

Пробовал и float. Ничего.

Вот код, подскажите куда что поставить.

<style type="text/css">

#menu {
width:160px;
height:100px;
}


#menu li{
list-style-type: none;
}


#menu a {
display:inline-block;
}

#menu .knopka1 {
width:80px;
height:50px;
background:url(img/1_1.png) no-repeat;
border:1px solid;
}

#menu a.knopka1:hover {
width:80px;
height:50px;
background:url(img/1_2.png) no-repeat;
}

#menu .knopka2 {
width:80px;
height:50px;
background:url(img/2_1.png) no-repeat;
border:1px solid;
}

#menu a.knopka2:hover {
width:80px;
height:50px;
background:url(img/2_2.png) no-repeat;
border:1px solid;
}






</style>
</head>
<body>

<div id="menu">
<ul>
<li><a class="knopka1" href="#"></a></li>
<li><a class="knopka2" href="#"></a></li>
</ul>
</div>

Edited June 8, 2010 by ret

psywalker · June 8, 2010

li {float: left;}

rus · June 8, 2010

Ничего не вижу ставь 2)
если про
#menu .knopka2 a:hover {
то с этим разобрались, но все-равно не показывает

Вот в примере что ты уже после написал, все верно ибо надо правильно делать так:

#menu .knopka1 {
width:80px;
height:50px;
background:url(img/1_1.png) no-repeat;
border:1px solid;
}

#menu a.knopka1:hover {
width:80px;
height:50px;
background:url(img/1_2.png) no-repeat;
}

а не так:

#menu .knopka1 {
width:160px;
height:60px;
background:url(1.jpeg) no-repeat;
}

#menu .knopka2 a:hover {
width:160px;
height:60px;
background:url(2.jpeg) no-repeat;
}

ret · June 8, 2010

не хочет(

psywalker · June 8, 2010

не хочет(

Что не хочет, у тебя же вроде вышло?

ret · June 8, 2010

да вышло картинки отображаются и hover работает, но сделать горизонтально не получается

psywalker · June 8, 2010

да вышло картинки отображаются и hover работает, но сделать горизонтально не получается

Да не может такого быть. Значит у тебя стили где-то перебиваются, смотри весь ЦСС

ret · June 8, 2010

Все разобрался, проблема была в ширине всего меню, туда просто кнопки не помещались.

Спасибо!

psywalker · June 8, 2010

Все разобрался, проблема была в ширине всего меню, туда просто кнопки не помещались.
Спасибо!

Ну ты и могз нам вынес дружище я те скажу. В след. раз заранее всё проверяй.

Sign In

Проблема с меню

Question

ret

Link to comment

Share on other sites

34 answers to this question

Recommended Posts

ret

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

ret

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

ret

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

ret

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information