Annonce

Important, migration hautement recommandée : WordPress 2.6.2 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

 

  • Index
  •  » Thèmes
  •  » [Résolu] CSS/Widget: Prob. d'affichage de la puce d'un item de 2 lignes

#1 01-07-2008 02:00:19

virgilio
Membre WP
Date d'inscription: 01-07-2008
Messages: 4

[Résolu] CSS/Widget: Prob. d'affichage de la puce d'un item de 2 lignes

Bonjour,

Ma configuration WP actuelle
- Version de WordPress : 2.5.1
- Thème utilisé : WP-Multiflex-3 1.3
- Plugins en place : Category Posts Widget, Creative Commons Configurator, DMSGuestbook, Language Switcher
- Nom de l'hebergeur : infomaniak
- Adresse du site : http://www.swimsa.ch/medicampus

Problème(s) rencontré(s) :
J'ai un problème lorsque les listes de mes widget-menu ont des éléments qui de par leur longueur doivent s'afficher sur deux lignes: La puce souhaitée est remplacée par une sorte de "underscore" souligné. Cela est valable pour tous les widgets, et c'est vraiment pô zoli du tout mad . J'aurais tendance a renvoyé la responsabilité à mon css. Le problème, c'est que je n'ai aucune idée de la raison pour laquelle cette modification se présente (à part la traditionelle erreur d'affichage due au non-respect des spécifications de nos chers navigateurs - je travaille malheureusement avec ie10 sad ).

Si vous avez déjà entendu parler d'une solution à ce problème, merci de me donner un lien. J'ai déjà pas mal cherché sur internet et sur le forum, malheureusement sans succès. Comme le problème semble intrasèque au thème ou très général, je me dis que quelqun doit déjà avoir subi cette erreur (et avoir la solution ange ?).

Au cas où, vous pouvez avoir un apperçu du problème ici, et le css potentiellement concerné est celui-là:

Code: CSS

  1. /* Left sidebar */
  2.  
  3. #sidebar {
  4.   width: 200px;
  5.   padding: 0 0 10px 0;
  6.   margin: 0;
  7. }
  8.  
  9. #sidebar ul {
  10.   margin: 0;
  11.   padding: 0;
  12. }
  13.  
  14. #sidebar li {
  15.   list-style: none;
  16. }
  17.  
  18. #sidebar li h2 {
  19.   background-image: none;
  20.   color: #fff;
  21.   font-size: 1.2em;
  22.   margin: 10px 0 5px 0;
  23.   padding: 5px 0 5px 20px;
  24. }
  25.  
  26. #sidebar a {
  27.   font-size: 1.1em;
  28.   color: #467AA7;
  29.   font-weight: bold;
  30.   text-decoration: none;
  31. }
  32.  
  33. #sidebar li li {
  34.   padding: 0;
  35.   margin: 0 0 0 20px;
  36. }
  37.  
  38. #sidebar  li li a {
  39.   background: url(images/bg_bullet_full_1.gif) left no-repeat;
  40.   padding-left: 10px;
  41.   line-height: 20px;
  42.          list-style-position: inside;
  43. }
  44.  
  45. #sidebar li li a:hover {
  46.   background: url(images/bg_bullet_full_2.gif) no-repeat left;
  47.   color: #2a5a8a;
  48.   text-decoration: underline;
  49. }
  50.  
  51. #sidebar li li li {
  52.   padding: 0;
  53.   margin: 0 0 0 10px; 
  54. }
  55.  
  56. #sidebar li li li a {
  57.   background: url(images/bg_bullet_half_1.gif) left no-repeat;
  58.   padding-left: 10px;
  59.   line-height: 20px;
  60. }
  61.  
  62. #sidebar li li li a:hover {
  63.   background: url(images/bg_bullet_half_2.gif) left no-repeat;
  64.   color: #2a5a8a;
  65.   text-decoration: underline;
  66. }

Hors ligne

 

#2 01-07-2008 02:31:57

Lumière de Lune
Not a plastic girl
Lieu: Allemagne - Maroc
Date d'inscription: 15-08-2007
Messages: 1965
Site web

Re: [Résolu] CSS/Widget: Prob. d'affichage de la puce d'un item de 2 lignes

Essaie de jouer avec la propriété baseline ?

Voyage au Maroc
Photos et web au Maroc
... tout ça sous WordPress, bien sûr !
Avez-vous lu les Dix commandements du débuggueur de blog ?

Hors ligne

 

#3 01-07-2008 03:21:05

virgilio
Membre WP
Date d'inscription: 01-07-2008
Messages: 4

Re: [Résolu] CSS/Widget: Prob. d'affichage de la puce d'un item de 2 lignes

Merci pour ta réponse....

Si j'ai bien compris, ce que tu suggères c'est d'utiliser vertical-align: baseline;, ce que j'ai fait en pratique comme cela:

#sidebar  li li a {
    background: url(images/bg_bullet_full_1.gif) left no-repeat;
    padding-left: 10px;
    line-height: 20px;
    list-style-position: inside;
    vertical-align: baseline;
}

#sidebar  li li li a {
    background: url(images/bg_bullet_full_1.gif) left no-repeat;
    padding-left: 10px;
    line-height: 20px;
    list-style-position: inside;
    vertical-align: baseline;
}

Après test, le code ci-dessus en tout cas ne fonctionne malheureusement pas (pas de changement notable, et surtour pas de réapparition de la puce). J'ai aussi essayé en glissant le vertical-align: baseline; dans d'autre secteur relatif à la liste, sans succès malheureusement...

Une autre idée?

Hors ligne

 

#4 01-07-2008 11:40:16

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

Re: [Résolu] CSS/Widget: Prob. d'affichage de la puce d'un item de 2 lignes

Ce qui me semble bizarre, c'est cette utilisation de
#right-sidebar li li a {style.css (line 746)
background:transparent url(images/bg_bullet_full_2.gif) no-repeat scroll left center;
padding-left:12px;
}
plutôt que d'utiliser list-style-image:url(URI); qui est fait pour ça.

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

 

#5 01-07-2008 12:10:10

virgilio
Membre WP
Date d'inscription: 01-07-2008
Messages: 4

Re: [Résolu] CSS/Widget: Prob. d'affichage de la puce d'un item de 2 lignes

Je crois que l'idée de la syntaxe utilisée était de permettre un changement de la puce au survol du lien: comme ie ne reconnait le hoover qu'avec la balise a (si je ne me trompe pas. J'ai lu un texte qui semblait bien documenté sur le sujet dans mes recherches pour résoudre mon problème), cette syntaxe est nécessaire dans #sidebar pour garder un joli petit effet, et même si cette option n'est pas réutilisée dans #right sidebar (ce qui est un peu bizarre), la syntaxe est cohérente avec ce qui est fait à gauche.

Comme mon problème touche aussi le côté gauche (#sidebar) et pas juste le droit (#right-sidebar), ce serait assez sympa si je trouvais une solution qui résolve le problème sans perte du hoover. Je vais néanmoins essayer ta solution et changer un peu le code en fonction aujourd'hui en fin d'a-m, et je te tiens au courrant de mes résultats.

Merci en tout cas pour ton aide!

Hors ligne

 

#6 01-07-2008 16:50:39

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

Re: [Résolu] CSS/Widget: Prob. d'affichage de la puce d'un item de 2 lignes

Tu peux toujours faire du
li:hover { list-style-image: ... } ;
Ce n'est pas compatible IE6 mais ça doit marcher avec IE7 et en tout cas avec FF2+ et sans doute Opéra.

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

 

#7 01-07-2008 17:03:40

Lumière de Lune
Not a plastic girl
Lieu: Allemagne - Maroc
Date d'inscription: 15-08-2007
Messages: 1965
Site web

Re: [Résolu] CSS/Widget: Prob. d'affichage de la puce d'un item de 2 lignes

Essaye ça :

Code:

  1. background: url(images/bg_bullet_full_1.gif) top left no-repeat;

et enlève le baseline

Voyage au Maroc
Photos et web au Maroc
... tout ça sous WordPress, bien sûr !
Avez-vous lu les Dix commandements du débuggueur de blog ?

Hors ligne

 

#8 02-07-2008 13:57:09

virgilio
Membre WP
Date d'inscription: 01-07-2008
Messages: 4

Re: [Résolu] CSS/Widget: Prob. d'affichage de la puce d'un item de 2 lignes

Hello!

@ Lumière de Lune: Merci pour ta réponse. Ton code fonctionne!! La puce se positionne malheureusement vraiment en "top", ce qui n'est pas très très joli, mais je vais résoudre le problème en ajoutant une marge transparente à ma puce graphique (ça plaira pas aux puristes, mais l'essentiel c'est le résultat smile ).

@ Comme une image: Merci aussi pour ton idée... J'ai préféré finalement la sol. de Lumière de Lune qui je l'espère préservera un max. de compatibilité entre navigateurs...

Bon ben, problème resolu

Hors ligne

 

#9 02-07-2008 19:51:20

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

Re: [Résolu] CSS/Widget: Prob. d'affichage de la puce d'un item de 2 lignes

Il me semble qu'avec la propriété background tu peux positionner le positionnement au pixel près.

Voir http://www.w3schools.com/css/css_background.asp
background-position      Sets the starting position of a background image      top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos

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

  • Index
  •  » Thèmes
  •  » [Résolu] CSS/Widget: Prob. d'affichage de la puce d'un item de 2 lignes

Pied de page des forums

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