I can not create a top menu, namely the animation of two buttons in the top menu. Help me please.

Created a text document, wrote it in it.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/html4/loose.dtd"> <html> <head> <meta content="text/html; windows-1251" http-equiv="Content-Type"> <meta content="Лучшие инфопродукты для домашнего бизнеса" name="description"/> <meta content="магазин продуктов, видео уроки, видеоуроки, видеокурсы, уроки фотошопа, adobe photoshop, видеоуроки фотошопа, заработок на дому, заработок в интернете, купить, купить диски, магазины интернет продуктов, бизнес старт, форекс, как создать сайт" name="Keywords"/> <title>Лучшие инфопродукты для домашнего бизнеса</title> <link href="style.css" rel="stylesheet" type="text/css"></link> </head> <body> <div class="header"> <img alt="Логотип с изображением" src="file://localhost/D:/Создание%20сайты%20 (блога)%20визитки/infoproduct.pusku.com/img/screen.jpg"></div> <div class="top-menu"></div> </div> </body> </html> 

Saved it with the html extension. Created a second text document, wrote it in it.

 .top-menu { display: block; width: 1250px; height: 40px; margin: 0px 0px 0px 20px; background: url ('.../776e4c4406fb9dcd6041bafc2a45a17c.png'); background: url ('.../26b90e57bf6a4a9f18931a78cf20f0bb.png'); background-repeat: no repeat; } .top-menu:hover { background-position: 0 -50px; } .top-menu:active { background-position: 0 100%; } 

Saved with css extension.

I need to, when I made an inscription on the left, the left one stood out and pressed, when I made the right one, the right one stood out and pressed. Tell me where is the error?

  • @ sutuliy_9_0, To format the code, select it with the mouse and click on the {} button of the editor. - Nicolas Chabanovsky
  • No need to put a space before active and hover. - ModaL

1 answer 1

I can not determine exactly what the problem is.

But here are two errors:

  1. background: url ('... / 776e4c4406fb9dcd6041bafc2a45a17c.png'); The browser will ignore this line, since the next one (background) will replace all styles for the background.

  2. In the body of the document after the image is a closing tag (/ div). Perhaps you inadvertently put it there. Or they would like to close the img tag, which is not necessary to close (it is like <br>)