|
HTML - Drop Down Nav Issues
Hi all
Im having some serious problems with my drop down menu on the home page of a site... it hides behind the jquery slideshow?! http://www.silver-worldwide.com/dev/onvu/ Does anyone have any idea how i can fix this issue? It works on every other page!! Thanks in advance! Mat Similar TutorialsHi guys. I have a menu on this page, and the last menu item "galleries" drops down a menu when it's hovered over. http://www.dualimagephotography.com/gallery/ But in IE instead of dropping beneath it shoots out to the right. Anyone know why? I don't really mind it so much except it's really hard to hover over the submenu when it goes that way The CSS: ul#nav, ul#nav ul { margin: 0px; padding: 0px; list-style: none; } ul#nav ul { border: 0px solid #999; background-color: transparent; display: none; position: absolute; z-index: 9; } ul#nav li { display: inline; float: left; text-indent: 0px; margin: 0 12px 0 12px; float:right; } ul#nav ul li a { display: block; text-decoration: none; color: #000; padding: 2px; } ul#nav ul li a:hover { background: transparent; color: #fff; } ul#nav li ul { border-bottom: 0px solid #999; background-color: transparent; display: none; position: absolute; z-index: 9; } ul#nav li ul li { display: inline; float: left; text-indent: 0px; margin: 3px 0px 3px 0px; } ul#nav li ul li a { display: block; text-decoration: none; color: #000; padding: 2px; border-bottom: 1px solid #fff; } ul#nav li ul li a:hover { background: transparent; color: #fff; border-bottom: 1px solid #ccc; } ul#nav li li { display: block; float: none; } OK, I have a JavaScript code that toggles between the visibility of a div. When my mouse hovers over an element (lets say an li ), it would display the hidden div, on mouse out it would hide it again. When the drop down becomes visible, I click on any one of its links it takes me to the next page. The problem now is that if I was to then press the back button, the drop down menu would remain up, despite the fact that its not being triggered! Is there a code i'm missing that should correct this? How do I ensure if the user were to hit the back button, the div would reset to its original state? p.s. I had to cut some code out from the html, it exceed the character limit, but all the necessary codes are there. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>facpros</title>
<link rel="stylesheet" type="text/css" href="css1.css" id="default"/>
</head>
<body style="padding-top:0px;margin:0px;padding:0px;background-image:url('images/bg.png')" >
<script type =" text/javascript" src="fac.js" >
</script>
<!--beginning of div top-->
<div id="top"class="topstyle" style="left: 0px; top: 0px; " >
<!--the logo div-->
<div id="logo" style="width:285px; height:110px;position:relative; left: 0px; top: 0px;background-image:url('images/facproslogo.png')">
</div><!--end of logo div-->
<!--begining od facpros def-->
<div id="feder" class="fed" style="float:right; margin:0px; top: -110px;">
<p class="fac" style="position:absolute; width: 565px; left: 81px; top: 6px;"> Federation des Amis Chretiens pour la Promotion Sociale
</p>
</div><!--end of facpros def-->
<!--navigation menu list-->
<div id="Navigation" style="left:0px; top: -110px; float:right;" >
<ul class="nav" >
<li class="nli" id ="home" onclick="window.location.href='home.html'"style="width: 61px" ><a><span>Home</span></a></li>
<li class="nli"id ="about" onmouseover= "fabout('over')" onmouseout="fabout('out')" ><a><span>About Us</span></a>
<ul id="aboutdrop"style="visibility:hidden;position:absolute;list-style:none;z-index:1;top:45px;left:81px;text-align:left;">
<li onclick="window.location.href='about.html'" class="ischild" style=" width:150px;left: 0px; top: 0px;line-height:2em;height:30px;" >
Mission
</li>
<li onclick="window.location.href='leader.html'" class="ischild" style=" width:150px;left: 0px; top: 31px;line-height:2em;height:30px;" >
Leadership
</li>
<li onclick="window.location.href='member.html'" class="ischild" style=" width:150px;left: 0px; top: 62px;line-height:2em;height:30px;" >
Member
</li>
<li onclick="window.location.href='sof.html'" class="ischild" style=" width:150px;left: 0px; top: 93px;line-height:2.3em;height:30px; font-size:13px;" >
Statement Of Faith
</li>
</ul>
</li>
<li class="nli" id ="event" onclick="window.location.href='event.html'"><a><span>Events</span></a></li>
<li class="nli" id ="photo" onclick="window.location.href='photo.html'"><a><span >Gallery</span></a></li>
<li class="nli" id ="contact" onclick="window.location.href='contact.html'"><a><span >Contact Us</span></a></li>
<li class="nli" id ="lang" onmouseover= "flang('over')" onmouseout="flang('out')" ><a><span >Language</span></a>
<ul id="langdrop"style="list-style:none;width:100px; position:absolute; left:351px; top:61px;background-color:transparent;visibility:hidden;z-index:1;">
<li onclick="window.location.href='frhome.html'" class="ischild" style=" width:100px;left: 0px; top: -16px;line-height:2em;height:30px;" >
French
</li>
<li onclick="window.location.href='home.html'" class="ischild"style="width:100px;left:0px; bottom:-47px; height:30px;line-height:2em; ">
English
</li>
</ul>
</li>
</ul><!--navigation ul-->
</div><!--end of navigation menu div-->
</div><!--end of div top-->
</body>
</html>
Code: body{
background-color:gray;
}
p.fac{
font-family:"Lucida Calligraphy"; color:white; position:relative;font-size:large;
margin-left:auto;margin-right:auto;
}
li.ischild{
height:20px;
position:absolute;
text-align:center;
background-color:#f0f0f0;
cursor:pointer;
color:black;
border:thin gray solid;
text-align:left;
padding-left:5px;
}
ul.nav{
font-family:Copperplate33bc;
list-style:none;
padding: 0;
margin: 0; font-size:14px;
height:45px;
}
div.fed{
background-color:maroon;
position:relative;
width:715px;
height:65px;
}
div.topstyle{
top:0px;
background-color:transparent;
height:110px;
width: 1000px;
margin-left:auto;
margin-right:auto;
position:relative;
}
div.topcenter{
background-image:url('images/topcenterbgblue.png');
height:286px;
width: 1000px;
margin-left:auto;
margin-right:auto;
position:relative;
}
div.mbstyle{
background-color:white;
width:1000px;
position:relative;
margin-left:auto;
margin-right:auto;
height:390px;
}
div.bstyle{
background-color:white;
height:100px;
width: 1000px;
margin-left:auto;
margin-right:auto;
position:relative;
}
a:link,a:visited{
text-decoration:none;color:black;
}
a:link.nn,a:visited.nn{
text-decoration:none;
color:#666666;
margin-bottom:auto;
margin-top:auto;
font-family:'Times New Roman', Times, serif;
font-size:small;
}
#Navigation{
width:715px;
position:relative;
background-image:url('images/navbg2.png');
}
li.nli
{
float: left;
display: block;
text-decoration: none;
text-align: center;
padding-left:10px;
padding-right:10px;
width:auto;
height:45px;
line-height:3.5em;
border-right-width:2px;
border-right-style:groove;
border-right-color:#CCCCCC;
cursor:pointer;
background-image:url('images/hoverbg2.png');
}
td{
padding-left:50px;padding-right:100px; margin-bottom:auto;margin-top:auto;font-family:"Times New Roman", Times, serif; color:#666666;
}
#navigation li{
}
.ischild:hover{
height:20px;
position:absolute;
text-align:center;
background-color:#c0c0c0;
cursor:pointer;
color:black;
border:thin gray solid;
text-align:left;
padding-left:5px;
}
.nli:hover{
float: left;
display: block;
text-decoration: none;
text-align: center;
padding-left:10px;
padding-right:10px;
width:auto;
height:45px;
line-height:3.5em;
border-right-width:2px;
border-right-style:groove;
border-right-color:#CCCCCC;
cursor:pointer;
background-image:url('images/hoverbg.png');
color:#990000;
}
Code: function fabout(status)
{
switch(status)
{
case("over"):
{
document.getElementById("aboutdrop").style.visibility ='visible';
}break;
case("out"):
{
document.getElementById("aboutdrop").style.visibility ='hidden';
}break;
}
}//end of fabout
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function flang(status)
{
switch(status)
{
case("over"):
{
document.getElementById("langdrop").style.visibility = "visible";
}break;
case("out"):
{
document.getElementById("langdrop").style.visibility = "hidden";
}break;
}
}//end of flang
Right then... Problem is, uploaded website, thought that it was ok, checked in Firefox, Safari and even icab... did not check IE (rookie) and did IE have problems? Of course. Basically Some of pics are not showing up - mainly in the shop and one or two on the main pages. I cannot work out how to fix, def not broken links, really boring I know, but can anyone help? Link to site: http://www.thefrenchpantry.co.uk much appreciated... I'm experiencing an issue when using DIVs in DIVs.. I have a container-DIV and a content-DIV, and I would like the container-DIV to stretch vertically as necessary based on how much content is in the content-DIV. Code: <html>
<header>
<style type="text/css">
#divContainer{
position:absolute;
top:10px;
left:10px;
height:100%;
width:200px;
background-color:#CCC;
}
#divContent{
position:absolute;
top:10px;
left:10px
width:180px;
background:color:#BBB;
}
</style>
</header>
<body>
<div id="divContainer">
<div id="divContent">
<!-- Fill me with content -->
</div>
</div>
</body>
</html>
This is basically the code I'm using... whenever the content amount pushes the divContent lower than the bottom of the divContainer, it just overflows out and down the page. What am I doing wrong? Edit: OOPS I set height to 100px on the divContainer, it was supposed to be 100% Hello! I'm having quite a problem implementing multiple backgrounds into my website. Simply put I want to have a top bar, that will function as header, and a bottom bar, that will function as a footer. I've tried the following solution but it just doesn't seem to work. The div id "bgBottomDiv" just won't show. I was hoping someone could help me out. HTML: HTML Code: <body> <div id="wrapper"> <div id="bgBottomDiv"> "Content goes here " </div> </div> CSS: Code: #wrapper{
position:relative;
margin:0 auto;
width:1100px;
}
body {
background-image:url(/images/Styler_top.png);
background-attachment: scroll;
background-repeat: repeat-x;
background-position: top;
font-family: arial;
color: #111111;
font-size: 0.75em; /* 12px/16=0.75 em */
word-spacing: 2px;
line-height: 175%;
}
#bgBottomDiv{
background-image: url(images/Styler_top.png);
background-repeat: repeat-x;
background-position: bottom;
}
Thanks in advance! I have a page I created in dream weaver. It displays fine in IE7, but in IE6 it does not. Here is a link to the page: Problem Page If anyone has any ideas, I'd really appreciate it. Alright, so I have this site on which I need a certain part of the site (the content part where the main text bit is) to extend down to the bottom (and preferably no longer), so that if the window is smaller or bigger the text will still just go all the way down to the bottom of the page, and when the text is further down that div will have a scrollbar so you can scroll through the text. The main issue is making it so the end of the div is always on the bottom of the page. (I've tried height=100% on that div but then it just goes below the bottom for some reason.) This is the site. And here's the code: Code: CSS:
div.main { position: absolute;
top: 181px;
left: 110px;
width: 510px;
height: 1500px;
background: url("images/Content Box Bit.png"); }
div.news { position: absolute;
top: 25px;
left: 15px;
width: 494px;
height: 372px;
overflow-x: hidden;
overflow-y: auto; }
Code: HTML:
<div class="main">
<img src="images/News and Updates.png"><div class="news">
<span class="f4"><?php include('sitemapbase.php'); ?></span></div>
</div>
The reason the height of main=1500px is that that's not gonna be scrollable anyway, and I just added a random value to assure that went to the bottom no matter what. Thanks for any help. Wasn't really sure where to put this, sorry if it's the wrong place.. EDIT: Just encountered an additional issue, being that the navigation menus (to the left) look off in IE. The background seems not to start where the div starts. Suggestions? http://www.farewell-travel.com/newsl...rch2012_2.html Why does this look like crap in Internet Explorer? (Specifically talking about the "Highlights" box) It looks fine in firefox but not on IE. I've tried everything to fix it, I don't know what to do! The width dimensions for some reason are way off. It bloats up to 272px when it should be 200px! Please help! Thanks -Please note this is an e-mail newsletter, that is the reason I'm using tables! Arg... IE is bugging me as usual.... Now I've been working on the fantasy football site the past few days getting ready for the fantasy season... but when I look at the site on IE we have a few issues going on... here they a 1. text rendering on the image switcher... why does the text look bold? The info there is using the default font-size of 13px which I set... I'm assuming that probably has something to do with it. 2. The poll part 1 Why on earth is the question indented 6px? The links in the "newest articles" section are set to indent 6px... but I set that on the list... the question of the poll isn't even in a list and it somehow got indented... 3. More crappy text rendering on the poll answers... now I'm seeing the results because I voted and the text looks absolutely horrendous... no idea why either. Any help with these IE crazy things would be greatly appreciated... thanks! Recently made a post concerning tables versus divs, and now I have a site where I think I need to do divs, but not sure how to approach using percentages for the sizing. http://www.pigseldesign.com/cravings.jpg This is the layout. Ideally, I'd like for the middle strip to be vertically centered no matter the browser window height. My guess is to have 3 divs (top, middle, bottom) with 100% and if possible, set the percentages for height so that the top and bottom remain the same ratio of size. If it affects anything, the middle strip is going to be a slideshow Flash object. Any hints for sizing? Hello, I am having a bit of a problem with my tables and am not sure how to resolve it. @ www.scubatoo.net/test.php you will find that the top 3 rows are only 33.3% the width of the table. I understand that this is because the corresponding <tr> below are also 33.3% wide. How can I over come this? Thanks, Ryan Greetings! I am back again. I thought I would repost my previous link as my problems now have nothing to do with Image Location. I have successfully placed my inline frame where I want to! Thanks for all the help getting there. Now I have two issues to deal with. I have enclosed photos to illustrate my problems. #1 There is a white line above my Inline frame. I want to get rid of this but cannot find what in the coding is causing it. #2 To the Right of the window there is a white space I also cannot find the code for. I want both of these issues eliminated. I have tried my best to find the code, really I have. Here is my current code and the images which corrospond to my problem. <!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=ISO-8859-1"> <title>The works of D.M. Rosemark</title> <style type="text/css" media="screen"> <!-- body { background-color: #ffffff; margin: 0px } #horizon { color: white; background-color: transparent; text-align: center; position: absolute; top: 50%; left: 0px; width: 100%; height: 1px; overflow: visible; visibility: visible; display: block } #wrap {margin: 0px auto; width: 1300px; } iframe.one { width: 600px; height: 375px; border-style:ridge; border-width:10px; border-color:#999999; padding:1px; float: left; display: inline; } //--> </style> </head> <body> <div id="wrap"> <img src="topbanner.jpg" alt="Top Banner" style="width: 1260px;"> <div id="innerwrap"> <img src="leftimage.jpg" style="float: left; width: 325px;"> <iframe class="one" frameborder="0" src="http://www.webmasterworld.com/category10.htm" scrolling="yes"> </iframe> <img src="rightimage.jpg" style="float: left; display: inline; width: 325px; "></div> <img src="bottombanner.jpg" alt="Bottom Banner" style="width: 1260px;"></div> </body> </html> Hi, I am working on a wordpress theme and I have made a horizontal drop down menu. For some reason the drop down part has transparency and the text is almost unreadable as it mixes with the text in the main container. Each of the submenus is a list nested in the list item above. Here is the full code for the menu: HTML Code: <ul class="menu">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>
<ul id="nav" class="menu">
<li><a href="<?php bloginfo('url'); ?>">Home<img src="<?php bloginfo('template_url'); ?>/images/icons/home.png" class="menu_icon" alt="Home" border="0" /></a> </li>
<li><a href="#">Facilitators<img src="<?php bloginfo('template_url'); ?>/images/icons/people.png" class="menu_icon" alt="Facilitators" border="0" /><img src="<?php bloginfo('template_url'); ?>/images/icons/arrow.png" class="arrow" alt="Contact Us" border="0" /></a>
<ul>
<li><a href="<?php bloginfo('url'); ?>/narelle-nelles">Narelle Nelles</a></li>
<li><a href="<?php bloginfo('url'); ?>/susan-gregory">Susan Gregory</a></li>
</ul>
</li>
<li><a href="#">Courses<img src="<?php bloginfo('template_url'); ?>/images/icons/courses.png" class="menu_icon" alt="Courses" border="0" /><img src="<?php bloginfo('template_url'); ?>/images/icons/arrow.png" class="arrow" alt="Contact Us" border="0" /></a>
<ul>
<li><a href="<?php bloginfo('url'); ?>/parenting-course">Parenting Course</a></li>
<li><a href="<?php bloginfo('url'); ?>/beyond-behaviour">Beyond Behaviour</a></li>
<li><a href="<?php bloginfo('url'); ?>/staff-training">Staff Training</a></li>
<li><a href="<?php bloginfo('url'); ?>/upcoming-courses">Upcoming Courses</a></li>
</ul>
</li>
<li><a href="#">Register<img src="<?php bloginfo('template_url'); ?>/images/icons/register.png" class="menu_icon" alt="Register" border="0" /><img src="<?php bloginfo('template_url'); ?>/images/icons/arrow.png" class="arrow" border="0" /></a>
<ul>
<li><a href="<?php bloginfo('template_url'); ?>/registration.html" title="Register Online" rel="gb_page_center[390, 490]">Register Online</a></li>
<li><a href="<?php bloginfo('template_url'); ?>/AARCRegistrationForm.doc">Register By Post</a></li>
<li><a href="<?php bloginfo('url'); ?>/registration-terms">Registration Terms</a></li>
</ul>
</li>
<li><a href="<?php bloginfo('template_url'); ?>/photo_gallery.php" rel="gb_page_fs[500, 500]">Photo Gallery<img src="<?php bloginfo('template_url'); ?>/images/icons/photo.png" class="menu_icon" alt="Photo Gallery" border="0" /></a></li>
<li><a href="<?php bloginfo('template_url'); ?>/contact.html" rel="gb_page[280, 380]">Contact Us<img src="<?php bloginfo('template_url'); ?>/images/icons/email.png" class="menu_icon" alt="Contact Us" border="0" /></a></li>
</ul>
CSS Code: ul {
margin-right: 10px;
padding: 0;
list-style: none;
font-size: 12px;
width: 160px;
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 159px;
top: 0;
display: none;
}
.sidebar a{
color: #8b645a;}
ul li a {
display: block;
text-decoration: none;
background: #f1f9e6;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
ul li a:hover{
background: url(images/menu_bg.png) bottom repeat-x;
color: #43951e;}
ul li li a:hover{
background: url(images/menu_bg.png) bottom repeat-x;
color: #43951e;}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
li:hover ul, li.over ul {
display: block; }
I tried defining opacity to full but that does nothing. The problem happens in firefox, ie7, opera, and safari beta 3 for windows. If you could help it would be great!, Ricky what have i done wrong?! http://maysonline.sandlerltd.co.uk if you go to "advice & guidance" menu or any other menu except the home page, basically most of the pages seem to be very odd in IE7 but in IE8 - its fine! any ideas?! What am I missing? I have an iframe on my website, and I want an external link to open my main page and then open a specific page in the iframe, a page other than what is specified in the <iframe>tag, is this possible? Hi all, A website I've been working on seems to be having some issues... Here is the website: www.codenamekingdom.com My issues is that my meta tags do not seem to be being read. For example I tried registering for google webmasters which requires you to add a meta tag and verify it. However it has been over two days and it is still not being able to be verified. Therefore I must assuming there is a problem with the meta tag. However it looks fine to me. Also I registered my url with google yesterday and it showed up for only about 6 hours and then disappeared, but it had been using the information provided with the url NOT the information I provided for search engines in my meta tags. Anyone have any idea why this might be? Appreciate the help ok hiya im wondering if you can sort my problem out? i recently set up a forum for a gaming clan and i have thought of a design that i like but there is a problem.... i have designed a background which can be seen he http://img177.imageshack.us/img177/3...imgcopylm8.jpg btw the middle isnt orange only for thsi sample i made. the only problem is it works perfectly for the resolution of my screen (1280x800) but not on my pc which is 1024x768. because of this it throws the whole of the forum out of line on a different resolution screen. the code for this background is in the css stylesheet but i was wondering if there was a code i could use that would display a different picture depending on the screen resolution i.e. i could rado the image several times to fit each screen resolution. if not gthen is there anyway of haveing a background with those 2 bits on the sides that will work in all of the resolutions?? his is how i want my site to look and how the sides should be and this is how it shows at 1280x800: this is perfect until you view it at any other resolution.lol like this resolution(1024x768): is there anyway of making it look like the top on all of the resoltuions? the link to the site i want to use it on is: www.gusoldiers.forumn.net here is the cxode im currently using (for this part): * { margin: 0px; padding: 0px; } html { background-color: #000001; font-size: 100%; height: 100%; } #min-width { min-width: 750px; } body { background-color: #cce3f3; background: url('http://img177.imageshack.us/img177/339/backgroundimgcopylm8.jpg') repeat-x; background-attachment: fixed; font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */ margin: 0px 0px 0px 0px; padding: 0px; border-color: #862121; border-width: 0px 0px 0px 0px; border-style: solid; } { font-size: 10px; height: auto; padding: 10px 0px; scrollbar-face-color: #; scrollbar-highlight-color: #; scrollbar-shadow-color: #; scrollbar-3dlight-color: #; scrollbar-arrow-color: #; scrollbar-track-color: #; scrollbar-darkshadow-color: #; } * html .conteneur_minwidth_IE { /* Hack IE min-width */ padding-left: 750px; } * html .conteneur_container_IE { /* Hack IE min-width */ margin-left: -750px; position: relative; } * html .conteneur_minwidth_IE, * html .conteneur_container_IE, * html .conteneur_layout_IE { /* Hack IE min-width */ height: 1px; } #wrap { width: 80%; margin: 0px auto; background-color: #1a1a1a; background-image: url(""); background-repeat: repeat-x; background-attachment: fixed; border-color: #46494b; border-width: 0px 0px 0px 0px; border-style: solid; padding: 5px; } #wrapnav { width: 800%; margin: 0; background-color: #ECECEC; border-width: 1px; border-style: solid; border-color: #A9B8C2; To HTML staff, This fake account is pm'ing me AD's and probably other members as well. Thanks, -Aanders5 I am new to the world of web design and i am building http://www.bluephoric.com i am using a bg image on two of the pages and it is throwing off the header alignment. the header jumps around depending what page you are on? i am soo lost as how to fix this. can someone please help thanks Hey All, So I have this frustrating situation illustrated by this screeny: www.kiddyjunction.ca/images/pic.jpg The yellow box (which is an iframe) aligns to center itself between those beige flash tabs on the left, and the other side of the white box, which is PERFECT. However, the logo, represented by the red box, aligns itself to be in the center of the white box, instead of between the edge and the flash material, despite all being in the same container. How do I get the logo to align over the center of the iframe (yellow box)? Thanks! |
|||||||