Mise en forme du code et format affiché

Mise en forme du code et format affiché - HTML/CSS - Programmation

Marsh Posté le 25-05-2005 à 11:16:49    

Bonjour,
J'ai trouvé en tatonnant un format d'affichage des listings qui me convient à peu près. Le seul défaut est que je n'ai pas réussi à l'intégrer complètement dans Dreamweaver, je veux dire que je dois intervenir sur le code (copier/collr/mofifier), mais je crois que c'est inévitable.
Le problème est que le rendu affiché est modifié quand je reformate mon code avec un codesweeper. Le résultat est là:
http://assembleur.maurette.free.fr [...] /copie.htm
Le premier est le code mis en forme par le codesweeper:

Code :
  1. <PRE class="code">
  2. <DIV class="codecode"> <!--#include file="Sources/essai.asm" -->
  3. </DIV>
  4. <DIV class="codetitre"> essai.asm
  5. </DIV></PRE>


 
le second le code re-corrigé pour le résultat souhaité:

Code :
  1. <PRE class="code"><DIV class="codecode"><!--#include file="Sources/essai.asm" --></DIV><DIV class="codetitre">essai.asm</DIV></PRE>


 
le troisième c'est sans les tabulations (ce sont des tabulations qu'utilise le codesweeper):

Code :
  1. <PRE class="code">
  2. <DIV class="codecode"><!--#include file="Sources/essai.asm" -->
  3. </DIV>
  4. <DIV class="codetitre">essai.asm
  5. </DIV></PRE>


 
La question: y a-t-il quelque chose à faire pour ne pas avoir à corriger à la main après chaque remise en forme ? Question subsidiaire: est-ce que ça veut dire que mon code est mal conçu ?
(j'utilise à l'essai Dreamweaver MX avec Homesite, mais je ne vais pas le garder)
Merci d'avance
Pierre Maurette

Reply

Marsh Posté le 25-05-2005 à 11:16:49   

Reply

Marsh Posté le 25-05-2005 à 11:26:43    

<DIV class="codecode"><!--#include file="Sources/essai.asm" -->  
</DIV>
<DIV class="codetitre">essai.asm  
</DIV>
 
ca suffit largement à condition que ta classe codecode ressemble à ca :
 
.codecode
{
  font-family: "Courier New", Courier, monospace;
  white-space: pre;  
}
tu forces la police, et l'affichage du code de type PRE, et comme ça, ca passe sous IE et firefox

Reply

Marsh Posté le 25-05-2005 à 11:30:31    

Je pense qu'il faut qu'il laisse le <pre>, mais qu'il le remplace par <code> (pour une meilleure sémantique).
Sinon, moi je ferais comme ça :

<div class="listing">
  <code>
global asm_fmods
asm_fmods:
  fld qword [esp + 12]
  fld qword [esp + 4]
  fprem
  ffree ST1
  ret  
ends
  </code>
  <h2>essai.asm</h2>
</div>


A méditer toutefois pour le <h2>...

Reply

Marsh Posté le 25-05-2005 à 12:18:54    

Merci pour vos réponses.
Je ne pense pas que celle de gatsusat puisse fonctionner, puisque la classe code (que je viens de renommer "listing" ) intègre un cadre.
Je ne comprends pas tout de celle proposée par FlorentG. Il faut savoir que quand le texte du listing est un include, ça peut changer le comportement (affichage du texte au kilomètre dans certains cas.
J'utilise déjà H2 (CSS .h2) à de nombreux endroits.
A priori, les 3 CSS (.listing, .codecode et .codetitre) m'intéressent, pour pouvoir ensuite régler tout en un seul point. Voici les 3 CSS:
 

.codetitre {background-color: #9C9C9C;
            border-top: 1px solid Black;
            color: White;
            font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
            font-size: 1.2em; font-style: italic;
            font-weight: bold;
            font-weight: normal;
            padding: 1px 1px 3px 5px; }
 
.codecode {font-size: 1.0em;
           padding: 5px; }
 
.listing  {background-color: #EAEAEA;  
           border: Black;  
           border-style: solid;
           border-width: 1px;
           margin-left: 5px;  
           margin-right: 5px;  
           min-width: 800px; }


Le min-width n'est pas reconnu par IE, mais celui-ci ne diminue plus la largeur du bloc quand quand elle atteint celle du texte. J'aimerais bien avoir ce comportement sous FF, une suggestion ?

Reply

Marsh Posté le 25-05-2005 à 12:37:09    

Pierre Maurette a écrit :

Je ne comprends pas tout de celle proposée par FlorentG. Il faut savoir que quand le texte du listing est un include, ça peut changer le comportement (affichage du texte au kilomètre dans certains cas.


Qu'appelles tu de l'affichage "au kilomètre"?

Citation :

J'utilise déjà H2 (CSS .h2) à de nombreux endroits.


1- on accède pas à la CSS d'un <h2> par .h2
2- Et alors? h2 est un exemple, il existe 6 niveaux de titres, de h1 à h6,


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 25-05-2005 à 13:40:18    

Youpi !!!  :bounce:  :bounce:  :bounce:  :bounce:  
(enfin, presque)
Merci encore à gatsusat et FlorentG, dont la seule erreur fut de me prendre pour moins ignorant que je ne suis. Là, j'ai compris en faisant quelques essais (pas faciles avec les includes, qui ne sont pas pris en compte en préview local, seulement en mode création de DW).
Le problème commençait avec le <PRE class"listing"> qui faisait que tous mes espaces et tabs de mise en page étaient pris en compte. Evident, sauf pour moi il y a une heure ... A noter que le PRE joue également sur l'include... Je dois être en PRE pour que l'include se passe bien.
L'autre problème, c'est que j'ignorais le white-space=pre;
J'en suis là:
 

<DIV class="listing">
  <DIV class="codecode"><!--#include file="Sources/essai.asm" --></DIV>
  <DIV class="codetitre"> essai.asm
  </DIV>
 </DIV>


 
avec white-space=pre; dans .codecode, mais je suis encore obligé de modifier à la main après un codesweeper qui me donne ça:
 

<DIV class="listing">
  <DIV class="codecode"> <!--#include file="Sources/essai.asm" -->
  </DIV>
  <DIV class="codetitre"> essai.asm
  </DIV>
 </DIV>


 
 

Reply

Marsh Posté le 25-05-2005 à 19:15:21    

Trop de div :o Fait comme ça :

<div class="listing">
  <code> <!--#include file="Sources/essai.asm" -->
  </code>
  <h2> essai.asm </h2>
 </div>


-> Déjà les balises s'écrivent en minuscule. Ensuite il faut toujours utiliser les éléments pour leur sémantique : Pour du code, y'a la balise code, pas besoin d'inventer une div class="code". Et pour les titre, y'a les h1....h6, pas besoin non plus d'inventer un div class="titre".


Message édité par FlorentG le 25-05-2005 à 19:15:38
Reply

Marsh Posté le 25-05-2005 à 20:06:49    

FlorentG a écrit :

Trop de div :o Fait comme ça :

<div class="listing">
  <code> <!--#include file="Sources/essai.asm" -->
  </code>
  <h2> essai.asm </h2>
 </div>


-> Déjà les balises s'écrivent en minuscule. Ensuite il faut toujours utiliser les éléments pour leur sémantique : Pour du code, y'a la balise code, pas besoin d'inventer une div class="code". Et pour les titre, y'a les h1....h6, pas besoin non plus d'inventer un div class="titre".


 
 
et puis ensuite tu peux attaquer les styles comme ceci :  
 
.listing CODE {  //tu attaques que la balise code à l'intérieure de listing
 
}
 
.listing H2 {  //idem, ici H2 ne sera touché que lorsqu'il sera dans listing
 
}

Reply

Marsh Posté le 25-05-2005 à 20:28:45    

Salut again,
J'ai trouvé un codesweeper qui respecte mon truc, j'en arrive à:

<DIV class="listing">
<DIV class="codecode"><!--#include file="../gestion_projets/sources/essai.asm" --></DIV>
<DIV class="codetitre">TITRE</DIV></DIV>


Je veux garder la possibilité de définir plusieurs .codecode (qui devrait se nommer .listingcode). A mon niveau actuel je ne voir pas de nécessité impérative d'utiliser <code> et <h2>.
La possibilité de redéfinir un style uniquement à l'intérieur d'un autre est élégante, pour l'instant inutile. Je verrai si je m'attaque à de la coloration syntaxique (des exports de PSPad peut-être ?) Mais il faut que ce soit copie/collable ...

Reply

Marsh Posté le 25-05-2005 à 20:31:20    

Pierre Maurette a écrit :


Je veux garder la possibilité de définir plusieurs .codecode (qui devrait se nommer .listingcode). A mon niveau actuel je ne voir pas de nécessité impérative d'utiliser <code> et <h2>.


C'est l'HTML qui te l'impose :o Il faut toujours utiliser la balise prévue à cette effet. Ainsi, avec une simple div, les utilisateurs dépourvus de CSS verront un beau bordel. C'est pour ça qu'il faut utiliser <code>. Sinon autant utiliser div pour tout et n'importe quoi.
 
L'HTML est un langage permettant de définir la sémantique de ton contenu. Ainsi, grâce à la balise <code>, tu précise bien que ce petit bloc de texte est du <code>. C'est comme ça et on discute pas [:spamafote] Donc fait les modifs, sinon tu sera taxé de développeur extrêmement mauvais n'y connaissant rien au but de l'HTML :D

Reply

Marsh Posté le 25-05-2005 à 20:31:20   

Reply

Marsh Posté le 25-05-2005 à 20:47:53    

Pierre Maurette a écrit :

A mon niveau actuel je ne voir pas de nécessité impérative d'utiliser <code> et <h2>.


Qui parle de niveau ? Ca ne te paraît pas plus explicite que des <DIV class="codetruc"> et <DIV class="h2"> ?


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 25-05-2005 à 21:41:58    

Citation :

Qui parle de niveau ? Ca ne te paraît pas plus explicite que des <DIV class="codetruc"> et <DIV class="h2"> ?


J'ai remplacé .codecode par une redéfinition de <code> dans .listing. Mais pour h2, c'est la merde. Peut-être à cause du cadre de .listing qui entoure le tout :
http://assembleur.maurette.free.fr [...] mplate.htm
 

<DIV class="listing">
<CODE><!--#include virtual="../gestion_projets/sources/essai.asm" --></CODE>
<DIV class="codetitre">TITRE</DIV></DIV>
<P>&nbsp;</P>
<DIV class="listing">
<CODE><!--#include virtual="../gestion_projets/sources/essai.asm" --></CODE>
<h2>TITRE</h2></DIV>

Reply

Marsh Posté le 25-05-2005 à 21:53:31    

Pierre Maurette a écrit :

Citation :

Qui parle de niveau ? Ca ne te paraît pas plus explicite que des <DIV class="codetruc"> et <DIV class="h2"> ?


J'ai remplacé .codecode par une redéfinition de <code> dans .listing. Mais pour h2, c'est la merde. Peut-être à cause du cadre de .listing qui entoure le tout :
http://assembleur.maurette.free.fr [...] mplate.htm
 

<DIV class="listing">
<CODE><!--#include virtual="../gestion_projets/sources/essai.asm" --></CODE>
<DIV class="codetitre">TITRE</DIV></DIV>
<P>&nbsp;</P>
<DIV class="listing">
<CODE><!--#include virtual="../gestion_projets/sources/essai.asm" --></CODE>
<h2>TITRE</h2></DIV>



Ils sont super crades tes CSS [:mlc]  
 
Et accessoirement, c'est quoi ton problème avec les h2?


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 25-05-2005 à 22:55:48    

Bon, en fait, le HTML, c'est comme tous les langages informatique. Quand on ne sais pas, on ne pose pas de questions, ce qui me semble quand même paradoxal.
On vous répond des trucs aussi constructifs que "Ils sont super crades tes CSS [:mlc]", écrit par quelqu'un qui lui sait, bien qu'ignorant ce qu'est la frappe de texte "au kilomètre".
Je ne dois pourtant pas être le seul pour HTML et autres Javascripts, CSS, etc. est un moyen plus qu'un but, et qui cherchent à l'utiliser le moins salement (cradement) possible. Je vous signale que ma question initiale sollicitait modestement un avis sur le style d'un code qui faisait ce qui était souhaité.
Je vous remercie pour votre aide, sincèrement pour certains (j'ai bien appris en quelques heures), ironiquement pour d'autre.
Pierre Maurette
 

Reply

Marsh Posté le 25-05-2005 à 22:59:24    

Pierre Maurette a écrit :

Bon, en fait, le HTML, c'est comme tous les langages informatique. Quand on ne sais pas, on ne pose pas de questions, ce qui me semble quand même paradoxal.
On vous répond des trucs aussi constructifs que "Ils sont super crades tes CSS [:mlc]", écrit par quelqu'un qui lui sait, bien qu'ignorant ce qu'est la frappe de texte "au kilomètre".
Je ne dois pourtant pas être le seul pour HTML et autres Javascripts, CSS, etc. est un moyen plus qu'un but, et qui cherchent à l'utiliser le moins salement (cradement) possible. Je vous signale que ma question initiale sollicitait modestement un avis sur le style d'un code qui faisait ce qui était souhaité.
Je vous remercie pour votre aide, sincèrement pour certains (j'ai bien appris en quelques heures), ironiquement pour d'autre.
Pierre Maurette


En attendant, t'as pas répondu à la question :heink:


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 25-05-2005 à 23:03:14    

"En attendant, t'as pas répondu à la question :heink:"
Vous non plus...

Reply

Marsh Posté le 25-05-2005 à 23:07:07    

Pierre Maurette a écrit :

"En attendant, t'as pas répondu à la question :heink:"
Vous non plus...


masklinn a écrit :

Ils sont super crades tes CSS [:mlc]  
 
Et accessoirement, c'est quoi ton problème avec les h2?


Un point d'interrogation

Pierre Maurette a écrit :

Bon, en fait, le HTML, c'est comme tous les langages informatique. Quand on ne sais pas, on ne pose pas de questions, ce qui me semble quand même paradoxal.
On vous répond des trucs aussi constructifs que "Ils sont super crades tes CSS [:mlc]", écrit par quelqu'un qui lui sait, bien qu'ignorant ce qu'est la frappe de texte "au kilomètre".
Je ne dois pourtant pas être le seul pour HTML et autres Javascripts, CSS, etc. est un moyen plus qu'un but, et qui cherchent à l'utiliser le moins salement (cradement) possible. Je vous signale que ma question initiale sollicitait modestement un avis sur le style d'un code qui faisait ce qui était souhaité.
Je vous remercie pour votre aide, sincèrement pour certains (j'ai bien appris en quelques heures), ironiquement pour d'autre.
Pierre Maurette


Pas de point d'interrogation
 
[:dawa]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 25-05-2005 à 23:08:47    

C'est quoi la question après toutes ses réponses ?

Reply

Marsh Posté le 25-05-2005 à 23:12:03    

Pierre Maurette a écrit :

[quote]Mais pour h2, c'est la merde. Peut-être à cause du cadre de .listing qui entoure le tout :
http://assembleur.maurette.free.fr [...] mplate.htm


h2 a des marges non nulles par défaut, il faut donc les annuler...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 25-05-2005 à 23:13:33    

The-Shadow a écrit :

C'est quoi la question après toutes ses réponses ?


La question était "qu'est-ce qui merde avec les h2", puisqu'il semble avoir un problème de ce côté là, histoire d'être sûr que son problème avec les H2 est ce à quoi je pense [:spamafote]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 25-05-2005 à 23:16:33    

:heink:

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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