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 :

Texte sortant du cadre


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    241
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 241
    Par défaut Texte sortant du cadre
    Je suis souvent confronté à ce problème, des fois j'arrive a le régler, des fois non...

    J'aimerais bien savoir une bonne fois pour toute comment faire en sorte qu'un texte aussi long soit-il ne dépasse pas (en largeur) un cadre d'une largeur fixe, inférieure à celle du texte...

    Voila mon code HTML en question :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    <div id="news">
         <h2>Titre news</h2>
    	<p><pre class="content">ICI le contenu de la news blablablablablablablablablablablablablabla</pre></p>
    	<p class="infos">Posté le date :p</p>';
    	<hr>
            <!-- Éventuellement une autre news, ... -->
    </div>
    Et voila le CSS correspondant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
     
    #news{
    	background: url(../images/bg2.png) no-repeat;
    	-moz-opacity:0.7;
    	opacity: 0.7;
    	filter:alpha(opacity=70);
    	color: white;
    	border: 1px solid red;
    	padding: 10px 20px;
    	margin: 10px;
    	display: block;
    	text-align: justify;
    }
    #news hr{
    	text-align: center;
    	height: 1px;
    	background: red;
    }
    #news h2{
    	color: red;
    }
    #news .infos{
    	color: red;
    	font-style: italic;
    	text-align: right;
    }
    #news .content{
    	font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
    	border: 1px solid white;
    	color: blue;
    }
    Je sais que c'est tout con, mais je n'y comprend jamais rien...

    Merci d'avance de votre aide et de vos explications...

  2. #2
    Membre éclairé
    Homme Profil pro
    Conseil - Consultant en systèmes d'information
    Inscrit en
    Août 2008
    Messages
    557
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Conseil - Consultant en systèmes d'information
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2008
    Messages : 557
    Par défaut
    Bonjour,

    tu ne définis nul part la largeur de ton cadre "news".

    Mets un width dans ton div news, et ça devrait aller.

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Juillet 2009
    Messages
    23
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Juillet 2009
    Messages : 23
    Par défaut
    Et si tu veux une scrollbar (afin que les internautes puissent le lire en entier si jamais il est trop long), un petit overflow: auto;.

  4. #4
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    241
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 241
    Par défaut
    Le problème de mettre un width, c'est que la div dans laquelle est #news est en pourcentage... Etant donnée qu'elle a des margin auto, comment la laissée centrée alors que je définit une taille en pourcent ?

    De plus, ce n'est pas #news qui me pose problème, c'est le pre à l'intérieur (nommé .content), que je doit également (si je dois mettre un with) définir en pourcentage...

    Et pour le overflow, justement ce n'est pas le but ! Le but est que le texte revienne automatiquement à la ligne...

  5. #5
    Membre éclairé
    Homme Profil pro
    Conseil - Consultant en systèmes d'information
    Inscrit en
    Août 2008
    Messages
    557
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Conseil - Consultant en systèmes d'information
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2008
    Messages : 557
    Par défaut
    ça change rien que ton news soit dans une div dont le width est en %.

    ni le centrage, ni rien.

    ce que tu peux même faire, c'est mettre ton div #news, avec un width comme ça :

    il prendra la largeur du width parent. Et si tu veux qu'il prenne un peu moins, tu mets 90%, ou tu définis des marges.

    sinon, c'est pas impossible que ce soit ta balise <pre> qui te joue des tours. elle sert à reproduire le texte exactement sous la mise en forme du code. je te déconseille de l'utiliser si tu veux contrôler un peu le texte !

    mais sinon je suis sûr que c'est rien du tout.

  6. #6
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2009
    Messages
    241
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2009
    Messages : 241
    Par défaut
    Pu*** moi des fois je suis trop c** !!!

    En effet, le pre faisait ch***... Quand à ton width, je l'ai mis et c'est parfait merci

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. mon texte sort du cadre
    Par gaya102 dans le forum Mise en page CSS
    Réponses: 17
    Dernier message: 19/03/2009, 00h33
  2. Insérer du texte dans le cadre d'un div
    Par Barsy dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 04/02/2009, 16h00
  3. Cacher texte excédant son cadre
    Par partof dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 16/09/2008, 20h31
  4. afficher un texte dans un cadre en temps réel.
    Par lunyboy dans le forum Débuter
    Réponses: 1
    Dernier message: 19/06/2008, 10h54
  5. [Conception] Texte dans un cadre
    Par LYPACAN dans le forum PHP & Base de données
    Réponses: 2
    Dernier message: 16/11/2007, 14h18

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