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

Status
Not open for further replies.

al man

Distinguished
Aug 15, 2010
24
1
18,570
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!
 
Solution
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.

al man

Distinguished
Aug 15, 2010
24
1
18,570
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?
 

al man

Distinguished
Aug 15, 2010
24
1
18,570
:)

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!
 
Status
Not open for further replies.