Probleme de Div

Résolu/Fermé
Everio Messages postés 44 Date d'inscription vendredi 3 avril 2009 Statut Membre Dernière intervention 15 juin 2009 - 22 avril 2009 à 15:37
Everio Messages postés 44 Date d'inscription vendredi 3 avril 2009 Statut Membre Dernière intervention 15 juin 2009 - 23 avril 2009 à 15:47
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.
A voir également:

7 réponses

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
22 avril 2009 à 17:20
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.
0
Everio Messages postés 44 Date d'inscription vendredi 3 avril 2009 Statut Membre Dernière intervention 15 juin 2009
23 avril 2009 à 09:39
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.
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
23 avril 2009 à 11:22
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 :
<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
0
Everio Messages postés 44 Date d'inscription vendredi 3 avril 2009 Statut Membre Dernière intervention 15 juin 2009
23 avril 2009 à 11:59
Merci, je teste et je vous donne des nouvelles.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Everio Messages postés 44 Date d'inscription vendredi 3 avril 2009 Statut Membre Dernière intervention 15 juin 2009
23 avril 2009 à 12:05
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.
0
Everio Messages postés 44 Date d'inscription vendredi 3 avril 2009 Statut Membre Dernière intervention 15 juin 2009
23 avril 2009 à 12:50
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.
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
23 avril 2009 à 14:17
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)
0
Everio Messages postés 44 Date d'inscription vendredi 3 avril 2009 Statut Membre Dernière intervention 15 juin 2009
23 avril 2009 à 15:47
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 ^^)
0