[CSS] Mettre en forme du code

Mettre en forme du code [CSS] - HTML/CSS - Programmation

Marsh Posté le 27-08-2003 à 15:04:47    

Salut à tous,
J'ai un petit pépin pour créer un cadre contenant du code source.
Sous IE 6 ça passe et sous Mozilla 1.3 non (1.2 oui il me semble).
Voici une page de test qui illustre le problème :

Code :
  1. <html>
  2. <head>
  3. <style type="text/css">
  4.     code {
  5.            width: 50%;
  6.            border-width: 1px;
  7.            padding: 1ex;
  8.            border: solid
  9.     }
  10. </style>
  11. </head>
  12. <body>
  14. <code>
  15. <pre>
  16. ligne 1
  17. ligne 2
  18. </pre>
  19. </code>
  21. </body>
  22. </html>


 
Sous Moz j'ai le cadre en haut et le texte en dessous ... :(
Sous IE ça va, si ce n'est une ligne vide supplémentaire en bas, que j'aimerais aupassage virer.
Merci pour votre aide.


Message édité par HelloWorld le 27-08-2003 à 15:05:35

---------------
FAQ fclc++ - FAQ C++ - C++ FAQ Lite
Reply

Marsh Posté le 27-08-2003 à 15:04:47   

Reply

Marsh Posté le 27-08-2003 à 15:17:23    

Pourquoi tu mets un <pre> dans le <code> ? Faut utiliser l'un ou l'autre non ?

Reply

Marsh Posté le 27-08-2003 à 15:22:21    

<code> est un élément de type en-ligne donc lui donner une largeur n'a aucun sens.
 
Tu dois utiliser un DIV.


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

Marsh Posté le 27-08-2003 à 15:24:51    

Je met pre pour pouvoir coller n'importe quel code, et ne pas me taper des <br/> à chaque fin de ligne.
 
Bon en fait je crois que j'ai trouvé la solution : mettre le style sur pre et pas code. Je trouvais que code c'était bien pour le code donc je l'avais bricolé pour mon utilisation notamment avec pre, mais ceci marche très bien :
 

Code :
  1. <html>
  2. <head>
  3. <style type="text/css">
  4.    pre {
  5.           width: 50%;
  6.           border-width: 1px;
  7.           padding: 1ex;
  8.           border: solid
  9.    }
  10. </style>
  11. </head>
  12. <body>
  14. <pre>
  15. ligne 1
  16. ligne 2
  17. </pre>
  19. </body>
  20. </html>


 
Et en bonus j'ai plus la ligne vide.
Merci.


---------------
FAQ fclc++ - FAQ C++ - C++ FAQ Lite
Reply

Marsh Posté le 27-08-2003 à 15:25:43    

Oui je faisais aussi un display: block; ... :D


---------------
FAQ fclc++ - FAQ C++ - C++ FAQ Lite
Reply

Marsh Posté le 27-08-2003 à 15:28:27    

HelloWorld a écrit :

Je met pre pour pouvoir coller n'importe quel code, et ne pas me taper des <br/> à chaque fin de ligne.


 
white-space: pre;  :whistle:


Message édité par kadreg le 27-08-2003 à 15:28:57

---------------
brisez les rêves des gens, il en restera toujours quelque chose...  -- laissez moi troller sur discu !
Reply

Marsh Posté le 27-08-2003 à 15:30:53    

:)
Sinon, j'en profite pour poser mes questions :
je pige pas trop ce qu'est un div et un p, la différence entre les 2.


---------------
FAQ fclc++ - FAQ C++ - C++ FAQ Lite
Reply

Marsh Posté le 27-08-2003 à 15:35:40    

<p> c'est un <div> avec des marges haut et bas non nulles par défaut.
 
sémantiquement <p> signifie paragraphe, donc à appliquer aux paragraphes de texte.
 
<div> c'est juste un bloc anonyme.


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

Marsh Posté le 27-08-2003 à 15:37:20    

Toujours sous Moz 1.3, j'ai un problème :

Code :
  1. pre
  2. {
  3. width: 50%;
  4. color: black;
  5. border-style: solid;
  6. border-width: 1px;
  7. border-color: black;
  8. background-color: white;
  9. padding: 1ex;
  10. }


 
Je voudrais spécifier une largeur minimale. Sous IE ok, sous Moz c'est une largeur fixe. Si mon texte est trop large, mon cadre ne s'adapte pas et le texte en sort ...


---------------
FAQ fclc++ - FAQ C++ - C++ FAQ Lite
Reply

Marsh Posté le 27-08-2003 à 15:52:10    

En CSS quand on spécifie une largeur, le navigateur doit s'y tenir.
 
Le problème avec <PRE> c'est que le texte ne revient pas à la ligne si on arrive près de cadre, donc ça sort.
 
Donc le comportement de Mozilla est conforme aux normes.
 
Essaye de définir min-width au lieu de width, mais à ce moment là c'est IE qui risque d'avoir des problèmes...


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

Marsh Posté le 27-08-2003 à 15:52:10   

Reply

Marsh Posté le 27-08-2003 à 16:22:54    

Marche pas, sous IE et Moz.
J'avais pensé à mettre mon cadre dans un tableau. il me semble que le tableau s'élargi tout seul si besoin est ...


---------------
FAQ fclc++ - FAQ C++ - C++ FAQ Lite
Reply

Marsh Posté le 31-08-2003 à 22:48:30    

tu peux mettre ton pre dans un div et le div tu le mets en overflow:auto;

Reply

Marsh Posté le 01-09-2003 à 09:55:00    

Ben je m'en suis sorti avec les tables :
 

Code :
  1. <html>
  2. <head>
  3. <style type="text/css">
  4.     pre {
  5.            border-width: 1px;
  6.            padding: 1ex;
  7.            border: solid
  8.     }
  9.    
  10. </style>
  11. </head>
  12. <body>
  14. <table width="50%"><tr><td>
  15. <pre>
  16. ligne 111111111111111111111111111111111111111111111111111111111111111111111111111
  17. </pre>
  18. </td></tr></table><br/>
  20. <table width="50%"><tr><td>
  21. <pre>
  22. ligne 1
  23. </pre>
  24. </td></tr></table>
  26. </body>
  27. </html>


 
Si ça déborde ça s'élargi tout seul.
Ton idée est intéressante mais je préfère une solution qui marche sur le + de navigateurs possibles, et je pense que la table est ce qui le mieux supporté. Donc je vais prendre ça, même si ce serait + propre avec un div. Mais je garde ça sous la main...


---------------
FAQ fclc++ - FAQ C++ - C++ FAQ Lite
Reply

Marsh Posté le 01-09-2003 à 16:57:29    

si tu vise pas NN4 ma solutions fonctionne plutôt bien je crois.

Reply

Marsh Posté le 02-09-2003 à 11:50:30    

J'ai d'abord opté pour le div vu que j'avais d'autres styles à ajouter. J'ai mis overflow: auto; mais ça me covient pas. Ca créé une boîte de taille fixe avec des scrollbar dedans si besoin est. Moi je veux une boite de taille minimum qui s'élargie si besoin est.
Je me suis donc rabattu sur mon idée de table, avec un petit style :

Code :
  1. table.box
  2. {
  3.     overflow: auto;
  4.     width: 50%;
  5.     margin-left: auto;
  6.     margin-right: auto;
  7.     margin-top: 1em;
  8. }


 
Et hop ça marche nickel. J'aid u mettre margin-top: 1em; car IE il saute pas une ligne si je met une table, et Moz oui (donc 2 lignes d'écart sous Moz :/).
Bon voilà.
Je suis content. Je pense avoir fini ma feuille de style. J'ai tout mis mon html à la norme 4.01 hier.
Je remplace tous mes <br/> par des <br /> et ça devrait être bon.
Je vais pouvoir mettre mon site web en ligne.
Merci à vous et à la FAQ qui m'a été bien utile pour finir.


---------------
FAQ fclc++ - FAQ C++ - C++ FAQ Lite
Reply

Marsh Posté le 02-09-2003 à 11:50:54    

PS: c'est quoi NN4 ?


---------------
FAQ fclc++ - FAQ C++ - C++ FAQ Lite
Reply

Marsh Posté le 02-09-2003 à 11:52:52    

HelloWorld a écrit :

PS: c'est quoi NN4 ?

Netscape Navigator 4

Reply

Marsh Posté le 02-09-2003 à 11:54:31    

HelloWorld a écrit :

PS: c'est quoi NN4 ?


 
Netscape Navigator :??:
 
Edit: Grilled :)


Message édité par sentenz le 02-09-2003 à 11:54:57
Reply

Marsh Posté le 02-09-2003 à 12:43:54    

Mouhahaha.
Nan c'est bon, "NN4", je m'en contre fout. Du moment que ça marche sous IE et Moz ça me va.


---------------
FAQ fclc++ - FAQ C++ - C++ FAQ Lite
Reply

Marsh Posté le 02-09-2003 à 20:08:54    

le div faut le mettre à width:100% ... cest vraiment très sale de faire ça avec des tables.

Reply

Marsh Posté le 02-09-2003 à 22:35:18    

ta gueule greut t'est con comme tes pieds  :pt1cable:

Reply

Marsh Posté le 02-09-2003 à 22:43:12    

fadenreturns a écrit :

ta gueule greut t'est con comme tes pieds  :pt1cable:  

Citation :

Nombre de messages postés :  3

:heink:

Reply

Marsh Posté le 02-09-2003 à 22:45:23    

RiderCrazy a écrit :

Citation :

Nombre de messages postés :  3

:heink:  


 
Fait moi confiance le mec qui a poster en tant que greut est un vrai cretin  :lol:  :lol:  :lol:  :kaola:

Reply

Marsh Posté le 02-09-2003 à 22:49:10    

fadenreturns a écrit :


 
Fait moi confiance le mec qui a poster en tant que greut est un vrai cretin  :lol:  :lol:  :lol:  :kaola:  

en même temps, t'as pas l'air mieux....

Reply

Marsh Posté le 02-09-2003 à 22:49:58    

Ben vouais mais moi j'assume :)  :sol:

Reply

Marsh Posté le 02-09-2003 à 22:57:46    

RiderCrazy a écrit :

Citation :

Nombre de messages postés :  3

:heink:  


 
laisse tomber, c'est normal :o
(enfin, je crois)


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 03-09-2003 à 10:25:34    

antp a écrit :


 
laisse tomber, c'est normal :o
(enfin, je crois)


 
Ben ouai, puisque c'est la même personne  ;)

Reply

Marsh Posté le 03-09-2003 à 10:36:01    

Citation :

le div faut le mettre à width:100% ... cest vraiment très sale de faire ça avec des tables.


 
Heu, voilà ce que je fais :
 

Code :
  1. <table class="box"><tr><td>
  2. <pre>
  3. Voilà mon joli code dans une jolie boîte de taille minimale 50% et qui s'élargie toute seule
  4. </pre>
  5. </table>


 
Je met pas de div ...


Message édité par HelloWorld le 03-09-2003 à 10:36:40

---------------
FAQ fclc++ - FAQ C++ - C++ FAQ Lite
Reply

Marsh Posté le 03-09-2003 à 20:49:51    

:(  
 
Oublie quand même pas de fermer la ligne et la cellule du tableau  :sweat: .

Reply

Marsh Posté le 04-09-2003 à 10:57:14    

:ouch: :crazy: :gun:
Oh la, quel *** !!!
Je l'avais pas vu celui-là. J'ai en effet quelques fichiers où mes lignes ne sont pas fermées.
Mais je comprends pas : j'ai validé mes pages html 4.01 et c'est passé, pourquoi ?


---------------
FAQ fclc++ - FAQ C++ - C++ FAQ Lite
Reply

Marsh Posté le 04-09-2003 à 11:25:12    

en HTML tu n'es pas obligé de fermer la plupart des tags
 
http://www.antp.be/temp/html4open.html
cette page est valide, mais le code fait peur :D


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 04-09-2003 à 11:52:02    

Ok. Bon je vais faire un petit passage par Tidy...


---------------
FAQ fclc++ - FAQ C++ - C++ FAQ Lite
Reply

Marsh Posté le 04-09-2003 à 23:07:51    

Je savais pas qu'on pouvais valider ce genre de chose ...

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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