position! (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

curious monkey -> position! (6/6/2006 12:45:53)

ok i have a "flyout" menu on the left. and in the body i have a word that when moused it bring up a explaination box. (sorry it's not live and a lot of code. i'll post if you want to see the codings).

the issue is that the 2nd level of the menu hides behind the mouseable word.[&o] i played w/ z-indexes and still nothing.

it's confusing i know, but please try to help![:(]



rdouglass -> RE: position! (6/6/2006 13:30:10)

quote:

i'll post if you want to see the codings


Probably need it:

However, without using the z-index, I frequently have sucess moving the containing div further down / later in the page code. The later on the page it is, the 'higher' it will be in terms of who's on top.

But of course, without seeing any code, it's a little difficult to tell for sure.



curious monkey -> RE: position! (6/6/2006 14:07:51)

ok here's a snippet of my styling: 
a.info{
    position:relative; /*this is the key*/
    z-index:24; background-color:#ffffff;
    color:#000;
    text-decoration:none;
    cursor:help}

a.info:hover{z-index:25; background-color:#fff}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #228b22;
    background-color:#FFF3AC; color:#000;
    text-align: center}

	#nav, #nav ul { /* all lists */
		padding: 0;
		margin: 0;
		list-style: none;
		float : left;
		width : 11em;
		z-index:50;
	}
	
	#nav li { /* all list items */
		position : relative;
		float : left;
		margin-bottom : -1px;
		width: 11em;
		font-size: 14px;
		z-ndex:50;
	}
	
	#nav li ul { /* second-level lists */
		position : absolute;
		left: -999em;
		margin-left : 160px;
		margin-top : -1.35em;
		z-index:50;
			}
	

	.menu a {
		width: 144px;
		
		display : block;
		color : green;
		text-decoration : none;
		background-color : #ffffff;
		border-right: 1px solid green;
		padding : 0 0.5em;
		line-height: 1.5em;
		z-index:50;
	}
	
	.menu a:hover {background-color:#FF8C00;
color:#ffffff;z-index:50;}
	
	.menu a{
margin-left: 6px;
margin-right: 8px;
text-decoration: none;

}

	.hi a {
		width: 11em;
		w\idth : 10em;
		display : block;
		color : black;
		text-decoration : none;
		background-color :#FFF3AC;
		border : 0px solid black;
		padding : 0 0.5em;
		
	}
	.hi li{
width: 100%;
}

.hi li a{
text-decoration: none; color:#000000}

		
	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
		left: -999em;
	}
	
	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
		left: auto;
	}


that's just the spaning and me menu. here's the html for the same areas : 
<ul id="nav">

	<li class="menu"><a href="#">Home</a>

	<li class="menu"><a href="#">Company »</a><ul class="hi">
			<li><a href="#">About Tropic</a></li>
			<li><a href="#">Tropic Careers</a></li>
			<li><a href="">Contractor Links</a></li>
			<li><a href="">Industry Links</a></li>
			<li><a href="">Credit Application</a></li>
		</ul>
	</li>

	<li class="menu"><a href="#">Contact Us »</a>
		<ul class="hi">
			<li><a href="">Locations</a></li>
			<li><a href="">Feedback</a></li>
			<li><a href="">Subscribe</a></li>
		</ul>
	</li>

	<li class="menu"><a href="#">Products »</a>
		<ul class="hi">
			<li><a href="">Linecard</a></li>
			<li><a href="">Refrigeration</a></li>
			<li><a href="">Air Conditioning</a></li>
			<li><a href="">Food Service</a></li>
			<li><a href="">Air Distribution</a></li>
			<li><a href="">Controls, Motors, Electrical</a></li>
			<li><a href="">Chemicals</a></li>
			<li><a href="">Tools</a></li>
			<li><a href="">MSDS</a></li>		</ul>
	</li>
<li class="menu"><a href="#">Export</a>
<li class="menu"><a href="#">Calendar</a></li></li></li></ul>

<div id="content"><div class="padding"><strong><font color="green">Welcome to Tropic Supply online</font></strong> Check back for updates. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede
<h2>Locations</h2><p><strong><font color="green"size="2">Hover for store hours</font></h1></strong>
<div id="right"><a class="info" href="#"><b><font color="#228b22">T-8 Fort Myers</font></b><span>Store Hours<br>Mon-Fri 7:00am-5:00pm<br>Closed Sat & Sun </span></a><br>6450 Arc Way <br>Fort Myers, FL 33912<br>Phone: 239.278.1117<br>


that's obviously not all of my html i left some out. but i think it should be enough



rdouglass -> RE: position! (6/6/2006 14:23:17)

Oh, I see.

You don't have your menu in it's own div. That's what I was leading to.

See, I put all of my items inside a div one way or another. It seems to work well for the way I do things. What I would do is to put my menu list insode another div and put it below "content". I almost invariably put any menu code at the bottom of the page just so my dripdowns (or whatever menu slide you use) will always expand on top of other items and won't 'submarine'.

Also, in terms of the search engines, I believe it also benefits you some to have content before menus and such but I'm not sutre about that.

Of course, you'll have to position the div you just enclosed the ul list in but that's how I do it. There are probably 'better' ways to do it but it seems to work well in both IE and FF for me.



caz -> RE: position! (6/6/2006 14:42:21)

I agree with Roger re positioning, but "dripdowns"? Shouldn't that be in the new word thread [;)]

Also I do have the content as high as possible semantically mostly for speech readers but if the SE's like it too then so will my clients.

It really would help to see the whole page too because other things such as inheritance may be affecting your menu.



curious monkey -> RE: position! (6/6/2006 14:47:49)

ok here's all my styling: 
#page-container{
width:760px;
margin: auto;
text-align: left;
background-color: #ffffff
}
html, body{margin: 0; padding:0;}

#header{
height:110px;
background: #ffffff;
}
#header2{
height:15px;
background: #ffffff;
text-align: right;
font-weight: bold;
font-size: 2.05em;
color: green;
padding-bottom:5px;
}
#img2 
{
vertical-align:top;
height:110px;
width:275px;
float:left;
position: static
}

a.info{
    position:relative; /*this is the key*/
    z-index:24; background-color:#ffffff;
    color:#000;
    text-decoration:none;
    cursor:help}

a.info:hover{z-index:25; background-color:#fff}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #228b22;
    background-color:#FFF3AC; color:#000;
    text-align: center}

	#nav, #nav ul { /* all lists */
		padding: 0;
		margin: 0;
		list-style: none;
		float : left;
		width : 11em;
		z-index:50;
	}
	
	#nav li { /* all list items */
		position : relative;
		float : left;
		margin-bottom : -1px;
		width: 11em;
		font-size: 14px;
		z-ndex:50;
	}
	
	#nav li ul { /* second-level lists */
		position : absolute;
		left: -999em;
		margin-left : 160px;
		margin-top : -1.35em;
		z-index:50;
			}
	

	.menu a {
		width: 144px;
		
		display : block;
		color : green;
		text-decoration : none;
		background-color : #ffffff;
		border-right: 1px solid green;
		padding : 0 0.5em;
		line-height: 1.5em;
		z-index:50;
	}
	
	.menu a:hover {background-color:#FF8C00;
color:#ffffff;z-index:50;}
	
	.menu a{
margin-left: 6px;
margin-right: 8px;
text-decoration: none;

}

	.hi a {
		width: 11em;
		w\idth : 10em;
		display : block;
		color : black;
		text-decoration : none;
		background-color :#FFF3AC;
		border : 0px solid black;
		padding : 0 0.5em;
		
	}
	.hi li{
width: 100%;
}

.hi li a{
text-decoration: none; color:#000000}

		
	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
		left: -999em;
	}
	
	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
		left: auto;
	}
	
	#content{
margin-right: 0px;
margin-left: 5px;

background-color: #ffffff
}

#content.padding{
padding:15px;
}

#img{
float: right;
width: 135px;
padding-right: 5px;
border:none;}
img.link {border:none}



#content h2 {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
	padding-top: 10px;
	color:#ff8c00;
	text-decoration: none;
}

#content p {
	margin: 0 0 16px 150px;
	padding-right: 5px;
	padding-bottom: 15px;
	}
			
#right{
float: right;
width: 150px;
line-height: 18px;
padding-left: 5px;
text-align: justify;}

#right h1{
font-size: 1.25em;
color: green;
padding-right: 0px;
padding-top:2px;
}

#right.padding{
padding-left:25px;
}

body {
	font-family: Arial, Helvetica, Verdana, Sans-serif;
	font-size: 12px;
	color: #666666;
	background-color:#ffffff;
	border-left: medium double green;
	background-color: #c9c9c9;
}
body {
	font-family: Arial, Helvetica, Verdana, Sans-serif;
	font-size: 12px;
	color: #666666;
	text-align: center;
	border-left: 1px solid green; 
}

#footer{
height: 30px;
clear: both;
font-family: Tahoma, Arial, Helvetica, Sans-serif;
	font-size: 10px;
	color: green;
	border-top: medium double green;
	padding: 13px 25px;
	line-height: 18px;
	background-color: #ffffff;
}
#footer a {
	color: green;
	text-decoration: none;
}
#footer a:hover {
	color: #ff8c00;
}

#footer #altnav {
	width: 350px;
	float: right;
	text-align: right;
	padding-top: 13px;
}
#footer #copyright {
	padding-top: 13px;
}

a.one:link {color: green; 
text-decoration: underline}
a.one:visited {color: green }
a.one:hover {color: #ff8c00;}


a.img img {border:none;filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;}
a.img:hover img {border:none;filter:alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;}

#left{
margin-top:119px;
float: left;
width: 150px;
border-right: 1px solid green;
margin-left: -159px;
background-color: #ffffff}

#left.padding{
padding-right:25px;
}
#left h1{
font-size: 1.05em;
color: green;
padding-right: 0px;
padding-top:0px;
}


and heres the html: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<link rel=stylesheet href="3rd.css" type="text/css">




<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls.onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls.onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

</head>
<body>
<div id="page-container">
<div id="header">		<div id="img2"><img src="../Tropic%20Logo%20Color%20Sun%20from%20Sam%206-05.JPG" height="100px" alt="Tropic Logo"></div></div>

<div id="header2"></div>
<div id="menu">
<ul id="nav">

	<li class="menu"><a href="#">Home</a>

	<li class="menu"><a href="#">Company »</a><ul class="hi">
			<li><a href="#">About Tropic</a></li>
			<li><a href="#">Tropic Careers</a></li>
			<li><a href="">Contractor Links</a></li>
			<li><a href="">Industry Links</a></li>
			<li><a href="">Credit Application</a></li>
		</ul>
	</li>

	<li class="menu"><a href="#">Contact Us »</a>
		<ul class="hi">
			<li><a href="">Locations</a></li>
			<li><a href="">Feedback</a></li>
			<li><a href="">Subscribe</a></li>
		</ul>
	</li>

	<li class="menu"><a href="#">Products »</a>
		<ul class="hi">
			<li><a href="">Linecard</a></li>
			<li><a href="">Refrigeration</a></li>
			<li><a href="">Air Conditioning</a></li>
			<li><a href="">Food Service</a></li>
			<li><a href="">Air Distribution</a></li>
			<li><a href="">Controls, Motors, Electrical</a></li>
			<li><a href="">Chemicals</a></li>
			<li><a href="">Tools</a></li>
			<li><a href="">MSDS</a></li>		</ul>
	</li>
<li class="menu"><a href="#">Export</a>
<li class="menu"><a href="#">Calendar</a></li></li></li></ul></div>

<div id="left"><div id="padding"><hr><h1><strong>Search</strong></h1>search bar goes here...<hr>
<h1>Subscribe</h1>email subscription bar will go here...<hr><h1>Related Organizations</h1>
	<a class="img" href="#"><img class="link" src="../images/tracca.JPG" align="left" alt="FRACCA"></a><br><a class="img" href="#"><img class="link" src="../images/TCSCAL_1.jpg" align="right" alt="TCSCA"></a><br><br><br><br><br><a class="img" href="#"><img class="link" src="../images/sfaca.JPG" align="middle" alt="SFACA"></a><br><br><a class="img" href="#"><img class="link" src="../images/racca tampa.jpg" align="right" alt="RACCA"></a><br><br><br><br><a class="img" href="#"><img class="link" src="../images/macca.JPG" align="middle" alt="MACCA"></a><br><br><a class="img" href="#"><img class="link" src="../images/webAccalog2.JPG" align="middle" alt="PBACCA"></a><br><br><br></div></div>
</ul>

<hr>

<div id="content"><div class="padding"><strong><font color="green">Welcome to Tropic Supply online</font></strong> Check back for updates. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede
<h2>Locations</h2><p><strong><font color="green"size="2">Hover for store hours</font></h1></strong>
<div id="right"><a class="info" href="#"><b><font color="#228b22">T-8 Fort Myers</font></b><span>Store Hours<br>Mon-Fri 7:00am-5:00pm<br>Closed Sat & Sun </span></a><br>6450 Arc Way <br>Fort Myers, FL 33912<br>Phone: 239.278.1117<br>
            <br><a class="info" href="#"><b><font color="#228b22">T-9 Delray Beach</font></b><span>Store Hours<br>Mon-Fri 7:00am-5:00pm<br>Closed Sat & Sun </span></a><br>1203 Poinsettia Drive<br>Delray Beach, FL 33444<br>Phone: 561.279.2710<br>
<br><a class="info" href="#"><b><font color="#228b22">T-10 Naples</font></b><span>Store Hours<br>Mon-Fri 7:00am-5:00pm<br>Closed Sat & Sun</span></a><br>4325 Domestic Ave  <br>Naples, FL 34104 <br>Phone: 239.643.7118<br>
<br><a class="info" href="#"><b><font color="#228b22">T-11 Cape Coral</font></b><span>Store Hours<br>Mon-Fri 7:00am-5:00pm<br>Closed Sat & Sun</span></a><br>785 NE 19th Place<br>Cape Coral, FL 33903<br>Phone: 239.989.0088<br>
<br><a class="info" href="#"><b><font color="#228b22">T-12 Port Charlotte</font></b><span>Store Hours<br>Mon-Fri 7:00am-5:00pm<br>Closed Sat & Sun</span></a><br>20100 Veterans Blvd<br>Port Charlotte, FL 33954<br>Phone: 941.255.8330 <br>
<br><a class="info" href="#"><b><font color="228B22">T-14 Sarasota</font></b><span>Store Hours<br>Mon-Fri 7:30am-5:30pm<br>Closed Sat & Sun</span></a> <br>1890 Barber Road <br>Sarasota, FL 34240 <br>Phone: 941.378.0910 <br>
<br><a class="info" href="#"><b><font color="#228B22">T-15 Tampa</font></b><span>Store Hours<br>Mon-Fri 7:30am-5:30pm<br>Closed Sat & Sun</span></a><br>5120 East Adamo Drive<br>Suite A<br>Tampa, FL 33619<br>813.514.1198
</div>


<a class="info" href="#"><b><font color="#228b22">T-1 North Miami<br>General Offices & Export</font></b><span>Store Hours<br>Mon-Fri 7:00am-5:00pm<br>Sat 8:00am-12:00pm<br>Closed Sun</span></a><br>151 NE 179th Street<br>Miami, FL 33162<br>Phone: 305.652.7717<br><br><a class="info" href="#"><b><font color="#228b22">T-2 North Fort Lauderdale</font></b><span>Store Hours<br>Mon-Fri 7:00am-5:00pm<br>Sat 8:00am-12:00pm<br>Closed Sun</span></a><br>4321 NE 12th Terrace<br>Oakland Park, FL 33334<br>Phone: 954.565.4803
<br>
<br>   <a class="info" href="#"><b><font color="#228b22">T-3 South Miami</font></b><span>Store Hours<br>Mon-Fri 7:00am-5:00pm<br>Sat 8:00am-12:00pm<br>Closed Sun</span></a><br>10776A SW 190th Street<br>Miami, FL 33157<br>Phone: 305.255.0438<br>
<br><a class="info" href="#"><b><font color="#228b22">T-4 South Fort Lauderdale</font></b><span>Store Hours<br>Mon-Fri 7:00am-5:00pm<br>Sat 8:00am-12:00pm<br>Closed Sun</span></a><br>3200 SE 6th Ave <br>Fort Lauderdale, FL 33316 <br>Phone: 954.522.2874<br>
<br><a class="info" href="#"><b><font color="#228b22">T-5 West Palm Beach</font></b><span>Store Hours<br>Mon-Fri 7:00am-5:00pm<br>Closed Sat & Sun</span></a><br>1880 Old Okeechobee Rd.<br>West Palm Beach, FL<br>Phone: 561.684.3997<br>
<br><a class="info" href="#"><b><font color="#228b22">T-6 Fort Pierce</font></b><span>Store Hours<br>Mon-Fri 7:00am-5:00pm<br>Closed Sat & Sun</span></a><br>903 South Market Ave<br>Fort Pierce, FL 34982<br>Phone: 772.465.4707 <br>
<br><a class="info" href="#"><b><font color="228B22">T-7 Mid Miami</font></b><span>Store Hours<br>Mon-Fri 7:30am-5:30pm<br>Sat 8:00am-12:00pm<br>Closed Sun</span></a> <br>3770 NW 21st Street <br>Miami, FL 33142 <br>Phone: 305.638.9673 

</div></div>

<div id="footer"><div id="altnav">
		<a href="#">About</a> | 
		<a href="#">Locations</a> | 
		<a href="#">Contact Us</a> | 
		<a href="#">Products</a> | 		
		<a href="#">Credit Application</a>
	</div>
	Copyright © Tropic Supply 2006
</div>

</div>
</body>
</html>



caz -> RE: position! (6/6/2006 15:12:34)

The html validator notes that you have unclosed tags for <li> <ul> and <h1> elements

The css validator notes these errors, but you had better fix your html and revalidate the css afterwards.

* Line: 65 Context : #nav li
Property z-ndex doesn't exist : 50

* Line: 231 Context : a.img img
Parse Error - opacity=100)

* Line: 231 Context : a.img img
Parse Error - -moz-opacity: 1.0;

* Line: 232
Parse Error - : 1.0;} a.img:hover img

* Line: 232
Parse Error - opacity=50)

* Line: 232
Parse error - Unrecognized : ;-moz-opacity: 0.5;

* Line: 234
Parse Error - : 0.5;} #left

Most seem to be typos.

Fix this stuff and then look at your positioning.



curious monkey -> RE: position! (6/6/2006 15:15:35)

grr[:@] bloody typeos! that's why it wasn't working. the damned z-ndex!!


what's a parse error? and does opcity validate?



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125