- 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!
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!
Facebook
Twitter