Adaptation de la page web
web_dev
Messages postés
30
Statut
Membre
-
web_dev Messages postés 30 Statut Membre -
web_dev Messages postés 30 Statut Membre -
Bonjour,
Je suis debutante dans la rélisation de site web. J'ai dans la division corps (definie par une balise div ) deux sous-divisions chacune est caractérisée par des propriété css. Dans la 2eme division j'ai un tableau qui change de taille et alors déforme cette division; ca saute jusqu'au pied de page. aidez-moi svp à trouver comment faire pour adapter ces divisions à n'importe quelle taille de mon tableau. Merci
Je suis debutante dans la rélisation de site web. J'ai dans la division corps (definie par une balise div ) deux sous-divisions chacune est caractérisée par des propriété css. Dans la 2eme division j'ai un tableau qui change de taille et alors déforme cette division; ca saute jusqu'au pied de page. aidez-moi svp à trouver comment faire pour adapter ces divisions à n'importe quelle taille de mon tableau. Merci
A voir également:
- Adaptation de la page web
- Web office - Guide
- Impossible de supprimer une page word - Guide
- Creation de site web - Guide
- Comment traduire une page web - Guide
- Screenshot page web entière - Guide
4 réponses
voilà le code html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />
</head>
<body >
<div id="corps">
<div id="corps_2">
<div id="corps_2_table_liste_projet">
<table border="0" cellpadding="0" cellspacing="0" class="table_projet">
<thead>
<tr>
<td id="table_code">Code</td>
<td id="table_libelle">Libellé</td>
<td id="table_tache">Tâches</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3" class="pied_table"> </td>
</tr>
</tfoot>
<tbody>
<tr class="liste_projet_2">
<td>01</td>
<td>Libellé 01 </td>
<td>
<div class="tache_associe">
<strong>1. </strong> Spécification <br />
<strong>2. </strong>conception<br />
<strong>3. </strong>tests unitaires<br/>
<strong>4. </strong> intégration..
</div>
</td>
</tr>
<tr class="liste_projet_1">
<td>02</td>
<td>Libellé 02 </td>
<td>
<div class="tache_associe">
<strong>1. </strong> Spécification<br />
<strong>2. </strong>conception<br />
<strong>3. </strong>tests unitaires<br/>
<strong>4. </strong> intégration
</div>
</td>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
et css:
body
{
height:100%;
font:11px Tahoma; vertical-align:top;margin:0px; background-color:#ECFFFF;
}
#corps
{ height:460px;
border-left:1px solid #99FFFF;
margin-left: 200px;
padding: 20px;
background-color: #CCCCFF;
}
#corps_2{height:auto;padding: 10px;margin-bottom:10px;background-color:#FFFFFF;}
#corps_2_table_liste_projet{ height:auto; width:auto;padding-top: 20px;margin-bottom: 10px;background-color:#FFFFFF;}
#table_code{height:20px;background-image:url(images/jour.bmp); padding-left:0px;width:75px;}
#table_libelle{height:20px;background-image:url(images/jour.bmp); padding-left:0px;}
#table_tache{height:20px;background-image:url(images/jour.bmp); padding-left:0px;}
.pied_table{ height:20px;background-image:url(images/jour.bmp);}
.liste_projet_1{height:20px;padding-left:5px; background-color:#EFF1EF;border:1px solid #cfdded;}
.liste_projet_2{height:20px;padding-left:5px; border:1px solid #cfdded;}
.tache_associe{height:35px; overflow:auto; padding-bottom:2px; padding-top:1px;}
---------------------
j'ai pu adapter la taille en donant à height:auto; mais le problème maintenant est en largeur :) .lorsque je minimise(en largeur) la fenêtre, la page web s'adapte sauf les tables qui gardent leur taille et alors sortent des divisions auxquelles ils appartiennent. quels paramètres sont alors responsables ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design.css" />
</head>
<body >
<div id="corps">
<div id="corps_2">
<div id="corps_2_table_liste_projet">
<table border="0" cellpadding="0" cellspacing="0" class="table_projet">
<thead>
<tr>
<td id="table_code">Code</td>
<td id="table_libelle">Libellé</td>
<td id="table_tache">Tâches</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3" class="pied_table"> </td>
</tr>
</tfoot>
<tbody>
<tr class="liste_projet_2">
<td>01</td>
<td>Libellé 01 </td>
<td>
<div class="tache_associe">
<strong>1. </strong> Spécification <br />
<strong>2. </strong>conception<br />
<strong>3. </strong>tests unitaires<br/>
<strong>4. </strong> intégration..
</div>
</td>
</tr>
<tr class="liste_projet_1">
<td>02</td>
<td>Libellé 02 </td>
<td>
<div class="tache_associe">
<strong>1. </strong> Spécification<br />
<strong>2. </strong>conception<br />
<strong>3. </strong>tests unitaires<br/>
<strong>4. </strong> intégration
</div>
</td>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
et css:
body
{
height:100%;
font:11px Tahoma; vertical-align:top;margin:0px; background-color:#ECFFFF;
}
#corps
{ height:460px;
border-left:1px solid #99FFFF;
margin-left: 200px;
padding: 20px;
background-color: #CCCCFF;
}
#corps_2{height:auto;padding: 10px;margin-bottom:10px;background-color:#FFFFFF;}
#corps_2_table_liste_projet{ height:auto; width:auto;padding-top: 20px;margin-bottom: 10px;background-color:#FFFFFF;}
#table_code{height:20px;background-image:url(images/jour.bmp); padding-left:0px;width:75px;}
#table_libelle{height:20px;background-image:url(images/jour.bmp); padding-left:0px;}
#table_tache{height:20px;background-image:url(images/jour.bmp); padding-left:0px;}
.pied_table{ height:20px;background-image:url(images/jour.bmp);}
.liste_projet_1{height:20px;padding-left:5px; background-color:#EFF1EF;border:1px solid #cfdded;}
.liste_projet_2{height:20px;padding-left:5px; border:1px solid #cfdded;}
.tache_associe{height:35px; overflow:auto; padding-bottom:2px; padding-top:1px;}
---------------------
j'ai pu adapter la taille en donant à height:auto; mais le problème maintenant est en largeur :) .lorsque je minimise(en largeur) la fenêtre, la page web s'adapte sauf les tables qui gardent leur taille et alors sortent des divisions auxquelles ils appartiennent. quels paramètres sont alors responsables ?
