Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

HTML Problem

  • 23-06-2011 02: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