Sign in with
Sign up | Sign in
Your question
Closed

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

Tags:
  • Internet Applications
  • Style
  • HTML
  • CSS
  • Apps
Last response: in Social Networking
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!

More about : html css hover declarations make elements move

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.

Score
0
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?
Score
0

Best solution

August 23, 2011 8:18:01 PM

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.
Share
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!
Score
0
August 24, 2011 3:47:23 AM

Best answer selected by Al Man.
Score
0
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?
Score
0
August 24, 2011 9:01:43 PM

This topic has been closed by Area51reopened
Score
0
!