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