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 :

Adapter la hauteur de mon div à la hauteur du texte qu'il contient


Sujet :

Dimensionnement en CSS

  1. #1
    Nouveau membre du Club
    Inscrit en
    Décembre 2002
    Messages
    51
    Détails du profil
    Informations forums :
    Inscription : Décembre 2002
    Messages : 51
    Points : 35
    Points
    35
    Par défaut Adapter la hauteur de mon div à la hauteur du texte qu'il contient
    Bonjour

    J'ai une page avec des DIV dans laquelle un Div au centre stocke du texte, les autres div affichent des images(une image à gauche de mon DIV central, une image à droite et une image en dessous ).
    Le problème est que lorsque on met du texte dans mon DIV central qui dépasse sa hauteur alors ce texte déborde sur le div en dessous.
    En plus les images latéraux ne s'ajustent pas automatiquement à la hauteur du texte (Ce cas n'est visible sur la copie d'écran).
    Ci-joit la copie d'ecrans et le code simplifié


    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
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>01_home</title>
     <link rel="stylesheet" type="text/css" href="menu/menu_style.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- ImageReady Styles (01_home.psd) -->
    <style type="text/css">
    <!--
     
    #Table_01 {
     position:relative;
     left:0px;
     top:0px;
     width:900px;
     height:677px;
     margin:auto;
    }
     
     
     
    #id01-home-02 {
     position:absolute;
     left:0px;
     top:335px;
     width:63px;
     height:342px;
    }
     
     
    #id01-home-04 {
     position:absolute;
     left:833px;
     top:335px;
     width:67px;
     height:342px;
    }
     
    #id01-home-05 {
     position:absolute;
     left:64px;
     top:375px;
     width:770px;
     height:237px;
     margin:5;
     padding:5;
     /*background:url(images/01_home_05.gif)*/
    }
     
    #id01-home-06 {
     position:absolute;
     left:63px;
     top:627px;
     width:770px;
     height:50px;
     clear:both;
    }
     
    #col_1, #col_2, #col_3 { float:left;padding:10;}
    #col_1{width:270px;}
    #col_2{width:248px;}
    #col_3{}
     
    .Style1 {
    	color: #0000A0;
    	font-weight: bold;
    }
    .Style2 {color: #000080}
    .Style3 {color: #0000A0}
     
    -->
    </style>
    <!-- End ImageReady Styles -->
    </head>
    <body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
    <!-- ImageReady Slices (01_home.psd) -->
    <div id="Table_01">
     
     <div id="id01-home-02">
      <img src="images/01_home_02.gif" width="63" height="342" alt="" /> </div>
     
     
     <div id="id01-home-04">
      <img src="images/01_home_04.gif" width="67" height="342" alt="" /> </div>
     
     <div id="id01-home-05" >
       <p>Nous d&eacute;veloppons une approche bas&eacute;e sur la qualit&eacute;, la comp&eacute;tence et  l&rsquo;&eacute;thique. C&rsquo;est en &eacute;troite collaboration avec les utilisateurs finaux des  diff&eacute;rents secteurs de l'&eacute;conomie et les fournisseurs du march&eacute; de  l'information que nous &eacute;laborons un panel de services adapt&eacute;s aux exigences de nos partenaires </p>
       <p>Nous d&eacute;veloppons une approche bas&eacute;e sur la qualit&eacute;, la comp&eacute;tence et  l&rsquo;&eacute;thique. C&rsquo;est en &eacute;troite collaboration avec les utilisateurs finaux des  diff&eacute;rents secteurs de l'&eacute;conomie et les fournisseurs du march&eacute; de  l'information que nous &eacute;laborons un panel de services adapt&eacute;s aux exigences de nos partenaires </p>
       <p>Nous d&eacute;veloppons une approche bas&eacute;e sur la qualit&eacute;, la comp&eacute;tence et  l&rsquo;&eacute;thique. C&rsquo;est en &eacute;troite collaboration avec les utilisateurs finaux des  diff&eacute;rents secteurs de l'&eacute;conomie et les fournisseurs du march&eacute; de  l'information que nous &eacute;laborons un panel de services adapt&eacute;s aux exigences de nos partenaires </p>
       <p>Nous d&eacute;veloppons une approche bas&eacute;e sur la qualit&eacute;, la comp&eacute;tence et  l&rsquo;&eacute;thique. C&rsquo;est en &eacute;troite collaboration avec les utilisateurs finaux des  diff&eacute;rents secteurs de l'&eacute;conomie et les fournisseurs du march&eacute; de  l'information que nous &eacute;laborons un panel de services adapt&eacute;s aux exigences de nos partenaires </p>
       <p>Nous d&eacute;veloppons une approche bas&eacute;e sur la qualit&eacute;, la comp&eacute;tence et  l&rsquo;&eacute;thique. C&rsquo;est en &eacute;troite collaboration avec les utilisateurs finaux des  diff&eacute;rents secteurs de l'&eacute;conomie et les fournisseurs du march&eacute; de  l'information que nous &eacute;laborons un panel de services adapt&eacute;s aux exigences de nos partenaires </p>
     </div>
     
     <div id="id01-home-06">
      <img src="images/01_home_06.gif" width="770" height="50" alt="" /> </div>
    </div> 
    </div>
     
    </body>
    </html>
    Merci d'avance pour toute aide.
    Images attachées Images attachées  

  2. #2
    Membre actif Avatar de Damouille
    Inscrit en
    Avril 2006
    Messages
    268
    Détails du profil
    Informations forums :
    Inscription : Avril 2006
    Messages : 268
    Points : 289
    Points
    289
    Par défaut
    Bonour,
    C'est normal car tu fixes une height et ton div la repecte. Tu devrais peut etre utiliser la propriété 'min-height' (mal interprété par ie) qui fixe une taille minimum mais s'adapte si le contenu est plus grand.

  3. #3
    Membre éprouvé Avatar de laurentibus
    Inscrit en
    Mars 2008
    Messages
    875
    Détails du profil
    Informations personnelles :
    Âge : 39

    Informations forums :
    Inscription : Mars 2008
    Messages : 875
    Points : 908
    Points
    908
    Par défaut
    pour que ta div soit de la taille de ton texte, il ne faut pas lui fixer de taille, elle s'adaptera toute seule ...

    sinon pour le texte qui dépasse : faut voir la propriété overflow .

Discussions similaires

  1. Comment adapter la hauteur d'une div enfant à une div parent.
    Par infovect dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 06/03/2015, 08h29
  2. Adaptation auto de la hauteur d'un div pour un menu
    Par aloisio11 dans le forum Mise en page CSS
    Réponses: 14
    Dernier message: 07/05/2012, 14h36
  3. Adapter la hauteur d'une div à son contenu
    Par toufou dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 07/10/2009, 14h42
  4. Augmenter la hauteur d'une DIV d'après le texte
    Par frutix dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 23/09/2008, 10h56
  5. Réponses: 5
    Dernier message: 16/01/2008, 13h13

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