|
| |
|
|
rdouglass
Posts: 9280
From: Biddeford, ME USA
Status: offline
 |
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.
_____________________________
Don't take you're eye off your final destination.
ASP Checkbox Function Tutorial.
|
|
|
|
curious monkey
Posts: 555
Joined: 4/28/2006
From: The lower handle of US
Status: offline
|
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
_____________________________
I have a ringing in my head and no one to help me answer it
| |
|
|
|
rdouglass
Posts: 9280
From: Biddeford, ME USA
Status: offline
|
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.
_____________________________
Don't take you're eye off your final destination.
ASP Checkbox Function Tutorial.
| |
|
|
|
curious monkey
Posts: 555
Joined: 4/28/2006
From: The lower handle of US
Status: offline
|
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>
_____________________________
I have a ringing in my head and no one to help me answer it
| |
|
|
|
caz
Posts: 3592
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
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.
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
i played w/ z-indexes and still nothing. 
bloody typeos! that's why it wasn't working. the damned z-ndex!! 