CSS structure

[CNT]

Google: what are the anchor structure order attributes elements selectors in menu cssI endup typing longer google search and still not finding answers. What I want to learn is what and how (and why) things work within menu parts that I have been working on (and still not accomplish any smooth nav-menus). Example:#navbar li:hover li aWhat is this? I understand the "#" is the ID, "navbar" is the ID name. What is the next thing called... placeholder, element, anchor, what? The colon is called what?#navbar li li li li:hover ul ul ul ulWill this work? Why not (if doesn't). Can use comma?#navbar aWhat is "a"? Anchor?I have looked in books and internet, couldn't find what it means rather just how to do it. Forgive me, but not interested in reading the looooong white paper, just want the explanation of the statistics or the placement of the id/class identifier. I have been doing this all day and night straight for few days, so I might have overlooked something.The question isn't should I use ID or CLASS for menu navigation. It seems doesn't matter for menu since menu are used once in each page, but think should use class since could repeat elements within menu. But this is another OT issue. I need to learn the menu stuff first.Chuck

[jeffman]

When selectors are listed together without commas, > or + symbols, they indicate ancestor-descendant relationships. Work backward to see what element will be styled:#navbar li:hover li aThis refers to an anchor that has an ancestor that is a list itemthat has an ancestor that is a list item with the mouse hovering over itthat has an ancestor called #navbarThe a element is the one being styled by the ruleset that follows.Note that when I say ancestor, I do not necessarily mean a direct parent. Nothing in the selectors above indicates how deeply nested one element is inside another. The two list items, for instance, could have any number of levels between them, and in fact they must obviously have at least a ul element separating them. But there could be more, also. Same with the other elements.

[CNT]

Work backward to see what element will be styled:#navbar li:hover li aThis refers to an anchor that has an ancestor that is a list itemthat has an ancestor that is a list item with the mouse hovering over itthat has an ancestor called #navbar

Try this for size:ul.Menu a, ul.Menu li.dis a:hover, ul.Menu li.sep a:hoverorul.Menu a:hover img.def,ul.Menu a:hover ul img.over,ul.Menu a:hover a:hover ul img.over,ul.Menu a:hover a:hover img.def,ul.Menu a:hover a:hover a:hover img.def{display:none}Yes, this was copied from someone's menu, I am just trying to be able to read it. It's not the "hover" I am inquiring about, it the elements, what can be in there, when to use ul or li, etc... Even if there should be in order, such example below (this is from my css that I create for someone, I still don't even understand what I did!) :ul#navigation{}ul#navigation a{}ul#navigation a:hover{}ul#navigation li{}

[ShadowMage]

This should help.

[thescientist]

Try this for size:ul.Menu a, ul.Menu li.dis a:hover, ul.Menu li.sep a:hoverthis is three different elements getting styled1) an anchor who's parent element is an order list with class of Menu2) an anchor with the hover pseudo class who's parent is a list item with class dis, who's parent element is an unordered list with the class of Menu3) a anchor with the hover pseudo class who's parent is a list item with the class spe, who's parent is an unordered list with class of Menuorul.Menu a:hover img.def, ul.Menu a:hover ul img.over, ul.Menu a:hover a:hover ul img.over, ul.Menu a:hover a:hover img.def, ul.Menu a:hover a:hover a:hover img.def{display:none}again, look at the commas and the same pattern of breaking it down applies....1) an image with class def who's parent is an anchor with the hover pseudo class who's parent is an unordered list called Menu2) an image with class over who's parent is an unordered list who's parent is anchor being hovered over who's parent is an unordered list with the id of Menu3) ...4) ...5) ...Yes, this was copied from someone's menu, I am just trying to be able to read it. It's not the "hover" I am inquiring about, it the elements, what can be in there, when to use ul or li, etc... Even if there should be in order, such example below (this is from my css that I create for someone, I still don't even understand what I did!) :ul#navigation{} styles an unordered list with an id of navigationul#navigation a{} specifies the style for all anchor elements within an unordered list who's id is navigationul#navigation a:hover{} specifies the style for hovering over all anchor elements within an unordered list who's id is navigationul#navigation li{} specifies the style for all list item elements within an unordered list who's id is navigation

[ShadowMage]

ul#navigation{}styles an unordered list with an id of menu

:)You mean with an id of navigation

[thescientist]

:)You mean with an id of navigation

yeah, i just caught that and changed them

[CNT]

Wished there was a chalkboard and someone pointing/drawing things out...

[thescientist]

Wished there was a chalkboard and someone pointing/drawing things out...

weekday at 5pmhttp://www.foxnews.com/on-air/glenn-beck/index.html\What are you confused about? Do you not understand the explanations of your examples?

[jeffman]

What you need to be doing is putting up some HTML so we can see how the selectors match up with it. No one can look at a string of selectors and know if they are correct or even what they're supposed to do without also looking at the HTML. In general, it looks like a main menu with a submenu. I can't offer more specific advice, though.About this:#navbar li li li li:hover ul ul ul ulThat implies a VERY complicated menu structure. For each li element, a ul parent element is implied. So this describes the last ul element in a structure of 8 nested lists. In theory, if the HTML matches, a string of selectors like that could point to a real object. (And maybe that's all you're asking.) It's hard to imagine anyone wanting such a nightmare on their page.

[ShadowMage]

That implies a VERY complicated menu structure. For each li element, a ul parent element is implied. So this describes the last ul element in a structure of 8 nested lists. In theory, if the HTML matches, a string of selectors like that could point to a real object. (And maybe that's all you're asking.) It's hard to imagine anyone wanting such a nightmare on their page.

I had to see what kind of monstrosity this would be:

<ul id='navbar'>	<li>Not this one<ul>		<li>Not here either<ul>			<li>Not yet<ul>				<li>This one!<ul>					<li>A list<ul>						<li>Another list<ul>							<li>Look in here!<ul>								<li>This is the target</li>								<li>This is the target</li>							</ul></li>						</ul></li>					</ul></li>				</ul></li>			</ul></li>		</ul></li>	</ul></li></ul>

Yikes!

[CNT]

I think I might need to also understand the HTML side of menu. The "ul" is unordered list (technically, it's in "ordered" without numbers, correct?).Concerning navigation menu:First ul would be the main menu. (correct?)Second and so on ul would be the first dropdown, then multiple dropdown thereafter... (correct?)What I don't understand is my Visual Studio (with XHTML 1.0 Validation listed) tells me that there's "error" in below (marked with double *), saying (first one) that there's no closing tag (second one) can not be nested within li, is there something wrong with this code below?

<div><ul id="navbar"><li><a href="index.htm">Home</a></li><li><a href="#">Something</a></li><li><a href="#">Woodshop</a></li>* <li> * <a href="#">History</a><ul>		<li><a href="#">The beginning...</a></li>		<li><a href="#">The present...</a></li></ul>* <li> * <a href="#">Contact Me</a></li></ul></div>

Please tell me what the CSS code would be for the following (using the above HTML code) :(1) I want to make "Something" red background. Would it be: #navbar ul li li {background-color: red;} ?(2) I want to make "The beginning..." green background. Would it be: #navbar ul ul li (background-color: green;} ?OT: Also, I should keep using "div"?

[CNT]

#navbar li li li li:hover ul ul ul ul

<ul id='navbar'>	<li>Not this one<ul>		<li>Not here either<ul>			<li>Not yet<ul>				<li>This one!<ul>					<li>A list<ul>						<li>Another list<ul>							<li>Look in here!<ul>								<li>This is the target</li>								<li>This is the target</li>							</ul></li>						</ul></li>					</ul></li>				</ul></li>			</ul></li>		</ul></li>	</ul></li></ul>

Still don't get it... I just made that up, yet it's a valid CSS structure!?!?

[ShadowMage]

I think I might need to also understand the HTML side of menu. The "ul" is unordered list (technically, it's in "ordered" without numbers, correct?).Concerning navigation menu:First ul would be the main menu. (correct?)Second and so on ul would be the first dropdown, then multiple dropdown thereafter... (correct?)

Yes

What I don't understand is my Visual Studio (with XHTML 1.0 Validation listed) tells me that there's "error" in below (marked with double *), saying (first one) that there's no closing tag (second one) can not be nested within li, is there something wrong with this code below?...code...

You are indeed missing a closing tag in this bit:

* <li> * <a href="#">History</a><ul>		<li><a href="#">The beginning...</a></li>		<li><a href="#">The present...</a></li></ul>

Other than that everything looks fine.

Please tell me what the CSS code would be for the following (using the above HTML code) :(1) I want to make "Something" red background. Would it be: #navbar ul li li {background-color: red;} ?(2) I want to make "The beginning..." green background. Would it be: #navbar ul ul li (background-color: green;} ?OT: Also, I should keep using "div"?

1. Not quite. That would target an li descendant of any li descendant of any ul descendant of an element with id of navbar. You want to change the anchor in the second li of the main part of the menu. To target that one specifically you need to give it an id. But if you wanted to target all anchors within the main menu you could do something like:#navbar li awhich would target any a descendant of any li descendant of an element with id of navbar.2. Same story as above. If you want to target that specific element you need an id. To change all anchors of the first nested list you would need to target any a descendant of any li descendant of any ul descendant of any li descendant of an element with an id of navbar or #navbar li ul li aSince the presence of an li implies the presence of a parent ul that can be shortened to #navbar li li aEDIT: Actually, now that I think about it you wouldn't need to have an id on those elements if they are the first in the list. You could use the :first-child psuedo-element to target them in that case. Ie,#navbar li:first-child { background-color: red; }would change your Home link to have a red background.When CSS3 becomes more standard you'll have the ability to target the nth child (ie, the 3rd, 4th or whatever number)

[CNT]

You are indeed missing a closing tag in this bit:

<li><a href="#">History</a><ul>		<li><a href="#">The beginning...</a></li>		<li><a href="#">The present...</a></li></ul>

What's the correct fix? If I did this: <li><a href="#">History</a></li><ul> it won't work.

[ShadowMage]

What's the correct fix? If I did this: <li><a href="#">History</a></li><ul> it won't work.

<li><a href="#">History</a><ul>		<li><a href="#">The beginning...</a></li>		<li><a href="#">The present...</a></li></ul></li>

All of that can be nested inside of an li. It isn't invalid.

[CNT]

What does this do?#navbar ul#navbar liFirst, the basic! Then I would need to understand what the nexts are:#navbar ul a#navbar li aAnd even more confusing yet:#navbar ul li#navbar li ulI did played with this and sometimes the results remains the same. I am still trying to read this in backwards. Then the next still not getting in my head:#navbar li:hover ul#navbar li:hover li#navbar li li a:hover#navbar li:hover li aNotice the a:hover and li:hover, even the "a" stands alone. But, again, first the basic, I don't want to jump into hover yet without understand what does "a" do in CSS.

[jeffman]

ul, li, and a are all element selectors. a refers to an <a> element.#navbar ul refers to any <ul> element inside #navbar#navbar li refers to any <li> element inside #navbar#navbar ul a refers to any <a> element inside any <li> element inside #navbar#navbar li a refers to any <a> element inside any <ul> element inside #navbarIf the only kind of list elements inside #navbar are <ul> elements, the last two will normally refer to the same elements, since an <li> element can only exist inside a list element.Maybe this will help. I'll show you a basic HTML structure, and in the comment tags I'll indicate which combination of CSS selectors will point to individual elements. Notice that deeply nested items can be selected by more than one combination:

<div id="navbar"> <!-- selected by #navbar -->   <ul> <!-- selected by #navbar ul -->      <li> <!-- selected by #navbar ul li --> <!-- OR by #navbar li -->         <a href="some.html">Hello!</a> <!-- selected by #navbar ul li a--> <!-- OR by #navbar li a -->  <!-- OR by #navbar ul a --> <!-- OR by #navbar a -->      </li>   </ul></div>

[CNT]

<div id="navbar"> <!-- selected by #navbar -->   <ul> <!-- selected by #navbar ul -->      <li> <!-- selected by #navbar ul li --> <!-- OR by #navbar li -->         <a href="some.html">Hello!</a> <!-- selected by #navbar ul li a--> <!-- OR by #navbar li a -->  <!-- OR by #navbar ul a --> <!-- OR by #navbar a -->      </li>   </ul></div>

YES!, I need MORE of that! MORE!I notice you use <div id="navbar"> instead of <ul id="navbar">, please explain...But, I need MORE of that chalkboard, not what Glenn Beck has to say!Chuck

[thescientist]

often times it is preferable to section off certain parts of website and have them in a container element, usually a DIV. That way you could put your navbar code in a div and center it, or pad it, or do whatever. It can be helpful to have elements push against other elements in that manner. It is not a huge deal, but it helps give the page more structure and semantic divisions of intent and purpose, even if it's just a basic wrapper.

[jeffman]

I notice you use <div id="navbar"> instead of <ul id="navbar">, please explain...

No significance. I didn't feel like scrolling through the entire thread, so I made a guess. In any case, the structure I posted was meant to illustrate the way HTML and CSS work together. It was not meant to suggest the way I think your document should be structured. We've only seen parts of your document, so any advice of that magnitude would be reckless.

[CNT]

HTML:

<div><ul id="navbar"><li><a href="index.htm">Home</a></li><li><a href="#">Something</a></li><li><a href="#">Woodshop</a></li><li><a href="#">History</a><ul>	<li><a href="#">The beginning</a><ul>		<li><a href="#">The VERY beginning</a></li>		<li><a href="#">The early days</a></li></ul></li>	<li><a href="#">The present</a></li></ul></li><li><a href="#">Contact me</a></li></ul></div>

CSS:

/* navigation menu section */#navbar{	margin: 0;	border: 0;	padding: 0;}#navbar li  /* this displays the main menu to horizontal */{	list-style-type: none;	float: left;}#navbar li li  /* this displays all the submenus to vertical */{	float: none;}#navbar li a{	display: block;	text-decoration: none;	background: #000000;	color: #ffffff;	padding: .2em .5em;	width: auto;	font-size: 1.5em;}#navbar li ul  /* this hides the 1st submenu */{	display: none;}#navbar li li ul  /* this hides the 2nd submenu */{	display: none;}#navbar li:hover ul  /* this displays the 1st submenu when mouse over the main menu */{	display: block;	position: absolute;}#Navbar li:hover ul li li  /* this displays the 2nd submenu when mouse over the 1st submenu */{	display: block;	width: auto;}#navbar a:hover  /* this changes the menu to yellow when mouse over the menu */{	background-color: #ffff00;	color: #000000;}

The submenus needs adjusting.1) Need to hide the 2nd submenu, while the 1st submenu displaying and mouse over remains at the main menu.2) Need to move the 1st submenu little more closer to the left, but would like to dropdown right under "H" (like a slight index). Would that be padding or block?3) Need to keep the main menu highlight yellow ("History") while mouse over the submenu(s). The same for "The beginning" while mouse over the "The VERY beginning" or "The early days".4) Need to display the 2nd submenu next to the 1st submenu, not overlap.5) Need to display the background-color red in the "The VERY beginning", only that block. Yet, upon mouse over, it displays yellow (as normal).6) Lastly, can CSS determine the width of the widest width of a submenu, then block all width of that submenu the same? OR I would need to set the px/em ?? I am concern about differnet screen resolutions and a set px may cause undesired wordwrap. Some of the clients still use 800x600.Once again... NO JAVA Thanks.ChuckOpps... forgot the link... http://members.toast.net/cnt

[thescientist]

Once again... NO JAVA

Java and javascript are two completely different languages. just an FYI.

[CNT]

Java and javascript are two completely different languages. just an FYI.

They both are coffee to me.

[thescientist]

They both are coffee to me.

yeah, but they're not to developers, which is who you are primarily dealing with on these forums, or in any technology related context. It's certainly not a moot point by any standard. Not saying you have to know how to program in both, but you certainly wouldn't want to confuse the two.