Jump to content

table drop down menu help


behnazutx
 Share

Recommended Posts

Hi there, I am trying to a add drop down menus to my existing horizontal navigation bar. The current bar is here:http://westutteraustin.org/index.html I had used a table for the present navigation, but I think in order to have drop down menus, I have to use an unorded list. So I am i the process of creating a new navigation bar, which can be previewed here:http://westutteraustin.org/history.html As in the previous navigation bar, I set the div width for the new navigation to be the length of the container (860px). The obvious issue is that I can not space the length of each of the navigation tabs to be the appropriate length. In the table navigation, I used percentages to achieve this. In the new navigation, I'd like for their to about equal padding space where the text begins and ends for each tab -- basically to achieve the exact same visual effect as there is the original navigation. I tried playing around with the <span> tag last night, but still could not achieve this. Any ideas for stying the individual tabs? I suppose it would be easier if there was a way to add drop down menus to a table navigation, but I am not sure this is possible. Thank you.

Link to comment
Share on other sites

I simplified it down to the following example case. You want the menu block width to auto-size to the width of the total menu and the text to wrap inside the menu blocks?

<html><head>	<title>National...</title> <style type="text/css">body {	color:#333333;	font-family: Arial, Helvetica, sans-serif;	font-size:12px;	font-style:normal;	font-weight:normal;	margin: 6px 0 0 5px;}a {	font-family:Arial,Helvetica,sans-serif;	font-size:12px;	font-style:normal;	text-decoration: underline;	font-weight: normal;}div#header {	position: relative;	height: 100px;}div#navMenu {	width: 860px;	margin:0;	clear: both;}div#navMenu ul {	margin:0;	padding:0;	line-height:30px;}div#navMenu li {	list-style:none;	float:left;	position:relative;	background:#E98A25;	}.navul {	width: 860px; }div#navMenu ul li a {	text-align:center;	height: 30px;	width: 130px;	display:block;	color:#000;	font-family:Arial,Helvetica,sans-serif;	font-size:13.5px;	font-weight:bold;	text-decoration:none;	color:black;	border: 2.3px solid #F6F6F6;}#navMenu ul ul {	position:absolute;	visibility:hidden;	top:32px;}#navMenu ul li:hover ul {	visibility:visible;	z-index:9999;} /**********************************************/ /*sets top level hover color*/ #navMenu li:hover {   background:#3377FF;   color:#000;}   /*sets link items hover color and background*/ #navMenu ul li:hover ul li a:hover {	color:#000;	background:#3377FF;} /* Changes text color on hover for main menu hover*/   #navMenu a:hover {    color:#000;} /* IE7 Display Fix */   #navmenu ul li {   display: inline;	 } /* IE7 Display Fix */   #navmenu ul li {   display: inline;	 }   div#container {	text-align: left;	width: 860px;	/* increased width to accomodate more space b/n content and sidebar */	margin: 0 auto;	/* had margin spelled as marginn */	}h1 {		text-align: center;	color:#E98A25;	font-family: Arial, Helvetica, sans-serif;	font-size:28px;	font-weight:bold;	line-height:120px;	margin:10px 24px;		}ul li { color: #E98A25;		list-style-type: square;		margin-left: 0px;		padding-left: 0px;} </style></head> <body> <div id="container"> <div id="header">  <h1>National Stuttering Association Austin Chapter</h1></div><!--End of header -->  <div id="navMenu">   <ul class="navul">	<li><a href="#">Home</a></li>	<li><a href="#">About Us</a>	  <ul>		<li><a href="#">Our History</a></li>		<li><a href="#">Our Mission</a></li>		<li><a href="#">Member Bios</a></li>		<li><a href="#">Donate</a></li>	  </ul>	</li>	<li><a href="#">Meetings</a>	  <ul>		<li><a href="#">Adult Chapter</a></li>		<li><a href="#">Kids/Family</a></li>		<li><a href="#">Teen/TWIST</a></li>		<li><a href="#">"Chat"</a></li>		<li><a href="#">Maps</a></li>	  </ul>	</li>	<li><a href="#">Testimonials</a></li>	<li><a href="#">NSA</a>		<ul>		<li><a href="#">A1</a></li>		<li><a href="#">A2</a></li>		<li><a href="#">A3</a></li>	  </ul>	</li>	<li><a href="#">Membership</a></li>  </ul>  <!-- end navul -->   <br class="clearFloat" />  </div> <!-- end navMenu -->   </body></html>

Edited by davej
Link to comment
Share on other sites

I'd basically like for each navigation menu tab to be porportional to the width of the text on the tab, so all the menus stretch across the length of the navigation bar, and the text is easily readible. I achieved this on the the first navigation bar I linked to. But when I converted to an ordered list with drop down menus, I wasn't able to achieve this. I'd also like to be able to adjust the text and other attributes on the drop down menu tabs.

Link to comment
Share on other sites

Well, I am not having much luck with percent, and what I have seems fragile... and I'm just looking at Firefox.

<html><head>    <title>stutt 3</title><style type="text/css">body {color:#333333;font-family: Arial, Helvetica, sans-serif;font-size:12px;font-style:normal;font-weight:normal;margin: 6px 0 0 5px;}a {font-family:Arial,Helvetica,sans-serif;font-size:12px;font-style:normal;text-decoration: underline;font-weight: normal;}div#header {position: relative;height: 100px;}div#navMenu {    width: 860px;    margin:0;    clear: both;}div#navMenu ul {    margin:0;    padding:0;    line-height:30px;}div#navMenu li {    list-style:none;    float:left;    position:relative;    background:#E98A25;}.navul {    width: 860px;}div#navMenu ul li a {    text-align: center;    height: 30px;    min-width: 90px;/* */    overflow-x: visible;    padding-left: 10px;    padding-right: 10px;    display: block;    color: #000;    font-family: Arial,Helvetica,sans-serif;    font-size:13.5px;    font-weight:bold;    text-decoration:none;    color:black;    border: 2.3px solid #F6F6F6;}#navMenu ul ul {    position: absolute;    visibility: hidden;    top:32px;}#navMenu ul li:hover ul {    visibility: visible;    z-index:9999;}/**********************************************//*sets top level hover color*/#navMenu li:hover {   background:#3377FF;   color:#000;}/*sets link items hover color and background*/#navMenu ul li:hover ul li a:hover {    color:#000;    background:#3377FF;}/* Changes text color on hover for main menu hover*/#navMenu a:hover {     color:#000;}/* IE7 Display Fix */ #navmenu ul li {   display: inline;	}/* IE7 Display Fix */ #navmenu ul li {	    display: inline;	} div#container {text-align: left;width: 860px; /* increased width to accomodate more space b/n content and sidebar */margin: 0 auto; /* had margin spelled as marginn */}h1 {	    text-align: center;color:#E98A25;font-family: Arial, Helvetica, sans-serif;font-size:28px;font-weight:bold;line-height:120px;margin:10px 24px;}ul li {	    color: #E98A25;list-style-type: square;margin-left: 0px;padding-left: 0px;}</style></head><body><div id="container"><div id="header">  <h1>National Stuttering Association Austin Chapter</h1></div><!--End of header --><div id="navMenu">  <ul class="navul">    <li><a href="#">Home</a></li>    <li><a href="#">About Us</a>	  <ul>	    <li><a href="#">Our Very Long History</a></li>	    <li><a href="#">Our Mission</a></li>	    <li><a href="#">Member Bios from ######</a></li>	    <li><a href="#">Donate</a></li>	  </ul>    </li>    <li><a href="#">Meetings</a>	  <ul>	    <li><a href="#">Adult Chapter</a></li>	    <li><a href="#">Kids Family</a></li>	    <li><a href="#">Teen TWIST 1234567890 0123</a></li>	    <li><a href="#">Chattooga 1234567890</a></li>	    <li><a href="#">Maps</a></li>	  </ul>    </li>    <li><a href="#">Testimonials</a></li>    <li><a href="#">NSA</a>	    <ul>	    <li><a href="#">A1</a></li>	    <li><a href="#">A2</a></li>	    <li><a href="#">A3</a></li>	  </ul>    </li>    <li class="top"><a href="#">Membership</a></li>  </ul><!-- end navul -->  <br class="clearFloat" /></div> <!-- end navMenu --> </body></html>

Link to comment
Share on other sites

Apply percentages ti li element, remove min-width from anchor links, and i suggest you use fixed width for sublevel menu lists

div#navMenu li {	    list-style:none;	    float:left;	    position:relative;	    background:#E98A25;	    min-width: 16.6%; /*100 divided by number of top level menu items */}div#navMenu li li { /*1st submenu and beyond*/width: 220px;}div#navMenu ul li a {	    text-align:center;	    height: 30px;	    /* min-width: 90px;*/	   	    display:block;	    color:#000;	    font-family:Arial,Helvetica,sans-serif;	    font-size:13.5px;	    font-weight:bold;	    text-decoration:none;	    color:black;	    border: 2.3px solid #F6F6F6;}

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