Jump to content
  • 0

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

ret

Asked by ret,

 Share

Question

ret Explorer

ret

Posted
Posted

В общем мне нужно чтобы меню в 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>

Link to comment
Share on other sites

34 answers to this question

Recommended Posts

  • 0
ret Explorer

ret

Posted
  • Author
Posted

не могу у мя все данные на другом компе.

Вот код

<html>

<head>
<title>Меню на CSS</title>
<style>

body { font-family: verdana, sans-serif; font-size:13px; }

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

#menu_graf a.knopka3 { background: url("images/button_3.gif") no-repeat; }
#menu_graf a.knopka3 div { background: url("images/button_3.gif") no-repeat; }
#menu_graf a.knopka3:hover { background: url("images/button_3_hover.gif") no-repeat; }
#menu_graf a.knopka3:hover div { background: url("images/button_3_hover.gif") no-repeat; }

#menu_graf a.knopka4 { background: url("images/button_4.gif") no-repeat; }
#menu_graf a.knopka4 div { background: url("images/button_4.gif") no-repeat; }
#menu_graf a.knopka4:hover { background: url("images/button_4_hover.gif") no-repeat; }
#menu_graf a.knopka4:hover div { background: url("images/button_4_hover.gif") no-repeat; }

</style>
</head>
<body>

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

</body>
</html>

Мне надо сделать только чтобы следующие классы разпологались вертикально, а не как по умолчание-горизонтально. Может что-то прописать в классах кнопки2,3,4? Должно получится обычное горизонтальное меню состоящее из картинок, мне всего лишь надо сдвинуть как-то классы, чтобы было все в одну строку. Если хотите могу дать ссылку на источник где я это нашел, просто там не описывается как сделать горизонтальное меню.

Link to comment
Share on other sites
  • 0
ret Explorer

ret

Posted
  • Author
Posted

ААА я замучался уже, да на UL Ll делал вот столько сайтов пересмотрел, на одном ошибки, на другом непонятно ничего, у всех какие-то разные приемы. Мне всего-то нужно сделать меню на UL Ll с классами, чтоб меню из картинок состояло, горизонтальное и вертикальное все!

Может кто-нибудь привести просто от балды код, который бы работал на данных требованиях, поясняя, а то я так замучаюсь!

Зарание спасибо!

Link to comment
Share on other sites
  • 0
ret Explorer

ret

Posted
  • Author
Posted
Не от "Балды" конечно, но от Влада. ;)

Да это конечно хорошо, но мне бы хотелось допустил так:

<div id="menu"

<ul>

<li><a class="knopka1" href="#">rgv</a></li>

<li><a class="knopka2" href="#">rgeg</a></li>

</ul>

</div>

с картинками кнопки, с hover

и чтоб ничего лишнего небыло

и все!

Link to comment
Share on other sites
  • 0
sigma77 Explorer

sigma77

Posted
Posted (edited)
Да это конечно хорошо, но мне бы хотелось допустил так:

<div id="menu"

<ul>

<li><a class="knopka1" href="#">rgv</a></li>

<li><a class="knopka2" href="#">rgeg</a></li>

</ul>

</div>

с картинками кнопки, с hover

и чтоб ничего лишнего небыло

и все!

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

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

rus

Posted
Posted
у меня как раз проблема в стилях, то картинка не отображается то еще что-то. Поэтому я и прошу привести пример, чтобы сразу разобраться.

раз есть проблема, значит что-то уже пытались сделать, но не получилось, тогда код того что пытались сделать в студию!

Link to comment
Share on other sites
  • 0
ret Explorer

ret

Posted
  • Author
Posted (edited)

Ок, я сделал, как понимаю, проблема есть знаю, просьба пояснить. Картинки не отображаются.

<style type="text/css">

#menu {
width:320px;
height:120px;
}

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

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

</style>
</head>
<body>

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

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

ret

Posted
  • Author
Posted (edited)

не работает(

отображает картинку только когда я вставил ее в #menu.

И так же работает когда вставил другую в hover #menu:hover

Может я как-то неправельно ставлю классы?

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

rus

Posted
Posted

смотрим внимательно на ваш код, и что мы видим?

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

<li><a class="knopka1" href="#"></a></li>
<li><a class="knopka2" href="#"></a></li>

Игра найди два отличия :)

Кто скажет что тут не так - тому пятерка в четверти. ;)

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