Problème de balise <p>

Eléphant du PHP | 54 Messages

17 août 2008, 18:59

Bon voila.....
Je ne prendrai pas 5 heures pour tenter de vous expliqez mon problème avec des mots car sa m'en prendrais environ 1000! :(
Comme un image vaut mille mots et bien voilà! :lol:
Image

Dans l'image du HAUT Je n'est pas mis de <p> pour encadrer mon texte
Dans celle du bas...Si. Et voilà le "superbe" résultat que j'obtient pour avoir la validité W3C :S.

De plus,
Avec <p> sa fonctionne sous IE mais pas sous FF. Habituellement c'est le contraire :S

Donc en résumé, Sous IE, avec ou sans <p> sa fonctionne bien
Sous FF, Sans <p> sa foncionne et avec les <p> sa ne fonctionne plus.

Merci de votre aide
Modifié en dernier par Myst3ry le 17 août 2008, 19:13, modifié 1 fois.
S'il faut vivre longtemps, vaux mieu le faire avec le sourire.

Avatar du membre
Administrateur PHPfrance
Administrateur PHPfrance | 9782 Messages

17 août 2008, 19:07

Bonjour,

As-tu essayé de supprimer les margin et padding à ton <p> ?
<p style="margin:0px; padding:0px"> ...</p>
Quand tout le reste a échoué, lisez le mode d'emploi...

Eléphant du PHP | 54 Messages

17 août 2008, 19:13

Yep

Code : Tout sélectionner

<p style="margin:0px; padding:0px; vertical-align:0px">
S'il faut vivre longtemps, vaux mieu le faire avec le sourire.

ViPHP
AB
ViPHP | 5818 Messages

17 août 2008, 19:26

Pour compléter un peu le message d'@rthur, certains éléments html (beaucoup) ont des valeurs par défaut pour padding et margin, différentes pour chaque navigateur.

Donc pour pallier à ce problème on voit souvent dans les feuilles de style

Code : Tout sélectionner

body, p { margin:0; padding:0; }
C'est le minimum car il existe une multitude d'autres balises qui ont des valeurs par défaut différentes en fonction des navigateurs ex : ul, hr, h1 ... et quasiment toutes les balises concernant les formulaires.

ViPHP
AB
ViPHP | 5818 Messages

17 août 2008, 19:33

Yep

Code : Tout sélectionner

<p style="margin:0px; padding:0px; vertical-align:0px">
Dans une balise <p>, vertical-align concerne l'alignement du texte par rapport aux images. Si pas d'image, vertical-align ne sert à rien.

Par ailleurs je te conseille d'adopter plutôt le formatage des <p> comme mentionné dans mon exemple. Cela t'évitera d'avoir à réécrire <p style="margin:0; padding:0; > pour chaque nouvelle balise p :wink:

Eléphant du PHP | 54 Messages

17 août 2008, 19:43

d'accord mais.....sa fonctionne toujours pas ;) :cry: :cry:
S'il faut vivre longtemps, vaux mieu le faire avec le sourire.

ViPHP
AB
ViPHP | 5818 Messages

17 août 2008, 19:50

d'accord mais.....sa fonctionne toujours pas ;) :cry: :cry:
Ben oui mais si tu ne nous montre pas le code correpondant comment veux tu que l'on puisse t'aider :?:

Eléphant du PHP | 54 Messages

17 août 2008, 20:15

Voilà Monsieur Chef,
	  <table align="center" width="500px" height="30px" CELLSPACING=0>
		       <tr>
				  <td background="top_gauche.gif" align="left" width="250px"><div class="top_gauche"><p style="margin:0px; padding:0px; vertical-align:0px">Par: <?php echo $first_affiche['pseudo'];?></p></div></td>
				  
				  <td background="top_droit.gif" align="right" width="249px"><div class="top_droit"><p>Le <?php echo date('d/m/Y à H\hi', $first_affiche['timestamp']); ?></p></div></td>
			   </tr>
		  </table>
		  
		  <table align="center" width="500px" height="100%" background="middle.gif" CELLSPACING=0>
				<tr><td align="left" ><div class="corps"><?php echo stripslashes($first_affiche['message']); ?></div></td></tr>
		  </table>
		  
		  <table align="center" width="500px" height="9px" background="bas.gif" CELLSPACING=0><tr><td></td></tr></table>
CSS

Code : Tout sélectionner

.top_gauche { margin-left: 5px; vertical-align: top; } .top_droit{ margin-right: 5px; vertical-align: top; } .corps { margin-left: 5px; margin-right: 5px; margin-top: 5px; vertical-align: top; } .middle { background-attachment: fixed; background-repeat: no-repeat; } div.top_gauche p { margin: 0px; padding: 0px; vertical-align: top; }
J'ai pas mis partout. J'ai fais seulement un test pour voir et si sa fonctionne je l'aplliquerai partout[/code]
S'il faut vivre longtemps, vaux mieu le faire avec le sourire.

ViPHP
AB
ViPHP | 5818 Messages

17 août 2008, 21:42

Oulà pas beau :(

Plus tu mets de styles en cascade, plus tu risques de générer du bin's. Faudrait recommencer avec des choses simples (sans même l'utilisation de la bdd). Que tu utilises des tableaux, cela peut se concevoir pour un livre d'or, mais ajouter dans tes cellules des <div> et <p> sans justifications ça complique les choses.

Si tu veux faire un bord dans une de tes lignes qui remplira toute la largeur de ta table tu peux faire:

Code : Tout sélectionner

<table cellspacing="0" cellpadding="0" style = "width:500px"> <tr><td>texte blu blu sans bord</td></tr> <tr><td style = "width:100%; border:2px solid black">texte bla bla avec un bord</td></tr> </table>
N'oublie pas d'indiquer cellpadding (ici je l'ai mis à zero mais tu peux choisir une autre valeur).

Edit si ton tableau possède déjà une bordure, pour éviter de rajouter une épaisseur sur les côtés quand tu veux entouré une ligne il te suffit de faire

Code : Tout sélectionner

<tr><td style = "width:100%; border-top:2px solid black;border-bottom:2px solid black;">texte bla bla avec un bord</td></tr>
Modifié en dernier par AB le 17 août 2008, 21:49, modifié 2 fois.

Eléphant du PHP | 54 Messages

17 août 2008, 21:48

C'est suposé m'aider...? :oops:
Car je suis un peu perdu là. Si C,est un peu le bouillit c'est que j'ai fais des test et rien n'y fais.
J'ai déjà recommencé 1 fois et sa à l'air que c'est pas bien codé :cry:

Comment faire plus simple? :oops:

Merci

EDIT:
POur vrais voici le code entier CSS:

Code : Tout sélectionner

body { text-align: center; font-family: Verdana, Arial, Sans-serif; } table { text-align:center; } /*Lien*/ a img /* Toutes les images contenues dans un lien */ { border: none; /* Pas de bordure */ } a:link { color: #000000; text-decoration: none; } a:visited { color: #000000; text-decoration: none; } a:hover { color: #060c5f; text-decoration: none; } a:active { color: #000000; text-decoration: none; } ul { text-align: center; font-weight: normal; font-size:9px; font-family: Arial; list-style: none; margin: 0; } li { text-align: center; font-family: Arial; float: center; } li a { text-align: center; font-family: Arial; margin: 0px 15px; } .top_gauche { margin-left: 5px; vertical-align: top; } .top_droit{ margin-right: 5px; vertical-align: top; } .corps { margin-left: 5px; margin-right: 5px; margin-top: 5px; vertical-align: top; } .middle { background-attachment: fixed; background-repeat: no-repeat; } div.top_gauche p { margin: 0px; padding: 0px; vertical-align: top; }
S'il faut vivre longtemps, vaux mieu le faire avec le sourire.

ViPHP
AB
ViPHP | 5818 Messages

17 août 2008, 22:06

Je viens d'éditer mon précédent message.

Faudrait que tu recommence ligne après ligne en obtenant le résultat voulu avec le minimum de code.
Le bout de code minimaliste que je t'ai donné plus haut devrait d'aider en cela.

Pour centrer un élément de type bloc (table div p) la bonne méthode est de lui fixer une largeur puis de mettre margin:auto.
Par exemple pour que toutes tes tableaux aient une largeur de 500px et soient centrés par rapport à leur conteneur :

Code : Tout sélectionner

table { width:500px; margin:auto; }
Cela t' évitera d'utiliser text-align:center; qui peut mettre du bin's par ailleurs. Ne mettre cet attribut que pour les cellules ou blocs pour lesquels tu veux avoir du texte centré.

Eléphant du PHP | 54 Messages

17 août 2008, 22:11

D'accord....Je vais suivre ta démarche....Je verrais. Je te dit du nouveau dès que j'en est.

Encore Merci

edit:
Et bein voila....En refaisant le code comme tu ma dis, c'est nikel ;)
Merci beaucoup :wink:
S'il faut vivre longtemps, vaux mieu le faire avec le sourire.