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

HTML Discussion :

Pb : div imbriquées


Sujet :

HTML

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    116
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 116
    Points : 68
    Points
    68
    Par défaut Pb : div imbriquées
    Bonjour, j'espère que c'est pas trop du déja vu...

    Voila mon pb, c'est bien simple, j'ai une div "interieur" en position absolute à l'interieur d'une autre div "exterieur", et je voudrait que la div "exterieur" change de hauteur en fonction de la hauteur de "interieur", donc, en gros, que la div "interieur", dont la taille est variable, soit bien contenue dans "exterieur" et ne déborde pas.

    Je reformule :

    le html
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    <div id="exterieur">
        <div id="interieur">
            <!-- contenu variable -->
        </div>
    </div>
    le css
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    #exterieur{
     width:300px;
     background-color:yellow;
    }
    #interieur{
     position:absolute; 
     top:20px;
     left:60px;
     width:250px;
     background-color:red;
    }
    enfin vous voyez le genre quoi.
    Je voudrait que la div exterieur s'étire pour contenir la div interieur quelque soir le contenu.

    Ya-t-il une solution ?
    Merci

  2. #2
    Membre confirmé Avatar de masu
    Inscrit en
    Février 2004
    Messages
    428
    Détails du profil
    Informations forums :
    Inscription : Février 2004
    Messages : 428
    Points : 484
    Points
    484
    Par défaut
    As-tu un exemple precis ou ca déborde ?
    Le probleme est-il un debordement en largeur ou en hauteur ?

  3. #3
    Membre averti

    Inscrit en
    Octobre 2004
    Messages
    363
    Détails du profil
    Informations forums :
    Inscription : Octobre 2004
    Messages : 363
    Points : 417
    Points
    417
    Par défaut
    Normallement IE adapte automatiquement la hauteur (et largeur) du conteneur en fonction du contenu. Firefox non, ceci est remarquable si on met le contenu en float, là c la cata...

  4. #4
    Membre du Club
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    116
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 116
    Points : 68
    Points
    68
    Par défaut
    HTML
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <body>
    	<div id="ext">
    		ext
    		<div id="int">
    			a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />a<br />
    		</div>
    	</div>
     
    </body>
    CSS
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    #ext {
    	width:200px;
    	background-color:#FFFF00;
    }
    #int {
    	position:absolute;
    	left:20px;
    	top:50px;
    	width:150px;
    	background-color:#FF0000;
    }
    Là par ex, la div "int" est à l'écran complètement en dehors de "ext", ie et firefox pareil.

  5. #5
    Membre averti

    Inscrit en
    Octobre 2004
    Messages
    363
    Détails du profil
    Informations forums :
    Inscription : Octobre 2004
    Messages : 363
    Points : 417
    Points
    417
    Par défaut
    Normal ton contenu est en absolute.

    ton nouveau css
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
                #ext {
    	width:200px;
    	background-color:#FFFF00;
    }
    #int {
    	margin-left:20px;
    	margin-top:50px;
    	width:150px;
    	background-color:#FF0000;
    }
    ca marche (testé IE et FF)

  6. #6
    Membre du Club
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    116
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 116
    Points : 68
    Points
    68
    Par défaut
    D'accord mais en réalité la page est un peu plus complexe et je suis quasi-obligé de mettre la div en absolute. D'ou le problème !

  7. #7
    Membre averti

    Inscrit en
    Octobre 2004
    Messages
    363
    Détails du profil
    Informations forums :
    Inscription : Octobre 2004
    Messages : 363
    Points : 417
    Points
    417
    Par défaut
    tu aura toujours lemême problème alors, puisque la propriété absolute dispose un élément par rapport à la page et non au parent.

    sinon tu peux mettre en relative comme ceci en ajoutant un paddong-bottom de la valeur du décalage en hauteur de ton div interieur :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    #ext {
    	width:200px;
    	background-color:#FFFF00;
    	padding-bottom:50px;
    }
    #int {
    	position:relative;
    	left:20px;
    	top:50px;
    	width:150px;
    	background-color:#FF0000;
    }
    mais ca rtevient au même, si tu explique la complexitude de ta page peut être pourra t on trouver une solution

  8. #8
    Membre du Club
    Profil pro
    Inscrit en
    Juin 2005
    Messages
    116
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2005
    Messages : 116
    Points : 68
    Points
    68
    Par défaut
    Ah non monsieur, je m'insurge, une div en position absolute est positionnée par rapport à sa div conteneur et pas par rapport à la page !

    T'as qu'à essayer de remplacer le #ext de la css par ça :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    #ext {
    	position:absolute;
    	left:20px;
    	top:50px;
    	width:200px;
    	background-color:#FFFF00;
    }
    et tu verra la #int bouger aussi !

    Donc ma question était pas si con et le pb est toujours là

  9. #9
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2004
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2004
    Messages : 2 147
    Points : 3 264
    Points
    3 264
    Par défaut
    essaye de faire cela:
    A la suite de ta div intérieur (toujours dans la div extérieur), tu mets cela:

    et dans ton css:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    .spacer {
    	visibility: hidden;
    	margin: 0;
    	clear: both;
    	background-color: transparent;
    	height: 1px;
    }
    la règle clear both indique que le hr n'accepte pas qu'il y ait un élément, ni à gauche ni à droite...
    cela devrait avoir pour consequence de pousser le reste du contenu de ta div extérieure en dessous de ta div intérieure...

  10. #10
    Membre confirmé Avatar de masu
    Inscrit en
    Février 2004
    Messages
    428
    Détails du profil
    Informations forums :
    Inscription : Février 2004
    Messages : 428
    Points : 484
    Points
    484
    Par défaut
    le coup du spacer avec clear:both ca marche aussi avec position:absolute? je pensait que ca ne marchait qu'avec les float.

  11. #11
    Rédacteur
    Avatar de MasterOfChakhaL
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2004
    Messages
    2 147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juin 2004
    Messages : 2 147
    Points : 3 264
    Points
    3 264
    Par défaut
    Citation Envoyé par masu
    le coup du spacer avec clear:both ca marche aussi avec position:absolute? je pensait que ca ne marchait qu'avec les float.
    Effectivement, il semble bien que tu aies raison...
    Je croyais que le clear: both fonctionnait avec tout ce qui était retiré du flux, mais j'avais tort...

    TheRedLed, je te propose de nous en dire un peu plus sur la complexité de ta page. Pour l'instant je sèche...

Discussions similaires

  1. background pour div imbriquées
    Par piotrr dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 17/04/2009, 19h22
  2. Script "tout cocher" (checkbox) avec div imbriqué
    Par kalisti dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 21/01/2009, 20h03
  3. Centrage de div imbriquées
    Par spectre666 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 06/01/2009, 18h27
  4. Comment centrer mon div imbriquer dans un autre
    Par pierrot10 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 03/12/2006, 14h15

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