How do you put the references to the background picture on a certain state?



  • Good night. I'm a newcomer in the vortex, so I'm asking you not to judge. I've been in trouble like this, but I haven't found it, so if anyone sees it, I'll ask you a reference.

    In the menu, references should be made to the state of the hoover and the activists were wired with a tab, but not a Border, but a picture. I cut it out, so it's like a background to the asset and the hover.

    a:hover {
    background: url(ramka.png) top left no-repeat;
    color: #e4d191;
    text-decoration: none;
    }
    

    Now it's the problem. And two of them. (1) The menu is horizontal. On the right and on the left, there's an element, with the enlarged width, which I have attached to the right and left edge of the parent element. It enlarged our diva where references should be in pictures, but since pictures are naturally more than just a reference. And it turns out that only the corner of my frame is visible when it comes to the link. Okay, so I was trying to make a reference to the spread of the diva, and inside it, I tried to extend the references to the means.

    text-align: justify;
    

    but it didn't work out, the references were both undressed and left. Attempted to squeeze between them, they've moved away from each other, but the picture sees its area just around the word and does not capture those gaps.

    That's where my fantasy ended, and I don't know how else to try to do anything about it.

    In parallel, another problem arose. Like I said, the picture is quite large. But the word must be in the middle. I know that first question needs to be solved, and then you can try a background picture of pictures of backwards to the right place, but maybe someone knows in advance how it works? Because now it turns out that the picture is pouring a top left angle to the top left corner of the word that should be in the middle.

    Anyone who even reads it very much, and those who try to understand and help-- just a huge human gratitude. I may have expressed my thoughts, you know, if you need to be clear somewhere, I'll try to fix it. Please help me with this.

    Added.

    It's 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; }
    

  • QA Engineer

    Try to establish the following parameters (incorporate in css:)

    .menu a {width:120px;height:103px; float:left;text-align:center;line-height:103px;}
    

    width and height - That's the width and height of your painting, line-height It gives the height of the line, i.e. if we give it an equal height of the picture, the text is equated exactly at the center of the vertical.

    P. S. I hope it's still relevant. ♪


Log in to reply
 


Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2