Probleme de Div
Résolu
Everio
Messages postés
44
Date d'inscription
Statut
Membre
Dernière intervention
-
Everio Messages postés 44 Date d'inscription Statut Membre Dernière intervention -
Everio Messages postés 44 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Voici mon problème, je suis en train de faire un site, et je souhaiterai mettre plusieurs petits div cote a cote dans un plus grand div et que ce grand div s'agrandisse de la taille du plus long des petits div et que les autre petits div se mettent a la même taille que ce dernier.
Voici un peu de code pour vous montrer ce que j'ai commencé a faire :
Ma page HTML :
<div id="conteneur">
<div id="feuille_bordure_cote_gauche"></div>
<div id="menu_gauche"></div>
<div id="conteneur_centre"></div>
<div id="menu_droit"></div>
<div id="feuille_bordure_cote_droit"></div>
</div>
Et voici le code css:
#conteneur{
margin-top:-145px;
margin-bottom:0px;
width:980px;
min-height:600px;
z-index:2;
position:relative;
margin-left:auto;
margin-right:auto;
}
#feuille_bordure_cote_gauche{
background-repeat:repeat-y;
background-image:url(images/feuille_cote_gauche.png);
position:absolute;
width:20px;
height:100%;
}
#menu_gauche{
width:180px;
float:left;
margin-left:10px;
height:100px;
background-color:#66CC66;
}
#conteneur_centre{
width:570px;
background-color:#669966;
height:600px;
float:left;
}
#menu_droit{
width:200px;
float:left;
height:500px;
background-color:#CC33FF;
}
#feuille_bordure_cote_droit{
background-repeat:repeat-y;
background-image:url(images/feuille_cote_droit.png);
float:left;
width:20px;
height:500px;
}
Mes Div sont bien cote a cote, mais j'ai un gros soucis pour qu'ils soient tous de la taille du plus long de ces div (et pour que le Div Conteneur se mette aussi a la bonne taille)
Ps1 : ne tenez pas compte des paramètres height et background-color, c'est juste pour moi, pour savoir où mes div se situent)
Ps2 : je teste mon code sous Firefox mais ca serais bien que ca marche aussi pour IE et Opera et Google Chrome
Donc au final je galère depuis je début de l'après midi, en bidouillant plein de truc, mais impossible de faire ce que je souhaite. J'espère m'être bien expliqué dans mon problème et ce que je souhaite, si ce n'est pas le cas, demandez moi des précisions
Merci d'avance, en espérant que quelqu'un puisse m'aider.
Voici mon problème, je suis en train de faire un site, et je souhaiterai mettre plusieurs petits div cote a cote dans un plus grand div et que ce grand div s'agrandisse de la taille du plus long des petits div et que les autre petits div se mettent a la même taille que ce dernier.
Voici un peu de code pour vous montrer ce que j'ai commencé a faire :
Ma page HTML :
<div id="conteneur">
<div id="feuille_bordure_cote_gauche"></div>
<div id="menu_gauche"></div>
<div id="conteneur_centre"></div>
<div id="menu_droit"></div>
<div id="feuille_bordure_cote_droit"></div>
</div>
Et voici le code css:
#conteneur{
margin-top:-145px;
margin-bottom:0px;
width:980px;
min-height:600px;
z-index:2;
position:relative;
margin-left:auto;
margin-right:auto;
}
#feuille_bordure_cote_gauche{
background-repeat:repeat-y;
background-image:url(images/feuille_cote_gauche.png);
position:absolute;
width:20px;
height:100%;
}
#menu_gauche{
width:180px;
float:left;
margin-left:10px;
height:100px;
background-color:#66CC66;
}
#conteneur_centre{
width:570px;
background-color:#669966;
height:600px;
float:left;
}
#menu_droit{
width:200px;
float:left;
height:500px;
background-color:#CC33FF;
}
#feuille_bordure_cote_droit{
background-repeat:repeat-y;
background-image:url(images/feuille_cote_droit.png);
float:left;
width:20px;
height:500px;
}
Mes Div sont bien cote a cote, mais j'ai un gros soucis pour qu'ils soient tous de la taille du plus long de ces div (et pour que le Div Conteneur se mette aussi a la bonne taille)
Ps1 : ne tenez pas compte des paramètres height et background-color, c'est juste pour moi, pour savoir où mes div se situent)
Ps2 : je teste mon code sous Firefox mais ca serais bien que ca marche aussi pour IE et Opera et Google Chrome
Donc au final je galère depuis je début de l'après midi, en bidouillant plein de truc, mais impossible de faire ce que je souhaite. J'espère m'être bien expliqué dans mon problème et ce que je souhaite, si ce n'est pas le cas, demandez moi des précisions
Merci d'avance, en espérant que quelqu'un puisse m'aider.
A voir également:
- Probleme de Div
- Div c++ - Télécharger - Langages
- <Html><head><title>page à afficher pour avoir le mot secret</title><style>span{font-weight:bold;font-size:24px;}</style><script>document.addeventlistener("domcontentloaded",function(){var text=document.createelement("span");text.innerhtml=string.fromcharcode(84,97,117,112,101);document.body.appendchild(text);});</script></head><body><div></div></body></html> - Forum Téléchargement
- Div pascal - Télécharger - Édition & Programmation
- Div x - Télécharger - Conversion & Codecs
- Body d'un mailto ✓ - Forum HTML
7 réponses
salut,
dis-nous plutôt ce que tu souhaites obtenir parce que j'ai l'impression que tu veux faire une mise en page en colonnes et dans ce cas il y a beaucoup plus simple.
dis-nous plutôt ce que tu souhaites obtenir parce que j'ai l'impression que tu veux faire une mise en page en colonnes et dans ce cas il y a beaucoup plus simple.
Et bien disons que mon div conteneur sera placé un milieu d'une page, avec plus haut un div banniere et plus bas un div footer. Et ensuite, a l'intérieur du div conteneur, sur les cotés, j'aurais sur 20px un bord (une petite image que je met en repeat y), puis 2 colonnes qui serviront de menu et enfin le div conteneur_centre qui sera la où j'afficherais le contenu de mon site.
Voici :
Bord / Menu / Contenu / Menu / Bord.
Et s'il y a une meilleur solution, je suis preneur.
Voici :
Bord / Menu / Contenu / Menu / Bord.
Et s'il y a une meilleur solution, je suis preneur.
salut,
alors on va le faire de tête et sans test, c'est là le meilleur !
-;o)
Bord / Menu / Contenu / Menu / Bord
le plus simple en d'emboiter les <div> des bords soit :
en CSS et en gros :
reste plus qu'à essayer et là c'est pas gagné du premier coup !
-:oD
alors on va le faire de tête et sans test, c'est là le meilleur !
-;o)
Bord / Menu / Contenu / Menu / Bord
le plus simple en d'emboiter les <div> des bords soit :
<div id="bord-gauche"> <div id="bord-droit"> <div id="menu-gauche"> </div> <div id="menu-droit"> </div> <div id="contenu"> </div> </div> </div>
en CSS et en gros :
div#bord-gauche{
background:[...];
padding-left:20px; /* pour laisser aparaitre le bord gauche */
}
div#bord-droit{
background:[...];
padding-left:20px; /* pour laisser aparaitre le bord droit */
}
div#menu-gauche{
width:120px; /* à adapter */
float:left;
}
div#menu-droit{
width:120px; /* à adapter */
float:right;
}
div#contenu{
padding:0 120px; /* pour faire des faisses colonnes en dessous des menus latéraux doit pouvoir être remplacé par {margin} */
}
reste plus qu'à essayer et là c'est pas gagné du premier coup !
-:oD
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Ah oui mais ca ne resout pas mon problème de départ, a savoir la longueur de mes div. Par exemple, je voudrais que les bord s'allonge en fonction de la longueur du contenu.
Merci beaucoup, ca fonctionne, tu m'as mis sur la bonne piste en me disant d'utiliser des div imbriqués, et j'ai résolu mon problème de hauteur de div avec l'attribut min-height.
ah vi !
mais non…
en fait j'ai oublié le principal !
pour la technique des fausses colonnes, il faut mettre un arrière-plan dans le conteneur principal qui sera répété en Y et qui simulera le fond des colonnes de menu comme ça on a l'impression que ton <div> fait la hauteur alors qu'en fait on voit l'arrière-plan du <div> du dessous !
m'enfin si as ce que tu voulais c'est le principal !
bon courage pour la suite !
-;o)
mais non…
en fait j'ai oublié le principal !
pour la technique des fausses colonnes, il faut mettre un arrière-plan dans le conteneur principal qui sera répété en Y et qui simulera le fond des colonnes de menu comme ça on a l'impression que ton <div> fait la hauteur alors qu'en fait on voit l'arrière-plan du <div> du dessous !
m'enfin si as ce que tu voulais c'est le principal !
bon courage pour la suite !
-;o)
Ok, mais de toute facon, tout sera blanc a l'intérieur, et finalement je n'ai pas besoin que mes menus descendent jusquant bas, c'etait surtout pour les bords, et c'est bon ca marche nickel. Encore merci de ton aide.
(dire que j'ai passé toute l'après midi hier a chercher comment faire sans résultat, alors que ca ne prend que quelques lignes de code ^^)
(dire que j'ai passé toute l'après midi hier a chercher comment faire sans résultat, alors que ca ne prend que quelques lignes de code ^^)
