Salut à tous,

j'ai problème d'affichage entre Safari, Firefox et Explorer.

comme vous pouvez le voir sur le lien ci-dessous selon le navigateur, le texte n'est pas de la même longueur.

http://www.imagup.com/data/1288977059.html

Savez-vous d'où peux provenir le problème, et comment le corriger?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
#CP {
width: 780px;
margin-right: auto;
margin-left: auto;
}
#C11 {
text-align: justify;
width: 780px;
font-family: "Century Gothic";
font-size: 11px;
}
</style>
</head>

<body>
<div id="CP">
<div id="C11"><strong>LES ARCHITECTES DU TEMPS</strong><br />
<br />
Depuis 1911, les Architectes du Temps consacrent leur talent, leur
passion et leur créativité au design et à la fabrication de montres
distinctives, perpétuant une réelle fascination.<br />
<br />
Premières esquisses, plans à l'échelle, matériaux nobles, proportions
harmonieuses, courbes originales, textures lisses, détails de finition,
autant de vocabulaire que la création des montres Ebel et le monde de
l'architecture partagent. Il ne s'agit pas uniquement d'un hasard
linguistique, mais d'un même esprit que l'on retrouve dans ces deux
disciplines exigeantes.<br />
<br />
Dans l'horlogerie comme dans l'architecture, c'est un mélange de
raffinement artistique et de précision technique qui permet aux oeuvres
d'allier la fonction et l'émotion. Tout en remplissant clairement une
ou plusieurs missions pratiques, la forme d'une véritable création
architecturale, qu'elle soit un bâtiment ou une montre, est imprégnée
d'une esthétique évidente, d'une grande sophistication et d'un sens
artistique remarquable.<br />
<br />
De la conception à la production de chaque montre Ebel, une technologie
de pointe et un savoir-faire exceptionnel se combinent à une
inspiration visionnaire, dans le respect des normes de qualité élevées
fixées par les Architectes du Temps.<br />
<br />
<br />
<strong>LES RÈGLES DE QUALITÉ</strong><br />
<br />
Ebel à toujours fait de la qualité une philosophie d'entreprise. Les
normes techniques sans compromis qu'elle applique, correspondant au
label «Swiss Made», sont les plus élevées du secteur horloger. La
priorité absolue d'Ebel est la satisfaction de ses clients, et ce souci
constant de la qualité est une des principales caractéristiques
immuables dans toutes les collections de la marque.<br />
<br />
Cette détermination à toute épreuve s'appuie sur un certain nombre de
moyens techniques et de procédures, tels que l'utilisation de systèmes
éprouvés, testés et brevetés. Par exemple, le système breveté
garantissant l'étanchéité des couronnes Ebel fonctionne même lorsque
l'espace est très restreint, comme dans certains modèles pour dames.
Ebel insiste sans relâche sur tous les détails, même les plus infimes,
afin de maintenir le niveau de qualité qu'elle s'est fixé. Ainsi, dans
une glace de montre comme celle de la collection Tarawa, la plus petite
inclusion ou bulle d'air nuirait à la fiabilité du produit et réduirait
le plaisir de l'utilisateur.<br />
<br />
Les produits Ebel nécessitent les meilleurs composants et les matériaux
les plus nobles: des diamants de qualité IF à VVS1, une nacre superbe
pour les cadrans ou encore un cuir d'alligator pleine peau et cousu
main pour les bracelets. Les experts en sertissage de pierres calculent
l'orientation de chaque diamant pour qu'il brille de mille feux. De
même, la création est mise en valeur par sa finition: un brossage
satiné ou un polissage irréprochable, réalisé de manière à magnifier la
montre et à souligner ses formes.<br />
<br />
Les étapes de la production d'une montre Ebel ne comportent pas moins
de 235 points de contrôle, tous aussi cruciaux et sévères, afin
d'assurer la fiabilité de chaque composant et de garantir sa longévité. Toutefois, au-delà de la technologie et des machines ultra
perfectionnées employées à chaque étape, ce sont indubitablement
l'expérience et les connaissances humaines qui jouent le rôle le plus
important dans le respect des normes de qualité.</div>
</div>
</body>
</html>
Salut

J'utiliserais la balise p pour les paragraphes : que tu pourras instruire en CSS.

Exemple

p { color:#333; width:780px; text-align:justify; }

Tu auras un meilleur controle sur tes objets texte.

++
oui j'ai essayé sa marche, mais comment faire pour que l'espace entre la bordure et la première ligne de texte ne sois pas affecté (pareil pour la dernier ligne est sa bordure)
Salut

Ce n'est pas le rôle de la balise div d'avoir des instructions qui concerne le texte. Même si c'est fonctionnelle. Voici un exemple

body { margin:0; padding:0; }
div#conteneur { width:780px; height:auto; padding:5px; }
p { color:#333; width:780px; text-align:justify; }


. . .
<body>
  <div id="conteneur">
    <p>
       Ici mon premier paragraphe    
    </p>
    <p>
       Ici mon deuxième paragraphe    
    </p>
  </div>
</body>
. . .

Toi tu écrit directement sur la page sans la balise p : les navigateurs ayant des valeurs par défaut différentes c'est ce qui fait la différence dans le rendu. Il est donc correcte de faire un reset à body.

De même informe toi sur la notion d'héritage en CSS. C'est une notion importante. À propos de la sémantique il est bien d'utiliser les balises en fonction de leur rôle spécifique. C'est pourquoi je te suggère d'utilisé la balise p pour tes séquences de texte.

C'est le padding de l'élément div qui fera un espace entre la bordure et le texte.

++
ok merci mais j'suis un peux perdu!

Pour le 2 eme code y a pas de problème, mais pour le 1ere je sais pas comment l'écrire dans mon code.
Salut

Soit comme ceci

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-FR" xml:lang="fr-FR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documentation CSS</title>
<!-- Les styles CSS -->
<style type="text/css">
body { margin:0; padding:0; font-family:Arial, sans-serif; font-size:0.9em; }
div#conteneur { width:780px; height:auto; border:1px solid #666; }
p { width:780px; text-align:justify; font-size:0.8em; }
</style>
<!-- Fin des styles -->
</head>

<body>
<!-- Corps du document -->
</body>
</html>

Ou comme ça : tu écrit tes styles dans un fichier texte avec l'extension .css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr-FR" xml:lang="fr-FR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documentation CSS</title>
<!-- Les styles CSS -->
<link rel="stylesheet" type="text/css" href="css/monStyle.css" />
<!-- Fin des styles -->
</head>

<body>
<!-- Corps du document -->
</body>
</html>

Je te suggère la deuxième façon. Prend le code comme des exemples.
Ceux-ci ne s'adapte pas nécessairement à tes projets.

++
Modifié par zardoz (05 Nov 2010 - 23:06)
Merci quand meme pour ton aide mais malheureusement je n'y comprend rien. C'est trop compliqué pour moi