|
CSS - Flash Movie Overlaps Div-based Menu
Hi, folks. I'm running into a pretty serious problem to which I'm really, really hoping someone will know a solution.
We use a menu system on our site which is made up of layers. It provides for flyout-hierarchical menus, and up until now has caused me no grief. However, now that I've embedded a flash movie onto a particular page the layers that comprise the flyout menu items are hidden beneath the Flash movie. I've tried putting the object tag inside a div and setting the z-index of the div to 1 (and also to -1) but that didn't work. Can anyone take a look and let me know if they have any ideas? http://www.unbc.ca/test.html Cheers and TIA, Pablo Similar TutorialsHi all, I have a problem with a site I am developing. I am using CSS and all was well until I placed a Flash Movie on the homepage. The general layout is as follows: Code: <div id="wrapper"> <div id="banner"></div> <div id="nav">links etc</div> <div id="content">Content text etc</div> <div id="flashMovie">Flash movie here</div> <div id="footer"></div> </div> The 'nav' div uses a ProjectSeven popmenu which works fine. It's Z-index is something like 2000. The dropdown menu hides behind the 'flashMovie' layer every time, but appears in front of the content layer??? I have tried messing with the z-index of the 'flashMovie' div but to no avail. I have tried absolute positioning, floats, everything I can think of but with no success. Any advice on what the problem could be would be greatly appreciated. I apologise for not having the actual site online, but Its under development on my other machine. Thanks in advance, Duncan I want to create a Flash movie that will stay locked to the bottom corner of the webpage, even when the user scrolls down. Is this an HTML question? Please advise... Well the title pretty much says it. How can I remove the little border from the top of the flash movie player (see example here : http://www.aplistia.com/flashin.htm ) if you see carefully, you will see a natural separation of around 4 - 6 pixels tall. I want to completely put my flash file on top, no spaces. Ive tried a couple of things but I couldnt fix it. Thanks in advanced . I have a site with a menu that works perfectly in every single browser except IE6. Instead of the menu going over top of the flash, it enlarges the menu bar and just displays within that. I've tried SWFObject, as well as wmode=transparent and opaque for the flash movie, and they work great for all browsers other than IE6. Does anyone know a fix for this? I have a drop down menu that drops behind my flash element. is there a way to push the flash behind the menu in CSS? Hello, My code overlaps on FF unlike at IE , but I need the positioning at one div though. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Sample Title</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div#con{background:#685127;
margin:10px;
width:350px;
padding:20px;
border: 2px solid #000;
position:relative}
div#con2{background:#cc0033;
height:80px;
padding:0;
margin:0;
border:2px solid #2ff;
float:left}
</style>
</head>
<body>
<div id="con2">
<p>lorem fill column strong column fill fill column strong column fill</p>
</div>
<div id="con">
<p>fill fill column strong column fill</p>
</div>
</body>
</html>
So, I'm workin on a site that has a drop down menu in CSS. It worked fine when I had a banner (gif). Dropped down over the image perfectly. But now I changed the .gif to an animation and made it an .swf file. Now the drop down menu drops down behind the flash banner. How do I make the drop down appear over the swf? Thanks. NEVER MIND how can i stop my buttons overlapping the formfield, without using spacers? Using margin-top=5px; doesnt work Code: <style type="text/css">
<!--
* { margin: 0px; padding: 0px; border-style: none; text-align: center; }
.ff { font: 11px Verdana, Geneva, sans-serif; margin: 2px 0px 0px; padding: 0px; border: 1px solid #0FF; color: #000000; }
a.Butt:link, a.Butt:active, a.Butt:hover, a.Butt:visited { color: #FFF; background: #06F; padding: 2px; border: 1px outset #00C; }
-->
</style>
</head>
<body>
<p><input name="pword" type="text" class="ff" id="pword" size="30" maxlength="40" /> </p>
<p><a href="#" class="Butt">login</a> <a href="#" class="Butt">reset</a></p>
<p>ready</p>
<p> </p>
</body>
I was reading through some articles here about dropdowns and have found that the Son of Suckerfish menus were a good bet. When it rolls over it displays it correctly in IE by putting the dropdown under the link, but in Firefox it puts it smack over the top of it so you cannot read the original link. It worked in both browsers untill I added the main links to what they in the code below to include the pics. I had to put them in divs to align the text next to the icon correctly (verticle mid align next to img?? I jsut set a top margin to push it - is this best?). Heres a link to show you: http://skyyfinancial.com/demo/menutest2.php I put it all together and my list looks like this: Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div>
<ul id="nav">
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Hard Money Loan General </div></a>
</li>
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Real Estate Leasing General </div></a>
<ul>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Lease to Own</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Apartment</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Commercial</div></a></li>
</ul>
</li>
</ul>
</div></td>
</tr>
<tr>
<td><div>
<ul id="nav2">
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Home Loans General</div></a>
<ul>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Purchase</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Refinance</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Construction</div></a></li>
<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
<div id="link" style="float:left; margin-top:12px;">Second Mortgage</div></a></li>
</ul>
</li>
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Broker Application</div></a>
</li>
<!-- etc. -->
</ul>
</div></td>
</tr>
<tr>
<td><div>
<ul id="nav3">
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Commercial Lending General </div></a>
</li>
<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
<div id="link" style="float:left; margin-top:12px;">Financial Analysis</div></a>
</li>
<!-- etc. -->
</ul>
</div></td>
</tr>
</table>
As of right now it works as it should and I only have the one serious issue with it overlapping. Any help on the rest of my questions would be great as well. Other questions I had: Because I had to split them up, I had create a new id for each in IE or it wouldnt work. Only the first one would work. I renamed them and duplicated the code over to the new names ( so theres 3x as much code). I think this could be a javascript issue, but I am not positive. I put my css and javascript at the bottom of this post. I can make a new thread in javascript forum if someone can tell me if that is the problem. ( I looked at it and it seems maybe it needs some type of loop? Not positive ) Lastly, in order to list the lists under eachother, i had split them up into a div per row inside of a table. Otherwise they would just continue across the page. Anyway better of doing this? css: Code:
#menu, #menu ul {
padding: 0;
margin: 0;
list-style: none;
font-family:Arial, Helvetica, sans-serif;
font-size:14px; color:#636363;
font-weight:bold;
}
#menu a {
display: block;
width: 275px;
}
#menu li {
float: left;
width: 275px;
}
#menu li ul {
background-color:#FFFFFF;
position: absolute;
width: 200px;
left: -999em;
}
#menu li:hover ul {
left: auto;
}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}
Javascript Code:
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
Thanks for the help Hi Could someone take a look at this please http://dmumford.bizhat.com/rca/fixtures.htm When viewed in firefox you will see my data table overlaps the div coloured brown, anyone know why this is ? Thanks for your help. Hi All, I'm in the process of building my very first CSS-based site, and I'm having some challenges with getting the nav menu to render and function properly. I'm using the Pixy rollover technique, and I've modeled my code after several sources, since none of the sources exactly match what I need to do for this site. I'm sure my code is probably pretty messed up, but I don't have enough experience yet to determine how and where. I'm using Dreamweaver CS3 to create the code/pages. There are three main issues: 1. The nav menu is not placed correctly on the page (it's too high in Firefox, and too low in IE) 2. The links for the nav buttons are not rendering 3. The rollover states for the nav buttons are not rendering Here's the relevant code as it's presently constituted: Code: CSS .twoColLiqLtHdr #mainContent {
margin: 5px 20px 0 291px;
background-image: url(../assets/structure/main_background.png);
width: 638px;
height: 622px;
background-repeat: no-repeat;
position: relative;
}
#mainContent #navMenu {
width: 636px;
height: 60px;
background-image: url(../assets/navigation/navigation_buttons.png);
background-repeat: no-repeat;
}
#mainContent #navMenu ul {
margin: 0;
padding: 0;
float: left;
}
#mainContent #navMenu li {
float: left;
}
#mainContent #navMenu li a {
display: block;
}
/*nav menu up*/
#mainContent #navMenu li#services a:link {
background-position: 0 0;
}
#mainContent #navMenu li#faq a:link {
background-position: -167px 0;
}
#mainContent #navMenu li#about a:link {
background-position: -272px 0;
}
#mainContent #navMenu li#contact a:link {
background-position: -422px 0;
}
/*nav menu over*/
#mainContent #navMenu li#services a:hover {
background-position: 0 -60px;
}
#mainContent #navMenu li#faq a:hover {
background-position: -167px -60px;
}
#mainContent #navMenu li#about a:hover {
background-position: -272px -60px;
}
#mainContent #navMenu li#contact a:hover {
background-position: -422px -60px;
}
/*nav menu down*/
#mainContent #navMenu li#services a:active {
background-position: 0 -120px;
}
#mainContent #navMenu li#faq a:active {
background-position: -167px -120px;
}
#mainContent #navMenu li#about a:active {
background-position: -272px -120px;
}
#mainContent #navMenu li#contact a:active {
background-position: -422px -120px;
}
Code: XHTML <div id="mainContent">
<div id="navMenu">
<ul>
<li id="services"><a href="services.html"></a></li>
<li id="faq"><a href="faq.html"></a></li>
<li id="about"><a href="about_us.html"></a></li>
<li id="contact"><a href="contact_us.html"></a></li>
</ul>
</div>
</div>
I'd be happy to post links to my nav menu image and uploaded code, but I can't yet since I'm a new user. If anyone who thinks they can help wants to see them, please let me know and I'll send the links in a PM (provided I can do that). Thanks in advance for any help provided. I've been working on this issue for almost 8 hours, and I'm ready to move on to the next one. Sam Hello! I am putting the finishing touches on a website for a client of mine, and even though the main menu works perfectly in Firefox 3.0.10, IE 7 and IE 8 both appear to add a CR/LF to the end of each menu button. The menu is CSS based, and uses ul and li tags. Here is the CSS Code: Code: @charset "ISO-8859-1";
#nav {
list-style: none;
margin: 0;
padding: 0;
}
/* This keeps the menu from interfering with the main content. */
#nav + *{
clear: left;
}
#nav ul {
padding: 0;
margin:0;
list-style: none;
z-index:99;
position:relative;
overflow:visible;
display:inline;
}
#nav > li ul {
text-align: center;
display:inline;
list-style-type:none;
}
#nav li { /* Appearance settings (eye candy) */
position: relative;
background: #E7E7E7;
/* background: url(trans/white80.png);*/
color: #00F;
border: solid 1px #AAA;
height: auto;
width: 6.5em;
max-width: 6.5em;
overflow: hidden;
font-weight: normal;
}
#nav ul ul {
width: 8em;
}
#nav > li {
margin: 0;
float: left;
text-align: center;
height: 3em;
overflow:hidden;
}
#nav a {
text-decoration: none;
padding: 0 0.5em;
line-height: 1.2em;
background: transparent;
color: inherit;
overflow: hidden;
}
#nav li li a {
line-height: normal;
/* TEST: Is This Better?
/* padding: 0.25em 0.5em; */
}
/* #nav ul, #nav li, #nav a{
* display: block;
}
#nav ul{
visibility: hidden;
}
/* (sub-)submenus */
#nav ul ul, #nav ul ul ul{
position:absolute;
top: 0;
left: 95%;
visibility: hidden;
}
/* Shadow! */
#nav li:hover {
/* border-style: outset;*/
/* background: #D7D7D7;*/
background: #1AD;
color: white;
}
#nav > li ul {
/* background: #666;*/
background: transparent url("trans/black40.png");
}
#nav > li > ul {
margin: -1px; /* This is to make the width equal to parent li width. */
position: relative;
top: 4px;
left: 4px;
}
#nav > li ul li {
position: relative;
top: -4px;
left: -4px;
}
/* end shadow */
/* Enlarger */
/* #nav > li {width: 8em;} */ /* popping disappears if we use a fixed-width */
#nav > li:hover {
margin: -0.2em;
padding: 0.2em;
z-index: 2; /* Opera does not seem to respect this. */
}
#nav > li:hover > a {
margin: -0.2em;
padding: 0.2em 0.7em;
}
/* end enlarger */
/* Interactive lines: show/hide menus */
#nav li:hover ul ul, #nav li:hover ul ul ul{
visibility: hidden;
}
#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul{
visibility: visible;
}
.skipnav {
display: none;
}
#nonav {
display: block;
background: transparent;
height: 1px;
border: 0;
margin: 0 0 -1px 0;
padding: 0;
}
Here is the other file: Code: <html><head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="/style/MainMenu.css"> <title>Main Menu</title> </head> <ul id="nav"> <li><a href="index.php">Nova Health Center Home</a></li> <li><a href="drtoufigh.php">About Our Doctor</a></li> <li><a href="approach.php">About Our Approach</a></li> <li><a href="clients.php">Client Testimonials</a></li> <li><a href="nutrition.php">Nutrition Information</a></li> <li><a href="faq.php">Questions And Answers</a></li> <li><a href="directions.php">Directions & Office Hours</a></li> </ul> </html> Can anybody tell me what I need to change to make the menu render correctly in IE 7/8? I have made both files pass W3C Validation, consulted Google, researched IE CSS bugs and after many hours of failed attempts, I figured it would be quicker to ask here. I know that the rest of the site is not W3C compliant (yet); however, all I need for now is to fix this one bug so I can show it to my client in IE as well as FF. Thanks in advance for any assistance you can provide! Regards, Riley F. Marquis III Hey everyone. I am new to CSS and the forum, thus slightly overwhelmed with a project I am undertaking to produce a CSS menu. The menu is text based, vertically stacked and has two main criteria: 1. On mouse over one of the text buttons (Work for example) to the right or underneath a hidden DIV appears with a selection of sub options. 2. When the above occurs, the text of the Work menu changes to a specific colour. Eg: Work - HIMALAYAS | LIONS EDITORIAL About Links Blog At the moment I am using the following code to show and hide: <a href="#"onmouseover="showhide('script'); return(false); ">WORK</a> <div style="display: none;" id="script"> <a href="ps">HIMALAYAS</a> <a href="l">LIONS EDITORIAL</a> </div> <script> function showhide(id){ if (document.getElementById){ obj = document.getElementById(id); if (obj.style.display == "none"){ obj.style.display = ""; } else { obj.style.display = "none"; } } } </script> Can anyone help me out? Ray. Im trying to make a link that is based on 2 images, one for the un-hovered or normal state, and the other for the hover state. I just did 2 of these at 3dotmedia.com/redesign and now I'm trying to do the same thing at greedydogkennel.com/redesign but it WILL NOT WORK. I am totally stumped, it has to be something to do with the positioning inside my css I assume... on the page, I want the pictures of the dogs to be normal, but when hovered I have a frosty shaded grey image (as in some kind of lighting) to serve as the hover state..I am masking the a href with a class with a transparent .gif (since SOMETHING has to serve as the object of the anchor yes?) but here is my css: .rock-link {background-image: url(looks/Rock_small_w_frame.jpg); } .rock-link:hover {background-image: url(looks/Rock_small_w_frame-up.jpg); } .suade-link {background-image: url(looks/Suadey_Ladysmall_w_frame.jpg); } .suade-link:hover {background-image: url(looks/Suadey_Ladysmall_w_frame-up.jpg); } and the HTML is as follows: <a href="suade.html" class="suade-link"><img src="looks/seethru2.gif" border="0"/></a> <img src="looks/spacer2.gif" border="0" /> <a href="rock.html" class="rock"><img src="looks/seethru.gif" border="0" /></a></div> but there is nothing that displays, only the transparent .gif on the index page you will not see any images under the heading "The Dogs" because this is where the problem is, but if you click on any of the links you will see the pages where I have not applied the class for the a href to take on the hover states, just so you can see how the images look and where they appear. I have done this so many times, and my code is IDENTICAL at 3dotmedia.com/redesign and it works fine...any help would be GREATLY appreciated...it has to be something Im missing, but WHAT?!?!? thanks. Please look at this page http://www.tmhdesign3.com and this one http://www.tmhdesign3.com/real-estate-broker.asp The first one used a flash file, the second does not. On the first page I want the dropdown navigation to overlay on the flash but it does not. I played with z-index to no success... Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like: Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Now clicking [+] in front of Google.com will look like. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e. Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting. Here is the source for the above: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>
<style type="text/css">
ul li ul {display:none;list-style-type: none;}
#myNav li a:hover {
color: blue;
}
#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}
#myNav { list-style-image: url(page.GIF); }
</style>
<script type="text/javascript">
<!--
function initNav() {
var navObj = document.getElementById('myNav');
var ulCollection = navObj.getElementsByTagName('li');
for (var loop = 0; loop < ulCollection.length; loop++) {
if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
/* we have an LI that contains a UL */
if (ulCollection[loop].getElementsByTagName('span').length > 0) {
/* there is at least one SPAN tag present */
ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
}
}
}
}
window.onload = initNav;
//-->
</script>
</head>
<body>
<ul id="myNav">
<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
<li><span></span><a href="http://www.google.com">Google.com</a>
<ul>
<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
<ul>
<li>*3*</li>
<li>*4*</li>
</ul>
</li>
</ul>
</li>
<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
<ul>
<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
</ul>
</li>
</ul>
</body>
</html>
Any help is really appreciated thanks. EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears. (My drop down is vertically aligned on the left.) (bits of the code that relate to the menu) PHP Code: .btn1 { position: absolute; left: 165px; top: 200px; } .btn2 { position: absolute; left: 165px; top: 240px; } .btn3 { position: absolute; left: 165px; top: 280px; } .btn4 { position: absolute; left: 165px; top: 320px; } .btn5 { position: absolute; left: 165px; top: 360px; } .btn6 { position: absolute; left: 165px; top: 400px; } .btn7 { position: absolute; left: 165px; top: 440px; } .btn8 { position: absolute; left: 165px; top: 480px; } .link1 { position: absolute; left: auto; top: 240px; } .link2 { position: absolute; left: auto; top: 280px; } .link3 { position: absolute; left: auto; top: 320px; } .link4 { position: absolute; left: auto; top: 360px; } .link5 { position: absolute; left: auto; top: 400px; } .link6 { position: absolute; left: auto; top: 440px; } .link7 { position: absolute; left: auto; top: 480px; } .link8 { position: absolute; left: auto; top: 520px; } .link9 { position: absolute; left: auto; top: 560px; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 100px; } #nav li { width: 100px; } #nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; } #nav li:hover ul { display: block; left: 266px; z-index: 3; } #nav li:over ul { display: block; left: 266px; z-index: 3; } PHP Code: <ul id="nav"> <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li> <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a> <ul> <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li> <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li> <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li> <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li> <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li> </ul> </li> <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a> <ul> <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li> <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li> <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li> <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li> </ul> </li> <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a> <ul> <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li> </ul> </li> <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a> <ul> <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li> <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li> <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li> </ul> </li> <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a> <ul> <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li> <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li> </ul> </li> <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li> <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li> </ul> <script type="text/javascript" src="drop_down.js"></script> the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later. link: The Page I've been looking around for hours now, and I can't find a way to get rid of a slight gap to the left of my flash nav bar (which is inserted in a nested div). Everything is centered and verticaly fluid. code for flash div= #flash { vertical-align: top; margin: 0; padding: 0; height: 111px; width: 875px; } code for centercol div= #centerCol { margin: 0 auto; padding: 0px; width: 875px; background-color: #ffffff; height: 100%; background:url(top_04.jpg) repeat; } html for embeding= <div id="centerCol"> <div id="flash"><OBJECT classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="100%" HEIGHT="100%" id="top_bar" ALIGN="center"> <PARAM NAME=movie VALUE="top_bar.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=scale VALUE=exactfit> <PARAM NAME=wmode VALUE=opaque> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="top_bar.swf" quality=high scale=exactfit wmode=opaque bgcolor=#FFFFFF WIDTH="100%" HEIGHT="100%" NAME="top_bar" ALIGN="center" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT></div> some content </div> Thanks. |
|||||||