CODEWITHSUNDEEP
csshoveralignment
codingJoe
codingJoe

Reputation: 4953

Incorrect html alignment during hover

I have a menu on a web page and I want to add some emphais onto the element that my mouse is hovering over. Before I hover my mouse the menu looks good and the alignment looks good. To add emphsis, I added a small arrow (or '>' sign). The problem is that now the text jumps to the right by 2 characters.

I want to add the '>' character without my menu text jumping the right. The correct behavior is that the text remains in p lace and the arrow appears 2 spaces to the left of the hovered menu item.

Note I tried to change my alignment and the whole thing looks like crap. Only text-align: left gives it the correct alignment.

#leftMenu {
  position: absolute;
  top:28%;
  left:24%;
  height: 20%;
  width: 20%;
  font-weight:400
  font-size:0.5em;
}

#leftMenu a:hover:before {
  content: "> ";
}

How can I add the arrow without the text jumping to the right?

Upvotes: 0

Views: 658

Answers (2)

Zensar
Zensar

Reputation: 817

Just have the ">" already exist, just not visible. This way it will take up the real estate on the menu, so nothing will move when it appears. Here is a small example:

CSS:

#leftMenu {
  position: absolute;
  top:28%;
  left:24%;
  height: 20%;
  width: 20%;
  font-weight:400;
  font-size:0.5em;
}

.marker{
  visibility:hidden;
}

#leftMenu li:hover .marker{
  visibility:visible;
}

#leftMenu ul{
  list-style:none;
}

HTML:

<div id="leftMenu">
  <ul>
     <li><span class="marker">&gt;</span><a href="#">Link 1</a></li>
     <li><span class="marker">&gt;</span><a href="#">Link 2</a></li>
     <li><span class="marker">&gt;</span><a href="#">Link 3</a></li>
  </ul>
</div>

I'm not really sure of the exact layout of your menu, but I think the above gets across the general idea.

Upvotes: 1

s1lence
s1lence

Reputation: 2188

You could add a padding-left for normal entries that takes exactly the width the arrow would have later and remove it when hovered in favor of the arrow.

However this could be quite a mess since the arrow may not have the same width in every browser (even with same font and font-size).

An other possibility is to use positioning properties to move the arrow to the right location. If you for example use position: absolute; on it, it will no longer move other things around. Be aware that it then will be positioned absolutely inside the next parent that does not have standard position (static).

Upvotes: 0

Related Questions