CODEWITHSUNDEEP
htmlcss
MauricioTL
MauricioTL

Reputation: 443

how to avoid elements in html page move when another element change size

I have a list of images. Below is the relevant html code:

<ul id="image_list">
<li><a href="h1.jpg"><img alt="" src="t1.jpg"></a></li>
<li><a href="h2.jpg"><img alt="" src="t2.jpg"></a></li>
<li><a href="h3.jpg"><img alt="" src="t3.jpg"></a></li>
<li><a href="h4.jpg"><img alt="" src="t4.jpg"></a></li>
<li><a href="h5.jpg"><img alt="" src="t5.jpg"></a></li>
<li><a href="h6.jpg"><img alt="" src="t6.jpg"></a></li>
</ul>

When one of the images gets the focus or hover a border is displayed, below is the code in css page: 

li a:focus img {
    border: 2px solid blue;
}       

li a:hover img {
    border: 2px solid blue;
}

This code is working but the problem is when on of this images gets the focus or hover, all the elements in the page move, it is an efect like the whole page is jumping when moving on the list of images. I have tried following code in css, but without success.

img {
position: absolute;
}

and the following:

img {
position: relative;
left: 20px;
}

Does any one know how this could be fixed? thank you!!

Upvotes: 3

Views: 105

Answers (6)

Matt
Matt

Reputation: 1755

Here is the best info I have ever seen on this topic. http://css-tricks.com/image-rollover-borders-that-do-not-change-layout/

A must read resource on this issue.

Upvotes: 1

CodingWithSpike
CodingWithSpike

Reputation: 43708

Just always have a 2px border, but it can be transparent when it isnt hovered.

li a img {
    border: 2px solid transparent;
}

li a:focus img,
li a:hover img {
    border-color: blue;
}

I like doing this over manipulating margins because sometimes you might actually want a margin too. I'd rather use margin for what it is supposed to be used for instead of flipping between margin and no margin as well as border and no border. Seems cleaner, in my opinion.

Working example:

li a img {
  border: 2px solid transparent;
}       

li a:focus img,
li a:hover img {
  border-color: blue;
}

ul {
  list-style: none;
}

li {
  display: inline-block;
  margin: 5px;
}
<ul id="image_list">
<li><a href="h1.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h2.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h3.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h4.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h5.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h6.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
</ul>

Upvotes: 1

Tiberiu C.
Tiberiu C.

Reputation: 3513

Set a transparent border on default:

li a img {
  border: 2px solid transparent;
}

li a:focus img {
 border: 2px solid blue;
}       

li a:hover img {
 border: 2px solid blue;
}
<ul id="image_list">
<li><a href="h1.jpg"><img alt="" src="http://placehold.it/350x150&text=1"></a></li>
<li><a href="h2.jpg"><img alt="" src="http://placehold.it/350x150&text=2"></a></li>
<li><a href="h3.jpg"><img alt="" src="http://placehold.it/350x150&text=3"></a></li>
<li><a href="h4.jpg"><img alt="" src="http://placehold.it/350x150&text=4"></a></li>
<li><a href="h5.jpg"><img alt="" src="http://placehold.it/350x150&text=5"></a></li>
<li><a href="h6.jpg"><img alt="" src="http://placehold.it/350x150&text=6"></a></li>
</ul>

Upvotes: 1

A. Wolff
A. Wolff

Reputation: 74420

Use outline instead of border:

li a:focus img {
  outline: 2px solid blue;
}       

li a:hover img {
  outline: 2px solid blue;
}
<ul id="image_list">
<li><a href="h1.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h2.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h3.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h4.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h5.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h6.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
</ul>

Upvotes: 2

Christopher White
Christopher White

Reputation: 288

I always add a margin to each element that I remove when displaying the border.

li a img {
 margin: 2px;
}

li a:focus img {
margin: 0;
border: 2px solid blue;
}       

li a:hover img {
margin: 0;
border: 2px solid blue;
}

Upvotes: 1

emmanuel
emmanuel

Reputation: 9615

You could use a negative margin.

li a:focus img {
  border: 2px solid blue;
  margin: -2px;
}       

li a:hover img {
  border: 2px solid blue;
  margin: -2px;
}
<ul id="image_list">
<li><a href="h1.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h2.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h3.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h4.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h5.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h6.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
</ul>

Reference: Image Rollover Borders That Do Not Change Layout

Upvotes: 1

Related Questions