Problême avec span

Bonjour,

j'ai un problème avec la mise en page des derniers sujets du forum sur cette page : http://tinyurl.com/3g4j87z

La mise en page est celle que je veux sur firefox et chrome mais pas sous internet explorer. Je ne comprend pas pourquoi.

Le code du css est :

.cols2 {float: left; width: 35%; padding: 2px 0px 2px 11px; margin: 0px 60px 0px 60px; background-color: #FFFFFF;border-bottom:1px dotted #666 ;}

et le html est une boucle qui fait imprimer les titres avec span.

Tout se passe comme si ie ne prenait pas en compte les dimensions de padding dans span.

Peux être y a t'il une façon plus propre de faire.

Merci de votre aide.

Salut,

Si ta classe .cols2 s'applique à un span, vu que tu déclares une largeur, ainsi que des marges et espacements verticaux, il est plus judicieux d'ajouter un display: block.

Soit dit en passant, pour la structure HTML correspondant à l'affichage des derniers messages du forum, j'emploierais plutôt une liste non ordonnée (ul / li) au lieu d'une série de span contenus dans un même paragraphe.

Salut,

Victor a tout à fait raison, ta structure Html n'est pas correcte.

Victor BRITO a écrit :
il est plus judicieux d'ajouter un display: block

Par contre Victor, ce que tu as indiqué est tout à fait correct mais je pense pas qu'il faut qu'il procède comme ça, la syntaxe ne sera pas bonne et vu que l'on est sur un forum tendant à respecter la syntaxe et l'accessibilité, je pense pas que cette logique soit la bonne... Des span n'ont rien à faire ici. Donc pas de raison de mettre un "display:block".

Victor BRITO a écrit :

j'emploierais plutôt une liste non ordonnée (ul / li) au lieu d'une série de span contenus dans un même paragraphe.

"Plutôt", non ! C'est primordial d'utilisé une liste non ordonnée ici !

Un span ne s'utilise jamais dans ce cas là, tu souhaites des éléments de type "block" (car chaque élément doit passer à la ligne), pourquoi utiliser un span (@skieur : je pense qu'a ce niveau déjà il va falloir te replonger donc de la documentation HTML car tes connaissances syntaxiques n'ont pas l'air au point... ) ???

Comme l'as indiqué Victor tu dois syntaxiquement utilisé un balisage en liste "non-ordonnée".
Les "li" sont de type "block" ça résoudra ton problème.

A++
Modifié par Spacedementia (07 Sep 2011 - 19:07)

Spacedementia a écrit :
Les "li" sont de type "block" ça résoudra ton problème.

Par défaut, l'élément li se voit appliquer la déclaration CSS display: list-item.

Effectivement, je voulais dire "ont une réaction de type block" pour ne pas trop compliquer l'explication donnée à skieur.
Je me suis mal exprimé, tu as bien fait de relever ça.

A++

Bonjour,

je savais que cela ne vous plaira pas ces span . Je ne les avaient pas mis par méconnaissance, mais parce que je cherchais quelque chose à mettre dans la boucle php. Les élément in line m'étaient naturellement venus à l'esprit et je n'avais pas pensé à la liste à puce. C'est pourtant pas fait pour les chiens

Bon voila j'ai viré les span et mis une jolie liste à puce mais cela ne résout pas mon problème.

Je suis en train de chercher pourquoi cela ne s'affiche pas de la même façon sous ie et comment l'afficher comme firefox (qui me plait plus) avec celui-ci.

Si vous avez des idées merci d'avance.

J'ai jeté un oeil à ton code CSS, je pense que le problème vient du fait que ta technique n'est pas proprement codée et vu que IE est plus strict ça ne passe pas...

Tu utilises une dimension en pourcentage sur ta classe "cols2", ok mais alors il faut que tu revois tes margins en pourcentage aussi. Car la ça restera toujours un positionnement approximatif. Car 39% + 80px de margin gauche et droite ne te permettra pas d'avoir un bon rendu partout. Opte pour du pourcentage partout donc dans ton cas par exemple une dimension de tes li à 40% et un margin gauche et droite à 5% ce qui donne : 5%+40%+5%+5%+40%+5% = 100% et pas 40px+39%+40px+40px+39%+40px = ???

Déjà là ça sera plus propre et permettra de voir si le problème persiste. Après pour tes padding internes au li il faudra ajuster la largeur de tes li en fonctions du padding interne (car le padding s'ajoute a la largeur de ton élément).

Mais pour simplifier ton intégration, utilises des unités en pixel. Surtout que ton interface est limitée et non étirable en largeur donc il n'y à aucune raison que tu utilises des pourcentages à ce niveau la.

La logique en pixel est identique tu calcules tes marges, tes largeurs, tes paddings pour qu'au total dans ton cas ça ne dépasse pas 890px.
Modifié par Spacedementia (09 Sep 2011 - 17:36)

As tu résolu ton problème avec les indications fournies ?