Votre question

Problème de footer sous wordpress

Tags :
  • Php
  • Programmation
Dernière réponse : dans Programmation
5 Janvier 2010 20:02:33

bonsoir à tous,

je suis entrain de créer mon thème wordpress mais je bloque au niveau du footer (pour l'instant... :pt1cable:  )
le site

donc voila, mon image reste bloqué au niveau de la sidebar et je vois pas où est le probleme dans les fichiers php....!

Dites moi quel code vous voulez voir si vous ne voyez pas la solution ti suite..

merci d'avance

Autres pages sur : probleme footer wordpress

5 Janvier 2010 23:00:42

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.

m
0
l
6 Janvier 2010 14:51:48

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? :??: 
m
0
l
Contenus similaires
6 Janvier 2010 15:18:58

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...).
m
0
l
6 Janvier 2010 15:27:03

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" rel="nofollow" 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/" rel="nofollow" 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/" rel="nofollow" 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 -->


m
0
l
6 Janvier 2010 15:39:40

  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="http://bibidesign.free.fr/?cat=4" 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> ?

m
0
l
6 Janvier 2010 15:42:22

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;}

m
0
l
6 Janvier 2010 15:45:19

  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>
m
0
l
6 Janvier 2010 15:58:35

j'ai supprimé le top left et ça change rien...
j'ai pas compris pour la categories-3....moi je l'ai pas dans mon code, je dois la rajouter????
m
0
l
6 Janvier 2010 16:13:41

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="http://bibidesign.free.fr/?cat=4" 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?
m
0
l
7 Janvier 2010 18:51:34

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...
m
0
l
7 Janvier 2010 23:09:44

Pas de soucis, chacun sont tour...

Concernant ton problème, si comme tu dis : "ça descend pas", c'est un problème au niveau du corps (main), vérifie si l'image est bien en : height:auto.
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS