Jump to content

table drop down menu help

behnazutx

By behnazutx
in CSS

Recommended Posts

behnazutx Newbie

behnazutx

Posted
Posted

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
behnazutx Newbie

behnazutx

Posted
  • Author
Posted

Also, I am going to have to need to change the text attributes (and possibly make other changes) to the drop down menus in order to get all the information to fit. Any pointers? I guess I am not succeeding at applying <span> to an ordered list.

Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted

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>

Link to comment
Share on other sites
behnazutx Newbie

behnazutx

Posted
  • Author
Posted

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
davej Devoted Member

davej

Posted
Posted

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
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...