HTML/CSS: Hover declarations will make other elements to move down.
Tags:
- Internet Applications
- Style
- HTML
- CSS
- Apps
Last response: in Social Networking
al man
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!
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
PhilFrisbie
August 22, 2011 7:35:45 PM
al man
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?
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
PhilFrisbie
August 23, 2011 8:18:01 PM
al man
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
al man
August 24, 2011 3:47:23 AM
al man
August 24, 2011 3:49:33 AM
!