[Résolu]question sur la balise <pre> prob d'affichage

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
GregK84
Lézard à collerette
Messages : 360
Inscription : 15 oct. 2004, 15:24

[Résolu]question sur la balise <pre> prob d'affichage

Message par GregK84 »

voila,

a la base, je fesais afficher mon contenu (qui vient d'une base de donnée) dans des balises <p>. je n'ai aucun probleme avec cette méthode sauf si je dois ecrire une liste. elle s'ecrit :
- Management, - Ressources humaines - Comptabilité, Gestion - Assistanat
je pourais résoudre le probleme avec des <br> mais ... :wink:

j'ai une l'idée d'utilisé la balise <pre>, pour une liste c'est parfait.
- Management,
- Ressources humaines
- Comptabilité, Gestion
- Assistanat
mais maintenent, j'ai des problemes avec les grand texte qui sont entièrement écrit sur une ligne.

j'ai essaye de résoudre le probleme avec les css :

Code : Tout sélectionner

pre {
 width: 90%;
 }
ou

Code : Tout sélectionner

pre {
 width: 500px;
 }
Si j'utilise un pourcentage cela ne fonctionne absolument pas !
si j'utilise des pixels, mon espace est correctement délimité, mais mon texte est toujours entièrement écrit sur une ligne et depasse de la zone d'affichage.

comment resoudre ce probleme ?
Dernière modification par GregK84 le 21 févr. 2005, 23:59, modifié 1 fois.
SB
Varan
Messages : 1095
Inscription : 05 mars 2004, 18:38

Message par SB »

Code : Tout sélectionner

<ul>
<li>Management</li>
<li>Ressources humaines</li>
<li>Comptabilité, Gestion</li>
<li>Assistanat</li>
</ul>
SIBELIUS
Lézard vert
Messages : 146
Inscription : 09 sept. 2003, 23:21

Re: question sur la balise <pre> prob d'affichage

Message par SIBELIUS »

GregK84 a écrit : j'ai une l'idée d'utilisé la balise <pre>, pour une liste c'est parfait.
- Management,
- Ressources humaines
- Comptabilité, Gestion
- Assistanat
Ben disons que pour une liste ce n'est pas du tout parfait puisque ce n'est pas la fonction de <pre>.
Une liste est déclarée avec la balise <ul> (ou <ol>).
Pourquoi ne pas utiliser le bon outil, tout simplement ? ;)

EDIT : grillé par SB :)
Tutoriels et blog (X)HTML / CSS : css.alsacreations.com
Forum Standards / CSS : forum.alsacreations.com
GregK84
Lézard à collerette
Messages : 360
Inscription : 15 oct. 2004, 15:24

Message par GregK84 »

c'est très simple, il s'agit a la base d'une description (description d'une formation pour etre exact) cette description vient d'une base de donnée (car il y en a plusieurs (logique) et pas toujours la meme :wink: ).
comme il s'agit d'une description j'avais utilisé la balise <p> mais certaine personne souhaiterait ecrire des truc du style (voir en bas : ex1) : (et ce bien sur sans ajouter une ligne d'html, ils ne savent meme pas c'est quoi ! donc leur demande d'ecire leur paragraphe dans des balises <p> et leur liste dans des <ul> ce n'est pas fesable (et si je leur dis d'apprendre l'html ils vont m'envoyer chier :cry: ) )
mais le resulat affiché etait celui de l'ex2.

c'est pour cette raison que j'ai souhaité utiliser la balise html <pre> ou la porpriete css white-space: pre; (qui permet d'afficher le texte comme il est tapé)
malheureusement pour moi, un nouveau probleme surgit, si mes phrases sont trop longue, elle deborde. j'ai essaye de resoudre le probleme avec la propriete css width, mais sans résulat

pour bien faire cela devrait etre comme si on ecrivait un post sur un forum, si la phrase est trop longue, il y a un retour a la ligne. si nous fesons un retour a la ligne, il est pris en compte.

vous avez une autres solution a me proposer ???
ex1 a écrit : Accédez dans les domaines suivants :

- Management,
- Ressources humaines
- Comptabilité, Gestion
- Assistanat au :

* Diplôme Supérieur de Gestion, visé et homologué niveau II,
* Titre d’Assistant de Direction-CPSS, homologué niveau III,
* Diplômes d’Etat de l’Expertise comptable et financière
* Master of Business Administration-Open University Business School
et qui donne (c'est relativement moins clair vous en conviendré :wink: )
ex2 a écrit : Accédez dans les domaines suivants : - Management, - Ressources humaines - Comptabilité, Gestion - Assistanat au : * Diplôme Supérieur de Gestion, visé et homologué niveau II, * Titre d’Assistant de Direction-CPSS, homologué niveau III, * Diplômes d’Etat de l’Expertise comptable et financière * Master of Business Administration-Open University Business School
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Une liste (ul, ol) peut très bien s'afficher en ligne en appliquant un display:inline sur les li :roll:
SIBELIUS
Lézard vert
Messages : 146
Inscription : 09 sept. 2003, 23:21

Message par SIBELIUS »

Essaye :

Code : Tout sélectionner

pre { /* pour IE */
overflow: hidden;
width: 100%;
}
html>body pre { /* pour les autres */
overflow: auto;
width: auto;
}
Tutoriels et blog (X)HTML / CSS : css.alsacreations.com
Forum Standards / CSS : forum.alsacreations.com
SIBELIUS
Lézard vert
Messages : 146
Inscription : 09 sept. 2003, 23:21

Message par SIBELIUS »

calimo a écrit :Une liste (ul, ol) peut très bien s'afficher en ligne en appliquant un display:inline sur les li :roll:
En fait il ne tient pas à l'afficher en ligne.
C'est un texte issu d'un champ de formulaire si j'ai bien compris.
Il ne s'agit pas *que* d'une liste, mais d'un texte global à rendre comme il a été tapé.
Tutoriels et blog (X)HTML / CSS : css.alsacreations.com
Forum Standards / CSS : forum.alsacreations.com
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Au temps pour moi je n'avais pas bien compris :oops:
GregK84
Lézard à collerette
Messages : 360
Inscription : 15 oct. 2004, 15:24

Message par GregK84 »

SIBELIUS a écrit :
calimo a écrit :Une liste (ul, ol) peut très bien s'afficher en ligne en appliquant un display:inline sur les li :roll:
En fait il ne tient pas à l'afficher en ligne.
C'est un texte issu d'un champ de formulaire si j'ai bien compris.
Il ne s'agit pas *que* d'une liste, mais d'un texte global à rendre comme il a été tapé.
c'est exatement ca :D

(le meilleur exemple est un forum, le texte est rendu t'elle qu'il a été tapé ormis quelques retour a la lignes car le texte etait trop grand)
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Sinon si tu as php il y a la fonction nl2br il me semble...
GregK84
Lézard à collerette
Messages : 360
Inscription : 15 oct. 2004, 15:24

Message par GregK84 »

SIBELIUS a écrit :Essaye :

Code : Tout sélectionner

pre { /* pour IE */
overflow: hidden;
width: 100%;
}
html>body pre { /* pour les autres */
overflow: auto;
width: auto;
}
cela ne fonctionne pas sur ie.
sur les autres, si je fais abstraction des scrolls cela fonctionne (mais ils ne vont pas aimé les scrolls ! j'en suis certain)

il n'y a pas une autre solution ?
GregK84
Lézard à collerette
Messages : 360
Inscription : 15 oct. 2004, 15:24

Message par GregK84 »

calimo a écrit :Sinon si tu as php il y a la fonction nl2br il me semble...
oki je vais faire une recherche sur cette fonction
SIBELIUS
Lézard vert
Messages : 146
Inscription : 09 sept. 2003, 23:21

Message par SIBELIUS »

GregK84 a écrit :
cela ne fonctionne pas sur ie.
Curieux, c'est la solution que j'ai employé sur mon forum et ça fonctionne bien sur IE :?
Tutoriels et blog (X)HTML / CSS : css.alsacreations.com
Forum Standards / CSS : forum.alsacreations.com
GregK84
Lézard à collerette
Messages : 360
Inscription : 15 oct. 2004, 15:24

Message par GregK84 »

SIBELIUS a écrit :
GregK84 a écrit :
cela ne fonctionne pas sur ie.
Curieux, c'est la solution que j'ai employé sur mon forum et ça fonctionne bien sur IE :?
il ne prend plus mes colonnes de droite et de gauche en considération
GregK84
Lézard à collerette
Messages : 360
Inscription : 15 oct. 2004, 15:24

Message par GregK84 »

calimo a écrit :Sinon si tu as php il y a la fonction nl2br il me semble...
cela fonctionne correctement avec la fonction php nl2br, malheureusement mon code n'est plus tres propre avec toute cette chiée de <br>


pour bien faire, je devrais verifier la taille de mon texte ne depasse pas la taille d'un witdh, si il est plus long que XXX je le coupe

et ensuite je l'afficherais avec la propriete css white-space: pre;
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Ahrefs [Bot] et 0 invité