List item hover spacing

Question

I have 4 columns of links as list items, and each link turns bold on hover. When you hover over one of the links to make it bold, it also increases the column width and pushes over the subsequent columns. How can I prevent it from pushing the other columns over on hover?

Here’s the site: http://jmenoff-architect.com/update10/

HTML:

<ul class="projects-list">
  <li href="9thst.html">Greenwich Village Apartment</li></a>
  <li href="les-apt.html">Lower East Side Apartment Combination</li></a>
  <li href="tribeca.html">Tribeca Apartment Combination</li></a>        
</ul>

CSS:

.projects-list {
    display: inline-block;
    list-style-type: none;
    margin-left: -30px;
    padding-right: 10px;
    vertical-align:top;
  }
#projects-list li:hover {
  font-weight: 600;
}

Change the **display** attribute from inline-block to block. — Arif Burhan, Mar 30 '16 at 01:40

score 0 · Answer 1 · answered Mar 30 '16 at 01:43

0

Setting a min-width in .projects-list will do it. Worked at around 200px when I was playing with it

or if you want it be more maintainable, add another transparent div at the same location that has the bolded version of the text.

answered Mar 30 '16 at 01:43

TinyTheBrontosaurus

2,652
5
17
32

Husain Ahmmed · Answer 2 · 2016-03-30T02:15:00.553

0

You usign href tag for li but HTML syntax does not allow the href attribute for li elements at all. Also your anchor tag have ending but does not have starting fix those issue first.

And you are trying to select by using id selector

#projects-list li:hover {}

but you are using a class selector. So you should select this way

.projects-list li:hover {}

edited Mar 30 '16 at 02:15

answered Mar 30 '16 at 01:44

Husain Ahmmed

351
2
7

score 0 · Answer 3 · answered Mar 30 '16 at 01:46

0

I would suggest changing the IDs of <ul id="projects-list"> so that each has a unique ID and giving then proceed to giving them fixed widths. This will solve your problem

answered Mar 30 '16 at 01:46

Dennys Henry

76
9

score 0 · Answer 4 · answered Mar 30 '16 at 03:42

You HTML is not in the right format. I think this is what you are tying to do.

<ul class="projects-list">
  <li>
    <a href="9thst.html">
        Greenwich Village Apartment
     </a>
   </li>
  <li>
      <a href="les-apt.html">
         Lower East Side Apartment Combination
      </a>
  </li>
  <li>
       <a href="tribeca.html">
          Tribeca Apartment Combination
        </a>
   </li>
</ul>

I believe it's a combination of the negative margin-left, the fact that when you bold text it takes up more space, and the hash should've a period. This CSS should work for you.

.projects-list {
    display: block;
    float: left;
    list-style-type: none;
    margin-left: 30px;
    padding-right: 10px;
    vertical-align:top;
  }

.projects-list li:hover {
  font-weight: 600;
}

I do know that the negative margin will cause overlapping.

List item hover spacing

4 Answers4