SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Please help someone to solve the drop down menu issue

    I'm a newbie in webdesigning & programming, I'm trying to make a website with semi transparent drop down menu, when i'm changing the webpage to center, sub menus are not working fine.

    Everything is fine, when the page is in left
    check this link


    When the webpage is in center, sub menus are not positioning correctlycheck this link

    I dont have that much idea about CSS and all
    Please help someone to solve the issue,

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi KILLERR. Welcome to SitePoint.

    To be honest, there are much better ways to do a dropdown list.

    Anyhow, what are you using to create the submenu? Is it a program? The left-hand settings on those sub menus differ from page to page. How is this being created?

  3. #3
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi KILLERR. Welcome to SitePoint.

    To be honest, there are much better ways to do a dropdown list.

    Anyhow, what are you using to create the submenu? Is it a program? The left-hand settings on those sub menus differ from page to page. How is this being created?
    thanks ralph.m.......

    i just copied from another website like code, images etc. I need to make a same transparent drop down menu. Is that possible?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    That's an ancient script and not the best way to make a dropdowns these days. That page also has loads of errors and a doctype that sends IE into spasms.

    There's too much for me to tidy up at the moment and would be easier to start from scratch than try to fix that page I'm afraid.

    You can get the menu working though by closing the table and the divs properly after the menu. The submenu should not be nested in any main containers or it gets its positions wrong.

    This is what the bottom of the menu should look like.

    Code:
                                <td class="last38"><a id="menu3852" href="#" ><img class="seq1" border="0"  src="http://www.ftplogin.info/menu/images/home_d.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /><img class="seq2" border="0"  src="http://www.ftplogin.info/menu/images/home.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /></a> </td>
                            </tr>
                        </table>
                    </div></td>
            </tr>
        </table>
    </div>
    <div id="subwrap38">
        <script type="text/javascript">
    <!--

    You probably also need to move the flash inside the container. Here's the whole code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta name="generator" content="Web Page Maker">
    <style type="text/css">
    div#container {
        position:relative;
        width: 1024px;
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        text-align:left;
    }
    body {
        text-align:center;
        margin:0
    }
    </style>
    <style type='text/css'>
    <!--
    .transMenu38 {
        position:absolute;
        overflow:hidden;
        left:-1000px;
        top:-1000px;
    }
    .transMenu38 .content {
        position:absolute;
    }
    .transMenu38 .items {
        width: 160px;
        border: 0px solid;
        position:relative;
        left:0px;
        top:0px;
        z-index:2;
    }
    .transMenu38 td {
        padding: 5px 5px 5px 5px !important;
        font-size: 12px !important;
        font-family: Arial, Helvetica, sans-serif !important;
        text-align: left !important;
        font-weight: normal !important;
        color: #000000 !important;
    }
    #subwrap38 {
        text-align: left;
    }
    .transMenu38 .item.hover td {
        color: #FFffff !important;
    }
    .transMenu38 .item {
        height: 20px;
        text-decoration: none;
        cursor:pointer;
    }
    .transMenu38 .background {
        background-color: #ffffff !important;
        position:absolute;
        left:0px;
        top:0px;
        z-index:1;
        opacity:0.6;
        filter:alpha(opacity=60)
    }
    .transMenu38 .shadowRight {
        position:absolute;
        z-index:3;
        top:-3000px;
        width:2px;
        opacity:0.6;
        filter:alpha(opacity=60)
    }
    .transMenu38 .shadowBottom {
        position:absolute;
        z-index:1;
        left:-3000px;
        height:2px;
        opacity:0.6;
        filter:alpha(opacity=60)
    }
    .transMenu38 .item.hover {
        background-color: #666666 !important;
    }
    .transMenu38 .item img {
        margin-left:10px !important;
    }
    table.menu38 {
        top: 0px;
        left: 0px;
        position:relative;
        margin:0px !important;
        border: 0px solid;
        z-index: 1;
    }
    table.menu38 a {
        margin:0px !important;
        padding: 5px 5px 5px 5px !important;
        display:block !important;
        position:relative !important;
    }
    div.menu38 a, div.menu38 a:visited, div.menu38 a:link {
        font-size: 12px !important;
        font-family: Arial, Helvetica, sans-serif !important;
        text-align: left !important;
        font-weight: normal !important;
        text-decoration: none !important;
        margin-bottom:0px !important;
        display:block !important;
        white-space:nowrap;
    }
    div.menu38 td {
        border-bottom: 0px solid;
        border-top: 0px solid;
        border-left: 0px solid;
        background-color: #FFFFFF !important;
    }
    div.menu38 td.last38 {
        border-right: 0px solid;
    }
    #trans-active38 a {
        background-color: #FFFFFF !important;
    }
    #menu38 a.hover {
        background-color: #FFFFFF !important;
        display:block;
    }
    #menu38 span {
        display:none;
    }
    #menu38 a img.seq1, .transMenu38 img.seq1, {
     display:    inline;
    }
    #menu38 a.hover img.seq2, .transMenu38 .item.hover img.seq2 {
        display:   inline;
    }
    #menu38 a.hover img.seq1, #menu38 a img.seq2, .transMenu38 img.seq2, .transMenu38 .item.hover img.seq1 {
        display:   none;
    }
    #trans-active38 a img.seq1 {
        display: none;
    }
    #trans-active38 a img.seq2 {
        display: inline;
    }
    #subwrap38 #TransMenu0-0 {
        text-align: left !important;
        text-decoration: none !important;
        text-transform: none;
        white-space: normal;
        text-indent: 0px;
        padding: 5px 5px 5px 5px !important;
        font-size: 12px !important;
        font-style: left !important;
        font-weight: none !important;
        font-family: Arial, Helvetica, sans-serif !important;
        border-bottom: 1px solid #333333 !important;
    }
    #subwrap38 .item.hover #TransMenu0-0, #subwrap38 #TransMenu0-0:hover {
        border-bottom: 1px solid #333333 !important;
    }
    #subwrap38 #TransMenu0-1 {
        border-bottom: 1px solid #333333 !important;
    }
    #subwrap38 .item.hover #TransMenu0-1, #subwrap38 #TransMenu0-1:hover {
        border-bottom: 1px solid #333333 !important;
    }
    #subwrap38 #TransMenu0-2 {
        border-bottom: 1px solid #333333 !important;
    }
    #subwrap38 .item.hover #TransMenu0-2, #subwrap38 #TransMenu0-2:hover {
        border-bottom: 1px solid #333333 !important;
    }
    #subwrap38 #TransMenu0-3 {
        border-bottom: 1px solid #333333 !important
    }
    #subwrap38 .item.hover #TransMenu0-3, #subwrap38 #TransMenu0-3:hover {;
        border-bottom: 1px solid #333333 !important
    }
    #subwrap38 #TransMenu1-0 {
        border-bottom: 1px solid #333333 !important;
    }
    #subwrap38 .item.hover #TransMenu1-0, #subwrap38 #TransMenu1-0:hover {
        border-bottom: 1px solid #333333 !important;
    }
    #subwrap38 #TransMenu1-1 {
        border-bottom: 1px solid #333333 !important;
    }
    #subwrap38 .item.hover #TransMenu1-1, #subwrap38 #TransMenu1-1:hover {
        border-bottom: 1px solid #333333 !important;
    }
    #subwrap38 #TransMenu1-2 {
        border-bottom: 1px solid #333333 !important;
    }
    #subwrap38 .item.hover #TransMenu1-2, #subwrap38 #TransMenu1-2:hover {
        border-bottom: 1px solid #333333 !important
    }
    #subwrap38 .item.hover #TransMenu1-3, #subwrap38 #TransMenu1-3:hover {
    }
    #subwrap38 #TransMenu2-0 {
        border-bottom: 1px solid #333333 !important
    }
    #subwrap38 .item.hover #TransMenu2-0, #subwrap38 #TransMenu2-0:hover {
        border-bottom: 1px solid #333333 !important
    }
    #subwrap38 #TransMenu2-1 {
        border-bottom: 1px solid #333333 !important
    }
    #subwrap38 .item.hover #TransMenu2-1, #subwrap38 #TransMenu2-1:hover {
        border-bottom: 1px solid #333333 !important
    }
    #subwrap38 #TransMenu2-2 {
        border-bottom: 1px solid #333333 !important
    }
    #subwrap38 .item.hover #TransMenu2-2, #subwrap38 #TransMenu2-2:hover {
        border-bottom: 1px solid #333333 !important
    }
    -->
    </style>
    </head>
    <body background="http://www.ftplogin.info/menu/images/bg.jpg" bgColor="#C0C0C0">
    <div id="container">
        <div id="image1" style="position:absolute; overflow:hidden; left:-13px; top:-1px; width:145px; height:126px; z-index:0"><img src="http://www.ftplogin.info/menu/images/paste47.jpg" alt="" title="" border=0 width=145 height=126></div>
        <table width="1024" border="0" cellspacing="2" cellpadding="2">
            <tr> <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <td valign="center" width="100%"><!--swMenuPro6.0 transmenu-->
                    <script type="text/javascript" src="http://www.ftplogin.info/menu/images/transmenu_Packed.js"></script>
                    <div id="wrap38" class="menu38" align="left">
                        <table cellspacing="0" cellpadding="0" id="menu38" class="menu38" >
                            <tr>
                                <td id='trans-active38'><a id="menu381" href="#" ><img class="seq1" border="0"  src="http://www.ftplogin.info/menu/images/home_d.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /><img class="seq2" border="0"  src="http://www.ftplogin.info/menu/images/home.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /></a> </td>
                                <td><a id="menu3826" href="#" ><img class="seq1" border="0"  src="http://www.ftplogin.info/menu/images/home_d.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /><img class="seq2" border="0"  src="http://www.ftplogin.info/menu/images/home.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /></a> </td>
                                <td><a id="menu3847" href="#" ><img class="seq1" border="0"  src="http://www.ftplogin.info/menu/images/home_d.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /><img class="seq2" border="0"  src="http://www.ftplogin.info/menu/images/home.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /></a> </td>
                                <td><a id="menu3828" href="#" ><img class="seq1" border="0"  src="http://www.ftplogin.info/menu/images/home_d.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /><img class="seq2" border="0"  src="http://www.ftplogin.info/menu/images/home.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /></a> </td>
                                <td><a id="menu3848" href="#" ><img class="seq1" border="0"  src="http://www.ftplogin.info/menu/images/home_d.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /><img class="seq2" border="0"  src="http://www.ftplogin.info/menu/images/home.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /></a> </td>
                                <td><a id="menu3839" href="#" ><img class="seq1" border="0"  src="http://www.ftplogin.info/menu/images/home_d.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /><img class="seq2" border="0"  src="http://www.ftplogin.info/menu/images/home.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /></a> </td>
                                <td class="last38"><a id="menu3852" href="#" ><img class="seq1" border="0"  src="http://www.ftplogin.info/menu/images/home_d.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /><img class="seq2" border="0"  src="http://www.ftplogin.info/menu/images/home.png" vspace="0" hspace="0" width="43" height="31" align="middle" alt="Home" /></a> </td>
                            </tr>
                        </table>
                    </div></td>
            </tr>
        </table>
        <div id="html1" style="position:absolute; overflow:hidden; left:0px; top:172px; width:1006px; height:444px; z-index:1;">
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab
    #version=7,0,0,0" width="1006" height="424">
                <param name="movie" value="http://www.ftplogin.info/menu/newmain.swf" />
                <param name="wmode" value="transparent" />
                <param name="play" VALUE="true" />
                <param name="loop" VALUE="true" />
                <param name="quality" value="low" />
                <embed src="http://www.ftplogin.info/menu/newmain.swf" quality="low" wmode="transparent"
    pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-
    shockwave-flash" width="1006" height="424"> </embed>
            </object>
        </div>
    </div>
    <div id="subwrap38">
        <script type="text/javascript">
    <!--
    if (TransMenu.isSupported()) {
    var ms = new TransMenuSet(TransMenu.direction.down, 0,4, TransMenu.reference.bottomLeft);
    var menu3826 = ms.addMenu(document.getElementById("menu3826"));
     menu3826.addItem("Submenu1", "#", "0");
    menu3826.addItem("Submenu2", "#", "0");
    menu3826.addItem("Submenu3", "#", "0");
    menu3826.addItem("Submenu4", "#", "0");
    menu3826.addItem("Submenu5", "#", "0");
    menu3826.addItem("Submenu6", "#", "0");
    var menu3847 = ms.addMenu(document.getElementById("menu3847"));
     menu3847.addItem("Submenu1", "#", "0");
    menu3847.addItem("Submenu2", "#", "0");
    menu3847.addItem("Submenu3", "#", "0");
    menu3847.addItem("Submenu4", "#", "0");
    var menu3848 = ms.addMenu(document.getElementById("menu3848"));
     menu3848.addItem("Submenu1", "#", "0");
    menu3848.addItem("Submenu2", "#", "0");
    menu3848.addItem("Submenu3", "#", "0");
    menu3848.addItem("Submenu4", "#", "0");
    function init38() {
    if (TransMenu.isSupported()) {
    TransMenu.initialize();
    document.getElementById("menu381").onmouseover = function() {
    ms.hideCurrent();
    this.className = "hover";
    }
    document.getElementById("menu381").onmouseout = function() { this.className = ""; }
    menu3826.onactivate = function() {document.getElementById("menu3826").className = "hover"; };
     menu3826.ondeactivate = function() {document.getElementById("menu3826").className = ""; };
     menu3847.onactivate = function() {document.getElementById("menu3847").className = "hover"; };
     menu3847.ondeactivate = function() {document.getElementById("menu3847").className = ""; };
     document.getElementById("menu3828").onmouseover = function() {
    ms.hideCurrent();
    this.className = "hover";
    }
    document.getElementById("menu3828").onmouseout = function() { this.className = ""; }
    menu3848.onactivate = function() {document.getElementById("menu3848").className = "hover"; };
     menu3848.ondeactivate = function() {document.getElementById("menu3848").className = ""; };
     document.getElementById("menu3839").onmouseover = function() {
    ms.hideCurrent();
    this.className = "hover";
    }
    document.getElementById("menu3839").onmouseout = function() { this.className = ""; }
    document.getElementById("menu3852").onmouseover = function() {
    ms.hideCurrent();
    this.className = "hover";
    }
    document.getElementById("menu3852").onmouseout = function() { this.className = ""; }
    }}
    TransMenu.spacerGif = "http://www.ftplogin.info/menu/images/x.gif";
    TransMenu.dingbatOn = "http://www.ftplogin.info/menu/images/submenu-on.gif";
    TransMenu.dingbatOff = "http://www.ftplogin.info/menu/images/submenu-off.gif";
    TransMenu.sub_indicator = true;
    TransMenu.menuPadding = 0;
    TransMenu.itemPadding = 0;
    TransMenu.shadowSize = 2;
    TransMenu.shadowOffset = 3;
    TransMenu.shadowColor = "#888";
    TransMenu.shadowPng = "http://www.ftplogin.info/menu/images/grey-40.png";
    TransMenu.backgroundColor = "#ffffff";
    TransMenu.backgroundPng = "http://www.ftplogin.info/menu/images/white-90.png";
    TransMenu.hideDelay = 600;
    TransMenu.slideTime = 300;
    TransMenu.modid = 38;
    TransMenu.selecthack = 0;
    TransMenu.autoposition = 0;
    TransMenu.renderAll();
    if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", init38, false );
    else if ( typeof window.attachEvent != "undefined" ) {
    window.attachEvent( "onload", init38 );
    }else{
    if ( window.onload != null ) {
    var oldOnload = window.onload;
    window.onload = function ( e ) {
    oldOnload( e );
    init38();
    }
    }else
    window.onload = init38();
    }
    }
    -->
    </script>
    </div>
    </body>
    </html>
    But in all honesty you would be better off using the suckerfish menu (enhanced with superfish if you need the extras) and then dropping the tables and using css for the layout. There's no need for all those nested table and a simple wrapper and menu in a un-ordered list would do.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Here's the layout without the table and still using your menu (but I haven't touched most of the css).

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript" src="http://www.ftplogin.info/menu/images/transmenu_Packed.js"></script>
    <style type="text/css">
    html, body {
        text-align:center;
        margin:0;
        padding:0;
    }
    body {
        background:#c0c0c0 url(http://www.ftplogin.info/menu/images/bg.jpg) repeat-x 0 0;
    }
    #container {
        position:relative;
        width: 1008px;
        margin:100px auto 20px;
        text-align:left;
    }
    #flash {
        position:relative;
        overflow:hidden;
        width:1006px;
        height:444px;
        z-index:1;
        border:1px solid #000;
        clear:both;
    }
    .menu38 {
        margin:0 0 0 10px;
        padding:0;
        list-style:none;
        float:left;
    }
    .menu38 li, .menu38 a, .menu38 img {
        float:left;
    }
    .transMenu38 {
        position:absolute;
        overflow:hidden;
        left:-1000px;
        top:-1000px;
    }
    .transMenu38 .content {
        position:absolute;
    }
    .transMenu38 .items {
        width: 160px;
        border: 0px solid;
        position:relative;
        left:0px;
        top:0px;
        z-index:2;
    }
    .transMenu38 td {
        padding: 5px 5px 5px 5px !important;
        font-size: 12px !important;
        font-family: Arial, Helvetica, sans-serif !important;
        text-align: left !important;
        font-weight: normal !important;
        color: #000000 !important;
    }
    #subwrap38 {
        text-align: left;
    }
    .transMenu38 .item.hover td {
        color: #FFffff !important;
    }
    .transMenu38 .item {
        height: 20px;
        text-decoration: none;
        cursor:pointer;
    }
    .transMenu38 .background {
        background-color: #ffffff !important;
        position:absolute;
        left:0px;
        top:0px;
        z-index:1;
        opacity:0.6;
        filter:alpha(opacity=60)
    }
    .transMenu38 .shadowRight {
        position:absolute;
        z-index:3;
        top:-3000px;
        width:2px;
        opacity:0.6;
        filter:alpha(opacity=60)
    }
    .transMenu38 .shadowBottom {
        position:absolute;
        z-index:1;
        left:-3000px;
        height:2px;
        opacity:0.6;
        filter:alpha(opacity=60)
    }
    .transMenu38 .item.hover {
        background-color: #666666 !important;
    }
    .transMenu38 .item img {
        margin-left:10px !important;
    }
    table.menu38 {
        top: 0px;
        left: 0px;
        position:relative;
        margin:0px !important;
        border: 0px solid;
        z-index: 1;
    }
    table.menu38 a {
        margin:0px !important;
        padding: 5px 5px 5px 5px !important;
        display:block !important;
        position:relative !important;
    }
    div.menu38 a, div.menu38 a:visited, div.menu38 a:link {
        font-size: 12px !important;
        font-family: Arial, Helvetica, sans-serif !important;
        text-align: left !important;
        font-weight: normal !important;
        text-decoration: none !important;
        margin-bottom:0px !important;
        display:block !important;
        white-space:nowrap;
    }
    div.menu38 td {
        border-bottom: 0px solid;
        border-top: 0px solid;
        border-left: 0px solid;
        background-color: #FFFFFF !important;
    }
    div.menu38 td.last38 {
        border-right: 0px solid;
    }
    #trans-active38 a {
        background-color: #FFFFFF !important;
    }
    #menu38 a.hover {
        background-color: #FFFFFF !important;
        display:block;
    }
    #menu38 span {
        display:none;
    }
    #menu38 a img.seq1, .transMenu38 img.seq1, {
     display:    inline;
    }
    #menu38 a.hover img.seq2, .transMenu38 .item.hover img.seq2 {
        display:   inline;
    }
    #menu38 a.hover img.seq1, #menu38 a img.seq2, .transMenu38 img.seq2, .transMenu38 .item.hover img.seq1 {
        display:   none;
    }
    #trans-active38 a img.seq1 {
        display: none;
    }
    #trans-active38 a img.seq2 {
        display: inline;
    }
    #subwrap38 #TransMenu0-0 {
        text-align: left !important;
        text-decoration: none !important;
        text-transform: none;
        white-space: normal;
        text-indent: 0px;
        padding: 5px 5px 5px 5px !important;
        font-size: 12px !important;
        font-style: left !important;
        font-weight: none !important;
        font-family: Arial, Helvetica, sans-serif !important;
    /*    border-bottom: 1px solid #333333 !important;*/
    }
    /*
    #subwrap38 .item.hover #TransMenu0-0, #subwrap38 #TransMenu0-0:hover {
        border-bottom: 1px solid #333333 !important;
    }
    #subwrap38 #TransMenu0-1 {
        border-bottom: 1px solid #333333 !important;
    }
    #subwrap38 .item.hover #TransMenu0-1, #subwrap38 #TransMenu0-1:hover {
        border-bottom: 1px solid #333333 !important;
    }
    #subwrap38 #TransMenu0-2 {
        border-bottom: 1px solid #333333 !important;
    }
    #subwrap38 .item.hover #TransMenu0-2, #subwrap38 #TransMenu0-2:hover {
        border-bottom: 1px solid #333333 !important;
    }
    #subwrap38 #TransMenu0-3 {
        border-bottom: 1px solid #333333 !important
    }
    #subwrap38 .item.hover #TransMenu0-3, #subwrap38 #TransMenu0-3:hover {;
        border-bottom: 1px solid #333333 !important
    }
    #subwrap38 #TransMenu1-0 {
        border-bottom: 1px solid #333333 !important;
    }
    #subwrap38 .item.hover #TransMenu1-0, #subwrap38 #TransMenu1-0:hover {
        border-bottom: 1px solid #333333 !important;
    }
    #subwrap38 #TransMenu1-1 {
        border-bottom: 1px solid #333333 !important;
    }
    #subwrap38 .item.hover #TransMenu1-1, #subwrap38 #TransMenu1-1:hover {
        border-bottom: 1px solid #333333 !important;
    }
    #subwrap38 #TransMenu1-2 {
        border-bottom: 1px solid #333333 !important;
    }
    #subwrap38 .item.hover #TransMenu1-2, #subwrap38 #TransMenu1-2:hover {
        border-bottom: 1px solid #333333 !important
    }
    #subwrap38 .item.hover #TransMenu1-3, #subwrap38 #TransMenu1-3:hover {
    }
    #subwrap38 #TransMenu2-0 {
        border-bottom: 1px solid #333333 !important
    }
    #subwrap38 .item.hover #TransMenu2-0, #subwrap38 #TransMenu2-0:hover {
        border-bottom: 1px solid #333333 !important
    }
    #subwrap38 #TransMenu2-1 {
        border-bottom: 1px solid #333333 !important
    }
    #subwrap38 .item.hover #TransMenu2-1, #subwrap38 #TransMenu2-1:hover {
        border-bottom: 1px solid #333333 !important
    }
    #subwrap38 #TransMenu2-2 {
        border-bottom: 1px solid #333333 !important
    }
    #subwrap38 .item.hover #TransMenu2-2, #subwrap38 #TransMenu2-2:hover {
        border-bottom: 1px solid #333333 !important
    }
    */
    </style>
    </head>
    <body>
    <div id="container">
        <ul id="menu38" class="menu38" >
            <li id='trans-active38'> <a id="menu381" href="#" ><img class="seq1"   src="http://www.ftplogin.info/menu/images/home_d.png" width="43" height="31"  alt="Home" /><img class="seq2" src="http://www.ftplogin.info/menu/images/home.png" width="43" height="31"  alt="Home" /></a></li>
            <li><a id="menu3826" href="#" ><img class="seq1" src="http://www.ftplogin.info/menu/images/home_d.png" width="43" height="31"  alt="Home" /><img class=" seq2" src="http://www.ftplogin.info/menu/images/home.png" width="43" height="31"  alt="Home" /></a></li>
            <li> <a id="menu3847" href="#" ><img class="seq1" src="http://www.ftplogin.info/menu/images/home_d.png" width="43" height="31"  alt="Home" /><img class=" seq2" src="http://www.ftplogin.info/menu/images/home.png" width="43" height="31"  alt="Home" /></a></li>
            <li><a id="menu3828" href="#" ><img class="seq1" src="http://www.ftplogin.info/menu/images/home_d.png" width="43" height="31"  alt="Home" /><img class="seq2" src="http://www.ftplogin.info/menu/images/home.png" width="43" height="31"  alt="Home" /></a> </li>
            <li><a id="menu3848" href="#" ><img class="seq1" src="http://www.ftplogin.info/menu/images/home_d.png" width="43" height="31"  alt="Home" /><img class=" seq2" src="http://www.ftplogin.info/menu/images/home.png" width="43" height="31"  alt="Home" /></a> </li>
            <li><a id="menu3839" href="#" ><img class="seq1" src="http://www.ftplogin.info/menu/images/home_d.png" width="43" height="31"  alt="Home" /><img class=" seq2" src="http://www.ftplogin.info/menu/images/home.png" width="43" height="31"  alt="Home" /></a> </li>
            <li class="last38"><a id="menu3852" href="#" ><img class="seq1" src="http://www.ftplogin.info/menu/images/home_d.png" width="43" height="31"  alt="Home" /><img class=" seq2" src="http://www.ftplogin.info/menu/images/home.png" width="43" height="31"  alt="Home" /></a> </li>
        </ul>
        <div id="flash">
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab
    #version=7,0,0,0" width="1006" height="424">
                <param name="movie" value="http://www.ftplogin.info/menu/newmain.swf" />
                <param name="wmode" value="transparent" />
                <param name="play" VALUE="true" />
                <param name="loop" VALUE="true" />
                <param name="quality" value="low" />
                <embed src="http://www.ftplogin.info/menu/newmain.swf" quality="low" wmode="transparent"
    pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-
    shockwave-flash" width="1006" height="424"> </embed>
            </object>
        </div>
    </div>
    <div id="subwrap38">
        <script type="text/javascript">
    <!--
    if (TransMenu.isSupported()) {
    var ms = new TransMenuSet(TransMenu.direction.down, 0,4, TransMenu.reference.bottomLeft);
    var menu3826 = ms.addMenu(document.getElementById("menu3826"));
     menu3826.addItem("Submenu1", "#", "0");
    menu3826.addItem("Submenu2", "#", "0");
    menu3826.addItem("Submenu3", "#", "0");
    menu3826.addItem("Submenu4", "#", "0");
    menu3826.addItem("Submenu5", "#", "0");
    menu3826.addItem("Submenu6", "#", "0");
    var menu3847 = ms.addMenu(document.getElementById("menu3847"));
     menu3847.addItem("Submenu1", "#", "0");
    menu3847.addItem("Submenu2", "#", "0");
    menu3847.addItem("Submenu3", "#", "0");
    menu3847.addItem("Submenu4", "#", "0");
    var menu3848 = ms.addMenu(document.getElementById("menu3848"));
     menu3848.addItem("Submenu1", "#", "0");
    menu3848.addItem("Submenu2", "#", "0");
    menu3848.addItem("Submenu3", "#", "0");
    menu3848.addItem("Submenu4", "#", "0");
    function init38() {
    if (TransMenu.isSupported()) {
    TransMenu.initialize();
    document.getElementById("menu381").onmouseover = function() {
    ms.hideCurrent();
    this.className = "hover";
    }
    document.getElementById("menu381").onmouseout = function() { this.className = ""; }
    menu3826.onactivate = function() {document.getElementById("menu3826").className = "hover"; };
     menu3826.ondeactivate = function() {document.getElementById("menu3826").className = ""; };
     menu3847.onactivate = function() {document.getElementById("menu3847").className = "hover"; };
     menu3847.ondeactivate = function() {document.getElementById("menu3847").className = ""; };
     document.getElementById("menu3828").onmouseover = function() {
    ms.hideCurrent();
    this.className = "hover";
    }
    document.getElementById("menu3828").onmouseout = function() { this.className = ""; }
    menu3848.onactivate = function() {document.getElementById("menu3848").className = "hover"; };
     menu3848.ondeactivate = function() {document.getElementById("menu3848").className = ""; };
     document.getElementById("menu3839").onmouseover = function() {
    ms.hideCurrent();
    this.className = "hover";
    }
    document.getElementById("menu3839").onmouseout = function() { this.className = ""; }
    document.getElementById("menu3852").onmouseover = function() {
    ms.hideCurrent();
    this.className = "hover";
    }
    document.getElementById("menu3852").onmouseout = function() { this.className = ""; }
    }}
    TransMenu.spacerGif = "http://www.ftplogin.info/menu/images/x.gif";
    TransMenu.dingbatOn = "http://www.ftplogin.info/menu/images/submenu-on.gif";
    TransMenu.dingbatOff = "http://www.ftplogin.info/menu/images/submenu-off.gif";
    TransMenu.sub_indicator = true;
    TransMenu.menuPadding = 0;
    TransMenu.itemPadding = 0;
    TransMenu.shadowSize = 2;
    TransMenu.shadowOffset = 3;
    TransMenu.shadowColor = "#888";
    TransMenu.shadowPng = "http://www.ftplogin.info/menu/images/grey-40.png";
    TransMenu.backgroundColor = "#ffffff";
    TransMenu.backgroundPng = "http://www.ftplogin.info/menu/images/white-90.png";
    TransMenu.hideDelay = 600;
    TransMenu.slideTime = 300;
    TransMenu.modid = 38;
    TransMenu.selecthack = 0;
    TransMenu.autoposition = 0;
    TransMenu.renderAll();
    if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", init38, false );
    else if ( typeof window.attachEvent != "undefined" ) {
    window.attachEvent( "onload", init38 );
    }else{
    if ( window.onload != null ) {
    var oldOnload = window.onload;
    window.onload = function ( e ) {
    oldOnload( e );
    init38();
    }
    }else
    window.onload = init38();
    }
    }
    -->
    </script>
    </div>
    </body>
    </html>
    Still miles too much code though.

  6. #6
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks alot paul for ur support
    Still problem..............
    is there any other program or software to make the semi transparent drop down menu?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by KILLERR View Post
    thanks alot paul for ur support
    Still problem..............

    No there is no problem in my versions - just copy and paste my code and view in a browser and you will see it working immediately.

    If its not working for you then you have copied it incorrectly or not quite understood what to do.

    I've looked at your page again and you haven't made the changes I specified. I spent a lot of time on this and I know it is working and as I say just grab the code from my post save in notepad and then run in a browser and it will work immediately. You can then determine where your page differs from my code and get it working.

    There's no point in throwing some different code at this until you tidy up the page and have a valid structure so that things have a small chance of working correctly

  8. #8
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot Paul'O'B

    Now, submenus are working fine, but in menu blue border is coming, how can i remove this?

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Could you provide an up-to-date link so we can see what you are talking about?

  10. #10
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Could you provide an up-to-date link so we can see what you are talking about?

    check this link

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Try adding this to your style sheet:

    Code:
    #menu38 img {
        border: none;
    }

  12. #12
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Try adding this to your style sheet:

    Code:
    #menu38 img {
        border: none;
    }

    thanks alot ralph.m & paul everything is working fine now

  13. #13
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have a problem with my arabic menu. In Internet explorer everything is working fine. When i open in other browers like chrome or safari. Menu's position is totally changing.

    please open in internet explorer and chrome or any other browsers to see the difference

    this is the link http://www.royalholidays-kw.com/menu/arabictest.php

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    If you just mean the top position of the menu then its because of a collsping margin here:

    Code:
    #container {
        margin: 0 auto 20px;
    Change the 20px to zero and the menu should sit on the image better.

    Code:
    #container {
        margin: 0 auto;

    You do have deeper issues though and you are serving the page in quirks mode due to the shortened doctype and that BOM that you have output before it.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    Remove the BOM and then use a full doctype.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Reverting to standards mode may have far reaching consequences on an already built page, however you should not code in quirks mode in this day and age.

  15. #15
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot Paul its working fine
    One more question -
    how can change the scroll bar from right to left?
    When i put "<html dir="rtl" lang="ar">" scroll bar is coming left but again menu is having some problem.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    HI, I don't have much experience with rtl but you could try setting the menu back to ltr.

    e.g.
    Code:
    #html1{direction:ltr}

  17. #17
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks paul........
    Now working, But sub menus are coming on the center. Is there any way to change that text to left.
    Please check the link http://www.royalholidays-kw.com/menu/arabictest.php

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    It looks as though the text is aligned left but you have some padding on it.

    Code:
    #subwrap38 #TransMenu0-0 {
        font-family: Arial,Helvetica,sans-serif !important;
        font-size: 12px !important;
        padding: 5px !important;
        text-align: left !important;
        text-decoration: none !important;
        text-indent: 0;
        text-transform: none;
        white-space: normal;
    }
    arabictest.php# (line 177)
    .transMenu38 td {
        color: #000000 !important;
        font-family: Arial,Helvetica,sans-serif !important;
        font-size: 12px !important;
        font-weight: normal !important;
        padding: 5px !important;
        text-align: left !important;
    }
    Try changing that padding to have no left or right padding e.g padding:5px 0!important

  19. #19
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,293
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    There also seems to be a square table cell to the left.

  20. #20
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When i'm zooming the menu, this menu is going to right side, how can i solve this issue please help me
    this is link http://www.royalholidays-kw.com/menu/arabictest.php

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The main problem is that your nav is not connected to the rest of the page. You have just placed it absolutely 400px from the left. If I have my screen open wide the nav is placed in the wrong place.

    Try soemthing like this:

    Code:
    #html1 {
    	height: 249px;
    	left: auto!important;
    	margin: auto!important;
    	overflow: hidden;
    	position: relative!important;
    	top: 75px;
    	width: 1008px;
    	direction: ltr;
    }
    .menu38 {
    	margin: 0 0 0 100px;
    	float:none;
    }
    It may help with the zoom also.

    Note that you can't use ids more than once as they are unique. Use classes if you want to re-use styles.

  22. #22
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks paul for your support, i inserted your code, still problem, is there any other way to solve this issue?

  23. #23
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    You usually add dir="rtl" to the html tag any time the overall page direction is right-to-left even though Unicode is supposed to sort that out.

    Do not use CSS styling to control directionality in HTML you should use markup as directionality is an integral part of the document structure and needs to be persistent.

    Better still this might help; http://www.w3.org/International/tutorials/bidi-xhtml/

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I think you'd need to redesign a bit because at the moment you have separate elements all going their own way. You should have then all in in a container so that they move as a whole. However that still doesn't mean that zoom will do odd things especially with the rtl ltr arrangements in there. It's probably the ltr on the nav that makes it zoom the opposite way to the rest of the page.

    However with the new code it looks better than before.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •