28172 sujets

CSS et mise en forme, CSS3

J'ai souvent ce problème lorsque je veux une mise en forme qui se dégrade naturellement, c'est-à-dire que même sans fichier de mise en forme (CSS) la page s'affiche plus ou moins correctement. Je m'explique: en utilisant des éléments p au lieu de div, si un utilisateur n'a pas accès ou désactive la feuille de style, la page sera quand même divisée en paragraphes.

Mon problème vient du fait que parfois je veux faire 'float'er des parties et qu'à chaque fois que j'utilise un p au lieu d'un div, le résultat n'est pas conforme à mes attentes. Souvent un saut de ligne est rajouté.

Je pose donc la question: une fois qu'on a enlevé à p tous ses margins et ses paddings, quelle est la différence entre un p et un div?

Olivier
Saeletra a écrit :
Je m'explique: en utilisant des éléments p au lieu de div, si un utilisateur n'a pas accès ou désactive la feuille de style, la page sera quand même divisée en paragraphes.


La différence est là...

Saeletra a écrit :
Mon problème vient du fait que parfois je veux faire 'float'er des parties et qu'à chaque fois que j'utilise un p au lieu d'un div, le résultat n'est pas conforme à mes attentes. Souvent un saut de ligne est rajouté.


Pour éviter ce problème, ainsi que plein d'autre, le mieux est de lire cet article: http://blog.alsacreations.com/2007/07/02/369-reset-css-une-technique-a-manier-avec-precaution

Et par conséquence d'utiliser un fichier reset.css au lieux de *{padding:0px}
Saeletra a écrit :
quelle est la différence entre un p et un div?

Au-delà des éventuelles différences de rendu visuel, c'est une question intéressante sur le fond qui a déjà soulevé d'houleux débats.
Pour rester purement pragmatique, on dira que la seule différence fondamentale entre p et div se situe au niveau du type d'enfants acceptés: à l'inverse de la division qui n'impose aucune restriction, un paragraphe ne peut contenir que des éléments de type inline (tels que strong, a, etc.).
Saeletra a écrit :
quelle est la différence entre un p et un div?

La différence est sémantique.
Un <p> est un paragraphe, une <div> est un conteneur.
Les margins et paddings de mise en forme d'un <p> sont issues des CSS par défaut de ton navigateur.
Un <p> aura des margins et paddings différents sous IE, FF, ou un autre nouveau navigateur alors que tu n'auras appliqué aucune CSS.