Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
876 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Mettre en forme du code

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] Mettre en forme du code

n°499672
HelloWorld
Salut tout le monde!
Posté le 27-08-2003 à 15:04:47  profilanswer
 

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
mood
Publicité
Posté le 27-08-2003 à 15:04:47  profilanswer
 

n°499686
fastclemmy
(re-)Dictateur en plastique
Posté le 27-08-2003 à 15:17:23  profilanswer
 

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

n°499691
gm_superst​ar
Appelez-moi Super
Posté le 27-08-2003 à 15:22:21  profilanswer
 

<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
n°499694
HelloWorld
Salut tout le monde!
Posté le 27-08-2003 à 15:24:51  profilanswer
 

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
n°499697
HelloWorld
Salut tout le monde!
Posté le 27-08-2003 à 15:25:43  profilanswer
 

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


---------------
FAQ fclc++ - FAQ C++ - C++ FAQ Lite
n°499702
kadreg
profil: Utilisateur
Posté le 27-08-2003 à 15:28:27  profilanswer
 

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 !
n°499707
HelloWorld
Salut tout le monde!
Posté le 27-08-2003 à 15:30:53  profilanswer
 

:)
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
n°499715
gm_superst​ar
Appelez-moi Super
Posté le 27-08-2003 à 15:35:40  profilanswer
 

<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
n°499719
HelloWorld
Salut tout le monde!
Posté le 27-08-2003 à 15:37:20  profilanswer
 

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
n°499745
gm_superst​ar
Appelez-moi Super
Posté le 27-08-2003 à 15:52:10  profilanswer
 

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
mood
Publicité
Posté le 27-08-2003 à 15:52:10  profilanswer
 

n°499781
HelloWorld
Salut tout le monde!
Posté le 27-08-2003 à 16:22:54  profilanswer
 

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
n°503635
greut
Posté le 31-08-2003 à 22:48:30  profilanswer
 

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

n°503834
HelloWorld
Salut tout le monde!
Posté le 01-09-2003 à 09:55:00  profilanswer
 

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
n°504339
greut
Posté le 01-09-2003 à 16:57:29  profilanswer
 

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

n°504911
HelloWorld
Salut tout le monde!
Posté le 02-09-2003 à 11:50:30  profilanswer
 

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
n°504912
HelloWorld
Salut tout le monde!
Posté le 02-09-2003 à 11:50:54  profilanswer
 

PS: c'est quoi NN4 ?


---------------
FAQ fclc++ - FAQ C++ - C++ FAQ Lite
n°504914
RiderCrazy
Posté le 02-09-2003 à 11:52:52  profilanswer
 

HelloWorld a écrit :

PS: c'est quoi NN4 ?

Netscape Navigator 4

n°504918
sentenz
Posté le 02-09-2003 à 11:54:31  profilanswer
 

HelloWorld a écrit :

PS: c'est quoi NN4 ?


 
Netscape Navigator :??:
 
Edit: Grilled :)


Message édité par sentenz le 02-09-2003 à 11:54:57
n°504982
HelloWorld
Salut tout le monde!
Posté le 02-09-2003 à 12:43:54  profilanswer
 

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
n°505699
greut
Posté le 02-09-2003 à 20:08:54  profilanswer
 

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

n°505832
fadenretur​ns
Posté le 02-09-2003 à 22:35:18  profilanswer
 

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

n°505850
RiderCrazy
Posté le 02-09-2003 à 22:43:12  profilanswer
 

fadenreturns a écrit :

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

Citation :

Nombre de messages postés :  3

:heink:

n°505854
fadenretur​ns
Posté le 02-09-2003 à 22:45:23  profilanswer
 

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:

n°505856
RiderCrazy
Posté le 02-09-2003 à 22:49:10  profilanswer
 

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....

n°505858
fadenretur​ns
Posté le 02-09-2003 à 22:49:58  profilanswer
 

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

n°505870
antp
Super Administrateur
Champion des excuses bidons
Posté le 02-09-2003 à 22:57:46  profilanswer
 

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
n°506130
Flyman30
Posté le 03-09-2003 à 10:25:34  profilanswer
 

antp a écrit :


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


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

n°506141
HelloWorld
Salut tout le monde!
Posté le 03-09-2003 à 10:36:01  profilanswer
 

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
n°506777
fadenretur​ns
Posté le 03-09-2003 à 20:49:51  profilanswer
 

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

n°507111
HelloWorld
Salut tout le monde!
Posté le 04-09-2003 à 10:57:14  profilanswer
 

: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
n°507147
antp
Super Administrateur
Champion des excuses bidons
Posté le 04-09-2003 à 11:25:12  profilanswer
 

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
n°507197
HelloWorld
Salut tout le monde!
Posté le 04-09-2003 à 11:52:02  profilanswer
 

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


---------------
FAQ fclc++ - FAQ C++ - C++ FAQ Lite
n°507965
fadenretur​ns
Posté le 04-09-2003 à 23:07:51  profilanswer
 

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

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Mettre en forme du code

 

Sujets relatifs
Positionnement avec CSS: ProblèmeStyle Swticher creer 2 présentation differente CSS sur une page HTML
Erreur dans le code natif ???[CSS] probleme de couleurs resolu
CSS et comportement etrangePetit problème avec une CSS...
[CSS] Site deux colonnes[XHTML + CSS] Utilisation de la property css background
[XHTML CSS] Passer site de table en div 
Plus de sujets relatifs à : [CSS] Mettre en forme du code

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.088 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR