IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Problème de retour à la ligne


Sujet :

Tableau en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Gunner4902
    Invité(e)
    Par défaut Problème de retour à la ligne
    Bonjour à tous,

    J'ai un soucis de retour à la ligne… c'est bête comme chou, mais je ne trouve pas de solution !

    Voilà, je fais un site avec respect de la typographie, donc présence des espaces insécables… ( & #160; [sans l'espace ])
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <body>
    <div id="nbre">100<span />200& #160;000<span />500<span />60<span />500& #160;000<span />1& #160;000<span />30<span />60& #160;000</div>
    </body>
    Voici le code CSS :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    body {background-color:#900; color:#fff; font:2.5em Arial; overflow:hidden; width:95%;}
    div {position:absolute; text-shadow:3px 3px 3px #900;}
    span {margin-left: 60px;}/*espace inter mots*/
    #nbre {left:50%; bottom:30px; margin-left:-475px; width:950px; text-align:center;}
    Les nombres s'affichent, mais sur une seule ligne qui finit par sortir de ma page Web… comment faire pour qu'il y ait une césure à un <span /> ?

    J'ai oublié de dire que les nombres étaient aléatoires et que donc je ne sais pas s'il y en aura 1 ou 15… donc pas de possibilité de mettre un <br /> à l'endroit précis de la fin d'écran (ça serait trop facile ! rire)

  2. #2
    Membre émérite
    Avatar de gwinyam
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2006
    Messages
    1 162
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Mai 2006
    Messages : 1 162
    Par défaut
    Propriété CSS "display", valeur "block"

  3. #3
    Membre émérite Avatar de c_s_s
    Profil pro
    Inscrit en
    Juillet 2008
    Messages
    619
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Juillet 2008
    Messages : 619
    Par défaut
    Bonjour,

    Pourquoi ne pas mettre les nombres entre les balises <span></span> plutôt que d'utiliser cette balise pour espacer les nombres entre eux ?

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div id="nbre">
    	<span>100</span>
    	<span>200 000</span>
    	<span>500</span>
    	<span>60</span>
    	<span>500 000</span>
    	<span>1 000</span>
    	<span>30</span>
    	<span>60 000</span>
    </div>

  4. #4
    Gunner4902
    Invité(e)
    Par défaut
    Citation Envoyé par gwinyam Voir le message
    Propriété CSS "display", valeur "block"
    Si je fais celà sur les span, alors ils vont tous avoir un comportement de type block et j'aurais une sorte de liste de nombres, alors que je ne souhaite qu'un retour à la ligne qu'après avoir atteint la limite de la largeur de la page web.

    Citation Envoyé par c_s_s Voir le message
    Pourquoi ne pas mettre les nombres entre les balises <span></span> plutôt que d'utiliser cette balise pour espacer les nombres entre eux ?
    Pourquoi ? en fait, ici span ne sert qu'à attribuer un espacement de x pixels. donc plutot que de surcharger le code par <span>toto</span><span>toto</span><span>toto</span>, j'ai choisit l'écriture simplifiée avec la balise autofermante <span />

  5. #5
    Membre émérite Avatar de c_s_s
    Profil pro
    Inscrit en
    Juillet 2008
    Messages
    619
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Juillet 2008
    Messages : 619
    Par défaut
    Certes tu gagnes quelques octets en faisant ça, mais la sémantique devient douteuse et le résultat te pose des problèmes.



    Si tu veux conserver ta technique d'espacement étrange, pourquoi ne pas laisser un espace avant ta balise <span /> ?

  6. #6
    Membre expérimenté
    Profil pro
    Inscrit en
    Mars 2006
    Messages
    319
    Détails du profil
    Informations personnelles :
    Âge : 44
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2006
    Messages : 319
    Par défaut
    Ne serait-ce à cause de la propriété "overflow" fixée à "hidden" pour ton élément "body" que le phénomène se produit ?

  7. #7
    Gunner4902
    Invité(e)
    Par défaut
    Dans l'attente de mieux j'ai finallement opté pour la mise en place d'un espace dans le code source via PHP (trop de span à modifier [environ 200 pages php, dans plusieurs répertoires])

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $nbre = str_replace("<span />", " <span />", "$nbre");
    >Tigroo : non j'ai vérifié après ton post, mais ça n'est pas du à overflow, mais celà m'a permis de voir que j'avais un scrolling horizontal anormal et j'en ai profité pour supprimer overflow après correction du soucis de scrolling

    Sinon, d'un point de vue sémantique, <span /> est correct, puisque c'est une balise autofermante et celà l'est plus que ce que l'on peut voir sur certains sites qui écrivent <span></span> uniquement pour avoir un support pour faire du design

  8. #8
    Membre émérite Avatar de c_s_s
    Profil pro
    Inscrit en
    Juillet 2008
    Messages
    619
    Détails du profil
    Informations personnelles :
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Juillet 2008
    Messages : 619
    Par défaut
    Si tu écrivais tes chiffres : 200.000 au lieu de 200 000 (par exemple), il te suffirait d'ajouter la propriété word-spacing:60px; dans ton bloc #nbre pour espacer tes chiffres.

    Tu n'aurais même plus besoin de tes bizzaroïdes <span />

    Enfin je dis ça, j'dis rien...

Discussions similaires

  1. [utilitaire bcp]problème avec retour à la ligne
    Par m-mas dans le forum MS SQL Server
    Réponses: 1
    Dernier message: 24/05/2007, 15h10
  2. Réponses: 1
    Dernier message: 07/04/2007, 22h21
  3. problème de retour à la ligne
    Par frol dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 02/12/2006, 14h35
  4. Problème de retour à la ligne
    Par AurelBUD dans le forum Général JavaScript
    Réponses: 20
    Dernier message: 30/05/2006, 15h17
  5. [MySQL] problème de retour à la ligne.
    Par NPortmann dans le forum PHP & Base de données
    Réponses: 2
    Dernier message: 29/09/2005, 14h43

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo