Menu non cliquable sur Dotclear
De Wiki PC, Wiki Informatique.
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.
