html - How to display navigation tabs with the desired border? Table, list, something else? -
see picture above. each navigation tab needs have 2 pixels separation on either side , line header image on edges.
now introduce 5th navigation tab (and possibly 6th). possible code in way stick 5th or 6th tab in there , resize appropriately lists or tables or other solution? still keeping 2 pixels separation , lining edges exactly? wasn't sure if possible or have define widths each time each tab based on math involved line correctly flush edges.
i think best way emulate table behavior css. can use list, , still table behavior.
ul { display:table; } li { display:table-cell; }
here demo displaying css , proper markup. here's demo of how looks actual table. i'm not on ie<8 support css, may aware of.
update: confirmed: not supported on ie6 or 7 natively. may stuck tables or hard-coded widths if want support browsers. there may javascript fix support these display
values i'm not aware of it.
edit: realized demos sloppy, made addresses point margins, uses :first-child
selector remove margin first link, giving evenly distributed appearance. http://jsfiddle.net/wesley_murch/pe6wd/3/
Comments
Post a Comment