Back To Website Design Forum

Make drop down menus cover text and stay active onclick

  • Jan Jeremy Go
  • Newbie
  • Newbie
  • User avatar
  • Joined: Oct 20, 2010
  • Posts: 13
  • Loc: Philippines
  • Status: Offline

Post November 4th, 2010, 9:10 am

Hi guys, I need help!

Q1:
Do you know how can I make my drop down menus "<div id=submenu>" overlap/cover the text in "<div id=container>"? I use "z-index:", but no effect!

Q2:
How can I make my menu stay active when on click, in FireFox: "active" only occur when on click but after that back to "hover", unlike Internet Explorer it will stay but many not possible to do like "div:hover". Maybe I need to use "onclick" or sometime? But I don't how to make drop down menu with that.

Q3:
How can I position my time in right side without destruction, I use "float:right" but the format I want is single line, but it create 2 lines. Is there such "left:" and "top:"? right?

Please help, if you answer my questions, and here's my code:

Hey don't forget to put DOCTYPE on the top of your codes!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www. .org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

.......//www.w3.or...

HTML Code: [ Select ]
<html>
<head>
    <title>My_Site</title>
</head>
<body onload="startTime()">
    <div>
            <div>
                <div>
                    <a class="menu" title="Home" href="#Home">Home</a>
                        <div>
                            <a class="submenu" title="" href="#Home_Wall">Wall</a>
                            <a class="submenu" title="" href="#Home_Profile">
                            Profile</a>
                            <a class="submenu" title="" href="#Home_PM's">PM's</a>
                            <a class="submenu" title="" href="#Home_Security and
                            Privacy">Security and Privacy</a>
                        </div>
                </div>
                <div>
                    <a class="menu" title="Forum" href="#Forum">Forum</a>
                        <div>
                            <a class="submenu" title="" href="#Forum_Programs">Programs</a>
                            <a class="submenu" title="" href="#Forum_Friends">Friends</a>
                            <a class="submenu" title="" href="#Forum_Games">Games</a>
                        </div>
                </div>
                <div>
                    <a class="menu" title="Help" href="#Help">Help</a>
                        <div>
                            <a class="submenu" title="" href="#Help_FAQ">FAQ</a>
                            <a class="submenu" title="" href="#Help_Ask Help Online">
                            Ask Help Online</a>
                        </div>
                </div>
                <div>
                    <a class="menu" id="right" title="Log Out" href="#Log Out">Log Out</a>
                </div>
            </div>
            <div id="container">
                <p><h1>Welcome!</h1></p>
                <p>With this site, you'll learn many thing that you want to
                   learn, but only that is all is available!<p>
            </div>
        <div id="special"><div id="txt"></div></div>
    </div>
</body>
</html>
 
  1. <html>
  2. <head>
  3.     <title>My_Site</title>
  4. </head>
  5. <body onload="startTime()">
  6.     <div>
  7.             <div>
  8.                 <div>
  9.                     <a class="menu" title="Home" href="#Home">Home</a>
  10.                         <div>
  11.                             <a class="submenu" title="" href="#Home_Wall">Wall</a>
  12.                             <a class="submenu" title="" href="#Home_Profile">
  13.                             Profile</a>
  14.                             <a class="submenu" title="" href="#Home_PM's">PM's</a>
  15.                             <a class="submenu" title="" href="#Home_Security and
  16.                             Privacy">Security and Privacy</a>
  17.                         </div>
  18.                 </div>
  19.                 <div>
  20.                     <a class="menu" title="Forum" href="#Forum">Forum</a>
  21.                         <div>
  22.                             <a class="submenu" title="" href="#Forum_Programs">Programs</a>
  23.                             <a class="submenu" title="" href="#Forum_Friends">Friends</a>
  24.                             <a class="submenu" title="" href="#Forum_Games">Games</a>
  25.                         </div>
  26.                 </div>
  27.                 <div>
  28.                     <a class="menu" title="Help" href="#Help">Help</a>
  29.                         <div>
  30.                             <a class="submenu" title="" href="#Help_FAQ">FAQ</a>
  31.                             <a class="submenu" title="" href="#Help_Ask Help Online">
  32.                             Ask Help Online</a>
  33.                         </div>
  34.                 </div>
  35.                 <div>
  36.                     <a class="menu" id="right" title="Log Out" href="#Log Out">Log Out</a>
  37.                 </div>
  38.             </div>
  39.             <div id="container">
  40.                 <p><h1>Welcome!</h1></p>
  41.                 <p>With this site, you'll learn many thing that you want to
  42.                    learn, but only that is all is available!<p>
  43.             </div>
  44.         <div id="special"><div id="txt"></div></div>
  45.     </div>
  46. </body>
  47. </html>
  48.  


JAVASCRIPT Code: [ Select ]
  <script type="text/javascript">
function startTime()
{
    var today= new Date();
    var h= today.getHours();
    var m= today.getMinutes();
    var s= today.getSeconds();
    var d;
 
    // add a zero in front of numbers<10
        d = checkPerHalfDay(d, h);
        h = checkIfMoreThanHalf(h);
        h = checkTime(h);
        m = checkTime(m);
        s = checkTime(s);
 
    document.getElementById('txt').innerHTML = h + ":" + m + ":" + s + " " + d;
    t = setTimeout('startTime()',500);
}
 
function checkPerHalfDay(d, h)
{
    if (h < 12)
    {
        d = "am";
    }
    else
    {
        d = "pm";
    }
    return d;
}
 
function checkIfMoreThanHalf(h)
{
    if (h > 12)
    {
        h = h - 12;
    }
    return h;
}
 
function checkTime(i)
{
    if (i<10)
    {
        i="0" + i;
    }
    return i;
}
    </script>
 
  1.   <script type="text/javascript">
  2. function startTime()
  3. {
  4.     var today= new Date();
  5.     var h= today.getHours();
  6.     var m= today.getMinutes();
  7.     var s= today.getSeconds();
  8.     var d;
  9.  
  10.     // add a zero in front of numbers<10
  11.         d = checkPerHalfDay(d, h);
  12.         h = checkIfMoreThanHalf(h);
  13.         h = checkTime(h);
  14.         m = checkTime(m);
  15.         s = checkTime(s);
  16.  
  17.     document.getElementById('txt').innerHTML = h + ":" + m + ":" + s + " " + d;
  18.     t = setTimeout('startTime()',500);
  19. }
  20.  
  21. function checkPerHalfDay(d, h)
  22. {
  23.     if (h < 12)
  24.     {
  25.         d = "am";
  26.     }
  27.     else
  28.     {
  29.         d = "pm";
  30.     }
  31.     return d;
  32. }
  33.  
  34. function checkIfMoreThanHalf(h)
  35. {
  36.     if (h > 12)
  37.     {
  38.         h = h - 12;
  39.     }
  40.     return h;
  41. }
  42.  
  43. function checkTime(i)
  44. {
  45.     if (i<10)
  46.     {
  47.         i="0" + i;
  48.     }
  49.     return i;
  50. }
  51.     </script>
  52.  


CSS Code: [ Select ]
  <style type="text/css">
body
{
    background-image: url('Diamond_Tiles.jpg');
    background-position: top center;
    margin: 30px;
    padding: 0px;
    width: 93%;
    height: 100%;
}
.menu
{
    font-family:"Times New Roman", Times, serif;
    font-size: 23px;
    font-weight: 700;
    z-index: 1;
    overflow: hidden;
}
.submenu
{
    font-family:"Arial";
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}
div#container, div#container p
{
    background-color: cyan;
    z-index: -1;
}
#right
{
    float: right;
}
#special
{
    background-color: lightgreen;
    height: 20px;
    font-weight: 600;
}
div
{
    background-color: black;
    color: red;
    margin: auto;
    padding: 10px;
    height: 500px;
}
div div
{
    background-color: skyblue;
    margin: auto;
    padding: auto;
    width: auto;
    height: auto;
}
div div div
{
    display: inline-block;
    margin: auto;
    padding: 0px;
    vertical-align: top;
    width: 24%;
    height: 0px;
}
div div div div
{
    display: none;
    margin: auto;
    padding: 0px;
    width: 100%;
    height: auto;
}
div div div:hover div
{
    display: block;
    margin: auto;
    padding: 0px;
    width: 100%;
    height: auto;
}
div div div a
{
    background-color: lime;
    color: blue;
    display: block;
    text-decoration: none;
}
div div div a:hover
{
    background-color: green;
    color: gold;
    display: block;
    margin: 0px;
    padding: 0px;
    text-align: center;
    text-decoration: none;
}
div div div a:active
{
    background-color: red;
    color: yellow;
    display: block;
    margin: 0px;
    padding: 0px;
    text-align: left;
    text-decoration: none;
}
 
div div div div a
{
    background-color: black;
    color: skyblue;
    display: block;
    margin: 0px;
    padding: 0px;
    text-align: left;
    text-decoration: none;
}
div div div div a:hover
{
    background-color: silver;
    color: cyan;
    display: block;
    margin: 0px;
    padding: 0px;
    text-align: left;
    text-decoration: none;
    z-index: 1;
}
div div div div a:active
{
    background-color: cyan;
    color: blue;
    display: block;
    margin: 0px;
    padding: 0px;
    text-align: left;
    text-decoration: none;
}
    </style>
 
  1.   <style type="text/css">
  2. body
  3. {
  4.     background-image: url('Diamond_Tiles.jpg');
  5.     background-position: top center;
  6.     margin: 30px;
  7.     padding: 0px;
  8.     width: 93%;
  9.     height: 100%;
  10. }
  11. .menu
  12. {
  13.     font-family:"Times New Roman", Times, serif;
  14.     font-size: 23px;
  15.     font-weight: 700;
  16.     z-index: 1;
  17.     overflow: hidden;
  18. }
  19. .submenu
  20. {
  21.     font-family:"Arial";
  22.     font-size: 16px;
  23.     font-weight: 600;
  24.     width: 100%;
  25.     height: 100%;
  26.     z-index: 1;
  27.     overflow: hidden;
  28. }
  29. div#container, div#container p
  30. {
  31.     background-color: cyan;
  32.     z-index: -1;
  33. }
  34. #right
  35. {
  36.     float: right;
  37. }
  38. #special
  39. {
  40.     background-color: lightgreen;
  41.     height: 20px;
  42.     font-weight: 600;
  43. }
  44. div
  45. {
  46.     background-color: black;
  47.     color: red;
  48.     margin: auto;
  49.     padding: 10px;
  50.     height: 500px;
  51. }
  52. div div
  53. {
  54.     background-color: skyblue;
  55.     margin: auto;
  56.     padding: auto;
  57.     width: auto;
  58.     height: auto;
  59. }
  60. div div div
  61. {
  62.     display: inline-block;
  63.     margin: auto;
  64.     padding: 0px;
  65.     vertical-align: top;
  66.     width: 24%;
  67.     height: 0px;
  68. }
  69. div div div div
  70. {
  71.     display: none;
  72.     margin: auto;
  73.     padding: 0px;
  74.     width: 100%;
  75.     height: auto;
  76. }
  77. div div div:hover div
  78. {
  79.     display: block;
  80.     margin: auto;
  81.     padding: 0px;
  82.     width: 100%;
  83.     height: auto;
  84. }
  85. div div div a
  86. {
  87.     background-color: lime;
  88.     color: blue;
  89.     display: block;
  90.     text-decoration: none;
  91. }
  92. div div div a:hover
  93. {
  94.     background-color: green;
  95.     color: gold;
  96.     display: block;
  97.     margin: 0px;
  98.     padding: 0px;
  99.     text-align: center;
  100.     text-decoration: none;
  101. }
  102. div div div a:active
  103. {
  104.     background-color: red;
  105.     color: yellow;
  106.     display: block;
  107.     margin: 0px;
  108.     padding: 0px;
  109.     text-align: left;
  110.     text-decoration: none;
  111. }
  112.  
  113. div div div div a
  114. {
  115.     background-color: black;
  116.     color: skyblue;
  117.     display: block;
  118.     margin: 0px;
  119.     padding: 0px;
  120.     text-align: left;
  121.     text-decoration: none;
  122. }
  123. div div div div a:hover
  124. {
  125.     background-color: silver;
  126.     color: cyan;
  127.     display: block;
  128.     margin: 0px;
  129.     padding: 0px;
  130.     text-align: left;
  131.     text-decoration: none;
  132.     z-index: 1;
  133. }
  134. div div div div a:active
  135. {
  136.     background-color: cyan;
  137.     color: blue;
  138.     display: block;
  139.     margin: 0px;
  140.     padding: 0px;
  141.     text-align: left;
  142.     text-decoration: none;
  143. }
  144.     </style>
  145.  


Thank you in advance for helping/guiding/telling me!!! :D
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post November 4th, 2010, 9:10 am

  • dycemen
  • Born
  • Born
  • No Avatar
  • Joined: Nov 03, 2010
  • Posts: 4
  • Status: Offline

Post November 5th, 2010, 6:10 pm

So if I am correct is your navigation bar buttons stacked upon each other? If that is the case use display: inline-block.
  • Jan Jeremy Go
  • Newbie
  • Newbie
  • User avatar
  • Joined: Oct 20, 2010
  • Posts: 13
  • Loc: Philippines
  • Status: Offline

Post November 6th, 2010, 1:08 am

No, they don't.
And I used inline-block in:

div div div
{
display: inline-block;

, if I misunderstood, then tell me what you mean.
  • Jan Jeremy Go
  • Newbie
  • Newbie
  • User avatar
  • Joined: Oct 20, 2010
  • Posts: 13
  • Loc: Philippines
  • Status: Offline

Post November 6th, 2010, 2:42 am

Anyone?
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post November 6th, 2010, 10:29 am

To be able to use z-index you need to define a position property in CSS.
CSS Code: [ Select ]
.overlappingTag {
    position: relative;
    z-index: 2;
}
 
.overlappedTag {
    position: relative;
    z-index: 1;
}
  1. .overlappingTag {
  2.     position: relative;
  3.     z-index: 2;
  4. }
  5.  
  6. .overlappedTag {
  7.     position: relative;
  8.     z-index: 1;
  9. }
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Jan Jeremy Go
  • Newbie
  • Newbie
  • User avatar
  • Joined: Oct 20, 2010
  • Posts: 13
  • Loc: Philippines
  • Status: Offline

Post November 6th, 2010, 9:22 pm

Yeah cool!

When you use z-index, you need to use position too? They like partners?

Thanks!
  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post November 6th, 2010, 10:00 pm

z-index wouldn't work if you don't have a position defined for both of those tags.

No problem.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8

Page 1 of 1

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 155 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.