Div ne s'adapte pas à la taille d'un div fils
cricri2394
Messages postés
169
Statut
Membre
-
cricri2394 Messages postés 169 Statut Membre -
cricri2394 Messages postés 169 Statut Membre -
Bonjour,
je me bas depuis toute à l'h avec mon code html et mes css à cause d'un soucis de taille de div.
Je vous mets mon body
<div id="prin">
<div id="header"> </div><!-- fin header -->
<div id="barre">
<div id="gauche_barre"></div><!--fin gauche barre-->
<div id="nav"></div><!--fin barre -->
</div><!-- fin barre -->
<div id="contenu">
<div id="fauteuil"></div><!--fauteuil-->
<div id="redac">
<div id="audit"> </div>
<div id="conseil"></div>
<div id="formation"></div>
<div id="pilotage"> </div>
<div id="accompagnement"> </div>
</div><!--fin redac-->
</div><!--fin contenu-->
<div id="footer">Footer</div>
</div> <!-- fin prin -->
Je souhaite avec les css faire en sorte que la taille de redac s'adapte automatiquement à celle des div audit, conseil,formation, pilotage et accompagnement qui sont des calques avec des volumes de contenu très différent. De cette façon, le footer suivra et j'aurai pas besoin de mettre d'iframe à la noix.
Je n'y arrive pas. Help please.
Merci d'avance et bonne journée.
je me bas depuis toute à l'h avec mon code html et mes css à cause d'un soucis de taille de div.
Je vous mets mon body
<div id="prin">
<div id="header"> </div><!-- fin header -->
<div id="barre">
<div id="gauche_barre"></div><!--fin gauche barre-->
<div id="nav"></div><!--fin barre -->
</div><!-- fin barre -->
<div id="contenu">
<div id="fauteuil"></div><!--fauteuil-->
<div id="redac">
<div id="audit"> </div>
<div id="conseil"></div>
<div id="formation"></div>
<div id="pilotage"> </div>
<div id="accompagnement"> </div>
</div><!--fin redac-->
</div><!--fin contenu-->
<div id="footer">Footer</div>
</div> <!-- fin prin -->
Je souhaite avec les css faire en sorte que la taille de redac s'adapte automatiquement à celle des div audit, conseil,formation, pilotage et accompagnement qui sont des calques avec des volumes de contenu très différent. De cette façon, le footer suivra et j'aurai pas besoin de mettre d'iframe à la noix.
Je n'y arrive pas. Help please.
Merci d'avance et bonne journée.
A voir également:
- Div ne s'adapte pas à la taille d'un div fils
- Comment réduire la taille d'un fichier - Guide
- Div c++ - Télécharger - Langages
- Reduire taille image - Guide
- Afficher taille dossier windows - Guide
- Excel adapter taille cellule au texte ✓ - Forum Excel
7 réponses
Ce code était suffisant :
<div id="redac">
<div id="audit"> </div>
<div id="conseil"></div>
<div id="formation"></div>
<div id="pilotage"> </div>
<div id="accompagnement"> </div>
</div><!--fin redac-->
Par contre OU est la CSS ????
<div id="redac">
<div id="audit"> </div>
<div id="conseil"></div>
<div id="formation"></div>
<div id="pilotage"> </div>
<div id="accompagnement"> </div>
</div><!--fin redac-->
Par contre OU est la CSS ????
Ma css est dans le head bien sûr.
Mais ce qui se passe quand le contenu d'un des div est trop gros, le footer ne bouge pas, donc le contenu du div passe dessus et c'est très moche ...
Mais ce qui se passe quand le contenu d'un des div est trop gros, le footer ne bouge pas, donc le contenu du div passe dessus et c'est très moche ...
Y a un bin's dans la css, mais tu ne la montre pas... donc pour t'aider : makach
Ensuite faut savoir que si la propriété de la boite englobante n'est pas défini, parfois les enfants on du mal à se positionner correctement.
Ensuite faut savoir que si la propriété de la boite englobante n'est pas défini, parfois les enfants on du mal à se positionner correctement.
Bon et bien si c'est dû à un "bin" css je vous mets la css du squelette:
/* CSS Document */
body{
background-image:url(images/fondage.jpg);
background-repeat:repeat;
}
#prin{
width:800px;
float:left;
}
#header{
float:left;
width:800px;
background-image:url(images/home2_01.jpg);
background-repeat:no-repeat;
height: 100px;
}
#barre{
width:800px;
height: 100px;
}
#gauche_barre{
float:left;
width:176px;
height:100px;
background-image:url(images/home2_02.gif);
background-repeat:no-repeat;
}
#nav{
float:left;
width:624px;
height:100px;
background-repeat:no-repeat;
}
#contenu{
float:left;
width:800px;
height: auto;
}
#fauteuil{
float:left;
width:191px;
background-image:url(images/home2_04.jpg);
background-repeat:no-repeat;
margin-bottom: 0px;
height: 400px;
} h1 {
font-family: eurofurence, Verdana;
font-size: 18px;
color: #006db5;
margin-left: 5px;
margin-top: 5px;
} h2 {
font-family: eurofurence, Verdana;
font-size: 16px;
margin-left: 15px;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-left: 5px;
margin-right: 5px;
}
#redac{
float:left;
width:609px;
background-color: #713C46;
z-index: 1;
}
#footer{
float:left;
width:800px;
background-color:#b8b8b8;
}
Après, pour les div "enfants" c'est sur un autre fichier css calques.css (mais je ne pense pas que ça interfère)
#audit {
position:absolute;
left:209px;
top:221px;
width:594px;
height:145px;
z-index:2;
visibility: visible;
}
#conseil {
position:absolute;
left:209px;
top:221px;
width:594px;
height:145px;
z-index:3;
visibility: hidden;
}
#formation {
position:absolute;
left:209px;
top:221px;
width:594px;
height:145px;
z-index:4;
visibility: hidden;
}
#pilotage {
position:absolute;
left:209px;
top:221px;
width:594px;
height:145px;
z-index:5;
visibility: hidden;
}
#accompagnement {
position:absolute;
left:209px;
top:221px;
width:594px;
height:145px;
z-index:6;
visibility: hidden;
}
Voili voilà.
/* CSS Document */
body{
background-image:url(images/fondage.jpg);
background-repeat:repeat;
}
#prin{
width:800px;
float:left;
}
#header{
float:left;
width:800px;
background-image:url(images/home2_01.jpg);
background-repeat:no-repeat;
height: 100px;
}
#barre{
width:800px;
height: 100px;
}
#gauche_barre{
float:left;
width:176px;
height:100px;
background-image:url(images/home2_02.gif);
background-repeat:no-repeat;
}
#nav{
float:left;
width:624px;
height:100px;
background-repeat:no-repeat;
}
#contenu{
float:left;
width:800px;
height: auto;
}
#fauteuil{
float:left;
width:191px;
background-image:url(images/home2_04.jpg);
background-repeat:no-repeat;
margin-bottom: 0px;
height: 400px;
} h1 {
font-family: eurofurence, Verdana;
font-size: 18px;
color: #006db5;
margin-left: 5px;
margin-top: 5px;
} h2 {
font-family: eurofurence, Verdana;
font-size: 16px;
margin-left: 15px;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-left: 5px;
margin-right: 5px;
}
#redac{
float:left;
width:609px;
background-color: #713C46;
z-index: 1;
}
#footer{
float:left;
width:800px;
background-color:#b8b8b8;
}
Après, pour les div "enfants" c'est sur un autre fichier css calques.css (mais je ne pense pas que ça interfère)
#audit {
position:absolute;
left:209px;
top:221px;
width:594px;
height:145px;
z-index:2;
visibility: visible;
}
#conseil {
position:absolute;
left:209px;
top:221px;
width:594px;
height:145px;
z-index:3;
visibility: hidden;
}
#formation {
position:absolute;
left:209px;
top:221px;
width:594px;
height:145px;
z-index:4;
visibility: hidden;
}
#pilotage {
position:absolute;
left:209px;
top:221px;
width:594px;
height:145px;
z-index:5;
visibility: hidden;
}
#accompagnement {
position:absolute;
left:209px;
top:221px;
width:594px;
height:145px;
z-index:6;
visibility: hidden;
}
Voili voilà.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Et voilà, j'ai beau tourner et retourner dans tous les sens, quand un des divs enfants est trop long il passe sur mon footer et ce dernier ne suit pas même en supprimant le div "contenu"...
j'ai tenté le coup avec un javascript (http://blocnotes.jemenvol.net/5.afficher-et-masquer-une-div/)et sans style ca marchait, il ne manquait qu'à régler le soucis du "j'affiche un div donc je n'affiche plus celle qui était affichée avant".
Et dès que j'applique ma feuille de style, ca ne marche plus...
j'ai tenté le coup avec un javascript (http://blocnotes.jemenvol.net/5.afficher-et-masquer-une-div/)et sans style ca marchait, il ne manquait qu'à régler le soucis du "j'affiche un div donc je n'affiche plus celle qui était affichée avant".
Et dès que j'applique ma feuille de style, ca ne marche plus...