Jump to content

Menu Items - Float Or Inline-block?


nachumk
 Share

Recommended Posts

I have a sample up at http://www.nkcorner.com/tmp.php (tested on chrome and firefox and ie latest versions for windows xp 32)I have been trying to get a better grasp of when to use floats and when to use inline... As part of this I want to implement my menus. The menu text should become larger when floating over it. I use a pseudo class to accomplish this. With float the menus stay in place when I change the font size. With inline-block the item moves since the larger text starts one pixel lower. Does this mean I should implement with floats or is there a better way to implement using a non-float method?I get the feeling that floats are overused and especially by me...The code has 2 menus - the first menu uses floats and performs properly, and the second uses display inline block.thank you,Here's the code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8559-1"> <style type="text/css">.topMenuItem { height:25px; width:100px; background-color:red; text-align:center; font-size:14px; padding-top:10px;}a .topMenuItem:hover { font-size:16px;}.floatLeft { float:left;}.inlineBlock { display:inline-block;}</style></head> <body> <a href='about.php'><div class='topMenuItem floatLeft'>about</div></a> <a href='pictures.php'><div class='topMenuItem floatLeft'>pictures</div></a> <a href='blog.php'><div class='topMenuItem floatLeft'>blog</div></a> <div style="clear:both;height:50px;"></div><a href='about.php'><div class='topMenuItem inlineBlock'>about</div></a> <a href='pictures.php'><div class='topMenuItem inlineBlock'>pictures</div></a> <a href='blog.php'><div class='topMenuItem inlineBlock'>blog</div></a> </body> </html>

Link to comment
Share on other sites

I usually use lists for menu's, and depending on if they're horizontal or not, I float them to get them all on one line.
Don't you find issues using floats with the ability to tab through links? I find that I can't tab through floated links properly in Chrome and even in Firefox I find that the links are no longer highlighted when tabbing through them.
Link to comment
Share on other sites

I've never tried using tab to go through menu's on webpages, I just use my mouse. Do many people actually use tab? I didn't know you could do that. Huh.

Link to comment
Share on other sites

I've never tried using tab to go through menu's on webpages, I just use my mouse. Do many people actually use tab? I didn't know you could do that. Huh.
Using tabs is very important, for example if your mouse is broken... also it's pleasant if you're a vim user like myself and want to get around quickly without lifting your hand from the keyboard. i don't usually navigate the web that way but i definitely want it to work at least for the first reason i stated.it's weird - in firefox the floated elements get selected by tab but in chrome they don't... do you know if there is a better way to accomplish what i want with my menus without using float, and without having to hack pixel heights in the css?
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...