CODEWITHSUNDEEP
csshoverspace
psmul
psmul

Reputation: 141

Hover spacing under text

I was hoping you can help me solve this thing. I want to expand space between my hover and my text.

image:

example

#menu {
    float: right;
    height: 30px;
    margin: 50px 70px 0;
    width: 530px;
}

#menu a {
    color: black;
    font-size: 15px;
    font-weight: bold;
    padding: 12px 12px;
    text-decoration: none;
}

#menu a:hover {
    background: url(images/hover.png) repeat-x;
}

So my questions are:

  1. How to expand spacing between text menu and hover thng?
  2. How to conform length of hover to text?
  3. How to make hover stay visible on active page?

Upvotes: 3

Views: 1780

Answers (5)

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

  1. give your a a height and position the image at the bottom
  2. change the padding to margin (space outside the elements in stead of inside)
  3. make an extra class like .focus
#menu a {
    color: black;
    font-size: 15px;
    font-weight: bold;
    display: inline-block;
    height: 60px;
    padding: 12px 12px 0 12px;
    text-decoration: none;
}

#menu a:hover {
    background: url(images/hover.png) bottom left repeat-x;
}

#menu a.focus {
    ... active link style
}

Upvotes: 1

Scott
Scott

Reputation: 21511

  1. How to expand spacing between text menu and hover image?
    Add the padding-bottom: 12px. Change the 12px to your choice of value, this adjusts the horizontal spacing. Add 0 bottom to the background tag, this keeps the image positioned at the bottom of the link.

  2. How to restrict length of hover to text?
    Add your padding to the margin property instead and do away with the padding. This means the background image length will match the text length.

  3. How to make hover stay visible on active page?
    To make the active page hover remain visible, you can give the current active page a class of selected. As shown in the HTML at the bottom of the answer.

CSS:

#menu {
    float: right;
    height: 30px;
    margin: 62px 82px 12px 12px; /* Adjust margin to include the padding */
    width: 530px;
}

#menu a {
    color: black;
    font-size: 15px;
    font-weight: bold;
    /* Remove your padding here. Has been adjusted in the margin */
    padding-bottom: 12px; /* Adjust to change the hover spacing */
    text-decoration: none;
}

#menu a:hover, #menu a.selected {
    background: url(images/hover.png) repeat-x 0 bottom;
}

HTML (Example usage of the class selected):

<div id="menu">
    <a href="l1.html">Link 1</a>
    <a href="l2.html" class="selected">Link 2</a>
    <a href="l3.html">Link 3</a>
</div>

Upvotes: 1

user2568107
user2568107

Reputation:

Use this:

#menu a {
    color: black;
    font-size: 15px;
    font-weight: bold;
    padding: 12px 12px;
    text-decoration: none;
    padding-bottom: 20px;
    background-postion-y: -10px; 
}

Upvotes: 1

Amberlamps
Amberlamps

Reputation: 40488

  1. Try background-position.
  2. When you are trying to conform your image to the width of the text, have an element with no margin and padding where you apply your hovering to.
  3. Have an extra class attached to your active element: #menu a:hover, #menu a.active.

Upvotes: 1

Johan Bouveng
Johan Bouveng

Reputation: 565

Change the position of the background image

background: url('images/hover.png') repeat-x 0 10px;

Are you talking about the length of the hover under the text? You could either add a 'active' class and style it the same way as the hover, or add in :active together with #menu a:hover,#menu a:active

Upvotes: 1

Related Questions