Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

HTML Problem

Options
  • 23-06-2011 2:51pm
    #1
    lightbulbie
    Closed Accounts Posts: 9 ✭


    Just in the process of designing a site, going well so far, but ive hit a bit of a problem and cant seem to figure out what is wrong, have tried many things but no luck..

    I am using a very basic program which allows me set up my template, anything different i need to use html...

    I have a drop down menu which is working fine, and on one page i have a 'hover over' image, which WAS working perfectly, until i added the drop down menu...now the hover over image is in the wrong place,and is the wrong size too...below is the code im using, first being the dropdown menu (MAROON), the second the hover over image(GREEN)

    any help would be greatly appreciated, thank you

    <head>
    <title>Simple CSS Based Pulldowns</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
    <style type="text/css">
    <!--
    /* set the menu style */
    .menuHead { color: #FFFFFF; font-weight: bold; font-size: 15px; background-color: transparent ;}
    .menuChoices { font-size: 14px;background-color:#303030 ; width: 100px; position:absolute; top: 18; left: -15;}
    .menu a { color: #FFFFFF; text-decoration: none;line-height: 1.50em;}
    .menu a:hover {text-decoration: none;color: #F87217;font-size: 14px;line-height: 1.50em; }
    /* position your menus */
    #menu1 {position: absolute; top: 0px; left: 0px; width: 80px;}
    #menu2 {position: absolute; top: 3px; left: 80px; width: 80px;}
    #menu3 {position: absolute; top: 0px; left: 160px; width: 80px;}
    #menu4 {position: absolute; top: 0px; left: 240px; width: 80px;}
    -->
    </style>
    <script type="text/javascript">
    <!--
    /* we'll only allow DOM browsers to simplify things*/
    (document.getElementById ? DOMCapable = true : DOMCapable = false);
    function hide(menuName)
    {
    if (DOMCapable)
    {
    var theMenu = document.getElementById(menuName+"choices");
    theMenu.style.visibility = 'hidden';
    }
    }
    function show(menuName)
    {
    if (DOMCapable)
    {
    var theMenu = document.getElementById(menuName+"choices");
    theMenu.style.visibility = 'visible';
    }
    }
    //-->
    </script>
    </head>
    <body dir="rtl">
    <div id="menu1" dir="rtl" class="menu">
    <div class="menuHead"><a href="index.html">Home</a></div>
    <div id="menu1choices" class="menuChoices">
    </div>
    </div>
    <div id="menu2" dir="rtl" class="menu" onmouseover="show('menu2');" onmouseout="hide('menu2');">
    <div class="menuHead">Projects</div>
    <div id="menu2choices" class="menuChoices">
    <a href="page2.html">Residential</a><br />
    <a href="page3.html">Commercial</a><br />
    <a href="http://www.ebay.com">Community</a><br />
    <a href="http://www.buy.com">Conservation</a><br />
    </div>
    </div>
    <div id="menu3" dir="rtl" class="menu">
    <div class="menuHead"><a href="page5.html">Practice</a></div>
    <div id="menu3choices" class="menuChoices">
    <a href="http://www.ebay.com">Contacts</a&gt;
    </div>
    </div>
    <div id="menu4" dir="rtl" class="menu">
    <div class="menuHead"><a href="page6.html">Contacts</a></div>
    <div id="menu4choices" class="menuChoices">
    </div>
    </div>
    </div>
    <script type="text/javascript">
    <!--
    /* Don't hide menus for JS off and older browsers */
    if (DOMCapable)
    {
    hide("menu1");
    hide("menu2");
    hide("menu3");
    hide("menu4");
    }
    //-->
    </script>
    </body>
    </html>


    <HTML>
    <HEAD>
    <title>Image Hover</title>
    <script type="text/javascript">
    function Show_Image(IDS) {
    document.getElementById(IDS).style.display = "block";
    }
    function Hide_Image(IDS) {
    document.getElementById(IDS).style.display = "none";
    }
    </script>
    </HEAD>
    <BODY><a href=" page11.html"
    onMouseOver="Show_Image('Img10');" onMouseOut="Hide_Image('Img10')">
    <table border=0 ="opacity:0.4;filter:alpha(opacity=40)"width=125 height=97>
    <tr><td></td></tr>
    </table>
    <span id="Img10" style="display:none">
    <div
    style="
    top: -417;
    left: -372;
    position: absolute;
    z-index: 1;
    object.style.visibility="visible""><img src=" 33.jpg" title=" 33.jpg" width="654" height="519" hspace="10" vspace="10" align="left" border="0" /></div></span>

    </BODY>
    </HTML>


Advertisement