I really need help trying to sort out my navigation for a rollover list, it keeps appearing behind my container div. I've tried setting the z-index for the rollover list higher to that of the container but the problem still occurs so your help would be much appreciated. Here is the HTML code:
<div id=\"nav\"> <ul> <li><a href=\"index.html\">Home</a></li> <li><a href=\"products.html\">Products & Services</a> <ul> <li><a href=\"technical.html\">Technical Support Services for Automation Control Systems</a></li> <li><a href=\"turnkey.html\">Turnkey Projects for Automation Control Systems</a></li> <li><a href=\"industrial.html\">Industrial LED Display and Pick to Light Systems</a></li> <li><a href=\"electrical.html\">Supply of Electrical Equipment and Electro-Mechanical Components</a></li> <li><a href=\"rfid.html\">RFID Products and Solutions</a></li> <li><a href=\"conveyor.html\">Overhead Conveyor Systems</a></li> </ul> </li> <li><a href=\"#\">Strategic Partners</a></li> <li><a href=\"#\">Vendor Approvals</a></li> <li><a href=\"#\">Downloads</a></li> <li><a href=\"about.html\">About us</a></li> </ul> </div> <!-- End nav -->
Its not online yet, but heres the html for the container:
<div id=\"container\">
<h2>Latest News</h2>
<div class=\"event\"> <p class=\"date\"> January 2009 </p> <p>Automation Support Services have signed an agreement with Louis Schierholz GmbH to be their representative in South East and North Asia. The agreement permits the ASS companies to work together with Schierholz in the areas of business development, the provision of maintenance services and the provision of replacement parts.</p> </div> <!-- End event -->
<div class=\"event\"> <p class=\"date\"> July 2008 </p> <p>Singapore Airport Terminal Services (SATS) Awards Cart Transport & Management System Upgrade Project.</p>
<p>SATS, the leading provider of integrated ground handling and airline catering services at Singapore Changi Airport, has chosen the partnership group of ASS Pte Ltd & Macdonald Humfrey (Automation) Ltd, following an open tender exercise, to upgrade the existing SATS Inflight Catering Centre 2 (SICC 2) Automated Cart Transport & Management System (CTMS).</p>
<p>Singapore Airport Terminal Services Limited (SATS) is the leading provider of integrated ground handling and airline catering services at Singapore Changi Airport. SATS' network of ground handling and airline catering operations spans 18 overseas investments covering over 40 airports in the Asia Pacific region. SATS' services include airfreight handling, airline catering, passenger services, baggage handling, ramp handling, aviation security, airline linen laundry and processed food manufacturing. SATS, a subsidiary of Singapore Airlines Limited (SIA), has been listed on the Singapore Exchange since May 2000.</p>
<p>The award by SATS to ASS Pte Ltd, with Macdonald Humfrey (Automation) Ltd acting as the main sub-contractor, follows a detailed tender process where the proposed solution of ASS Pte & MHA was eventually selected as the preferred technical solution.</p>
<p>The existing CTMS system has been in operation for some nine years, and is being updated to address obsolete hardware and redundant software issues as well as introduce new functionality to the system.</p>
<p>The system will adopt the latest Fault Tolerant server Hardware along with the advanced Wonderware System 3.0 Platform Software.</p>
<p>The system will be upgraded in a phased programme with completion planned for early 2009.</p>
<p>This project further enhances the long-term relationship between ASS Pte Ltd and MacDonald Humfrey (Automation) Ltd in the field of automation and technical solutions to industry.</p> </div> <!-- End event -->
<p class=\"date\"> June 2008 </p> <p>Automation Support Services Pte Ltd have relocated to their new offices in Singapore. The offices are strategically located to be able to provide timely responses to our clients in the event that our services are required on an urgent basis.</p>
<p>The location also enables ASS to offer its clients a workshop facility for light control panel assembly work and testing. The facility provides for additional area to store spare/replacement parts.</p>
<p>The offices are conveniently located at:</p>
<div id=\"addr\"> <p>60 Kaki Bukit Place</p> <p>#08-13 Eunos Techpark</p> <p>Singapore 415979</p> </div> <!-- End addr -->
Why do you have position:absolute and position: relative all over the place? I don't see any reason why you'd need those; It's a very simple design.
Try remove all "position:absolute" and "position:relative" as they aren't doing anything useful. I'd also recommend reading about the CSS Position Property: http://www.w3schools.com/Css/pr_class_position.asp
"apostrophe" said:
Does it work if you put it on a real page and not in a frame?
I really need help trying to sort out my navigation for a rollover list, it keeps appearing behind my container div. I've tried setting the z-index for the rollover list higher to that of the container but the problem still occurs so your help would be much appreciated. Here is the HTML code:
Here is the CSS for the relevant sections:
#header #nav {
width: 960px;
margin: 24px auto;
font-size: 12px;
}
#header #nav ul {
list-style-type: none;
text-align: center;
}
#header #nav li {
float: left;
margin: 1px;
position: relative;
}
#header #nav li a {
display: block;
padding: 5px;
width: 144px;
height: 55px;
border: 1px solid #ffffff;
margin-bottom: 5px;
}
#header #nav li a:hover, #header #nav li a:active {
color: #FFFF00;
background-color: #93A3C9;
border: 1px solid #CCCCCC;
}
#header #nav li ul {
display: none;
position: absolute;
top: 60px;
}
#header #nav li:hover ul {
display: block;
}
And finally, here is a screenshot of the problem:
http://img355.imageshack.us/img355/9412/help.jpg
If you need anymore code/info please let me know and i thank you in advance :)
Is your container div absolute positioned? That would cause it to be on top of your drop down.
Try giving your container div a z-index: -10
Ashton Sanders
Ok i tried giving the container a z-index of -10 and the problem still consists :(
#container {width: 960px;
margin: 0 auto;
background-color: #ffffff;
z-index: -10;
position: relative;
}
Or provide the HTML/CSS for the Container div?
Thanks
The CSS is in my previous post :)
Not without a link.
I've put the page online at: http://www.ngobaheng.co.nr/ .I hope you're now able to help.
Thanks in advance.
Why do you have position:absolute and position: relative all over the place? I don't see any reason why you'd need those; It's a very simple design.
Try remove all "position:absolute" and "position:relative" as they aren't doing anything useful.
I'd also recommend reading about the CSS Position Property: http://www.w3schools.com/Css/pr_class_position.asp
Here's the link to the page not in an iframe:
http://ngobaheng.webng.com/test/index.html
Thanks alot for all your help the problem is now solved, it was the overflow: hidden on the header div tag :)