Div ne s'adapte pas à la taille d'un div fils
cricri2394
Messages postés
150
Date d'inscription
Statut
Membre
Dernière intervention
-
cricri2394 Messages postés 150 Date d'inscription Statut Membre Dernière intervention -
cricri2394 Messages postés 150 Date d'inscription Statut Membre Dernière intervention -
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
- Reduire taille image - Guide
- Afficher taille dossier windows - Guide
- Excel adapter taille cellule au texte ✓ - Forum Excel
- Dans la présentation à télécharger, déplacez l'image dans le cadre sans en modifier la taille. redressez l'image pour que le niveau de la mer soit à l'horizontale. faites correspondre : la ligne avec le niveau de la mer ; le point avec le sommet de la grande voile. combien d'oiseaux sont dans le cadre ? - Forum Word
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...