5 replies [Last post]
PLUMBR
Offline
newbie
Last seen: 13 years 28 weeks ago
Joined: 2006-05-25
Posts: 5
Points: 0

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>

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

[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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

PLUMBR
Offline
newbie
Last seen: 13 years 28 weeks ago
Joined: 2006-05-25
Posts: 5
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

[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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

[SOLVED] watz with the float??!?!?!??! (driving me crazy)

If you're playing with the box model, it's IMPERATIVE you get a doctype.

Verschwindende wrote:
  • CSS doesn't make pies

PLUMBR
Offline
newbie
Last seen: 13 years 28 weeks ago
Joined: 2006-05-25
Posts: 5
Points: 0

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.