Adapter une DIV à son contenu
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 :
http://miltonis.free.fr/dp_01.gif
Idem pour le header (bandeau blanc au-dessus), il ne s'adapte pas en largeur.
Voici le code HTML :
Code:
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:
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 :)
