Retour à Forum de site web

Faire des menus déroulants texte de couverture et de rester active onclick

  • Jan Jeremy Go
  • Newbie
  • Newbie
  • Avatar de l’utilisateur
  • Inscription: Oct 20, 2010
  • Messages: 13
  • Loc: Philippines
  • Status: Offline

Message Novembre 4th, 2010, 9:10 am

Salut les gars, j'ai besoin d'aide!

Q1:
Savez-vous comment puis-je faire mes menus déroulants "id=submenu> <div« chevauchement / couvrir le texte sur "id=container> <div"? J'utilise "z-index:", mais aucun effet!

Q2:
Comment puis-je faire mon menu rester actif lorsque le cliquez, dans FireFox: "active" se produisent uniquement lorsque le clic, mais après retour à «flotter», contrairement à Internet Explorer, il va rester, mais de nombreux pas possible de faire comme "div: hover" . Peut-être que j'ai besoin d'utiliser "onclick" ou parfois? Mais je ne sais pas comment faire menu déroulant avec cela.

Q3 :
Comment puis-je la position de mon temps sur le côté droit, sans destruction, j'utilise "float: right" mais le format que je veux c'est une seule ligne, mais il crée 2 lignes. Y at-il «de gauche:" et "top"? droit?

S'il vous plaît aider, si vous répondez à mes questions, et heres mon code:

Hey n'oubliez pas de mettre DOCTYPE sur le dessus de vos codes!

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

....... / / Www.w3. ou...

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.  


Merci d'avance pour aider / directeurs / me dire! :D
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Novembre 4th, 2010, 9:10 am

  • dycemen
  • Born
  • Born
  • No Avatar
  • Inscription: Nov 03, 2010
  • Messages: 4
  • Status: Offline

Message Novembre 5th, 2010, 6:10 pm

Donc, si je ne me trompe pas est les boutons de votre barre de navigation empilés les uns sur les autres? Si tel est le cas, utilisez l'affichage: inline-block.
  • Jan Jeremy Go
  • Newbie
  • Newbie
  • Avatar de l’utilisateur
  • Inscription: Oct 20, 2010
  • Messages: 13
  • Loc: Philippines
  • Status: Offline

Message Novembre 6th, 2010, 1:08 am

Non, ils n'en ont pas.
Et je inline-block dans:

div div div
{
affichage: inline-block ;

, Si j'ai mal compris, alors dites moi ce que vous entendez.
  • Jan Jeremy Go
  • Newbie
  • Newbie
  • Avatar de l’utilisateur
  • Inscription: Oct 20, 2010
  • Messages: 13
  • Loc: Philippines
  • Status: Offline

Message Novembre 6th, 2010, 2:42 am

N'importe qui?
  • Bogey
  • Bogey
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Juil 14, 2005
  • Messages: 8211
  • Loc: USA
  • Status: Offline

Message Novembre 6th, 2010, 10:29 am

Pour être en mesure d'utiliser z-index vous devez définir une propriété CSS position.
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
  • Avatar de l’utilisateur
  • Inscription: Oct 20, 2010
  • Messages: 13
  • Loc: Philippines
  • Status: Offline

Message Novembre 6th, 2010, 9:22 pm

Ouais cool!

Lorsque vous utilisez z-index, vous devez utiliser la position aussi? Ils aiment les partenaires?

Merci!
  • Bogey
  • Bogey
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Juil 14, 2005
  • Messages: 8211
  • Loc: USA
  • Status: Offline

Message Novembre 6th, 2010, 10:00 pm

z-index wouldnt travail si vous n'avez pas de position définies pour ces deux balises.

Pas de problème.
"Bring forth therefore fruits meet for repentance:" Matthew 3:8

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 7 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 159 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC