Jump to content

explaination for use of # sign


niche

Recommended Posts

I'm studying this script from cssplay. I can't decide for a fact what #menu means in this context. Based on http://www.w3schools.com/CSS/css_id_class.asp I'm lead to thing that # sign labels menu as an "id". Am I right? If not, what the right explanation please?

<style type="text/css">#menu {height:132px; width:132px; position:relative;}#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; padding:1px 1px 0 1px; background:#fff;}#menu li {margin:0; padding:0; list-style:none;}#menu li {display:inline;}#menu ul ul {position:absolute; left:-9999px;}#menu ul#toplevel {position:absolute; left:0; top:0;}#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; line-height:22px; text-decoration:none;padding:0 20px 0 10px;} #menu li a.fly {background: url(anywidth/arrow.gif) no-repeat right top;}#menu li a:hover {background-color:#09c; color:#fff;} #menu li:hover > a {background-color:#09c; color:#fff;}#menu ul li:hover > ul {left:100%; margin-top:-23px; margin-left:-1px;}#menu a:hover ul,#menu a:hover a:hover ul, #menu a:hover a:hover a:hover ul {left:100%;}#menu a:hover ul ul, #menu a:hover a:hover ul ul {left:-9999px;}#menu table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-7px; margin-left:-1px;}</style><div id="info"><h2>A CSS only flyout - the basics</h2><h3>5th August 2009</h3><h3>12th December 2009 - simplified</h3><div id="menu">	<ul id="toplevel">		<li><a href="#url">Home</a></li>		<li><a class="fly" href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]-->		<!--[if lte IE 6]><table><tr><td><![endif]-->			<ul>				<li><a href="#url">Email</a></li>				<li><a href="#url">Telephone</a></li>				<li><a href="#url">Online Form</a></li>				<li><a href="#url">Snail Mail Address</a></li>			</ul>		<!--[if lte IE 6]></td></tr></table></a><![endif]-->		</li>		<li><a class="fly" href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->		<!--[if lte IE 6]><table><tr><td><![endif]-->			<ul>				<li><a href="#url">Ski Hire Facilities</a></li>				<li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]-->				<!--[if lte IE 6]><table><tr><td><![endif]-->					<ul>						<li><a href="#url">Beginners Slopes</a></li>						<li><a href="#url">Intermediate Slopes</a></li>						<li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->						<!--[if lte IE 6]><table><tr><td><![endif]-->							<ul>								<li><a href="#url">Local</a></li>								<li><a href="#url">Nearby</a></li>								<li><a href="#url">With instructor</a></li>								<li><a href="#url">Snow boarding</a></li>							</ul>						<!--[if lte IE 6]></td></tr></table></a><![endif]-->						</li>						<li><a href="#url">Expert</a></li>					</ul>				<!--[if lte IE 6]></td></tr></table></a><![endif]-->				</li>				<li><a href="#url">Night Life</a></li>				<li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]-->				<!--[if lte IE 6]><table><tr><td><![endif]-->					<ul>						<li><a href="#url">Snow Hotel</a></li>						<li><a href="#url">The Snowman</a></li>						<li><a href="#url">Ice Cavern</a></li>						<li><a href="#url">Ski Inn</a></li>					</ul>				<!--[if lte IE 6]></td></tr></table></a><![endif]-->				</li>				<li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]-->				<!--[if lte IE 6]><table><tr><td><![endif]-->					<ul>						<li><a href="#url">From Airport</a></li>						<li><a href="#url">In Resort</a></li>						<li><a href="#url">Multiple Resorts</a></li>					</ul>				<!--[if lte IE 6]></td></tr></table></a><![endif]-->				</li>			</ul>		<!--[if lte IE 6]></td></tr></table></a><![endif]-->		</li>		<li><a class="fly" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->		<!--[if lte IE 6]><table><tr><td><![endif]-->			<ul>				<li><a href="#url">Money Exchange</a></li>				<li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]-->				<!--[if lte IE 6]><table><tr><td><![endif]-->					<ul>						<li><a href="#url">Lift Passes</a></li>						<li><a href="#url">Insurance</a></li>						<li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]-->						<!--[if lte IE 6]><table><tr><td><![endif]-->							<ul>								<li><a href="#url">Boots</a></li>								<li><a href="#url">Skis</a></li>								<li><a href="#url">Ski Wear</a></li>								<li><a href="#url">Goggles</a></li>							</ul>						<!--[if lte IE 6]></td></tr></table></a><![endif]-->						</li>						<li><a href="#url">Ski Schools</a></li>						<li><a href="#url">Snow Report</a></li>					</ul>				<!--[if lte IE 6]></td></tr></table></a><![endif]-->				</li>				<li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]-->				<!--[if lte IE 6]><table><tr><td><![endif]-->					<ul>						<li><a href="#url">Austrian</a></li>						<li><a href="#url">German</a></li>						<li><a href="#url">French</a></li>						<li><a href="#url">English</a></li>					</ul>				<!--[if lte IE 6]></td></tr></table></a><![endif]-->				</li>				<li><a href="#url">Short Breaks</a></li>			</ul>		<!--[if lte IE 6]></td></tr></table></a><![endif]-->		</li>		<li><a class="fly" href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->		<!--[if lte IE 6]><table><tr><td><![endif]-->			<ul>				<li><a href="#url">Where to go</a></li>				<li><a href="#url">What to do</a></li>				<li><a href="#url">Places of interest</a></li>				<li><a href="#url">National parks & Museums</a></li>			</ul>		<!--[if lte IE 6]></td></tr></table></a><![endif]-->		</li>		<li><a href="#url">Privacy</a></li>	</ul></div>

Link to comment
Share on other sites

# is for any element with an id. An id can only be used once on a page. is for any element with a class and can be used as many times as you want.In your instance, #menu refers to <div id="menu">:)

Link to comment
Share on other sites

That's what I thought. Also, thanks for the period explanation. real_illusions, I really value you help.NIche

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...