problème avec le width

**Mo_Poly** · 25/01/2008, 20h19

hi!

J'ai une page web qui est divisé en plusieurs div, et j'ai un probleme avec l'un de ces derniers.

il s'agit du div :<div id="corps"> (donc le corps de la page ), dans lequel j'affiche le tableau, le probléme que j'ai est que le la taille du tableau depasse la largeur du div corps, j'ai essayé de fixer le width avec une valeur, mais le probléme c'est que dans cette page j'ai une option qui permet de choisir quelles colonnes afficher! donc le tableau peut contenir une colonne comme il peut contenir 20 colonnes.

y a t-il un moyen avec le css, pour que le width du div corps depend toujours du width du tableau ?

Merci!

...

**dragoeco** · 25/01/2008, 21h44

Salut, j'vais peut-être die une coonnerie (je débute en CSS) mais je viens de résoudre un problème un peu similaire en ajoutant un position:relative; qui permet de devenir une référence aux éléménts qu'il contient.

Code :

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

#corps { position:relative }

Donc, si ça t'aide, tant mieux, sinon, oublies vite ce que je viens de dire

**Mo_Poly** · 25/01/2008, 21h57

Envoyé par dragoeco

Salut, j'vais peut-être die une coonnerie (je débute en CSS) mais je viens de résoudre un problème un peu similaire en ajoutant un position:relative; qui permet de devenir une référence aux éléménts qu'il contient.

Code :

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

#corps { position:relative }

Donc, si ça t'aide, tant mieux, sinon, oublies vite ce que je viens de dire

marche pas

on est deux à être debutants en CSS

...

**pop_up** · 25/01/2008, 22h06

tu peux essayer de mettre un width:auto.
EDIT : en fait en y reflechissant, tu devrais aussi poster ton code car ça depend entre quoi est ton div corps

**Mo_Poly** · 26/01/2008, 18h32

non le auto ca ne marche pas

voici mon code :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
echo"<div id=\"en_tete\">
			</div>
 
			<div id=\"menu\">
 
 
			<div class=\"element_menu\">
 
						   <ul>
							   <li><a href=\"http://132.207.28.219/magnu/Admin/personnes/formpers.php\">Ajouter une personne</a></li>
							   <li><a href=\"http://132.207.28.219/magnu/Admin/personnes/personnes.php\">GÃ©rer la liste du personnel du laboratoire</a></li>
							   <li><a href=\"http://132.207.28.219/magnu/Admin/projets/formproj.html\">Ajouter un projet</a></li>
				   			   <li><a href=\"http://132.207.28.219/magnu/Admin/projets/projets.php\">La liste des projets</a></li>
							   <li><a href=\"http://132.207.28.219/magnu/Admin/laboratoires/formlabo.html\">Ajouter un laboratoire</a></li>
				   			   <li><a href=\"http://132.207.28.219/magnu/Admin/laboratoires/laboratoires.php\">La liste des laboratoires</a></li>
							   <li><a href=\"impr.php\" target=\"new\">Version imprimable</a></li>
						   </ul>
					   </div> 
			</div>
			<div id=\"corps\">
						<div id=\"menuder\">
							   <ul class=\"niveau1\"> 
								  <li class=\"sousmenu\">
								  <img src=\"http://www.amaq.bordeaux-bs.edu/fxObjects/img16/edit.gif\"></a>
 
									 <ul class=\"niveau2\">
 
									<li> <input type='checkbox' id='nm' $lien_nom  >Nom</li>
									<li> <input type='checkbox' id='pfr' $lien_pw >Page Web</li>
									<li> <input type='checkbox' id='desc' $lien_desc >Descrption</li>
									<li> <input type='checkbox' id='logs' $lien_logs >Les logiciels</li>
 
									 </ul>
								  </li>
							   </ul>
							</div> 
						<input class=\"coch\" type=\"button\" value=\"Tout dÃ©cocher\" onClick=\"checkUncheckAll('div_chck',false);\">
						<input class=\"coch\" type=\"button\" value=\"Tout cocher\" onClick=\"checkUncheckAll('div_chck',true);\">
						<br /><br />
                <center>
                    <form method=\"POST\" action=\"del&editlab.php\">
                        <table border=\"1\" id='div_chck' class=\"sortable\">
						<p>    
                            <input class=\"bout\" type=\"submit\" name=\"action\" value=\"Editer\" />
                            <input class=\"bout\" type=\"submit\" name=\"action\" value=\"Supprimer\" />
                        </p>
                            <tr>
							";
                            if($_SESSION["nom_js"]==1) echo  "<th   onMouseOver=\"this.style.cursor='pointer'; this.style.backgroundColor='white';\" onMouseOut=\"this.style.cursor='default'; this.style.backgroundColor='#DBE0E3';  \" id='nom_0' width=\"200\" align=\"center\">Nom</th>";
 
                            if($_SESSION["pw_js"]==1) echo    "<th onMouseOver=\"this.style.cursor='pointer'; this.style.backgroundColor='white';\" onMouseOut=\"this.style.cursor='default';  this.style.backgroundColor='#DBE0E3';\" id='pw_0' width=\"200\" align=\"center\">Page Web</th>";
 
                            if($_SESSION["desc_js"]==1) echo   "<th onMouseOver=\"this.style.cursor='pointer'; this.style.backgroundColor='white'; \" onMouseOut=\"this.style.cursor='default';  this.style.backgroundColor='#DBE0E3';\" id='desc_0' width=\"200\" align=\"center\">Description</th>";
 
							 if($_SESSION["logs_js"]==1) echo   "<th onMouseOver=\"this.style.cursor='pointer'; this.style.backgroundColor='white'; \" onMouseOut=\"this.style.cursor='default';  this.style.backgroundColor='#DBE0E3';\" id='desc_0' width=\"200\" align=\"center\">Les logiciels</th>";
 
 
							echo "	
								<th align=\"center\" class=\"col\">
								</th>
                            </tr> ";
 
							foreach ($dom->getElementsByTagName('struct') as $struct) 
							{
								$id = getVarByName($struct , 'id');
								$nom = getVarByName($struct , 'nom');
								$pw = getVarByName($struct , 'pageWeb');
								$desc = getVarByName($struct , 'description');
 
								$logs = logiciels($struct);
								$str='';
								for($i=0;$i<$logs->length;$i++)
								{
									$str=$str."\n".$logs->item($i)->nodeValue ;
								}
 
								if($_SESSION["nom_js"]==1)
								echo"
										<td align=\"center\">$nom</td>";
								if($_SESSION["pw_js"]==1)
								echo"
										<td align=\"center\">$pw</td>";
 
								if($_SESSION["desc_js"]==1)
								echo"
										<td align=\"center\">$desc</td>";
 
								if($_SESSION["logs_js"]==1)
								echo"
										<td align=\"center\">$str</td>";
 
 
 
								echo"		
										<TD align=\"center\">
										<input type=\"checkbox\" id='checkbox'".($i+1)."' name=laboratoires[] value=$id>
										</TD>
									</TR>";
							}
 
 
							echo "
                        </table>
 
                        <p>     
                            <input class=\"bout\" type=\"submit\" name=\"action\" value=\"Editer\" />
                            <input class=\"bout\" type=\"submit\" name=\"action\" value=\"Supprimer\" />
                        </p>
						</form>
						</center>
 
						</center>
						<br /><br />
						<input class=\"coch\" type=\"button\" value=\"Tout dÃ©cocher\" onClick=\"checkUncheckAll('div_chck',false);\">
						<input class=\"coch\" type=\"button\" value=\"Tout cocher\" onClick=\"checkUncheckAll('div_chck',true);\">
						<br /><br />
 
 
						</div>
 
				<div id=\"pied_de_page\">
				</div>

et mon code CSS :

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
47
48
49
body
{
   width: 760px;
   margin-top: 20px;
   margin-bottom: 20px;   
   background-image: url("http://img296.imageshack.us/img296/7537/magnuhy4.jpg");
   behavior: url(csshover.htc);
}
 
 
#en_tete
{
   width: 760px;
   height: 100px;
   background-image: url("http://img165.imageshack.us/img165/472/magnulab6ai7.gif");
   background-repeat: no-repeat;
   margin-bottom: 10px;
}
 
#menu
{
   float: left; 
   width: 150px; 
   height: 400px;
}
 
.element_menu
{
   background-color: #C0C0C0;
   background-image: url("http://img147.imageshack.us/img147/5107/menuyz2.jpg");	
   border: 2px solid black; 
   font-weight: bold;
 
}
 
#corps
{
   width: 1080px;	
   margin-left: 151px; 
   margin-right: 0px; 
   margin-bottom: 20px; 
   padding: 5px;
 
   color: #B3B3B3;
   background-color: #DBE0E3; 
   background-repeat: repeat-x; 
 
   border: 2px solid black; 
}

en fait je viens d'essayer le auto, en essayant ça, la largeur des colonnes de mon tableau a diminué, alors ce que j'ai fai c'est j'ai modifié le contenu de mon XML ( les données qui sont la dans le tableau proviennent d'un fichier XML) mais la j'obtient le tableau qui depasse le id="corps"

merci de m'aider !

...

**pop_up** · 26/01/2008, 19h02

je vais parraitre chiant mais est ce que tu pouurai mettre directement le code source que tu obtiens dans ton navigateur ?

parce que le php on peut pas copier coller

**Mo_Poly** · 26/01/2008, 19h32

je n'ai pas saisi ? tu veux dire mettre les codes complets ?

merci

...

**Mo_Poly** · 26/01/2008, 22h41

Bon voici ma page web

http://132.207.28.219/magnu/Admin/la...boratoires.php

merci de m'aider!

...

**pop_up** · 26/01/2008, 22h43

le code html et pas php.
c'est pour pouvoir copier et tester direct.

car la, toute la partie avec les if, c'est pas copiable. J'ai rien pour executer du php ici désolé

**Mo_Poly** · 26/01/2008, 22h47

Envoyé par pop_up

le code html et pas php.
c'est pour pouvoir copier et tester direct.

car la, toute la partie avec les if, c'est pas copiable. J'ai rien pour executer du php ici désolé

Man no way, c'est un code php (vu que le contenu du tableau est lu à partir d'un XML)

donc c'est vraiment no way

...

**Auteur** · 27/01/2008, 00h05

bonjour,

ben si tu ne mets pas d'espace dans ton texte forcément ça dépasse

tu peux ajouter un overflow à ton div corps :

Code css :

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
 
#corps
{
   width: 1080px;	
   margin-left: 151px; 
   margin-right: 0px; 
   margin-bottom: 20px; 
   padding: 5px;
 
   color: #B3B3B3;
   background-color: #DBE0E3; 
   background-repeat: repeat-x; 
 
   border: 2px solid black; 
 
   overflow: auto;
}

une barre de défilement apparaîtra si ton tableau est plus grand que le div.

Une question me vient néanmoins à l'esprit : la balise <center> est valide XHTML 1.0 ? A vérifier...

**Mo_Poly** · 27/01/2008, 01h06

merci ça marche!

je verifirai pour le center

...

problème avec le width

CSS

Discussions similaires

Partager

Partager