Annonce

Important : WordPress 2.6.1 est disponible en français. À lire avant la migration !
Annonce 1 : Le Codex en français a besoin de vous pour avancer !
Annonce 2 : Avant de poster, n'oubliez pas de faire une petite Recherche et de lire les règles de ce forum.
Annonce 3 : Lisez notre blog, il regorge de bonnes informations.

Pages: 1

 

#1 30-05-2008 17:23:47

rouzb
Connaisseur WP
Date d'inscription: 19-05-2008
Messages: 31

combiner categories et pages dans le menu horizontal

Bonjour,

Ma configuration WP actuelle 
- Version de WordPress : 2.5.1
- Thème utilisé : le mien
- Plugins en place :
- Nom de l'hebergeur : je travaille en local
- Adresse du site :

Problème(s) rencontré(s) :

bonjour,

je voudrais faire un menu horizontal dans mon header, qui contiendrait les categories ET les pages, le tout sur la MEME ligne. Voici mes codes dans le :

- header.php :

<div id="navmenu">
<ul>
                       
<?php wp_list_cats('depth=1'); ?>
<?php wp_list_pages('title_li='); ?>
                   
           
</ul>
</div>

- style.css :


#navmenu ul {margin: 0; padding: 0;
    list-style-type: none; list-style-image: none; display: inline; }
#navmenu li {display: inline; }
#navmenu ul li a {text-decoration:none;  margin: 4px;
    padding: 5px 20px 5px 20px; color: blue;
    background: red;}
#navmenu ul li a:hover {color: purple;
    background: yellow; }

Avec ca, j'ai mes categories sur une ligne, et mes pages sur une autre, alors que je voudrais que tout soit sur la meme ligne.

Quelqu'un a-t-il une idée de ce que je devrais faire??

Merci d'avance.

Hors ligne

 

#2 30-05-2008 18:16:13

jmini
Expert WP
Date d'inscription: 01-05-2008
Messages: 223

Re: combiner categories et pages dans le menu horizontal

Hum : un truc qu'il faut savoir : avec les fonctions wp que tu cites tu ne pourras pas les mélanger dans la même liste (sur une ligne ou non, ca reste des listes HTML).

Si c'est bon pour toi, alors indique le code HTML qui est produit en ce moment avec le code que tu as donné.
Qu'est ce qui ne va pas ?

(il faut aussi s'assurer que les deux fonctions ne remettent pas un <ul> --> Regarder dans le CODEX ce qu'il faut ajouter comme paramètre, il me semble que c'est possible)

Hors ligne

 

#3 30-05-2008 21:52:01

rouzb
Connaisseur WP
Date d'inscription: 19-05-2008
Messages: 31

Re: combiner categories et pages dans le menu horizontal

merci pour ton aide.


en enlevant la balise <ul>, tout s'affiche maintenant sur la meme ligne. Par contre, bizarrement, en ne mettant que "wp_list_pages", cela affiche également les catégories. Est ce que tu comprends pourquoi??

pour ce qui est du code html qui est produit, etant novice, je n'ai bien sur pas compris de quoi tu parlais. pourrais tu m'en dire plus (rapidement)??

Hors ligne

 

#4 31-05-2008 09:59:59

jmini
Expert WP
Date d'inscription: 01-05-2008
Messages: 223

Re: combiner categories et pages dans le menu horizontal

rouzb a écrit:

En enlevant la balise <ul>, tout s'affiche maintenant sur la meme ligne. Par contre, bizarrement, en ne mettant que "wp_list_pages", cela affiche également les catégories. Est ce que tu comprends pourquoi??

Très bizarre (pour ne pas dire impossible)

rouzb a écrit:

pour ce qui est du code html qui est produit, etant novice, je n'ai bien sur pas compris de quoi tu parlais. pourrais tu m'en dire plus (rapidement)??

Le code PHP dans ton template est converti par le serveur en code HTML de la page qui est appelé par le navigateur. Typiquement les deux fonctions que tu as mises génère les liens vers les catégories et les pages.

Comme tu travaille en local, on ne peux pas regarder ou tu en es... Ce que je te demandais c'est de nous copier ici le HTML d'une des pages de ton blog (voir sources dans ton navigateur). Limite toi à la partie de ce menu (c'est pour voir si les ul sont imbriqué ou non.

Hors ligne

 

#5 31-05-2008 17:13:43

Comme une image
Burpeur Wordpress
Lieu: Paris (enfin presque)
Date d'inscription: 30-01-2008
Messages: 1570
Site web

Re: combiner categories et pages dans le menu horizontal

Je pense que tu devrais y arriver en encapsulant chacune de tes deux listes dans une div style = float:left

Outils de base : Firefox+Firebug, Google-est-mon-ami™, Notepad++. Avec ça, on règle 78,24% des problèmes wink
Pour aller plus loin : Côt côt codex FR EN ! WAMP/LAMP/MAMP

« On paie mal un maître en ne restant toujours que l'élève. » — F. Nietzsche

Hors ligne

 

#6 31-05-2008 18:15:05

rouzb
Connaisseur WP
Date d'inscription: 19-05-2008
Messages: 31

Re: combiner categories et pages dans le menu horizontal

salut,

merci jmimi pour ta réponse. Voila le code source de ma page html, j'ai mis tout le header

Code:

  1. <div id="header">
  2.    
  3.       <div class="headertop">
  4.  
  5.         <div class="headerleft">
  6.      
  7.         </div>
  8.        
  9.         <div class="headerright">
  10.        
  11.         </div>
  12.       </div>
  13.  
  14.       <div class="headerbottom">
  15.        
  16.          
  17.              
  18.       </div>
  19.      
  20.       <div id="navmenu">
  21.                            
  22.         <li><a href="http://localhost/wordpress/?cat=4" title="Musique">Musique</a></li>
  23.  
  24. <li class="page_item page-item-8"><a href="http://localhost/wordpress/?page_id=8" title="Recrutement">Recrutement</a></li>
  25. <li class="page_item page-item-9"><a href="http://localhost/wordpress/?page_id=9" title="Producteurs">Producteurs</a></li>
  26. <li class="page_item page-item-13"><a href="http://localhost/wordpress/?page_id=13" title="Qui sommes nous?">Qui sommes nous?</a></li>
  27. <li class="page_item page-item-14"><a href="http://localhost/wordpress/?page_id=14" title="Espace membres">Espace membres</a></li>
  28. <li class="page_item page-item-12"><a href="http://localhost/wordpress/?page_id=12" title="Contact">Contact</a></li>
  29. <li class="page_item page-item-19"><a href="http://localhost/wordpress/?page_id=19" title="Liens">Liens</a></li>
  30.                        
  31.       </div> 
  32.     </div>

par ailleurs, il m'est impossible de centrer le content et le header, alors que j'ai mis la meme marge qe pour le header qui lui est centré (margin : 0 auto 0 auto;). Voila un extrait du code de ma feuille css en rapport à ces trois bloc

Code:

  1. #header {
  2. font-family: Lucida Grande, Trebuchet MS, Arial, Helvetica, Georgia, Sans-serif;
  3. float: left;
  4. height: 300 px;
  5. width: 900px;
  6. list-style-type: none;
  7. margin: 0 auto 0 auto;
  8. }
  9.  
  10. #content {
  11.  
  12. background: url(images/content.jpg);
  13. width: 700px;
  14. height : 1300px;
  15. margin: 0 auto 0 auto;
  16. float: left;
  17. clear : both;
  18. }
  19.  
  20. .sidebar {
  21. font-size: 1.2em;
  22. float: left;
  23. width: 200px;
  24. height : 1300px;
  25. margin-left : 0px;
  26. background:url(images/sidebar3.jpg);
  27. }
  28.  
  29. #footer {
  30. font-size: 1em;
  31. text-align: center;
  32. background:url(images/footer.jpg);
  33. clear: both;
  34. width: 900px;
  35. height : 200px;
  36. }

merci d'avance.

Hors ligne

 

#7 31-05-2008 19:15:28

Comme une image
Burpeur Wordpress
Lieu: Paris (enfin presque)
Date d'inscription: 30-01-2008
Messages: 1570
Site web

Re: combiner categories et pages dans le menu horizontal

J'insiste !

Remplace
<ul>           
<?php wp_list_cats('depth=1'); ?>
<?php wp_list_pages('title_li='); ?>   
</ul>

par

<div style="float:left">           
<?php wp_list_cats('depth=1'); ?>
</div>
<div style="float:left">           
<?php wp_list_pages('title_li='); ?>   
</div>

à faire suivre d'un élément avec clear:both

Outils de base : Firefox+Firebug, Google-est-mon-ami™, Notepad++. Avec ça, on règle 78,24% des problèmes wink
Pour aller plus loin : Côt côt codex FR EN ! WAMP/LAMP/MAMP

« On paie mal un maître en ne restant toujours que l'élève. » — F. Nietzsche

Hors ligne

 

#8 31-05-2008 21:02:00

rouzb
Connaisseur WP
Date d'inscription: 19-05-2008
Messages: 31

Re: combiner categories et pages dans le menu horizontal

effectivement, maintenant tout s'affiche sur la meme ligne. par contre, il se passe toujours la meme chose, il semble que wp_list pages affiche également mes catégories, puisque maintenant elles sont en double. est-ce que tu comprends pourquoi??

et sinon que dois(je faire pour centrer mes blocs??

merci d'avance

Hors ligne

 

#9 31-05-2008 21:10:57

Comme une image
Burpeur Wordpress
Lieu: Paris (enfin presque)
Date d'inscription: 30-01-2008
Messages: 1570
Site web

Re: combiner categories et pages dans le menu horizontal

Pour centrer l'ensemble, tu inclues tes deux div flottantes dans une autre div non flottante avec margin:auto.


Pour l'affichage en doute, je ne sais pas, c'est louche ! positionne une classe ou un id spécifique pour encadrer tes deux listes ; fais-nous un copier coller a) du programme source .php b) du code html généré (c'est toujours plus difficile de debugger en aveugle).

Outils de base : Firefox+Firebug, Google-est-mon-ami™, Notepad++. Avec ça, on règle 78,24% des problèmes wink
Pour aller plus loin : Côt côt codex FR EN ! WAMP/LAMP/MAMP

« On paie mal un maître en ne restant toujours que l'élève. » — F. Nietzsche

Hors ligne

 

#10 31-05-2008 22:04:09

rouzb
Connaisseur WP
Date d'inscription: 19-05-2008
Messages: 31

Re: combiner categories et pages dans le menu horizontal

merci pour ton aide, mais je ne comprends pas " Pour centrer l'ensemble, tu inclues tes deux div flottantes dans une autre div non flottante avec margin:auto" .. ou est ce que je dois ce que tu me dis : dans le header.php ?? le footer.php? l' index.php ??

desole, je suis vraiment débutant!!

Hors ligne

 

#11 31-05-2008 22:12:45

Comme une image
Burpeur Wordpress
Lieu: Paris (enfin presque)
Date d'inscription: 30-01-2008
Messages: 1570
Site web

Re: combiner categories et pages dans le menu horizontal

Quelque chose comme :

Code: PHP

  1. <div style="margin:auto">
  2.   <div style="float:left">           
  3.     <?php wp_list_cats('depth=1'); ?>
  4.   </div>
  5.   <div style="float:left">           
  6.     <?php wp_list_pages('title_li='); ?>   
  7.   </div>
  8. </div>


Ah, si tu es vraiment débutant, tu as du faire un copier-coller du code que je t'ai donné et c'est mal !
Il faut que tu mettes tes attributs de style dans ton fichier CSS et gérer ça avec des classes ou des ids.

Si tu ne comprends pas le paragraphe ci-dessus, commence par trouver sur le net un tutoriel CSS pour apprendre les bases, sinon tu ne t'en sortiras jamais.

Outils de base : Firefox+Firebug, Google-est-mon-ami™, Notepad++. Avec ça, on règle 78,24% des problèmes wink
Pour aller plus loin : Côt côt codex FR EN ! WAMP/LAMP/MAMP

« On paie mal un maître en ne restant toujours que l'élève. » — F. Nietzsche

Hors ligne

 

 

Pages: 1

Pied de page des forums

Propulsé par PunBB 1.2.20
© Copyright 2005-2006 WordPress France