dynamisme de taille pour un div conteneur [Résolu]

jamdinhe · 28/02/2011, 11h47

Bonjour,
dans mon découpage j'ai opté pour les DIV (par rapport à la recommandation du W3C qui déconseil d'utiliser les balises <table> pour la mise en page et le découpage),

mes <div> sont structurés de cette manière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<div id="conteneur">
  <div id="entete">
  </div>
  <div id="corp">
  </div>
  <div id="pied">
  </div>
</div>

si je met

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#conteneur {width : 800px; margin : 0 auto; background-color : red;}

le <div id="conteneur"> ne suit pas dynamiquement la longueur des <div> qui lui sont imbriqués;

ma question porte sur le dynamisme de mon <div id="conteneur"> afin de retrouver un arrière plan unique dans le centre de mon site web quelque soit sa longueur

merci à tout ceux qui veulent aider

Msieurduss · 28/02/2011, 14h32

Hello,

Quelles sont les propriétés de tes autres DIV (en-tête, corpS, pied...) ?
Ca dépend aussi de ça...

L'exemple suivant (basique sans rien) fonctionne bien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<html>
<head>
 
<style type="text/css">
 
#conteneur {width : 800px; margin : 0 auto; background-color : red;}
#entete {width: 800px; background-color: green;}
#corps {width: 800px; background-color: grey;}
#pied {width: 800px; background-color: yellow;}
 
</style>
</head>
<body>
 
<div id="conteneur">
  <div id="entete">
	en-tête
  </div>
  <div id="corps">
	corps
  </div>
  <div id="pied">
	pied-de-page
  </div>
</div>
 
</body>
</html>

Bisûnûrs · 28/02/2011, 14h32

J'ai du mal à comprendre .. Ca veut dire que tes divs enfants ont une largeur supérieure à 800px ?

ornitho13 · 28/02/2011, 14h36

Salut,

peut on avoir la CSS des autres classes à l’intérieur de ton div "conteneur", à mon avis le problème vient de là.

jamdinhe · 01/03/2011, 10h24

Bonjour a tous,

effectivement Msieurduss, ton exemple s'affiche comme il ce doit,

mais pour mon cas, ce n'est pas aussi simple ou plutôt basique que ca... je voulais simplifier ma question, mais enfaite, je crois que j'ai aussi fait disparaitre le problème;

pour plus de précision, voilà une image qui illustre mon découpage :

le <div> marron, représente le conteneur

le <div> rouge, représente l'entete
le <div> vert, représente le corp
le <div> bleu, représente le pied

le <div> jaune, représente le menu
le <div> gris, représente la colonne_gauche
le <div> blanc, représente le corp
le <div> orrange, représente la colonne_droite

mon problème donc, que dois-je mettre pour que le <div> corp continue de descendre jusqu'au dernier <div> enfant (colonne_gauche, corp, colonne_droite) ?

toujours prêt à donner plus d'explication si necessaire;

encore merci à tout ceux qui veulent aider

amine

ornitho13 · 01/03/2011, 10h30

ajoute une clear:both dans l'instruction CSS de ton "pied"

Si tu pouvais donner ton HTML et ton CSS, on pourrait mieux t'aiguiller et voir le problème.

merci

Bisûnûrs · 01/03/2011, 10h31

Ah, quand tu parlais de longueur, tu faisais référence à la hauteur en fait .. Un overflow:hidden sur ton div corps vert devrait faire l'affaire.

Pour plus d'explications, une recherche sur le forum et la FAQ sur "dépassement de flottants" et "nouveau contexte de formatage" te donnera de nombreux résultats.

jamdinhe · 01/03/2011, 12h14

Citation:

Envoyé par Bisûnûrs

Ah, quand tu parlais de longueur, tu faisais référence à la hauteur en fait .. Un overflow:hidden sur ton div corps vert devrait faire l'affaire.

Pour plus d'explications, une recherche sur le forum et la FAQ sur "dépassement de flottants" et "nouveau contexte de formatage" te donnera de nombreux résultats.

exactement

ce qu'il me fallait

,
merci Bisûnûrs,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

overflow:hidden;

dans le <div> corp a résolue mon problème;

merci encore, bonne continuation

amine

01/03/2011, 10h24	#5
jamdinhe Nouveau Membre du Club Inscription : avril 2006 Messages : 111 Détails du profil Informations forums : Inscription : avril 2006 Messages : 111 Points : 36 Points : 36	Bonjour a tous, effectivement Msieurduss, ton exemple s'affiche comme il ce doit, mais pour mon cas, ce n'est pas aussi simple ou plutôt basique que ca... je voulais simplifier ma question, mais enfaite, je crois que j'ai aussi fait disparaitre le problème; pour plus de précision, voilà une image qui illustre mon découpage : le <div> marron, représente le conteneur le <div> rouge, représente l'entete le <div> vert, représente le corp le <div> bleu, représente le pied le <div> jaune, représente le menu le <div> gris, représente la colonne_gauche le <div> blanc, représente le corp le <div> orrange, représente la colonne_droite mon problème donc, que dois-je mettre pour que le <div> corp continue de descendre jusqu'au dernier <div> enfant (colonne_gauche, corp, colonne_droite) ? toujours prêt à donner plus d'explication si necessaire; encore merci à tout ceux qui veulent aider amine __________________ Plusieurs processeurs pour une machine; Plusieurs Machines pour un calcule; Plusieurs calcules pour un résultat; Plusieurs Résultats pour un diagnostique; Plusieurs Diagnostiques pour une décision. ........................................................... la Décision est un acte de Management, le Management est un Acte d'informatique
	00

28/02/2011, 14h32	#3
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	J'ai du mal à comprendre .. Ca veut dire que tes divs enfants ont une largeur supérieure à 800px ?
	00

28/02/2011, 14h36	#4
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	Salut, peut on avoir la CSS des autres classes à l’intérieur de ton div "conteneur", à mon avis le problème vient de là.
	00

01/03/2011, 10h30	#6
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	ajoute une clear:both dans l'instruction CSS de ton "pied" Si tu pouvais donner ton HTML et ton CSS, on pourrait mieux t'aiguiller et voir le problème. merci
	00

01/03/2011, 10h31	#7
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	Ah, quand tu parlais de longueur, tu faisais référence à la hauteur en fait .. Un overflow:hidden sur ton div corps vert devrait faire l'affaire. Pour plus d'explications, une recherche sur le forum et la FAQ sur "dépassement de flottants" et "nouveau contexte de formatage" te donnera de nombreux résultats.
	10

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email