Menu non cliquable sur Dotclear

De Wiki PC, Wiki Informatique.

(Différences entre les versions)
m (restitution de la dernière modification de Troll)
 
(6 versions intermédiaires masquées)
Ligne 1 : Ligne 1 :
== Description du problème : ==
== Description du problème : ==
-
J'ai installé DotClear (script de web-blog) ainsi qu'un thème. En modifiant ce thème je me heurte au problème suivant :
+
J'ai installé DotClear (script de web-blog) ainsi qu'un thème (freshyOne). En modifiant ce thème je me heurte au problème suivant :
Le menu est inséré dans une balise <nowiki>"<div id="frame">"</nowiki>.
Le menu est inséré dans une balise <nowiki>"<div id="frame">"</nowiki>.
-
Seulement quand je conserve cette balise, les liens du menu ne sont pas cliquable.
+
Seulement quand je conserve cette balise, les liens du menu ne sont pas cliquables.
Si je supprime l'ID, les liens sont cliquables mais le menu défiguré :
Si je supprime l'ID, les liens sont cliquables mais le menu défiguré :
Ligne 11 : Ligne 11 :
Avec l'id :
Avec l'id :
-
[[Image:http://rmx.c.free.fr/FOLDER/p1.PNG]]
+
 
 +
http://rmx.c.free.fr/FOLDER/p1.PNG
Sans l'ID :
Sans l'ID :
-
[[Image:http://rmx.c.free.fr/FOLDER/p2.PNG]]
+
 
 +
http://rmx.c.free.fr/FOLDER/p2.PNG
Ligne 31 : Ligne 33 :
</pre>
</pre>
-
L'original étant celui-ci :
 
 +
L'original étant celui-ci :
<pre>    <div id="frame">
<pre>    <div id="frame">
       <ul class="menu"><li class="first_menu"><a href="#tabsearch">{{tpl:lang Search}}</a></li><tpl:Categories><tpl:CategoriesHeader><li class="page_item"><a href="#tabcategories">{{tpl:lang Categories}}</a></tpl:CategoriesHeader><tpl:CategoriesFooter></li></tpl:CategoriesFooter></tpl:Categories><tpl:MetaData type="tag"><tpl:MetaDataHeader><li class="page_item"><a href="#tabtags">{{tpl:lang Tags}}</a></tpl:MetaDataHeader><tpl:MetaDataFooter></li></tpl:MetaDataFooter></tpl:MetaData><li class="page_item"><a href="#tabarchives">{{tpl:lang Archives}}</a></li><li class="page_item"><a href="#tablinks">{{tpl:lang Links}}</a></li><tpl:Languages><tpl:LanguagesHeader><li class="page_item"><a href="#tablanguages">{{tpl:lang Languages}}</a></tpl:LanguagesHeader><tpl:LanguagesFooter></li></tpl:LanguagesFooter></tpl:Languages><li class="last_menu"><a href="#tabrss">RSS</a></li></ul>
       <ul class="menu"><li class="first_menu"><a href="#tabsearch">{{tpl:lang Search}}</a></li><tpl:Categories><tpl:CategoriesHeader><li class="page_item"><a href="#tabcategories">{{tpl:lang Categories}}</a></tpl:CategoriesHeader><tpl:CategoriesFooter></li></tpl:CategoriesFooter></tpl:Categories><tpl:MetaData type="tag"><tpl:MetaDataHeader><li class="page_item"><a href="#tabtags">{{tpl:lang Tags}}</a></tpl:MetaDataHeader><tpl:MetaDataFooter></li></tpl:MetaDataFooter></tpl:MetaData><li class="page_item"><a href="#tabarchives">{{tpl:lang Archives}}</a></li><li class="page_item"><a href="#tablinks">{{tpl:lang Links}}</a></li><tpl:Languages><tpl:LanguagesHeader><li class="page_item"><a href="#tablanguages">{{tpl:lang Languages}}</a></tpl:LanguagesHeader><tpl:LanguagesFooter></li></tpl:LanguagesFooter></tpl:Languages><li class="last_menu"><a href="#tabrss">RSS</a></li></ul>
Ligne 75 : Ligne 77 :
     </div>
     </div>
</pre>
</pre>
 +
== Solution(s) proposée(s) : ==
== Solution(s) proposée(s) : ==

Version actuelle en date du 17 janvier 2009 à 08:29

Sommaire

Description du problème :

J'ai installé DotClear (script de web-blog) ainsi qu'un thème (freshyOne). En modifiant ce thème je me heurte au problème suivant :

Le menu est inséré dans une balise "<div id="frame">".

Seulement quand je conserve cette balise, les liens du menu ne sont pas cliquables.

Si je supprime l'ID, les liens sont cliquables mais le menu défiguré :


Avec l'id :

http://rmx.c.free.fr/FOLDER/p1.PNG

Sans l'ID :

http://rmx.c.free.fr/FOLDER/p2.PNG


Le code du menu est le suivant :

    <div id="frame">
       <ul class="menu" style="text-align: center">
       <li class="first_menu"><a href="/v2/index.php?category/Annonce">Acceuil</a></li>
       <li class="page_item"><a href="/v2/index.php?category/concours">Concours</a> </li>
       <li class="page_item"><a href="/v2/index.php?category/Reglement">Reglement</a></li>
       <li class="page_item"><a href="/v2/index.php?category/prise">Prises</a></li>
       <li class="page_item"><a href="/v2/index.php?category/contact">Nous contacter</a></li>
       <li class="last_menu"><a href="/v2/admin">Login</a></li></ul>
    </div>


L'original étant celui-ci :

    <div id="frame">
       <ul class="menu"><li class="first_menu"><a href="#tabsearch">{{tpl:lang Search}}</a></li><tpl:Categories><tpl:CategoriesHeader><li class="page_item"><a href="#tabcategories">{{tpl:lang Categories}}</a></tpl:CategoriesHeader><tpl:CategoriesFooter></li></tpl:CategoriesFooter></tpl:Categories><tpl:MetaData type="tag"><tpl:MetaDataHeader><li class="page_item"><a href="#tabtags">{{tpl:lang Tags}}</a></tpl:MetaDataHeader><tpl:MetaDataFooter></li></tpl:MetaDataFooter></tpl:MetaData><li class="page_item"><a href="#tabarchives">{{tpl:lang Archives}}</a></li><li class="page_item"><a href="#tablinks">{{tpl:lang Links}}</a></li><tpl:Languages><tpl:LanguagesHeader><li class="page_item"><a href="#tablanguages">{{tpl:lang Languages}}</a></tpl:LanguagesHeader><tpl:LanguagesFooter></li></tpl:LanguagesFooter></tpl:Languages><li class="last_menu"><a href="#tabrss">RSS</a></li></ul>
       <div id="tabsearch" class="fragment">
       <label for="q">{{tpl:lang Search}}</label><form action="{{tpl:BlogURL}}" method="get"><fieldset><p><input type="text" size="10" maxlength="255" id="q" name="q" value="" /><input class="submit" type="submit" value="OK" /></p></fieldset></form>   
       </div>
       <tpl:Categories><tpl:CategoriesHeader><div id="tabcategories" class="fragment">
       <ul></tpl:CategoriesHeader>
          <li><a href="{{tpl:CategoryURL}}">{{tpl:CategoryTitle}}</a></li>   
       <tpl:CategoriesFooter></ul>
       </div></tpl:CategoriesFooter></tpl:Categories>
       <tpl:MetaData type="tag"><tpl:MetaDataHeader><div id="tabtags" class="fragment"><ul>
          </tpl:MetaDataHeader><li><a href="{{tpl:MetaURL}}" class="tag{{tpl:MetaRoundPercent}}">{{tpl:MetaID}}</a></li>
          <tpl:MetaDataFooter></ul>
       </div></tpl:MetaDataFooter></tpl:MetaData>
       <div id="tabarchives" class="fragment">
            <tpl:Archives>
              <tpl:ArchivesYearHeader>
                   <div class="archfloat"><h3>{{tpl:ArchiveDate format="%Y"}}</h3>
                   <ul>
             </tpl:ArchivesYearHeader>
          <li><a href="{{tpl:ArchiveURL}}"
          title="{{tpl:ArchiveDate encode_html="1"}}">{{tpl:ArchiveDate encode_html="1" format="%B"}}</a>
          ({{tpl:ArchiveEntriesCount}})</li>
        <tpl:ArchivesYearFooter>
          </ul></div>
        </tpl:ArchivesYearFooter>
      </tpl:Archives>
       <div class="clear"></div>
       </div>
    <div id="tablinks" class="fragment">
    {{tpl:Blogroll}}
    </div>
        <tpl:Languages><tpl:LanguagesHeader><div id="tablanguages" class="fragment">
          <ul></tpl:LanguagesHeader>
          <li><a class="{{tpl:LanguageCode}}" href="{{tpl:LanguageURL}}"> </a></li>   
       <tpl:LanguagesFooter></ul>
       </div></tpl:LanguagesFooter></tpl:Languages>
       <div id="tabrss" class="fragment">
       <ul><li><a type="application/rss+xml" href="{{tpl:BlogFeedURL type="rss2"}}">{{tpl:lang Entries feed}}</a> - </li><li><a type="application/rss+xml" href="{{tpl:BlogFeedURL type="rss2"}}/comments">{{tpl:lang Comments feed}}</a></li></ul>
       </div>
    </div>

Solution(s) proposée(s) :

Contourner en CSS

Le problème n'étant pas clairement défini et ce malgré multiples recherches (merci d'en faire part si vous connaissez la cause précise), voici une méthode pour contourner le problème.

Pour cela, il faut ajouter dans la page, juste avant la balise suivante :

</head>

Le code suivant :

    <style media="screen" type="text/css">
    <!--
    #menu_debug{
       width:780px;
       margin: 0 10px;
       padding:0px;
       text-align:left;
       }
    -->
    </style>


Enfin, remplacer ceci :

<div id="frame" > 


Par ceci :

    <div id="menu_debug" >


Solution(s) retenue(s) :

Contourner en CSS.


Informations annexes :

Attention aux codes fournis, en fonction de votre thèmse DotClear, cela est susceptible de changer.

Outils personnels