Jump to content

Menu Bar With <table>?


blogsmith
 Share

Recommended Posts

I am desirous of creating a horizontal menu bar using table but am aware that there are criticisms - I think it was something about not proper using table for layout. Since I am most familiar with <table>, I am highly tempted to use it and would do so if this "not table for layout" is only a nicety like "not blowing your nose in public".Seeking advice and feedback.

Link to comment
Share on other sites

No, tables should never be used for layout, just like you would never spit on other people in public.http://www.hotdesign.com/seybold/
Sigh! Then a linear series of hyperlink tags separated by | like<a href="url1">menu 1</a>|<a href="url2">menu 2</a>|<a href="url3">menu3</a> etc.Would that be better?Any other suggestions? I have a fair knowledge of HTML and a bit of CSS, so may have to struggle with more complicated methods like frame etc
Link to comment
Share on other sites

Sigh! Then a linear series of hyperlink tags separated by | like<a href="url1">menu 1</a>|<a href="url2">menu 2</a>|<a href="url3">menu3</a> etc.Would that be better?Any other suggestions? I have a fair knowledge of HTML and a bit of CSS, so may have to struggle with more complicated methods like frame etc
Maybe add a bit of background color like<div style="background-color:green;"><a href="url1">menu 1</a>|<a href="url2">menu 2</a>|<a href="url3">menu3</a> etc.</div>or add some line breaks to create margin<br /><div style="background-color:green;"><a href="url1">menu 1</a>|<a href="url2">menu 2</a>|<a href="url3">menu3</a> etc.</div><br />?????
Link to comment
Share on other sites

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script> <style type="text/css">ul {list-style:none;}li a, li{float:left; background-color:#66CCFF; color: #fff;}li a {display:block; text-decoration:none; padding: 0 12px; height: 24px; line-height: 24px; color:#00F;}li a:hover {background-color:#0000FF; color:#FFF;}</style></head><body><ul><li><a href="url1">menu 1</a>|</li><li><a href="url2">menu 2</a>|</li><li><a href="url3">menu3</a></li></ul><div style="clear:both;"></div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> </body></html>

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