Se connecter avec
S'enregistrer | Connectez-vous

Problème de footer sous wordpress

Dernière réponse : dans Programmation
Lassé par la pub ? Créez un compte
Expert Programmation

Salut,

Soit plus précis, tu parles de footer,sidebar on ne sais même pas à quoi ressemble tes images, donc on doit deviné le problème et surtout si tu ne donnes pas ton code css/php on ne pas trouver d'erreur.

dans un fichier ou plus particulierement un theme wordpress, y'a plusieurs fichiers .php (index, header, sidebar, footer...)

dans le fichier footer.php j'ai mis ça
Citation :
<?php
/**
* @package WordPress
* @subpackage Classic_Theme
*/
?>

</div>

<?php get_sidebar(); ?>
<div class="clear"></div>
</div><!-- FIN #main -->


<div id="footer">

</div>


<?php wp_footer(); ?>
</body>
</html>

et dans la partie css j'ai mis ça :
Citation :
#footer {height:191px; background:url(images/footer.jpg) repeat-x top left;}


tout con quoi mais je vois que le footer (la bande bleue sur le site se met a la position de "catégories" qui fait partie de sidebar.php

c'est plus clair? :??: 
Expert Programmation

Dans ton css du footer met :

  1. #footer {
  2. height:191px;
  3. background:url(images/footer.jpg) repeat-x;
  4. margin :auto;
  5.  
  6. }


Ensuite au niveau de ta catégorie qui se met au dessus du footer, ton problème provient surement du code css ou de ta page : "sidebar.php"
Affiche le code de ces pages, pour que je regarde.

Pour faire simple tu doit avoir dans l'ordre :

  1. <div id="header"></div>
  2. <div id="sidebar"></div>
  3. <div id="corps"></div>
  4. <div id="footer"></div>


Vérifie déjà ça , si tous est correcte il doit avoir un problème de placement dans le css (float:right/left/center...).

siderbar :
  1. <?php
  2. /**
  3. * @package WordPress
  4. * @subpackage Classic_Theme
  5. */
  6. ?>
  7. <!-- begin sidebar -->
  8. <div id="col22">
  9.  
  10.  
  11. <?php /* Widgetized sidebar, if you have the plugin installed. */
  12. if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
  13. <ul>
  14. <?php wp_list_pages('title_li=' . __('Pages:')); ?>
  15. <?php wp_list_bookmarks('title_after=&title_before='); ?>
  16. <?php wp_list_categories('title_li=' . __('Categories:')); ?>
  17. <li id="search">
  18. <label for="s"><?php _e('Search:'); ?></label>
  19. <form id="searchform" method="get" action="<?php bloginfo('home'); ?>">
  20. <div>
  21. <input type="text" name="s" id="s" size="15" /><br />
  22. <input type="submit" value="<?php esc_attr_e('Search'); ?>" />
  23. </div>
  24. </form>
  25. </li>
  26. <li id="archives"><?php _e('Archives:'); ?>
  27. <ul>
  28. <?php wp_get_archives('type=monthly'); ?>
  29. </ul>
  30. </li>
  31. <li id="meta"><?php _e('Meta:'); ?>
  32. <ul>
  33. <?php wp_register(); ?>
  34. <li><?php wp_loginout(); ?></li>
  35. <li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
  36. <li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS'); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
  37. <li><a href="<a href="http://validator.w3.org/check/referer" target="_blank">http://validator.w3.org/check/referer</a>" title="<?php _e('This page validates as XHTML 1.0 Transitional'); ?>"><?php _e('Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr>'); ?></a></li>
  38. <li><a href="<a href="http://gmpg.org/xfn/" target="_blank">http://gmpg.org/xfn/</a>"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
  39. <li><a href="<a href="http://wordpress.org/" target="_blank">http://wordpress.org/</a>" title="<?php _e('Powered by WordPress, state-of-the-art semantic personal publishing platform.'); ?>"><abbr title="WordPress">WP</abbr></a></li>
  40. <?php wp_meta(); ?>
  41. </ul>
  42. </li>
  43. <?php endif; ?>
  44.  
  45. </ul>
  46.  
  47. </div>
  48. <!-- end sidebar -->


footer:
  1. <?php
  2. /**
  3. * @package WordPress
  4. * @subpackage Classic_Theme
  5. */
  6. ?>
  7.  
  8. </div><!-- FIN #col21 -->
  9.  
  10. <?php get_sidebar(); ?>
  11. <div class="clear"></div>
  12. </div><!-- FIN #main -->
  13.  
  14.  
  15. <div id="footer">
  16.  
  17. </div>
  18.  
  19.  
  20. <?php wp_footer(); ?>
  21. </body>
  22. </html>


moi je pense que ça vient du footer.php quand il appel la sidebar
  1. <?php get_sidebar(); ?>
  2. <div class="clear"></div>
  3. </div><!-- FIN #main -->


Expert Programmation

  1. <?php get_sidebar(); ?>
  2. <div class="clear"></div>
  3. </div><!-- FIN #main -->
  4.  
  5. <div id="footer"> // La "sidebar" est avant, il n'est pas entre la balise "<div></div>"
  6.  
  7. </div>


Donc ici le code est correcte.
=====

J'ai regarder la mise en page au niveau php , tous est correcte :

  1. <!-- begin sidebar -->
  2. <div id="col22">
  3.  
  4.  
  5. <div id="categories-3" class="widget widget_categories"><h2>Catégories</h2> <ul>
  6. <li class="cat-item cat-item-4"><a href="<a href="http://bibidesign.free.fr/?cat=4" target="_blank">http://bibidesign.free.fr/?cat=4</a>" title="Voir tous les articles classés dans My Life">My Life</a>
  7. </li>
  8. </ul>
  9. </div>
  10. </ul>
  11.  
  12. </div>
  13. <!-- end sidebar -->
  14. <div class="clear"></div>
  15. </div><!-- FIN #main -->
  16.  
  17.  
  18. <div id="footer">
  19.  
  20. </div>


Tu as le code css de la "catégorie" : <div id="categories-3" class="widget widget_categories"> </div> ?

css:
  1. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0;}
  2. h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;}
  3. a{text-decoration:none;}
  4. body{text-align:center; background:#d1b37f; font-family:Helvetica Neue; font-size: 11px;}
  5. #head{ background:url(images/bg.jpg) repeat-x #d1b37f; height:560px;}
  6. #head #paysage{ position:relative; width:1200px; margin:0 auto; background:url(images/head.jpg) top left no-repeat; height:208px; }
  7. #head #paysage #menu{position:absolute; top:157px; left:667px; }
  8. #head #paysage #menu ul{}
  9. #head #paysage #menu li{float:left; width:150px; list-style:none; }
  10. #head #paysage #menu li a{text-decoration:none; float:left; width:150px; font-size:14px; font-family:Sathu; color:#0088b5; text-transform:uppercase; }
  11. #head #paysage #menu li a:hover{background:url(images/over.png); height:50px;}
  12. #head #paysage #menu li a:focus{background:url(images/over.png); height:50px;}
  13. #head #paysage #menu li a span{ display:block; font-size:10px; font-family:Andale Mono; text-transform:lowercase}
  14. #head #paysage #presentation{position:absolute; margin-left:30px; top:130px; width:380px;}
  15. #head #paysage #presentation h1{float:left; text-align:justify; font-family:Bell Gothic Std; font-size:18px; color:#bfa16d;}
  16. #head #paysage #presentation p{float:left; text-align:justify; font-family:Helvetica Neue; font-size:14px; color:#7e7d7d}
  17.  
  18. #main{width:1200px; margin:0 auto; text-align:left;}
  19. #col21{width:513px; margin-left: 150px; float:left; margin-top:-300px;}
  20. #col21 .post-top{ background:url(images/post_head.gif) top left no-repeat;position:relative; height:71px; line-height:71px;}
  21. #col21 .post-top h1{ text-align:center; font-family:Sathu; font-size: 14px; text-transform:uppercase; height :71px;}
  22. #col21 .post-top .post-cat{position:absolute; top:-20px; left:10px; font-family:Sathu; font-size:11px;}
  23. #col21 .post-top .post-date{position:absolute; top:25px; left:10px; font-family:Sathu; color:#ffffff; font-size:11px;}
  24. #col21 .post-top h1 a,#col21 .post-cat a,#col21 .post-cat{color:#ffffff;}
  25. #col21 .post-top.tour-du-web .post-cat a,#col21 .post-top.tour-du-web{color:#f67ef2;}
  26. #col21 .post-top.my-life .post-cat a,#col21 .post-top.my-life{color:#ffffff;}
  27. #col21 .post-top.nouvelles-technologies .post-cat a,#col21 .post-top.nouvelles-technologies{color:#57b2f2;}
  28. #col21 .post-top.graphismes .post-cat a,#col21 .post-top.graphismes{color:#86f089;}
  29. #col21 .post-top.musiques .post-cat a,#col21 .post-top.musiques{color:#f1e886;}
  30.  
  31. #col21 .post-content{ background:#e2e2e2; color:#5f5f5f; padding:0 10px;}
  32. #col21 .post-content a{font-weight:bold; color:#0088b5}
  33. #col21 .post-content .comments a{font-weight:bold; color:#0088b5; line-height:45px; margin-left:3px;}
  34. #col21 .post-content .comments{font-size:1.8em; display:block; height:50px; margin-top: 20px;}
  35. #col21 .post-content .comments span{height:47px; width:50px; background:url(images/bulle.png) top left no-repeat; float:left; color:#e2e2e2;text-align:center; line-height:40px;}
  36. #col21 .post-bot{height: 76px; width: 513px; background:url(images/post_footer.gif) top left no-repeat; margin-bottom: 30px;}
  37.  
  38. #col22{float:right; width:250px; padding-left:250px;}
  39. #col22 h2{font-family:Geneva; color:#bfa16d; font-size:18px;}
  40. #col22 .widget_categories ul{list-style:none;}
  41. #col22 .widget_categories li{height:39px; width:219px; background:url(images/cat.gif) top left no-repeat #ffffff; margin-bottom:2px;}
  42. #col22 .widget_categories li a{color:#ffffff; font-size:11px; font-family:Sathu; line-height:39px; padding-left:10px;}
  43.  
  44. #footer {height:191px; background:url(images/footer.jpg) repeat-x ; margin:auto;}

Expert Programmation

  1. 41. #col22 .widget_categories li{height:39px; width:219px; background:url(images/cat.gif) top left no-repeat #ffffff; margin-bottom:2px;}


Supprime le :"top left", et regarde où la catégorie se place.
Dans la page que tu as donné, je n'est pas trouvé" : "#categories-3" ==> <div id="categories-3" class="widget widget_categories"> </div>
Expert Programmation

Bon reprenons par étape :

Sur ton index j'ai ce code-ci pour la "sidebar "(clique droit=> code source) :

  1. <!-- begin sidebar -->
  2. <div id="col22">
  3. <div id="categories-3" class="widget widget_categories"><h2>Catégories</h2> <ul>
  4. <li class="cat-item cat-item-4"><a href="<a href="http://bibidesign.free.fr/?cat=4" target="_blank">http://bibidesign.free.fr/?cat=4</a>" title="Voir tous les articles classés dans My Life">My Life</a>
  5. </li>
  6. </ul>
  7. </div>


D'après ce code sur ta "sidebar" il y a juste le nom de la catégorie rien d'autre, donc
le problème de positionnement correspondrais a la "sidebar" c'est à dire à l'id : col22, le code css est :

  1. 38. #col22{float:right; width:250px; padding-left:250px;}


remplace ce code par :

  1. 38. #col22{width:250px; }


Logiquement ta catégorie va bouger, ensuite à toi de voir pour la positionner à
l'endroit voulu (demande moi si tu n'arrives pas).

Ta sidebar normalement elle se place où?
En dessous de ta bannière?
A gauche, a côté de ton corps?

desolé de repondre que maintenant mais periode d'exam oblige...
en tout cas merci m@cduf, je pense que ça marche^^lol mais encore un petit probleme, le footer ne bouge pas (descend pas) quand je met des autres articles... il se met bien en dessous de la "sidebar" mais c'est tout...
Lassé par la pub ? Créez un compte
Tom's guide dans le monde