Good day. I am new to the layout in connection with this, please do not strictly judge. I looked for similar problems like mine, but I didn’t find it, so if someone even sees it, please give a link.
It is necessary to make links in the menu to the state of hover and asset so that they are enveloped by a sign, but not a border, but by a picture. I cut it, das it as a background with an asset and hover
a:hover { background: url(ramka.png) top left no-repeat; color: #e4d191; text-decoration: none; } Now the crux of the problems. And there are two of them. 1) The menu is located horizontally. Right and left is still on the element. with a given width, which floats I stuck to the right and left edge of the parent element. I set the width to our diva in which the links should be in pictures, but since pictures are naturally more than just a link. And it turns out that when pointing to a link, only a corner of my frame is visible (well, the image there is a frame). So, here I tried to push the links like this: I gave diva the width and inside it I tried to stretch the links within the means
text-align: justify; but it did not work. links as they were not stretched and remained (though in the middle of the element, probably because at some stage there are divs wrapped with the center tag in HTML). I tried to set spaces between them, they began to push each other away from these spaces, but the picture all the same sees its zone only around the word and does not capture these spaces (which was to be expected).
That's actually on this my fantasy is over and I do not know how else to try to do something about it.
In parallel, another problem arose. As I said the picture is a rather large frame. But the word in it should be located in the middle. I understand that first you need to solve the first question, and then you can try to drive the background image indents into the right place, but can someone know in advance how it will work? Because now it turns out that the picture sticks by the upper left corner to the upper left corner of the word that should appear in the middle.
To everyone who will at least read this thank you very much, and to those who try to understand and help is simply a huge human gratitude. I can (most likely) crookedly expressed my thoughts, well, if you need to clarify somewhere, write, I will try to fix it. I beg you to help in this matter.
Added.
This is HTML.
<center> <div class="wapka"> <div class="kartinka"><img src="emblema.png" alt="логотип"></div> <div class="menu"><a href="">Company</a> <a href="">Services</a> <a href="">Expertise</a> <a href="">Our Team</a> <a href="">K&A club</a></div> <div class="en_ru"><a href="">EN</a> <a href="">RU</a></div> </div> </center> This is CSS.
.wapka{ height:200px; width: 905px; } .kartinka{ display: inline; width: 275px; vertical-align: baseline; float:left; } .menu{ display: inline; float:center; text-align: justify; width: 560px; } .en_ru{ display: inline; width: 70px; float:right; } .menu > a:link { color:#ffffff; text-decoration: none; } .menu > a:visited { color: #ffffff; text-decoration: none; } .menu > a:hover { background: url(ramka.png) top left no-repeat; color: #e4d191; text-decoration: none; } .menu > a:active{ background: url(ramka.png) top left no-repeat; color: #e4d191; text-decoration: none; } 
