Sign in with
Sign up | Sign in
Your question
Closed

HTML/CSS: Hover declarations will make other elements to move down.

Last response: in Applications
Share
August 20, 2011 4:46:08 AM

Hi there!

I'm a rookie on HTML/CSS on
& I'm learning on the road.

I'm doing ULs:
They're displayed in blocks,
& the padding increase when hovered,
along with other funny changes.

Thing here's that the other HTML elements,
like a <P> will go jump down a few pixels/lines
when hovering a navigation bar, for instance...

How do I get rid of that result?
How can I keep the hover look w/o
affecting the rest of the elements?

Here's a short of my script:



ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}

a
{
float:left;
width:6em;
color:white;
background-color:navy;
padding:0.2em 0.6em;
border-right:1px solid white;
}


a:hover
{
background-color:#ff3300;
width:8em;
padding:0.3em 0.7em;
}


li {display:inline;}
</style>
</head>

<body>
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
</ul>



Carpe Diem!
August 22, 2011 7:35:45 PM

Things are moving around because in the hover you are increasing the padding.

Also, why change the width? The color change should be enough of a clue to the user.

August 23, 2011 3:26:50 AM

Thnx for reply PhilFrisbie!

The block getting bigger is an intentional effect, I happen to find that cool u know :) 

So, isn't there any way to prevent further elements not to move, by trying other values/properties/attributes/tags/elements or anything else?

I tried Z-index (I thought that, it'd take these elements to a higher layer on the page, just like in vector applications), & some other ones... still the same.

For what I've seen people do with CSS I'd believe the odds are high to create amazing efects. Would this be achievable?
Related resources

Best solution

August 23, 2011 8:18:01 PM
Share

Since your padding is increasing by 0.1 em when you hover, you could try adding 0.1 em margin to the base link and decreasing it to 0 em when you hover.
August 24, 2011 3:47:10 AM

:) 

I was thinking on applying Z-index one link box a time, as I noted that, somehow was doing a change, but U came out w/an easier workaround.

It seems like, as any other skill, the best way to do things with HTML/CSS is by adapting resources to situations!

PhilFrisbie, U have drawn a big smile on my face, & I do appreciate it!
August 24, 2011 3:47:23 AM

Best answer selected by Al Man.
August 24, 2011 3:49:33 AM

**One quick question though: links kinda blink when hovering on the borders, til u get the pointer on the center. Normal?
August 24, 2011 9:01:43 PM

This topic has been closed by Area51reopened
!