0

Ok I made hover effect for group of five images-appearing border. But when I'm hovering the image some other two images are moving few pixels downward.

<div class="rel">
<img src="images/4wheel2.jpg" height="85" id="on"/>
<img src="images/4wheel2.jpg" height="85" id="on"/>
<img src="images/4wheel2.jpg" height="85" id="on"/>
<img src="images/4wheel2.jpg" height="85" id="on"/>
<img src="images/4wheel2.jpg" height="85" id="on"/>
</div>
<div class="ar">
<img src="images/arrowc.png"/>
</div>
<div class="at">
<img src="images/arrowc.png"/>
</div>

rel is class of div containing 5 images aligned horizontally; ar and at are classes containing identical arrow images; when I'm hovering the 4wheel2.jpg the arrow images are moving downwards.
The CSS code:

.rel{
	margin-left: 24%;
	margin-top: 40%;
	}
.ar{
	margin-top: -50%;
	margin-left: 45.5%;
	}
.at{
	margin-top: -3.2%;
	margin-left: 66.5%;
	}
#on:hover{
	border: 3px solid #2875DE;
	}

The hover makes ar and at classes move. Best regards

3
Contributors
4
Replies
7
Views
7 Years
Discussion Span
Last Post by mpb2053
0

It`s because you apply border to hovered element only. Add transparent border or 3px margin to non-hover state of #on. And you must not use ids for multiple elements if you want your page to be valid. Use classes instead.

Edited by Varnius: n/a

0

Thanks man. Now I'm having another problem.

<p class="cng" onclick="call()"><input type="file" id="file"/><b>Change background</b></p>

I want to replace this with

<a href="javascript:call()"><input type="file" id="file"/><b>Change background</b></a>

When I make the replacements the other elements of the page are moving few hundred pixels downward.This is the CSS

.cng{
	color: white;
	margin-top: -79.1%;
}

Any help will be greatly appreciated.

0

Thanks man. Now I'm having another problem.

<p class="cng" onclick="call()"><input type="file" id="file"/><b>Change background</b></p>

I want to replace this with

<a href="javascript:call()"><input type="file" id="file"/><b>Change background</b></a>

When I make the replacements the other elements of the page are moving few hundred pixels downward.This is the CSS

.cng{
	color: white;
	margin-top: -79.1%;
}

Any help will be greatly appreciated.

Why did you put <input> inside anchor? The main problem I can see here is bad(non-valid) markup.

Why not

<form action="">
   <p>
      <label>Change background</label>
      <input type="file" id="file" onclick="someFunction();"/>
   </p>
</form>

Edited by Varnius: n/a

0

float your anchor tag left. display block or inline-block as needed also. inputs shouldn't do inside of anchor tags, but if that's the way you want to do it, then this should fix it.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.