PHP|Débutant :: Forums

Advertisement

Besoin d'aide ? N'hésitez pas, mais respectez les règles

Vous n'êtes pas identifié(e).

#2 Re : HTML, xHTML CSS » Qui pourrait m'aider à installer un menu déroulant dynamique ? » 21-06-2012 19:53:26

a-t-on le choix ?
Si oui, je préfère modifier l'extension afin de trouver une solution.
Mes fichiers sont en .html ou php...

Merci

#3 Re : HTML, xHTML CSS » Qui pourrait m'aider à installer un menu déroulant dynamique ? » 21-06-2012 19:53:26

Bonjour Kris,
Merci 1000 fois pour ta patience; on remarque le manque de réflexes du débutants wink.

Voici le code CSS :



html, body {
  height: 100%;
}

body {
  margin: 0px;
  padding: 0px;
  background: #FFFFFF url(images/bg2_01.jpg) repeat-x left top;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #838383;
}

h1, h2, h3 {
  margin: 0px;
  padding: 0px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight:  normal;
}

p, ol, ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

p {
  line-height: 200%;
}

strong {
  color: #565656;
}

a {
  color: #5D8900;
}

a:hover {
  text-decoration: none;
}

a img {
  border: none;
}

img.border {
}

img.alignleft {
  float: left;
  padding-right: 25px;
}

img.alignright {
  float: right;
}

img.aligncenter {
  margin: 0px auto;
}

hr {
  display: none;
}

ul.style1 {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

ul.style1 li {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #CCCCCC;
  line-height: 220%;
}

ul.style1 span {
  display: block;
  float: left;
  width: 53px;
  height: 23px;
  margin: 6px 20px 30px 0px;
  padding: 0px 0px 0px 0px;
  background: #006BA3;
  text-align: center;
  font-size: 11px;
  color: #FFFFFF;
}

ul.style2 {
}

ul.style2 li {
  margin-bottom: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid #CCCCCC;
  line-height: 220%;
}

ul.style3 {
}

ul.style3 li {
  padding-left: 30px;
  line-height: 220%;
}

/** WRAPPER */

.homepage #wrapper {
  background: url(images/bg1_01.jpg) repeat-x left top;
}

.homepage #wrapper-bgtop{
  background: url(images/bg1_02.jpg) no-repeat center top;
}

#wrapper-bgtop {
  background: url(images/bg2_02.jpg) no-repeat center top;
}

#wrapper-bgbtm {
  background: url(images/bg1_03.jpg) repeat-x left bottom;
}

.container {
  width: 900px;
  margin: 0px auto;
}

.clearfix {
  clear: both;
}

/** HEADER */

#header {
  height: 141px;
  padding: 29px 0px 0px 0px;
}

/** LOGO */

#logo {
  position: relative;
  float: left;
  width: 400px;
  height: 141px;
}

#logo h1, #logo p {
  margin: 0px;
  line-height: normal;
  text-indent: -9999em;
}

#logo h1 a {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 400px;
  height: 141px;
  background: url(images/homepage01.jpg) no-repeat left top;
}

/** SPLASH PAGE */

#splash {
  height: 198px;
  padding: 40px 0px 0px 0px;
  font-family: Georgia, "Times New Roman", Times, serif;
}

#splash h2 {
  margin: 0px;
  padding: 0px 0px 0px 0px;
  letter-spacing: -2px;
  text-shadow: #5B8B00 -1px 2px 3px;
  font-size: 38px;
  font-weight: normal;
  color: #FFFFFF;
}

#splash span {
  display: block;
  margin-top: -10px;
  padding-bottom: 10px;
}

#splash .byline {
  padding-bottom: 20px;
  text-shadow: #5B8B00 -1px 2px 3px;
  font-size: 16px;
  color: #ECFFC2;
}

#splash .link {
  margin: 0px;
  padding: 0px 0px 0px 20px;
  background: url(images/homepage02.gif) no-repeat left 2px;
  font-size: 14px;
}

#splash p {
  line-height: normal;
}

#splash a {
  color: #D7FF82;
}

/** MENU */

#menu-container {
  width: 920px;
  margin: 0px auto;
}

#menu {
  height: 57px;
  padding-top: 17px;
}

#menu ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  line-height: normal;
}

#menu li {
  float: left;
  margin-right: 15px;
}

#menu span {
  display: inline-block;
  margin: 0px;
  font-weight: normal;
}

#menu a {
  display: block;
  float: left;
  height: 29px;
  padding: 4px 15px 0px 15px;
  letter-spacing: -1px;
  text-decoration: none;
  text-shadow: #00568D -1px 2px 3px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 18px;
  color: #FFFFFF;
}

#menu a:hover {
  text-decoration: none;
}

#menu li.active {
  background: url(images/homepage05.jpg) repeat-x left top;
}

#menu li.active a {
  background: url(images/homepage03.jpg) no-repeat  left top;
  text-shadow: #4C8100 -1px 2px 3px;
}

#menu li.active span {
  display: inline-block;
  background: url(images/homepage04.jpg) no-repeat right top;
  color: #FFFFFF;
}


/** PAGE */

#page {
  overflow: hidden;
  padding: 30px 0px;
}

/** CONTENT */

#content {
  float: left;
  width: 600px;
  padding-top: 20px;
}

.single #content {
  width: 100%;
}

/** SIDEBAR */

#sidebar {
  float: right;
  width: 250px;
  padding-top: 20px;
  padding-left: 25px;
  border-left: 1px solid #CCCCCC;
}

/** FOOTER */

#footer {
  height: 135px;
  border-top: 1px solid #CCCCCC;
}

#footer p {
  margin: 0px;
  padding: 45px 0px 0px 0px;
  text-align: center;
  color: #A2A2A2;
}

#footer a {
  color: #A2A2A2;
}


#box1 {
  height: 220px;
  border-bottom: 1px solid #CCCCCC;
}

#box1 .title {
  font-size: 28px;
}

#box2 {
  height: 220px;
  border-bottom: 1px solid #CCCCCC;
}

#box2 img {
  padding-bottom: 20px;
}

#box3 {
  padding-top: 40px;
}

#box3 .title {
  margin-bottom: 20px;
}

#box4 {
  padding: 30px 0px;
}

#box5 .title {
  font-size: 28px;
}

.box-style {}

.box-style .title {
  margin-bottom: 30px;
  letter-spacing: -1px;
  font-size: 18px;
  color: #194055;
}

.divider {
  margin-bottom: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid #CCCCCC;
}

.box-style .link1 {
  display: inline-block;
  margin: 18px 0px 0px 0px;
  padding: 0px 0px 4px 20px;
  background: url(images/homepage06.gif) no-repeat left 6px;
}

.box-style .link2 {
  display: inline-block;
  margin: 18px 0px 0px 0px;
  padding: 0px 0px 4px 25px;
  background: url(images/homepage07.gif) no-repeat left 3px;
}

#two-columns {
  margin-top: 40px;
}

#two-columns .colA {
  float: left;
  width: 274px;
  padding-right: 25px;
  border-right: 1px solid #CCCCCC;
}

#two-columns .colB {
  float: right;
  width: 275px;
}

#two-columns .title {
  margin-bottom: 20px;
}

#two-columns .alignleft {
  padding: 4px 20px 0px 0px;
}

ET VOICI le 3ème onglet que j'ai sur Dreamweaver. Est-ce le code javascript? : 1109538923.js:

document.write("<style type=\"text/css\">#af-form-1109538923 .af-body .af-textWrap{width:98%;display:block;float:none;}#af-form-1109538923 .af-body a{color:#F7FFC9;text-decoration:underline;font-style:normal;font-weight:normal;}#af-form-1109538923 .af-body input.text, #af-form-1109538923 .af-body textarea{background-color:#FFFFFF;border-color:#C7C7C7;border-width:1px;border-style:solid;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:10px;font-family:Verdana, sans-serif;}#af-form-1109538923 .af-body input.text:focus, #af-form-1109538923 .af-body textarea:focus{background-color:#D6FFF8;border-color:#030303;border-width:1px;border-style:solid;}#af-form-1109538923 .af-body label.previewLabel{display:block;float:none;text-align:left;width:auto;color:#F7FFC9;text-decoration:none;font-style:normal;font-weight:normal;font-size:12px;font-family:Verdana, sans-serif;}#af-form-1109538923 .af-body{padding-bottom:15px;padding-top:15px;background-repeat:repeat;background-position:inherit;background-image:url(\"http://forms.aweber.com/images/forms/bright-idea/lima/body.png\");color:#FFFFFF;font-size:11px;font-family:Arial, sans-serif;}#af-form-1109538923 .af-footer{padding-bottom:2px;padding-top:2px;padding-right:15px;padding-left:15px;background-color:transparent;background-repeat:no-repeat;background-position:bottom;background-image:url(\"http://forms.aweber.com/images/forms/bright-idea/lima/footer.png\");border-width:1px;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:#F7FFC9;font-size:12px;font-family:Arial, sans-serif;}#af-form-1109538923 .af-header{padding-bottom:30px;padding-top:51px;padding-right:10px;padding-left:63px;background-color:transparent;background-repeat:no-repeat;background-position:top left;background-image:url(\"http://forms.aweber.com/images/forms/bright-idea/lima/header.png\");border-width:1px;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:#F7FFC9;font-size:14px;font-family:Arial, sans-serif;}#af-form-1109538923 .af-quirksMode .bodyText{padding-top:2px;padding-bottom:2px;}#af-form-1109538923 .af-quirksMode{padding-right:15px;padding-left:15px;}#af-form-1109538923 .af-standards .af-element{padding-right:15px;padding-left:15px;}#af-form-1109538923 .bodyText p{margin:1em 0;}#af-form-1109538923 .buttonContainer input.submit{background-image:url(\"http://forms.aweber.com/images/auto/gradient/button/451.png\");background-position:top left;background-repeat:repeat-x;background-color:#243500;border:1px solid #243500;color:#FFFFFF;text-decoration:none;font-style:normal;font-weight:normal;font-size:14px;font-family:Verdana, sans-serif;}#af-form-1109538923 .buttonContainer input.submit{width:auto;}#af-form-1109538923 .buttonContainer{text-align:left;}#af-form-1109538923 body,#af-form-1109538923 dl,#af-form-1109538923 dt,#af-form-1109538923 dd,#af-form-1109538923 h1,#af-form-1109538923 h2,#af-form-1109538923 h3,#af-form-1109538923 h4,#af-form-1109538923 h5,#af-form-1109538923 h6,#af-form-1109538923 pre,#af-form-1109538923 code,#af-form-1109538923 fieldset,#af-form-1109538923 legend,#af-form-1109538923 blockquote,#af-form-1109538923 th,#af-form-1109538923 td{float:none;color:inherit;position:static;margin:0;padding:0;}#af-form-1109538923 button,#af-form-1109538923 input,#af-form-1109538923 submit,#af-form-1109538923 textarea,#af-form-1109538923 select,#af-form-1109538923 label,#af-form-1109538923 optgroup,#af-form-1109538923 option{float:none;position:static;margin:0;}#af-form-1109538923 div{margin:0;}#af-form-1109538923 fieldset{border:0;}#af-form-1109538923 form,#af-form-1109538923 textarea,.af-form-wrapper,.af-form-close-button,#af-form-1109538923 img{float:none;color:inherit;position:static;background-color:none;border:none;margin:0;padding:0;}#af-form-1109538923 input,#af-form-1109538923 button,#af-form-1109538923 textarea,#af-form-1109538923 select{font-size:100%;}#af-form-1109538923 p{color:inherit;}#af-form-1109538923 select,#af-form-1109538923 label,#af-form-1109538923 optgroup,#af-form-1109538923 option{padding:0;}#af-form-1109538923 table{border-collapse:collapse;border-spacing:0;}#af-form-1109538923 ul,#af-form-1109538923 ol{list-style-image:none;list-style-position:outside;list-style-type:disc;padding-left:40px;}#af-form-1109538923,#af-form-1109538923 .quirksMode{width:256px;}#af-form-1109538923.af-quirksMode{overflow-x:hidden;}#af-form-1109538923{background-color:transparent;border-color:transparent;border-width:1px;border-style:none;}#af-form-1109538923{overflow:hidden;}.af-body .af-textWrap{text-align:left;}.af-body input.image{border:none!important;}.af-body input.submit,.af-body input.image,.af-form .af-element input.button{float:none!important;}.af-body input.text{width:100%;float:none;padding:2px!important;}.af-body.af-standards input.submit{padding:4px 12px;}.af-clear{clear:both;}.af-element label{text-align:left;display:block;float:left;}.af-element{padding:5px 0;}.af-form-wrapper{text-indent:0;}.af-form{text-align:left;margin:auto;}.af-header,.af-footer{margin-bottom:0;margin-top:0;padding:10px;}.af-quirksMode .af-element{padding-left:0!important;padding-right:0!important;}.lbl-right .af-element label{text-align:right;}body {}</style><form method=\"post\" class=\"af-form-wrapper\" action=\"http://www.aweber.com/scripts/addlead.pl\"  ><div style=\"display: none;\"><input type=\"hidden\" name=\"meta_web_form_id\" value=\"1109538923\" /><input type=\"hidden\" name=\"meta_split_id\" value=\"\" /><input type=\"hidden\" name=\"listname\" value=\"c-p-l-newslettr\" /><input type=\"hidden\" name=\"redirect\" value=\"http://www.aweber.com/thankyou-coi.htm?m=text\" id=\"redirect_9707bd73670d798c5a60a5ba688e37bd\" /><input type=\"hidden\" name=\"meta_adtracking\" value=\"My_Web_Form\" /><input type=\"hidden\" name=\"meta_message\" value=\"1\" /><input type=\"hidden\" name=\"meta_required\" value=\"name,email\" /><input type=\"hidden\" name=\"meta_tooltip\" value=\"\" /></div><div id=\"af-form-1109538923\" class=\"af-form\"><div id=\"af-header-1109538923\" class=\"af-header\"><div class=\"bodyText\"><p style=\"text-align: center;\">\" Recevez gratuitement</p><p style=\"text-align: center;\"><em>Le Guide Pour Bien Démarrer Son Activité Libérale</em>, Ainsi Que nos <em>vidéos-Conseils</em>,</p><p style=\"text-align: center;\">en vous inscrivant librement à notre lettre d'information. \"</p></div></div><div id=\"af-body-1109538923\" class=\"af-body af-standards\"><div class=\"af-element\"><label class=\"previewLabel\" for=\"awf_field-14948376\">Votre Nom: </label><div class=\"af-textWrap\"><input id=\"awf_field-14948376\" type=\"text\" name=\"name\" class=\"text\" value=\"\"  tabindex=\"500\" /></div><div class=\"af-clear\"></div></div><div class=\"af-element\"><label class=\"previewLabel\" for=\"awf_field-14948377\">Votre Email: </label><div class=\"af-textWrap\"><input class=\"text\" id=\"awf_field-14948377\" type=\"text\" name=\"email\" value=\"\" tabindex=\"501\"  onfocus=\" if (this.value == '') { this.value = ''; }\" onblur=\"if (this.value == '') { this.value='';} \" /></div><div class=\"af-clear\"></div></div><div class=\"af-element buttonContainer\"><input name=\"submit\" class=\"submit\" type=\"submit\" value=\"SVP, Envoyez-moi le guide !\" tabindex=\"502\" /><div class=\"af-clear\"></div></div></div><div id=\"af-footer-1109538923\" class=\"af-footer\"><div class=\"bodyText\"><p style=\"text-align: center;\">Vos Données Resteront Confidentielles.</p></div></div></div></form><script type=\"text/javascript\">    <!--    (function() {        var IE = /*@cc_on!@*/false;        if (!IE) { return; }        if (document.compatMode && document.compatMode == 'BackCompat') {            if (document.getElementById(\"af-form-1109538923\")) {                document.getElementById(\"af-form-1109538923\").className = 'af-form af-quirksMode';            }            if (document.getElementById(\"af-body-1109538923\")) {                document.getElementById(\"af-body-1109538923\").className = \"af-body inline af-quirksMode\";            }            if (document.getElementById(\"af-header-1109538923\")) {                document.getElementById(\"af-header-1109538923\").className = \"af-header af-quirksMode\";            }            if (document.getElementById(\"af-footer-1109538923\")) {                document.getElementById(\"af-footer-1109538923\").className = \"af-footer af-quirksMode\";            }        }    })();    --></script>");

if (typeof window.awf_Form_=='undefined') window.awf_Form_ = new Object();
awf_Form_.isPreview = false;
awf_Form_.setCookie = function(name, value, expires, path, domain, secure) {
    var curCookie = name + "=" + escape(value) +
        ((expires) ? "; expires=" + expires.toGMTString() : "") +
        ((path) ? "; path=" + path : "") +
        ((domain) ? "; domain=" + domain : "") +
        ((secure) ? "; secure" : "");
    document.cookie = curCookie;
}

awf_Form_.getCookie = function(name) {
    var dc = document.cookie;
    var prefix = name + "=";
    var begin = dc.indexOf("; " + prefix);
    if (begin == -1) {
        begin = dc.indexOf(prefix);
        if (begin != 0) return null;
    } else
        begin += 2;
    var end = document.cookie.indexOf(";", begin);
    if (end == -1)
        end = dc.length;
    return unescape(dc.substring(begin + prefix.length, end));
}

var unique_track = new Image();
        unique_track.src = "[url]http://forms.aweber.com/form/displays.htm?id=jIwMnKzMHJxMzA==[/url]";


Je pense n'avoir rien oublié cette fois:P
MERCI !!!!!!

#4 Re : HTML, xHTML CSS » Qui pourrait m'aider à installer un menu déroulant dynamique ? » 21-06-2012 19:53:26

Bonjour Kris, et Merci beaucoup pour ta réponse...

Voici le code mon template contient :

</table>
      <table width="100%" border="0" cellpadding="0" cellspacing="0" id="menu-container">
        <tr>
          <td><div id="menu">
              <ul id="menu">
                <li class="active"><a href="http://A/" title="Revenir à l'accueil">Accueil</a></li>
                <li class="onglet"><a href="../B.php" title="B">B<span class="fleche"> </span></a></li>
                                <li><a href="../c.php" title="C">C</a></li>
                <li><a href="../D" title="Ds">D</a></li>
                <li><a href="../E.php" title="E">E</a></li>
                <li><a href="../F.php" title="F">F</a></li>
                <li><a href="../G.php" title="G">G</a></li>
              </ul>
            </div></td>
        </tr>
      </table>
 

Ce sont des menus à l'horizontales , qui dirigent vers les bons liens,
ET je souhaite (comme premier voeux pour 2011:D, leurs ajourter des sous menus dynamique descendant verticalement, du genre A.1, A.2... B.1, B.2.... dons voici ce que je fais


</table>
      <table width="100%" border="0" cellpadding="0" cellspacing="0" id="menu-container">
        <tr>
          <td><div id="menu">
              <ul id="menu">
                <li class="active"><a href="http://A/" title="Revenir à l'accueil">Accueil</a></li>
                <li class="onglet"><a href="../B.php" title="B">B<span class="fleche"> </span></a></li>
                                <li><a href="../c.php" title="C">C</a></li>
                                                                 
                                                                    <ul>
                                                                          <li><a href="http://B.1/" title="B.1">B.1</a></li> </li>
                                                                          <li><a href="http://B.2/" title="B.2">B.2</a></li> </li>
                                                                   </ul>
               
                                                                <li><a href="../D" title="Ds">D</a></li>
                <li><a href="../E.php" title="E">E</a></li>
                <li><a href="../F.php" title="F">F</a></li>
                <li><a href="../G.php" title="G">G</a></li>
              </ul>
            </div></td>
        </tr>
      </table>

MAIS là tout devient verticale, et rien est dynamique:-(

Merci d'avance pour ton aide si précieuse à mes yeux... smile

#5 HTML, xHTML CSS » Qui pourrait m'aider à installer un menu déroulant dynamique ? » 21-06-2012 19:53:26

Paolo
Réponses : 14

Bonjour,

Tout d'abord navré si je ne poste pas ma demande au bon endroit...

Je suis en train de créer un site, avec 6 onglets horizontaux déjà parametrés, et des liens qui renvoient aux bonnes pages;
Jusqu'à ce stade tout fonctionne correctement.

Je souhaite ajouter des sous-onglets en dessous des 6 premiers, et à chaque foi que j'insère les codes que je vois dans différents tutoriels (donnant pourtant comme résultats visuels, la bonne image que je souhaite atteindre), j'obtiens un changement radical, même pour mes 6 premiers onglets ( il deviennent tous verticaux...

Je pense qu'il y a une histoire de comportement javascript ou de CSS, MAIS....?????

Merci 1000 fois d'avance pour votre aide, et tous mes meilleurs voeux pour cette nouvelle année....:-)

Pied de page des forums

Propulsé par FluxBB