Votre question

Aide HTML aligner un élément

Tags :
  • Html
  • CSS
  • margin
  • Programmation
Dernière réponse : dans Programmation
2 Avril 2012 12:40:41

Bonjour,
Je suis actuellement en train de créer un site avec une plateforme wordpress et j'ai un petit problème d'alignement de mes widgets. (cf : http://www.julien-sarcome.fr)
Mes deux premiers Widgets (Calendrier&Liens) sont correctement alignés mais le troisième (partage) est complètement collé à mon titre et à ma banderole. J'ai essayé de modifier directement dans le stylesheet.css du pluggin via Filezilla mais toutes mes tentatives de transformer les margin & padding restent veines.

Quelqu'un a-t'il une solution ?

Merci d'avance

Autres pages sur : aide html aligner element

a c 232 L Programmation
2 Avril 2012 13:49:21

Salut,

Je sais pas exactement comment fonctionne ton widget, mais il y a du CSS qui est directement inséré dans ta page.
J'ai ça ligne 27 quand je regarde la source de ta page :
  1. ul.socialwrap {list-style-type:none !important;margin:0; padding:0;text-indent:0 !important;}


C'est là qu'il y a une marge qui est spécifiée et qui colle tout. Supprime le margin de cette déclaration, et ça devrait être bon.
2 Avril 2012 15:54:04

Le problème c'est que je n'ai pas directement accès à ma page avec Wordpress, même en utilisant Filezilla (ou alors je ne sais pas le faire : fort probable). La seule chose que je peux modifier c'est le stylesheet qui se trouve dans le pluggin et dont le contenu est le suivant :

  1. /* cssid=18 */
  2. /* WARNING!! this file is dynamicaly generated changes will */
  3. /* be overwritten with every change to the admin screen. */
  4. /* You can add css to this file in the admin screen. */
  5.  
  6. .socialwrap li.icon_text a img, .socialwrap li.iconOnly a img, .followwrap li.icon_text a img, .followwrap li.iconOnly a img{border-width:0 !important;background-color:none;}
  7. #follow.right {width:32px;position:fixed; right:0; top:100px;background-color:#878787;padding:10px 0;font-family:impact,charcoal,arial, helvetica,sans-serif;-moz-border-radius-topleft: 5px;-webkit-border-top-left-radius:5px;-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;border:2px solid #fff;border-right-width:0}#follow.right ul {padding:0; margin:0; list-style-type:none !important;font-size:24px;color:black;}
  8. #follow.right ul li {padding-bottom:10px;list-style-type:none !important;padding-left:4px;padding-right:4px}
  9. #follow img{border:none;}#follow.right ul li.follow {margin:0 4px;}
  10. #follow.right ul li.follow img {border-width:0;display:block;overflow:hidden; background:transparent url(http://192.168.1.10/~andykillen/dev-wp/wp-content/plugins/share-and-follow/images/impact/follow-right.png) no-repeat -0px 0px;height:79px;width:20px;}
  11. #follow.right ul li a {display:block;}
  12. #follow.right ul li.follow span, #follow ul li a span {display:none}.share {margin:0 3px 3px 0;}
  13. .phat span {display:inline;}
  14. ul.row li {float:left;list-style-type:none;}
  15. li.iconOnly a span.head {display:none}
  16. #follow.left ul.size16 li.follow{margin:0px auto !important}
  17. li.icon_text a {padding-left:0;margin-right:3px}
  18. li.text_only a {background-image:none !important;padding-left:0;}
  19. li.text_only a img {display:none;}
  20. li.icon_text a span{background-image:none !important;padding-left:0 !important; }
  21. li.iconOnly a span.head {display:none}
  22. ul.socialwrap li {margin: 0 3px 3px 0 !important;}
  23. ul.socialwrap li a {text-decoration:none;}ul.row li {float:left;line-height:auto !important;}
  24. ul.row li a img {padding:0;}.size16 li a,.size24 li a,.size32 li a, .size48 li a, .size60 li a {display:block}ul.socialwrap {list-style-type:none !important;margin:0; padding:0;text-indent:0 !important;}
  25. ul.socialwrap li {list-style-type:none !important;background-image:none;padding:0;list-style-image:none !important;}
  26. ul.followwrap {list-style-type:none !important;margin:0; padding:0}
  27. ul.followwrap li {margin-right:3px;margin-bottom:3px;list-style-type:none !important;}
  28. #follow.right ul.followwrap li, #follow.left ul.followwrap li {margin-right:0px;margin-bottom:0px;}
  29. .shareinpost {clear:both;padding-top:0px}.shareinpost ul.socialwrap {list-style-type:none !important;margin:0 !important; padding:0 !important}
  30. .shareinpost ul.socialwrap li {padding-left:0 !important;background-image:none !important;margin-left:0 !important;list-style-type:none !important;text-indent:0 !important}
  31. .socialwrap li.icon_text a img, .socialwrap li.iconOnly a img{border:0;}ul.followrap li {list-style-type:none;list-style-image:none !important;}
  32. div.clean {clear:left;}
  33. div.display_none {display:none;}
  34. .button_holder_left{margin-right:5px;display:inline}.button_holder_right{margin-left:5px;display:inline}


Cependant toutes mes modifs semblent ne rien changer :s
Contenus similaires
a c 232 L Programmation
2 Avril 2012 16:08:54

Y'a marqué qu'il ne fallait pas modifier directement le fichier, qu'il était généré automatiquement, et que tu devrais pouvoir modifier le CSS dans la page d'administration.
2 Avril 2012 16:25:55

Au temps pour moi qui n'avais même pas lu la consigne :s

Merci de votre aide ! Le problème est résolu :) 
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