28211 sujets

CSS et mise en forme, CSS3

Bonjour,
j'ai ce bout de code qui me pose un problème. J'ai besoin d'avoir le texte aligné à droite et à gauche, pour cela j'ai trouvé la règle "text-align:justify;
mais maleurheusement il fait des éspaces important comment pourrai je faire pour y remédier ?
La page est visible ici
http://artotal.9online.fr/senegal/index.htm
Le bout de code concerné ci-dessous


#propos {                                                       
position: absolute;
top :229px;
left :470px;
color:#fff;
font-size:13px;
text-align:justify;
border: 0px;
padding: 1px;
width: 230px;
height: 25px;
}


<p id="propos">
  <br />proposé par l’association Voyages & Développement ce site s’adresse à toutes les personnes qui s’intéressent au Sénégal; elles y trouveront notamment :<br /><br />
•26 pages d’informations imprimables
•20 cartes originales
•16 liens avec d’autres sites ainsi que de
 nombreuses références bibliographiques</p>

Bien{ami}calm{ent}
Modifié le 31 Dec 2004 - 02:42
le textalign:justify ne fait normalement pas de marges ou de padding.
Le padding de ton #propos est de 1px, ce n'est donc pas lui qui pose problème. Cependant les margin définis par défaut sur un P sont importants. Peut-etre est-ce la cause ( et donc la solution Smiley cligne -> margin:0; ) de ton problème.
Si tu alignes le texte à gauche, l'espace se retrouve à droite.
Si tu alignes le texte à droite, l'espace se retrouve à gauche.
Si le texte est justifié, l'espace se réparti au milieu. Question de logique.

Tu peux essayer d'ajuster avec la propriété word-spacing, mais pour ma part, j'alignerais à gauche.
Tout d'un coup un doute affreux est transparu dans mon Smiley petit cerveau : Et si le #propos etait bien occupé totalement par ton texte, et que seule sa largeur empechait ton paragraphe d'etre plus large ?
J'ai donc fait une capture d'écran, et mesuré avec gimp la largeur de ton paragraphe ... 230px ... soit exactement la largeur de ton #propos Smiley smile

Pour élargir ton texte, suffit juste que tu agrandisse la largeur de ton P#propos Smiley cligne .

EDIT :
Après la réponse de Stephan, j'ai enfin compris ta question Smiley smile J'était completement à coté de la plaque et j'ai compris que tu parlais des espaces entre les mots ... Smiley rolleyes . Désolé ...
Alors oui, Stephan a raison. Tu trouveras exactement le meme affichage (mots espacés) dans word Smiley langue (ou OpenOffice) ... comme quoi c'est que ça doit être normal ! (meme si je l'avoue c'est pas super ésthétique ...)
Modifié le 31 Dec 2004 - 02:24
C'est le risque de "justify", cet effet disgracieux est également différent suivant les polices que tu utilises.
Pour word-spacing, l'ennuyant c'est que cela ajoute le l'espace entre les mots et après test, ça a plutôt tendance à agraver la situation([ édit]:on peut aussi mettre une valeur négative et ce n'est pas concluant non plus[/édit]). Je suis également d'avis qu'un alignement à gauche serait plus adapté.

Mais avant de penser à l'alignement je te proposerais bien d'organiser un peu ton contenu avec les balises appropriées, car avec les images introductives , un contenu pertinent est uniquement disponible dans des images et donc perdu à certains utilisateurs, les autres textes relèvent de p et ul à mon avis.
Par exemple:

<div id="propos">
<h2>Voyage et développement</h2>
<p><strong>Découvrir les parties du monde parmis leurs habitants et soutenir leur projets</strong></p>
<p>Proposé par l’association Voyages &
Développement ce site s’adresse à toutes les
personnes qui s’intéressent au
Sénégal; elles y trouveront notamment :<p>

<ul>
<li>26 pages d’informations imprimables</li>
<li>20 cartes originales</li>
<li>16 liens avec d’autres sites ainsi que de
nombreuses références bibliographiques</li>
</ul>
</div>


Tu devrais également faire un choix pour le doctype, car ton doctype est html 4 et tu codes par endroit à la manière de xhtml.

ps: impec le [ code][/code] Smiley lol
Modifié le 31 Dec 2004 - 02:47
xartotal a écrit :
merci pour l'info, pourtant j'ai vu un site qui se démerdait pas mal sur là question,
http://www.alternativesante.com/index.asp
tout est parfaitement aligné à gauche et à droite.

A mon avis c'est dû à la taille du texte, relativement petit qui réduit l'espace blanc.
Excellent Igor, le résultat est bien meilleurs, j'ai pas encore tout compris mais j'y travaille, encore une dernière chose.
Pour la doctype à utilier ou m'informé ?
Igor t'est très fort !!!!
En mis en page on apelle ce genre d'espacements disgracieux des lardages. Pour les éviter en pao on fait généralement appel à une largeur variables des signes, de l'espace intersigne et de l'espace intermots. Malheureusement ce genre de comportement n'existe pas en web. Intrigué j'ai été voir sur le site du w3c, et effectivement, un jour le css3 viendra à notre secours: http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-justify .
En attendant il est bon de connaitre certaines bases de pao. On essaye de limiter le nombre de sigles d'une ligne à une fourchette de 35 à 50 caractères pour faciliter la lecture et rester agréable à l'oeil. Autant ce type de traitement est très valable pour le support fixe du papier autant il est plus discutable dans le domaine du web. À chacun de juger, néanmoins le css apporte bons nombre de réglages qui peuvent apporter une certaine esthétique à défaut de solutionner le lardage Smiley smile http://fr.selfhtml.org/css/proprietes/police.htm
xartotal a écrit :
Le meiilleurs moyens pour mettre le texte "justifier" est d'utilisez l'attribut "align="justify" dans le corps du document et pas las propriété cité dans le titre.
http://artotal.9online.fr/senegal/colonisation.html
Sous IE pour le moment !!!
parceque j'ai un big problème avec le conteneur.


Le résultat est pourtant identique et c'est l'utilisation de css qui est recommandée, tandis que align="justify" est lui déconseillé:
L'alignement, les styles de police et les règles horizontales dans les documents HTML
Dans la pratique malheureusement se n'est pas vrai on l'a vu ensemble Igor !!!!
ET tu vois le résultat est bien meilleurs en html.