Adapter une DIV à son contenu

miltonis · 29/04/2011, 11h09

Bonjour,

Oui

c'est un sujet traité maintes fois mais mon cas est légèrement différent :

J'ai une DIV qui contient un tableau dont le contenu est généré et du coup sa largeur est variable.
Le problème est que dans une résolution très petite, le tableau dépasse de son conteneur, voyez l'image qui suit. J'ai fait un montage de deux captures d'écran :

Idem pour le header (bandeau blanc au-dessus), il ne s'adapte pas en largeur.

Voici le code HTML :

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
<body>
 
<!-- HEADER -->
<div id="header">
	<img src="/images/.png" alt="" align="left" />
	<img src="/images/dp_logo.png" alt="" width="250" align="right" />	
</div>
 
<!-- MENU -->
<ul class="menu_accueil2">	
	<li><a href="/backend.php/">Accueil</a></li>
	<li><a href="/backend.php/logout">Deconnexion</a></li>	
</ul>
<div class="clear"></div>
 
<!-- CONTENEUR -->
<div id="conteneur"> 
	<h1>Liste des contributeurs de : Client1 Client1</h1>
	ICI LE <TABLE>...
</div>
 
</body>

Et le CSS qui correspond :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
html, body {
	background-color: #978F7F;
	font-family: Verdana, Arial, Geneva, sans-serif;
	font-size: 0.9em;
	width: 100%;
	padding: 0 0 10px 0;
	margin: 0;
}
 
 
/* HEADER */
div#header {
	background-color: #FFF;
	width: 100%;
	height: 70px;
	margin-bottom: 25px;
	-moz-box-shadow: -20px 0 14px #665b44;
	-webkit-box-shadow: -20px 0 14px #665b44;
	box-shadow: -20px 0 14px #665b44;
}
#header img {
	margin: 7px 10px 0 20px;
}
/* CONTENU */
div#conteneur {
	background-color: #FFF;
	width: 80%; /*800*/
	padding: 20px;
	margin: 0 auto;
	-moz-border-radius: 13px;
	-webkit-border-radius: 13px;
	border-radius: 13px;
	-moz-box-shadow: 0 0 15px #665b44;
	-webkit-box-shadow: 0 0 15px #665b44;
	box-shadow: 0 0 15px #665b44;
}
/* TABLEAUX */
table {
	background-color: #eae4d8;
	width: 100%;
	padding: 10px 0 6px 0;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	margin-bottom: 5px;
}

Voilà, si quuelqu'un peut me mettre sur la voie, ce serait super !!
Merci

Bisûnûrs · 29/04/2011, 11h20

Si tu t'en fous de IE6, tu peux essayer un min-width à la place de ton width sur le conteneur.

miltonis · 29/04/2011, 11h37

Citation:

Envoyé par Bisûnûrs

Si tu t'en fous de IE6, tu peux essayer un min-width à la place de ton width sur le conteneur.

merci de ta réponse Bisunurs,
mais ça ne change rien au fait que le cadre dépsse toujours de son conteneur.
étrange non ?

Bisûnûrs · 29/04/2011, 11h45

Ok, j'ai compris le problème. Ca fonctionne jusqu'à la limite du viewport, le conteneur n'allant pas plus loin. A mon avis tu n'as pas d'autre solution que de mettre un overflow;auto sur ton conteneur.
Ou alors calculer la largeur du conteneur en Javascript.

miltonis · 29/04/2011, 11h56

ah bon???? pas de solution?
ça m'étonne un peu je l'avoue. QU'est-ce que le Viewport ?

Bisûnûrs · 29/04/2011, 11h58

La zone de visualisation. Ton conteneur va s'étendre jusqu'à cette limite maximum. Ensuite l'élément enfant trop grand va dépasser. C'est le comportement du navigateur et impossible à modifier dans ce cas-là, sauf en jouant sur les deux solutions que je t'ai données.

miltonis · 29/04/2011, 12h14

Ok je regarde ça
Merci de ton aide !

29/04/2011, 11h20	#2
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	Si tu t'en fous de IE6, tu peux essayer un min-width à la place de ton width sur le conteneur.
	00

29/04/2011, 11h45	#4
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	Ok, j'ai compris le problème. Ca fonctionne jusqu'à la limite du viewport, le conteneur n'allant pas plus loin. A mon avis tu n'as pas d'autre solution que de mettre un overflow;auto sur ton conteneur. Ou alors calculer la largeur du conteneur en Javascript.
	00

29/04/2011, 11h56	#5
miltonis Nouveau Membre du Club Inscription : avril 2005 Messages : 180 Détails du profil Informations forums : Inscription : avril 2005 Messages : 180 Points : 29 Points : 29	ah bon???? pas de solution? ça m'étonne un peu je l'avoue. QU'est-ce que le Viewport ?
	00

29/04/2011, 11h58	#6
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	La zone de visualisation. Ton conteneur va s'étendre jusqu'à cette limite maximum. Ensuite l'élément enfant trop grand va dépasser. C'est le comportement du navigateur et impossible à modifier dans ce cas-là, sauf en jouant sur les deux solutions que je t'ai données.
	00

29/04/2011, 12h14	#7
miltonis Nouveau Membre du Club Inscription : avril 2005 Messages : 180 Détails du profil Informations forums : Inscription : avril 2005 Messages : 180 Points : 29 Points : 29	Ok je regarde ça Merci de ton aide !
	00

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