It is impossible to make links to the state of hover and active such as here .

I only get this way.

I tried a bunch of ideas, but nothing came of it.
The file ramka.png standing as a background for a:active and hover is the frame that should be in this state.

Who can tell?

  • and what was done to achieve this goal? - Artem
  • I tried each paragraph of the menu separately to close up in the div (and in the span) and give it a width and height of the same size as the frame, but no effect. I tried to drive a picture by padings and margins (well, which is a frame), it was also no use. I tried to just make a picture from a link, and insert it as a picture, not a background, but the result did not appear again. Odd was still, but completely pervert, and unfortunately never achieved a result. - Socrates

2 answers 2

Solution example:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> div.menu { width:100%; border:0px solid black; } div.menu a { border:0px solid red; display:inline-block; width:25%; } div.menu a:hover div { border:0px solid green; background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; background-image: url('ramka.png'); } div.menu a div span { border:0px solid blue; display:block; width:25%; font-size:70%; margin-left:auto; margin-right:auto; text-align:center; } </style> </head> <body> <div class="menu"> <a href=""><div style="line-height:300%;"><span>123</span></div></a> </div> </body> </html>

div.menu - contains the necessary menus, from its width we set the width of links in%.

div.menu a - display: inline-block - so that you can set the width of the link

div.menu a: hover div - background-size: contain; background-position: 50% 50%; - in the middle, so that it will fully enter (ie, either in width or in height).

margin-left: auto; margin-right: auto; - alignment span'a in the middle of div'a

text-align: center - so that the text is in the middle of the span (and hence the div, and therefore the links)

turned on the border, put instead of 0px, for example, 1px and play the other values ​​- you will see how it affects.

Then position the elements as you want.

    I can not call myself a specialist in the layout, but the menu, ИМХО you need to draw up a list. And to achieve the goal, you will need these styles:

     <style type="text/css" > ul li { display:block; width:92px; height:128px; list-style:none; float:left; text-align:center; } ul li:hover { background-image:url('ramka.png') } </style>

    menu:

     <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul>

    well, or if you want to do without lists, then assign styles from ul li and ul li:hover to a