Style to opening tag only

[kurt.santo]

This is quite a tough one... I hope this is not too advanced of a question.Having my css:

	#nav.dyn li.parent{		background:#d9d9a2 url(background/ranges.gif) repeat;		padding-left:4px;	}	#nav.dyn li.open{		background:#fff;		padding-left:4px;	}

where both classes get allocated through the following script:

sn={	dynamicClass:'dyn',	showClass:'show',	parentClass:'parent',	openClass:'open',	parentIndicator:'<img src="plus.gif" alt="open section" title="open section">',	openIndicator:'<img src="minus.gif" alt="close section" title="close section">',	navID:'nav',	init:function(){		var parentLI,triggerLink;		if(!document.getElementById || !document.createTextNode){return;}		var nav=document.getElementById(sn.navID);		if(!nav){return;}		DOMhelp.cssjs('add',nav,sn.dynamicClass);				var nested=nav.getElementsByTagName('ul');		for(var i=0;i<nested.length;i++){			parentLI=nested[i].parentNode;			triggerLink=document.createElement('a');			triggerLink.setAttribute('href','#')			triggerLink.innerHTML=sn.parentIndicator;			parentLI.insertBefore(triggerLink,parentLI.firstChild);			DOMhelp.addEvent(triggerLink,'click',sn.changeSection,false);			DOMhelp.cssjs('add',parentLI,sn.parentClass);					triggerLink.onclick=DOMhelp.safariClickFix;			if(parentLI.getElementsByTagName('strong').length>0){				DOMhelp.cssjs('add',parentLI,sn.openClass);						DOMhelp.cssjs('add',nested[i],sn.showClass);						parentLI.getElementsByTagName('a')[0].innerHTML=sn.openIndicator			}		}	},	changeSection:function(e){		var t=DOMhelp.getTarget(e);		while(t.nodeName.toLowerCase()!='a'){			t=t.parentNode;		}		var firstList=t.parentNode.getElementsByTagName('ul')[0];		if(DOMhelp.cssjs('check',firstList,sn.showClass)){			DOMhelp.cssjs('remove',firstList,sn.showClass)			DOMhelp.cssjs('swap',t.parentNode,sn.openClass,sn.parentClass);			t.innerHTML=sn.parentIndicator;		} else {			DOMhelp.cssjs('add',firstList,sn.showClass)			DOMhelp.cssjs('swap',t.parentNode,sn.openClass,sn.parentClass);			t.innerHTML=sn.openIndicator;		}		DOMhelp.cancelClick(e);	}}DOMhelp.addEvent(window,'load',sn.init,false);

Across all levels I would like to have all li element in the nav bar to have the same background colour. I have the problem that any colour applied to the "open" class would highlight relevant li item including sub-list. This is not what I want. I just want to apply the bg colour to the opening of the parent li item and not the sub-section. This is really important as I want all li items to look like the same buttons in the end (obviously with different texts). I know it sounds crazy, but there must be a way to achieve this...To all super-heros of JavaScript and CSS, please hear me. I promise to be a good boy and always eat my dinner;-)Kurt

[justsomeguy]

Put something like a span or a div in the li to include whatever text you want to have in it, and style the span or div instead of the li.

[kurt.santo]

Put something like a span or a div in the li to include whatever text you want to have in it, and style the span or div instead of the li.

Had a go, but still not working properly (although definitely going in right direction, cheers:-)): Tried the span, but it does not stretch any further as the text inside (and this although I specified it's width). Then placed a div around the <a> and as this not worked inside. The bg colour with right width shows, but the block with the text wraps underneath the arrow indicating open or close (specified in the JavaScript file as

sn={	dynamicClass:'dyn',	showClass:'show',	parentClass:'parent',	openClass:'open',	parentIndicator:'<img src="plus.gif" alt="open section" title="open section">',	openIndicator:'<img src="minus.gif" alt="close section" title="close section">',	navID:'nav',

).How can I avoid this?Kurt

[justsomeguy]

Try a div instead of a span, a div is a block-level element and will stretch the entire width.

[kurt.santo]

Try a div instead of a span, a div is a block-level element and will stretch the entire width.

Do you know by any chance why the element wraps underneath the symbol to open/close section? Tried padding, margin, different widths, but result is always that text (DIV) shows underneath symbol:-(Kurt

[aspnetguy]

a div is a block level element which means it will break to the next line and push elements below it to the next line (unless it is floated).

[kurt.santo]

a div is a block level element which means it will break to the next line and push elements below it to the next line (unless it is floated).

Tried to float it, but makes whole thing worse (and it still wrapped underneath the symbol)...Kurt

[justsomeguy]

Do you have an example online? It's hard to guess.

[kurt.santo]

Do you have an example online? It's hard to guess.

We finally bought web space today, so you can find the given files under http://www.jalp.co.uk/test/navBarV1.htm. For now the div is applied to the Boston range only (as not working properly yet)...Kurt

[justsomeguy]

Other then the word Boston not lining up with the icon, what do you want to change about it?

[kurt.santo]

Other then the word Boston not lining up with the icon, what do you want to change about it?

Everything needs to sit in same dimension rectangle rectangle ("View By Range", "View By Room", all range names, all room names when they are open). Level one and two have the arrow markers, level three (as there is nothing to open) does not have any, but still lines up with the text in level one and two. View by room and view by range have a different bg colour (and only if possible, the current link has same colour reference as view by room and view by range to make it apparent that it is the selected item). Does this make sense?Kurt

[kurt.santo]

Everything needs to sit in same dimension rectangle rectangle ("View By Range", "View By Room", all range names, all room names when they are open). Level one and two have the arrow markers, level three (as there is nothing to open) does not have any, but still lines up with the text in level one and two. View by room and view by range have a different bg colour (and only if possible, the current link has same colour reference as view by room and view by range to make it apparent that it is the selected item). Does this make sense?Kurt

I tried so many things right now, but cannot make it work. It seems not to be possible... If you think the same let me know. Or if any one has the answer I would be more than grateful.Kurt

[Jesdisciple]

I'm truly confused, coming in just now. I've just applied these changes (indentation and taking out your DIV) and the only thing wrong with it that I can see is that lower items are indented. This is the nature of a list (UL/OL); if it's the problem, use a different type of element.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html dir="ltr" lang="en">	<head>		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 		<title>Example: Dynamic Site Navigation</title>		<style type="text/css">			@import 'navBarV1.css';		</style>		<script type="text/javascript" src="DOMhelp.js"></script>		<script type="text/javascript" src="navBar.js"></script>	</head>	<body>		<ul id="nav">			<li><a href="#">View By Range</a>				<ul>					<li><strong>Shanghai</strong>						<ul>							<li><a href="#">Shanghai 1</a></li>							<li><a href="#">Shanghai 2</a></li>						</ul>					</li>					<li><a href="#">Boston</a>						<ul>							<li><a href="#">Boston 1</a></li>							<li><a href="#">Boston 2</a></li>						</ul>					</li>							<li><a href="#">Brighton</a>						<ul>							<li><a href="#">Brighton 1</a></li>							<li><a href="#">Brighton 2</a></li>						</ul>					</li>					<li><a href="#">Toulouse</a>						<ul>							<li><a href="#">Toulouse 1</a></li>							<li><a href="#">Toulouse 2</a></li>						</ul>					</li>								<li><a href="#">Beijing</a>						<ul>							<li><a href="#">Beijing 1</a></li>							<li><a href="#">Beijing 2</a></li>						</ul>					</li>				</ul>			</li>			<li><a href="#">View By Room</a>				<ul>					<li><a href="#">Living Room</a>						<ul>							<li><a href="#">Living Room 1</a></li>							<li><a href="#">Living Room 2</a></li>						</ul>					</li>					<li><a href="#">Dining Room</a>						<ul>							<li><a href="#">Dining Room 1</a></li>							<li><a href="#">Dining Room 2</a></li>						</ul>					</li>						<li><a href="#">Bedroom</a>						<ul>							<li><a href="#">Bedroom 1</a></li>							<li><a href="#">Bedroom 2</a></li>						</ul>					</li>								<li><a href="#">Hall</a>								  <ul>							<li><a href="#">Hall 1</a></li>							<li><a href="#">Hall 2</a></li>						</ul>					</li>					<li><a href="#">Office</a>						<ul>							<li><a href="#">Office 1</a></li>							<li><a href="#">Office 2</a></li>						</ul>					</li>				</ul>			</li>		</ul>	</body></html>

Somehow, I sense that the lists are not your problem (seeing that this conversation is on a completely different course), but I'm (densely?) not grasping your problem.EDITs:I'm starting to get it, maybe all I need is a little time... But clarification would still be nice.I can't find "../nav/background/ranges.gif", mentioned in the CSS. I tried both http://www.jalp.co.uk/nav/background/ranges.gif and http://www.jalp.co.uk/test/nav/background/ranges.gif.I'm going to comment on your original post, maybe any misconceptions of mine can be ironed out.

Across all levels I would like to have all li element in the nav bar to have the same background colour.

So every LI will have the exact same background colour? I think they do...

I have the problem that any colour applied to the "open" class would highlight relevant li item including sub-list.

What's wrong with this, if they should all be the same colour? Also, the LIs that have children have a white background; this sounds like a contradiction of your last sentence.

This is not what I want. I just want to apply the bg colour to the opening of the parent li item and not the sub-section. This is really important as I want all li items to look like the same buttons in the end (obviously with different texts). I know it sounds crazy, but there must be a way to achieve this...

I'm getting that you want the children to not have any space between them, or at least have any space filled in?If my last conception of your goal was right, how about tables? Include each table in the LI of its parent UL, and give the table a background color. In the following source, View by Range uses tables while View by Room uses the original layout. I think if the open LIs get a white background to cover the brown, that'll be what you want.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html dir="ltr" lang="en">	<head>		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 		<title>Example: Dynamic Site Navigation</title>		<style type="text/css">			@import 'navBarV1.css';		</style>		<script type="text/javascript" src="DOMhelp.js"></script>		<script type="text/javascript" src="navBar.js"></script>	</head>	<body>		<ul id="nav">			<li><a href="#">View By Range</a>				<ul>					<li>						<table>							<tr>								<td>									<strong>Shanghai</strong>									<ul>										<li>											<table>												<tr>													<td>														<a href="#">Shanghai 1</a>													</td>												</tr>												<tr>													<td>														<a href="#">Shanghai 2</a>													</td>												</tr>											</table>										</li>									</ul>								</td>							</tr>							<tr>								<td>									<a href="#">Boston</a>									<ul>										<li>											<table>												<tr>													<td>														<a href="#">Boston 1</a>													</td>												</tr>												<tr>													<td>														<a href="#">Boston 2</a>													</td>												</tr>											</table>										</li>									</ul>								</td>							</tr>							<tr>								<td>									<a href="#">Brighton</a>									<ul>										<li>											<table>												<tr>													<td>														<a href="#">Brighton 1</a>													</td>												</tr>												<tr>													<td>														<a href="#">Brighton 2</a>													</td>												</tr>											</table>										</li>									</ul>								</td>							</tr>							<tr>								<td>									<a href="#">Toulouse</a>									<ul>										<li>											<table>												<tr>													<td>														<a href="#">Toulouse 1</a>													</td>												</tr>												<tr>													<td>														<a href="#">Toulouse 2</a>													</td>												</tr>											</table>										</li>									</ul>								</td>							</tr>							<tr>								<td>									<a href="#">Beijing</a>									<ul>										<li>											<table>												<tr>													<td>														<a href="#">Beijing 1</a>													</td>												</tr>												<tr>													<td>														<a href="#">Beijing 2</a>													</td>												</tr>											</table>										</li>									</ul>								</td>							</tr>						</table>					</li>				</ul>			</li>			<li><a href="#">View By Room</a>				<ul>					<li><a href="#">Living Room</a>						<ul>							<li><a href="#">Living Room 1</a></li>							<li><a href="#">Living Room 2</a></li>						</ul>					</li>					<li><a href="#">Dining Room</a>						<ul>							<li><a href="#">Dining Room 1</a></li>							<li><a href="#">Dining Room 2</a></li>						</ul>					</li>		        		<li><a href="#">Bedroom</a>						<ul>							<li><a href="#">Bedroom 1</a></li>							<li><a href="#">Bedroom 2</a></li>						</ul>					</li>					<li><a href="#">Hall</a>						<ul>							<li><a href="#">Hall 1</a></li>							<li><a href="#">Hall 2</a></li>						</ul>					</li>					<li><a href="#">Office</a>						<ul>							<li><a href="#">Office 1</a></li>							<li><a href="#">Office 2</a></li>						</ul>					</li>				</ul>			</li>		</ul>	</body></html>

[Jesdisciple]

I scrapped that last attempt and started over with DynamicDrive's Simple Tree Menu. I have the modified files for that below.simpletreemenu.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html dir="ltr" lang="en">	<head>		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 		<title>Example: Dynamic Site Navigation</title>		<style type="text/css">			@import 'simpletree.css';		</style>		<script type="text/javascript" src="simpletreemenu.js"></script>	</head>	<body><h4>Simple Tree Menu #1 (persist enabled):</h4>		<a href="java script:ddtreemenu.flatten('treemenu1', 'expand')">Expand All</a> | <a href="java script:ddtreemenu.flatten('treemenu1', 'contact')">Contract All</a>		<ul id="treemenu1" class="treeview">			<li>Item 1</li>			<li>Item 2</li>			<li><div>Folder 1</div>				<ul>					<li>Sub Item 1.1</li>					<li>Sub Item 1.2</li>				</ul>			</li>			<li>Item 3</li>			<li><div>Folder 2</div>				<ul>					<li>Sub Item 2.1</li>					<li><div>Folder 2.1</div>						<ul>							<li>Sub Item 2.1.1</li>							<li>Sub Item 2.1.2</li>						</ul>					</li>				</ul>			</li>			<li>Item 4</li>		</ul><br><br><br><br><br><br><br><br><br><br><br><br>				<h4>Simple Tree Menu #2 (Folder 1.1 open by default):</h4>				<a href="java script:ddtreemenu.flatten('treemenu2', 'expand')">Expand All</a> | <a href="java script:ddtreemenu.flatten('treemenu2', 'contact')">Contact All</a>				<ul id="treemenu2" class="treeview">			<li>Item 1</li>			<li><div>Folder 1</div>				<ul>					<li>Sub Item 1.1</li>					<li><div>Folder 1.1</div>						<ul rel="open">							<li>Sub Item 1.1.1</li>							<li>Sub Item 1.1.2</li>							<li><div>Folder 1.1.1</div>								<ul>									<li>Sub item 1.1.1.1</li>									<li>Sub item 1.1.1.2</li>									<li>Sub item 1.1.1.3</li>									<li>Sub item 1.1.1.4</li>								</ul>							</li>						</ul>					</li>				</ul>			</li>			<li>Item 2</li>		</ul>				<script type="text/javascript">				//ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))				ddtreemenu.createTree("treemenu1", true)		ddtreemenu.createTree("treemenu2", false)				</script>	</body></html>

simpletreemenu.js:

var persisteduls = new Object()var ddtreemenu = new Object()ddtreemenu.closefolder = 'plus.gif' //set image path to "closed" folder imageddtreemenu.openfolder = 'minus.gif' //set image path to "open" folder image//////////No need to edit beyond here///////////////////////////ddtreemenu.createTree = function(treeid, enablepersist, persistdays){	var ultags = document.getElementById(treeid).getElementsByTagName('ul');	if (typeof persisteduls[treeid] == 'undefined'){		persisteduls[treeid] = (enablepersist == true && ddtreemenu.getCookie(treeid) != '') ? ddtreemenu.getCookie(treeid).split(',') : '';	}	for (var i = 0; i < ultags.length; i++){		ddtreemenu.buildSubTree(treeid, ultags[i], i);	}	if (enablepersist == true){ //if enable persist feature		var durationdays = (typeof persistdays == 'undefined') ? 1 : parseInt(persistdays);		ddtreemenu.dotask(window, function(){ddtreemenu.rememberstate(treeid, durationdays)}, 'unload'); //save opened UL indexes on body unload	}}ddtreemenu.buildSubTree = function(treeid, ulelement, index){	ulelement.parentNode.className = 'submenu';	if (typeof persisteduls[treeid] == 'object'){ //if cookie exists (persisteduls[treeid] is an array versus "" string)		if (ddtreemenu.searcharray(persisteduls[treeid], index)){			ulelement.setAttribute('rel', 'open');			ulelement.parentNode.firstChild.style.backgroundColor = '#ffffff';			ulelement.style.display = 'block';			ulelement.parentNode.style.backgroundImage = 'url(' + ddtreemenu.openfolder + ')';		}else{			ulelement.setAttribute('rel', 'closed');		} //end cookie persist code	}else if (ulelement.getAttribute('rel') == null || ulelement.getAttribute('rel') == false){ //if no cookie and UL has NO rel attribute explicted added by user		ulelement.setAttribute('rel', 'closed');	}else if (ulelement.getAttribute('rel') == 'open'){ //else if no cookie and this UL has an explicit rel value of "open"		ddtreemenu.expandSubTree(treeid, ulelement); //expand this UL plus all parent ULs (so the most inner UL is revealed!)	}	ulelement.parentNode.onclick = function(e){		var submenu = this.getElementsByTagName('ul')[0];		if (submenu.getAttribute('rel') == 'closed'){			submenu.style.display = 'block';			submenu.setAttribute('rel', 'open');			ulelement.parentNode.firstChild.style.backgroundColor = '#ffffff';			ulelement.parentNode.style.backgroundImage = 'url(' + ddtreemenu.openfolder + ')';		}else if (submenu.getAttribute('rel') == 'open'){			submenu.style.display = 'none';			submenu.setAttribute('rel', 'closed');			ulelement.parentNode.firstChild.style.backgroundColor = '#d9d9a2';			ulelement.parentNode.style.backgroundImage = 'url(' + ddtreemenu.closefolder + ')';		}		ddtreemenu.preventpropagate(e);	}	ulelement.onclick = function(e){		ddtreemenu.preventpropagate(e);	}}ddtreemenu.expandSubTree = function(treeid, ulelement){ //expand a UL element and any of its parent ULs	var rootnode = document.getElementById(treeid);	var currentnode = ulelement;	currentnode.style.display = 'block';	currentnode.parentNode.style.backgroundImage = 'url(' + ddtreemenu.openfolder + ')';	while (currentnode.tagName != 'UL'){ //if parent node is a UL, expand it too		currentnode.style.display = 'block';		currentnode.setAttribute('rel', 'open'); //indicate it's open		currentnode.parentNode.style.backgroundImage = 'url(' + ddtreemenu.openfolder + ')';	}	ulelement.parentNode.firstChild.style.backgroundColor = '#ffffff';}ddtreemenu.flatten = function(treeid, action){ //expand or contract all UL elements	var ultags = document.getElementById(treeid).getElementsByTagName('ul');	for (var i = 0; i < ultags.length; i++){		ultags[i].style.display = (action == 'expand')? 'block' : 'none';		var relvalue = (action == 'expand')? 'open' : 'closed';		ultags[i].setAttribute('rel', relvalue);		ultags[i].parentNode.style.backgroundImage = (action == 'expand')? 'url(' + ddtreemenu.openfolder + ')' : 'url(' + ddtreemenu.closefolder + ')';	}}ddtreemenu.rememberstate = function(treeid, durationdays){ //store index of opened ULs relative to other ULs in Tree into cookie	var ultags = document.getElementById(treeid).getElementsByTagName('ul')	var openuls = new Array()	for (var i = 0; i < ultags.length; i++){		if (ultags[i].getAttribute('rel') == 'open'){			openuls[openuls.length] = i //save the index of the opened UL (relative to the entire list of ULs) as an array element		}	}	if (openuls.length == 0){ //if there are no opened ULs to save/persist		openuls[0] = 'none open' //set array value to string to simply indicate all ULs should persist with state being closed	}	ddtreemenu.setCookie(treeid, openuls.join(','), durationdays) //populate cookie with value treeid=1,2,3 etc (where 1,2... are the indexes of the opened ULs)}////A few utility functions below//////////////////////ddtreemenu.getCookie = function(Name){ //get cookie value	var re = new RegExp(Name + '=[^;]+', 'i'); //construct RE to search for target name/value pair	if (document.cookie.match(re)){ //if cookie found		return document.cookie.match(re)[0].split('=')[1]; //return its value	}	return '';}ddtreemenu.setCookie = function(name, value, days){ //set cookei value	var expireDate = new Date();	//set "expstring" to either future or past date, to set or delete cookie, respectively	var expstring = expireDate.setDate(expireDate.getDate() + parseInt(days));	document.cookie = name + '=' + value + '; expires=' + expireDate.toGMTString() + '; path=/';}ddtreemenu.searcharray=function(thearray, value){ //searches an array for the entered value. If found, delete value from array	var isfound = false;	for (var i = 0; i < thearray.length; i++){		if (thearray[i] == value){			isfound = true;			thearray.shift(); //delete this element from array for efficiency sake			break;		}	}	return isfound;}ddtreemenu.preventpropagate = function(e){ //prevent action from bubbling upwards	if (typeof e != 'undefined'){		e.stopPropagation();	}else{		event.cancelBubble = true	}}ddtreemenu.dotask = function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)	var tasktype = (window.addEventListener) ? tasktype : 'on' + tasktype;	if (target.addEventListener){		target.addEventListener(tasktype, functionref, false)	}else if (target.attachEvent){		target.attachEvent(tasktype, functionref)	}}

simpletree.css:

.treeview{	background: #d9d9a2;	font-size:11px;	float:left;	width:120px;	padding:0px;	margin:0px;}.treeview ul{ /*CSS for Simple Tree Menu*/	margin: 0;	padding: 0;}.treeview li{ /*Style for LI elements in general (excludes an LI that contains sub lists)*/	background: #d9d9a2;	list-style-type: none;	padding-left: 22px;	margin-bottom: 3px;}.treeview li.submenu{ /* Style for LI that contains sub lists (other ULs). */	background: #d9d9a2 url(plus.gif) no-repeat left 1px;	cursor: hand !important;	cursor: pointer !important;}.treeview li.submenu ul{ /*Style for ULs that are children of LIs (submenu) */	display: none; /*Hide them by default. Don't delete. */}.treeview .submenu ul li{ /*Style for LIs of ULs that are children of LIs (submenu) */	cursor: default;}

Is this what you're wanting?

[kurt.santo]

I get you point with the indentation. It makes total sense what you said. And this is not my main issue anyway...If you have a look under http://www.jalp.co.uk/test/navLayout.htm. This is what the structure approximately should look like (obviously a bit long as the products are not hidden underneath the relevant ranges) To make it more obvious I put a hyphen in front of text, which stands for a range (as oposed to a single product item). As you can see there are three levels. Each li element (including the open class) should look like a button. Currently I am using a one pixel by one pixel graphic to create the bg colour (I changed the path and uploaded the relevant pics for http://www.jalp.co.uk/test/navBarV1.htm). I tried already to use a different background image with exact size for the open class, which is aligned to "top left" to create the "button-look". Unfortunately it did not work as I hoped:-( I will post to the CSS section for that...I tried your example, but it seems not too work. Was quite eager to adapt the code I am using as it works with any browser...Kurt