nachumk Posted November 9, 2009 Share Posted November 9, 2009 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 More sharing options...
nachumk Posted November 9, 2009 Author Share Posted November 9, 2009 Anyone?? I would hope to hear something as this is a dilemma for me. For now I've gone with float as that seems to do what I want better but I would appreciate feedback in case there is another method better than float. Link to comment Share on other sites More sharing options...
thescientist Posted November 10, 2009 Share Posted November 10, 2009 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. Link to comment Share on other sites More sharing options...
nachumk Posted November 12, 2009 Author Share Posted November 12, 2009 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 More sharing options...
thescientist Posted November 13, 2009 Share Posted November 13, 2009 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 More sharing options...
nachumk Posted November 13, 2009 Author Share Posted November 13, 2009 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 More sharing options...
thescientist Posted November 13, 2009 Share Posted November 13, 2009 I went to the last two websites I made with with float: left menus and tabs do work on it, pretty cool. I don't use Chrome though, sorry. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.