 float confusion |
  |
| szostakowicz |
 Aug 15 2014, 11:33 AM
Post
#1
|
|
Group: Members Posts: 5 Joined: 15-August 14 Member No.: 21,404  |
Hi everyone,
to my understanding the command 'float:left' just moves an element to the left putting other stuff to the right. So here is some simple code: CODE <html> <head> <style> a { float:left; width:7em; text-decoration:none; text-align:center; color:black; border:1px white solid; padding:0px; background:LightSeaGreen; } a:hover { background-color:cyan; color:purple; } li { display: inline; } </style> </head> <body> <ul> <li><a href="d">Home</a></li> <li><a href="d">Bio</a></li> <li><a href="d">Work</a></li> <li><a href="d">Contact</a></li><br> </ul> <p>Some text. Some text. Some text. Some text. Some text. Some text</p> </body> </html> When it's executed it shows 4 buttons on top that you can click. However, when you delete "float:left;"from the code the buttons get shorter for some reason and the 'width' doesn't work (whether it's set to 2em or 12em the size of the buttons is only as long as the words inside them). Can you please explain why float makes those weird changes? I actually thought everything would work as it does without "float:left" since "display:inline" makes sure all of the buttons are put nicely in one line. |
  |
 
|
| pandy |
Aug 15 2014, 12:09 PM
Post
#2
|
|
🌟Computer says no🌟  Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
It's because width doesn't apply to inline elements like A.
'width' Applies to: all elements but non-replaced inline elements, table rows, and row groups http://www.w3.org/TR/CSS2/visudet.html#propdef-width A float can have a width, at one point it was even required that it had one. You could say that by floating the As, you make them kind of block level. When you manipulate an element with CSS the properties that can be used with it also change. You can give your P a square bullet by making it a list item. Not an entirely good idea, but just to make a point.  CODE p { display: list-item; list-style-type: square; margin-left: 2em } (The margin is there because there must be some space for the bullet) Remove 'display: list-item' and the bullet will go away too, bucause Ps don't have bullets. |
|
|
|
| Frederiek |
Aug 16 2014, 02:38 AM
Post
#3
|
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
You also might like to read the float basics in Russ Weakley's Floatutorial.
|
|
|
|
| Frederiek |
Aug 31 2014, 09:47 AM
Post
#4
|
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
The discussion here is rather about float vs inline block (not just inline, as LI and A elements are already inline elements)
Food to read: http://css-tricks.com/almanac/properties/d/display/ http://css-tricks.com/almanac/properties/f/float/ http://www.vanseodesign.com/css/inline-blocks/ http://robertnyman.com/2010/02/24/css-disp...d-why-it-sucks/ |
|
|
|
|
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 18th April 2024 - 04:02 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC