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

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 !

Adapter une DIV à son contenu

CSS

Discussions similaires

Partager

Partager