div, calque et justifie texte

div, calque et justifie texte - HTML/CSS - Programmation

Marsh Posté le 21-01-2008 à 16:28:41    

Bonjour à tous,
 
Je débute en Html et je me tire les cheveux.
voilà j'ai créer des calques pour chaque bloc de texte, et j'aimerais justifié mon texte.
jusque là tout marche sauf que j'aimerais mettre à la ligne certains mots et donc le justifier d'une certaine façon.
 
En fait j'aimerais que ca justifie mon texte comme je l'ai ecrit ci dessous.
 
et voici mon code:

Code :
  1. <div id="calque19" class="class2">
  2.    <div class="class2" align="justify">
  3.     <font color="#336666"><span class="class2">Quand l‚Äôuniformisation oblige √† la diff√©rence et que l'√©veil </span></font><font color="#336666"><span class="class2">
  4.       des consciences suppose davantage de pertinence, s‚Äôint√©resser
  5.       aux personnes avec la seule perspective des produits qu‚Äôon essaie
  6.       de leur vendre n‚Äôest plus une d√©marche suffisante.</span></font></div>
  7.   </div>


 
mille merci de votre aide
et voici la definition du calque 19:

Code :
  1. #calque19 { height: 80px; width: 330px; left: 537px; top: 399px; position: absolute; visibility: visible; }


 
merci encore, parce que là je n'y arrive plus.
 
zoé

Reply

Marsh Posté le 21-01-2008 à 16:28:41   

Reply

Marsh Posté le 21-01-2008 à 16:37:50    

Menu : Démarrer > Panneau de Configuration
Icône : Ajout suppression de programmes
Liste : Dreamweaver MX
Bouton : "Supprimer"
"Etes-vous sûr" : Oui
 
http://www.textpad.com/
=> Télércharger
=> Installer
 
Ensuite.
 
http://www.w3schools.com
 
Et là on en reparle tranquillement :)
 
Parceque là :
un div avec une class "class2"
un autre div avec la même class à l'intérieur
un align="justify" qui me semble tout droit sorti du HTML 2.0
une balise <font> totalement deprecated avec un attribut color tout aussi deprecated (si ce n'est plus)
une balise <span> totalement inutile et avec la class2 toujours
le tout répété deux fois pour une raison que seul ton éditeur connait
 
et vu que tu dois pas savoir ce qu'est cette class2, tu ne juge pas nécessaire de nous la poster.
 
en gros, là on peut rien faire, si ce n'est te conseiller de laisser tomber les outils pour faignasse neuneue, et apprendre pour de vrai avec un éditeur texte.
 
(fatigué, mauvais poil, tout ça...)


Message édité par MagicBuzz le 21-01-2008 à 16:39:27
Reply

Marsh Posté le 21-01-2008 à 16:45:44    

si j'utilise un éditeur c'est que justement je ne suis peut être pas douée, mais pas la peine non plus de me répondre comme ça ;-)
 
voici la class 2

Code :
  1. .class2 { color: #2f5454; font-size: 10pt; font-family: Alstom; font-size-adjust: 12; line-height: 12pt; background-repeat: no-repeat; text-align: justify; white-space: normal; }


 
le truc c'est que je n'arrive pas à justifier mon texte comme je le souhaite et pas comme il l'a décidé.
en tout cas si tu veux m'aider ce sera avec plaisir.
 
Merci à toi
 
émilie

Reply

Marsh Posté le 21-01-2008 à 16:55:25    

(rien n'était méchant dans mon post, juste un peu froid :p)
 
sérieusement, laisse tomber ton éditeur, là il te fait du code imbitable, et malheureusement, en HTML, quand une balise est inclue dans une autre, alors certaines propriétés de la mère vienne impacter la fille. donc à partir du moment où ça s'imbrique dans tous les sens comme ça, tu t'en sortira jamais.
 
deux remarque :
1/ font-family: Alstom
=> c'est une font 100% proprio. donc met immédiatement une famille générique derrière ("Sans Serif" par exemple) histoire d'avoir un rendu correct sur les postes qui n'ont pas cette police
 
2/ ça devait pouvoir se résumer à un seul div et deux span :

Code :
  1. <div id="calque19">
  2.  <span class="class2">bla bla premier bloc</span>
  3.  <span class="class2">bla bla second bloc</span>
  4. </div>


 
PS : Sinon, j'ai pas bien compris quel était ton problème exact... Tu veux mettre quoi à la ligne ?


Message édité par MagicBuzz le 21-01-2008 à 16:56:45
Reply

Marsh Posté le 21-01-2008 à 17:08:06    

j'ai fait un truc plus propre
 

Code :
  1. <div id="calque19" class="class2">
  2.     <font color="#336666">
  3.       Quand l'uniformisation oblige à la différence et que l'éveil
  4.       des consciences suppose davantage de pertinence, s'intéresser
  5.       aux personnes avec la seule perspective des produits qu'on essaie
  6.       de leur vendre n'est plus une démarche suffisante.
  7.     </font>
  8.   </div>


 
ca me justifie bien mon texte, mais j'aimerais qu'il se coupe comme je l'ai écrit ci dessus, c'est à dire à "s'intéresser", à "q'on essaie".
Or quand il me le justifie il me coupe le texte où il veut
 
une idée s'il te plait?

Reply

Marsh Posté le 21-01-2008 à 17:11:32    

évite le <font>
utilise une classe alternative, ou vire la couleur du class2 et colles-en une dans la classe calque19
 
ou éventuellement, utilise la syntaxe "classes multiples" à savoir class="class2 class3" si mes souvenirs sont bons

Reply

Marsh Posté le 21-01-2008 à 17:14:24    

Bah, tu peux mettre <br> après les lignes et mettre un "white-space: nowrap" sur le bloc contenant le texte.


Message édité par tpierron le 21-01-2008 à 17:15:25
Reply

Marsh Posté le 21-01-2008 à 17:16:22    

il continue de le justifie ou ca le chante et pas là ou je veux.
il n'y a pas moyen de le forcer à justifier ou je veux? parce que si je mets la balise <br> je coupe le texte ou je veux mais il ne le justifie pas

Reply

Marsh Posté le 21-01-2008 à 17:20:28    

le souci du <br/>, c'est qu'il ne va plus justifier la ligne terminée avec le <br/>...
 
par contre, tu peux toujours coller des &nbsp; à la place des espaces, sauf là où tu veux que ça coupe. à tester, logiquement ça devrait marcher. mais c'est crade...

Reply

Marsh Posté le 21-01-2008 à 17:34:40    

marche pas parce qu'à la ligne 5 le texte est trop long pour lui, je peux pas réduire l'espacement juste pour certte ligne?

Reply

Marsh Posté le 21-01-2008 à 17:34:40   

Reply

Marsh Posté le 21-01-2008 à 17:37:12    

Marche pas avec les &nbsp;... Et la méthode de tpierron marche pas mieux (c'est même pire, au moins avec les &nbsp; posés là où on veut, on peut s'en sortir, mais ça fait des espaces de taille inégales sur une même ligne :D)
 
Par contre, souci de police inside (et ctrl+molette aussi !) c'est une très mauvaise idée de vouloir forcer les sauts de ligne là où tu veux.
 
Par exemple, sur mon PC, qui n'a pas la police Alstom...
 

Code :
  1. <html>
  2.  <head>
  3.    <title>Test justification</title>
  4.    <style type="text/css" rel="stylesheet">
  5.      #calque19 { height: 80px; width: 330px; left: 537px; top: 399px; position: absolute; visibility: visible; }
  6.      .class2 { color: #2f5454; font-size: 10pt; font-family: Alstom, sans-serif; font-size-adjust: 12; line-height: 12pt; background-repeat: no-repeat; text-align: justify; white-space: normal; }
  7.      .class3 { color: #336666; }
  8.    </style>
  9.  </head>
  10.  <body>
  11.    <div id="calque19" class="class2 class3">
  12.      Quand l'uniformisation oblige à la différence et que l'éveil des consciences suppose davantage de pertinence, s'intéresser aux personnes avec la seule perspective des produits qu'on essaie de leur vendre n'est plus une démarche suffisante.
  13.    </div>
  14.  </body>
  15. </html>


 
Ca affiche ça :
http://img297.imageshack.us/img297/9518/justifyly9.png
 
Comme tu vois, impossible de sauter une ligne après "s'intéresser" !
 
Dans mon cas, vu que j'ai spécifié "sans-serif" comme police générique, et que je suis sous Windows, Arial a été utilsée à la place.
Si j'avais spécifié "Serif" comme famille de substitution, Times New Roman aurait été utilisée à la place. Et la tronche de la police, comme tu peux le voir, ça change tout...
 
Mais pire, joue avec CTRL+Molette souris histoire de changer à la voler la taille du texte, tu vas voir ce que ça donne.
 
Idem, charge la même page dans Internet Explorer 5, 6 et 7... Mais aussi Firefox et Opera, sur différents OS... Tu as 100% de chances pour que les sauts de lignes ne se trouvent pas au même endroit, même si tu as bien la police à chaque fois.
 
Bref, vouloir contrôler l'aspect exact des mots d'un texte, c'est pas un truc qui trouve de réponse en HTML.
Tu peux toujours passer par une image, mais là ça devient franchement crade... Le mieux, c'est je pense de se faire une raison ;)


Message édité par MagicBuzz le 21-01-2008 à 17:42:58
Reply

Marsh Posté le 21-01-2008 à 18:11:43    

Ah ben ouais, j'avais pas pensé que le br marquait la fin du paragraphe [:god]
 
Oulala, fatigué.
 
Sinon, effectivement vouloir la justification et le découpage au mot près me semble impossible à faire en HTML pur.

Reply

Marsh Posté le 21-01-2008 à 18:17:14    

merci pour tout,
tant pis je me ferais une raison ;-)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed