Thu, 2006-05-25 13:14
just have a look at the code below, the float in the boldened text is really driving me crazy. If i add the float, the yellow pops up, and if i remove it things go normal. BUT WHY DOES IT POP?
<html>
<head>
<style type="text/css">
ul{
list-style:none;
padding:0;
margin:0;
}
ul li{
float:left;
margin:0 5px 0 0;
background:blue;
}
ul li a{
text-decoration:none;
padding:10px 10px 10px 10px;
font-family:arial;
color:#000;
}
ul li a:hover{
float:left;
background:yellow;
}
</style>
</head>
<body>
<ul>
<li><a href="aboutus.html">About us</a></li>
<li><a href="link.html">link to us</a></li>
<li><a href="business.html">business</a></li>
</ul>
</body>
</html>
Thu, 2006-05-25 13:24
#1
[SOLVED] watz with the float??!?!?!??! (driving me crazy)
:? explain the phrase pops up!
Why are you floating the anchor hover?
Floats are removed from the flow, a float will not push down it's parent container, with no width it will shrinkwrap to it's child's dimensions, but I understand not why you're floating the hover class.
Hugo.
Thu, 2006-05-25 15:13
#2
no reason to use float actually
there is no particular reason for using the float in hover, but when i used it, the yellow background (on hovering) becomes bigger than the blue. The yellow increases x- axis wise, more like a (negative) -x direction , downwards. why?
the thing is im a newbie, and was just fiddling around with code, and really didnt understand why it was "poping" down. did you run the code???!?!?
reggyz
Thu, 2006-05-25 15:35
#3
[SOLVED] watz with the float??!?!?!??! (driving me crazy)
Did I run the code? er no not got time for that I'm afraid, look at the rules what are floats by default? block level, anchors are inline you can pad the width of the line box but not the height try adding display:block to the anchor it now matches the hover, the hover is made block level by the float, the height padding takes effect, set the anchor back to default inline now hovering puts the anchor into block level mode and the padding takes effect.
You just needed to play around a litle more with it I would also be an idea to study the box models, block and inline to understand their different nature.
Hugo.
Thu, 2006-05-25 16:15
#4
[SOLVED] watz with the float??!?!?!??! (driving me crazy)
If you're playing with the box model, it's IMPERATIVE you get a doctype.
Fri, 2006-05-26 03:20
#5
THX
thx a mill. ill look at the block and inline levels. doctype. hmm, the doctype plays a part too? wow there are a lot of interesting things in css. just luv the thing. Ill luv the day when i could play with it, at my will.
thanks again.