ret Posted June 4, 2010 Report Share Posted 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> Quote Link to comment Share on other sites More sharing options...
0 psywalker Posted June 4, 2010 Report Share Posted June 4, 2010 1) Покажи скриншот того, что должно получится в итоге.2) Кстати меню делай на списках. UL-LI Quote Link to comment Share on other sites More sharing options...
0 ret Posted June 4, 2010 Author Report Share Posted June 4, 2010 не могу у мя все данные на другом компе.Вот код<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? Должно получится обычное горизонтальное меню состоящее из картинок, мне всего лишь надо сдвинуть как-то классы, чтобы было все в одну строку. Если хотите могу дать ссылку на источник где я это нашел, просто там не описывается как сделать горизонтальное меню. Quote Link to comment Share on other sites More sharing options...
0 psywalker Posted June 4, 2010 Report Share Posted June 4, 2010 1) Ты можешь хотябы нарисовать то, что хочешь получить.2) Или покажи пример того, что нужно. Quote Link to comment Share on other sites More sharing options...
0 ret Posted June 4, 2010 Author Report Share Posted June 4, 2010 на самом сайте htmlbook.ru стоит горизонтальное меню Quote Link to comment Share on other sites More sharing options...
0 psywalker Posted June 4, 2010 Report Share Posted June 4, 2010 Тебе нужно делать меню на UL LI и в них уже выравнивать ссылки как тебе угодно. Quote Link to comment Share on other sites More sharing options...
0 ret Posted June 4, 2010 Author Report Share Posted June 4, 2010 Тебе нужно делать меню на UL LIЭто еще что? Quote Link to comment Share on other sites More sharing options...
0 psywalker Posted June 4, 2010 Report Share Posted June 4, 2010 Это еще что?Ууу, как всё запущено...Это вот для начала тогда: http://stepbystep.htmlbook.ru/ Quote Link to comment Share on other sites More sharing options...
0 ret Posted June 4, 2010 Author Report Share Posted June 4, 2010 И что именно там учить? Quote Link to comment Share on other sites More sharing options...
0 psywalker Posted June 4, 2010 Report Share Posted June 4, 2010 И что именно там учить?Всё! Quote Link to comment Share on other sites More sharing options...
0 121990 Posted June 4, 2010 Report Share Posted June 4, 2010 Согласен меню только UL LI, и никак иначе. Выбрось этот код. Quote Link to comment Share on other sites More sharing options...
0 ret Posted June 8, 2010 Author Report Share Posted June 8, 2010 ААА я замучался уже, да на UL Ll делал вот столько сайтов пересмотрел, на одном ошибки, на другом непонятно ничего, у всех какие-то разные приемы. Мне всего-то нужно сделать меню на UL Ll с классами, чтоб меню из картинок состояло, горизонтальное и вертикальное все!Может кто-нибудь привести просто от балды код, который бы работал на данных требованиях, поясняя, а то я так замучаюсь!Зарание спасибо! Quote Link to comment Share on other sites More sharing options...
0 rus Posted June 8, 2010 Report Share Posted June 8, 2010 Может кто-нибудь привести просто от балды код, который бы работал на данных требованиях, поясняя, а то я так замучаюсь!Не от "Балды" конечно, но от Влада. Quote Link to comment Share on other sites More sharing options...
0 ret Posted June 8, 2010 Author Report Share Posted June 8, 2010 Не от "Балды" конечно, но от Влада. Да это конечно хорошо, но мне бы хотелось допустил так:<div id="menu"<ul><li><a class="knopka1" href="#">rgv</a></li><li><a class="knopka2" href="#">rgeg</a></li></ul></div>с картинками кнопки, с hoverи чтоб ничего лишнего небылои все! Quote Link to comment Share on other sites More sharing options...
0 sigma77 Posted June 8, 2010 Report Share Posted June 8, 2010 (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 June 8, 2010 by sigma77 Quote Link to comment Share on other sites More sharing options...
0 ret Posted June 8, 2010 Author Report Share Posted June 8, 2010 у меня как раз проблема в стилях, то картинка не отображается то еще что-то. Поэтому я и прошу привести пример, чтобы сразу разобраться. Quote Link to comment Share on other sites More sharing options...
0 rus Posted June 8, 2010 Report Share Posted June 8, 2010 у меня как раз проблема в стилях, то картинка не отображается то еще что-то. Поэтому я и прошу привести пример, чтобы сразу разобраться.раз есть проблема, значит что-то уже пытались сделать, но не получилось, тогда код того что пытались сделать в студию! Quote Link to comment Share on other sites More sharing options...
0 ret Posted June 8, 2010 Author Report Share Posted June 8, 2010 (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 June 8, 2010 by ret Quote Link to comment Share on other sites More sharing options...
0 ret Posted June 8, 2010 Author Report Share Posted June 8, 2010 м? Quote Link to comment Share on other sites More sharing options...
0 psywalker Posted June 8, 2010 Report Share Posted June 8, 2010 а путь картинкам ты задаёшь верный? Quote Link to comment Share on other sites More sharing options...
0 ret Posted June 8, 2010 Author Report Share Posted June 8, 2010 да уже 100 раз проверил Quote Link to comment Share on other sites More sharing options...
0 psywalker Posted June 8, 2010 Report Share Posted June 8, 2010 Аа, ну тут понятно всё, смотри.Вот как нужно правильно обращаться к ссылке:#menu a.knopka1:hover { Quote Link to comment Share on other sites More sharing options...
0 ret Posted June 8, 2010 Author Report Share Posted June 8, 2010 (edited) не работает(отображает картинку только когда я вставил ее в #menu.И так же работает когда вставил другую в hover #menu:hoverМожет я как-то неправельно ставлю классы? Edited June 8, 2010 by ret Quote Link to comment Share on other sites More sharing options...
0 rus Posted June 8, 2010 Report Share Posted June 8, 2010 смотрим внимательно на ваш код, и что мы видим?#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>Игра найди два отличия Кто скажет что тут не так - тому пятерка в четверти. Quote Link to comment Share on other sites More sharing options...
0 ret Posted June 8, 2010 Author Report Share Posted June 8, 2010 Ничего не вижу ставь 2)если про #menu .knopka2 a:hover {то с этим разобрались, но все-равно не показывает Quote Link to comment Share on other sites More sharing options...
0 psywalker Posted June 8, 2010 Report Share Posted June 8, 2010 Попробуй ссылку сделать блочной. Quote Link to comment Share on other sites More sharing options...
Question
ret
В общем мне нужно чтобы меню в 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; }
Link to comment
Share on other sites
34 answers to this question
Recommended Posts
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.