Mise en page avec des DIV

**redoran** · 02/05/2012, 09h55

Salam , j'ai une page.php composé e de plusieurs DIV :
page tab.php :

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
 
<!DOCTYPE html>
<HTML>
<head>
	<!--Pour forcer le navigateur à afficher en mode IE9, sans quoi il peut passer en mode quirks.-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
	<meta charset="utf-8" />
	<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <!-- application dynamique  -->
	<link rel="shortcut icon" href="image/favs3g.ico" />
	<link rel="stylesheet" media="screen" type="text/css" href="../css/tab.css">
	<title>S 3 G</title>
</head>
<body class='conteneur'>
	<div class='s3g'>
		<p>S.3.G</p>
	</div>
	<div>
		<nav class="nav">
			<ul id="navig">
				<li><a href="#">Enregistrement</a></li>
				<li><a href="#">analyse</a></li>
				<li><a href="tab.php">Données</a></li>
				<li><a href="#">Mot de passe</a></li>
				<li><a href="../mod/decon.inc.php">Déconnexion</a></li>
			</ul>
		</nav>
	</div>
	<div class="contenu">
	<!--  place pour inceré les pages selon le menu -->
			<?php include('../interfaces/aff.inc.php'); ?>
 
        </div>
<footer class="pied">
	<p> Copyright © s3g - Conception kacinet <p>
</footer>
 
</body>
 
</html>

code css:
Tab.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
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
 
.conteneur
{
	width:100%;
	height:100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background:#E6ECFF; 
	font-family: "times new roman",Arial, Helvetica,Verdana,serif;
	/*border:2px solid #ccc;*/
	min-width: 800px; 
	min-height:600px;
 
}
	/* s3g   */
.s3g
{
	float: left;
	margin-top: -5px;
	margin-left:80px;
	color:#fff;
	font-size:25px;
	text-align: center ;
 
}
 
/*  gestion du menu */
	/* geré le conteneur du menu*/
.nav{
	margin-top: 20px;
	width:100%;
	height:30px;
	background:#FF6400 ;
 
 
	}
	/* centré le menu et enlevé ls points*/
#navig {
  margin: 0 ;
  padding: 0 ;
  list-style: none ;
  text-align: center ;
 
 
}
	/* aligner le menu */
#navig li {
    display: inline ;
	margin-right: -4px ;
	color: #FFF ;
 
 
} 
		/* mise en forme des onglets*/
#navig li a {
  padding: 10px 20px ;
  background: #0066FF ;
  color: #fff ;
  text-decoration: none ; /* enlevé le souligné*/
  font-size:16px;
  -moz-border-radius:     10px 10px 0px 0px;
  -webkit-border-radius:  10px 10px 0px 0px;
  -o-border-radius:       10px 10px 0px 0px;
  -ms-border-radius:      10px 10px 0px 0px;
  //border-radius:        10px 10px 0px 0px;
 
}
	/*  passage de la souris*/
#navig li a:hover, #navig li a:focus, #navig li a:active {
    background-color: #FF6600;
	border-top:1px #FFCC00 solid;
	border-left:1px #FFCC00 solid;
	border-bottom:1px #CC0000 solid;
	border-right:1px #CC0000 solid;
}
 
 
.contenu{
	width: auto;
	height:600px;
	margin-left: auto;
	margin-right: auto; 
	padding: 0px; 
	min-width: 800px;
	position:absolute;
}
 
.pied{
	padding:5px;
	background: #92c3e8;
	width:100%;
	margin: auto; 
	min-width: 800px;
}

mon problème ? :
quand je clique sur le bouton de l’explorer (FF) Niveau inférieur ou je minimise la fenetre manuellement , j'ai les les DIV qui dépasse le format du body !!!!!
alors comment comment faire pour que ma page reste homogène sans dépassement ?

Invité · 02/05/2012, 10h12

Bonjour,
tu peux préciser ce que tu entends par :

quand je clique sur le bouton de l’explorer (FF) Niveau inférieur ou je minimise la fenetre manuellement , j'ai les les DIV qui dépasse le format du body

ou nous montrer une copie d'écran ?

**redoran** · 02/05/2012, 11h51

Re ; la capture d’écran montre le dépassement des div quand je minimise la fenetre de mozilla firefox

Invité · 02/05/2012, 12h48

Peux-tu donner le code source HTML généré (celui qui s'affiche à l'écran, pas celui avec le php)

J'ai vu des min-width:800px; (sur .conteneur, .contenu)
Mais tu as aussi une <table>, qui elle ne peut pas se réduire autant.
Ca vient peut-être de là.

**redoran** · 02/05/2012, 12h58

Re ;

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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
 
<!DOCTYPE html>
<HTML>
<head>
	<!--Pour forcer le navigateur à afficher en mode IE9, sans quoi il peut passer en mode quirks.-->
	<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
	<meta charset="utf-8" />
	<META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <!-- application dynamique  -->
	<link rel="shortcut icon" href="image/favs3g.ico" />
	<link rel="stylesheet" media="screen" type="text/css" href="../css/tab.css">
	<title>S 3 G</title>
</head>
<body class='conteneur'>
 
	<div class='s3g'>
		<p>S.3.G</p>
	</div>
	<div>
		<nav class="nav">
			<ul id="navig">
				<li><a href="#">Enregistrement</a></li>
				<li><a href="#">analyse</a></li>
				<li><a href="tab.php">Données</a></li>
				<li><a href="#">Mot de passe</a></li>
				<li><a href="../mod/decon.inc.php">Déconnexion</a></li>
			</ul>
		</nav>
	</div>
	<div class="contenu">
	<!--  place pour inceré les pages selon le menu -->
			 	
 
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" href="../css/aff.css">
<title>Enregistrement</title>
 
</head>
<body>
	<div class="conteneur">
			<table class="tab" border="1">
				<thead> 
					  <tr>  <!--  -->
						<th colspan="3">Année: <select name="an"><option value="an">date</option></select></th> 
 
						<th colspan="16">Tranches d'âges an(s)/sexe</th> 
						<th colspan="2"><a href="enreg.php" class="bouton">Ajouter</a></th>
						<th colspan="2"><a href="enreg.php" class="bouton">Exporter</a></th>
					  </tr> 
					  <tr>
						<th rowspan="2">Date de déclaration</th>
						<th rowspan="2">Etablissement</th>
						<th rowspan="2">Commune</th>
 
						<th colspan="2">00-01</th><th colspan="2">02-04</th><th colspan="2">05-09</th><th colspan="2">10-19</th>
						<th colspan="2">20-29</th><th colspan="2">30-39</th><th colspan="2">40-49</th><th colspan="2">50-59</th>
						<th colspan="2">60 et plus</th><th rowspan="2"><img src="../image/modif.png">Modifier</th><th rowspan="2"><img src="../image/supr.png">Supprimer</th>
					  </tr>
					  <tr>
						<th>M</th><th>F</th><th>M</th><th>F</th><th>M</th><th>F</th><th>M</th><th>F</th><th>M</th><th>F</th>
						<th>M</th><th>F</th><th>M</th><th>F</th><th>M</th><th>F</th><th>M</th><th>F</th>
					  </tr>
				</thead>
				<tbody>
 
							<tr>
								<td>2011-02-13</td>
								<td>aaaaaaa</td>
								<td>bbbbbbbb</td>
								<td>8</td>
								<td>5</td>
								<td>12</td>
								<td>13</td>
								<td>15</td>
								<td>8</td>
								<td>17</td>
								<td>11</td>
								<td>17</td>
								<td>22</td>
								<td>12</td>
								<td>25</td>
								<td>12</td>
								<td>18</td>
								<td>4</td>
								<td>6</td>
								<td>10</td>
								<td>15</td>
 
								<td><form method="post" action="modif.php">
								   <input type="hidden" name="cdec" value="6" />
 
									<input type="hidden" name="cdet" value="0000" />
									<input type="hidden" name="cdc" value="03000" />
									<input type="hidden" name="com" value="bbbbbbb" />
 
									<input type="hidden" name="datedec" value="13/02/2011" />
 
									<input type="hidden" name="m" value="8" />
									<input type="hidden" name="f" value="5" />
									<input type="hidden" name="m1" value="12" />
									<input type="hidden" name="f1" value="13" />
									<input type="hidden" name="m2" value="15" />
									<input type="hidden" name="f2" value="8" />
									<input type="hidden" name="m3" value="17" />
									<input type="hidden" name="f3" value="11" />
									<input type="hidden" name="m4" value="17" />
									<input type="hidden" name="f4" value="22" />
									<input type="hidden" name="m5" value="12" />
									<input type="hidden" name="f5" value="25" />
									<input type="hidden" name="m6" value="12" />
									<input type="hidden" name="f6" value="18" />
									<input type="hidden" name="m7" value="4" />
									<input type="hidden" name="f7" value="6" />
									<input type="hidden" name="m8" value="10" />
							<input type="hidden" name="f8" value="15" />								
 
								   <input type="image" src="../image/modif.png" alt="Modifier" name="mod_img">
								   </form> 
								</td> 
								<td><form method="post" action="suppr.php">
								   <input type="hidden" name="cdec" value="6" />
									<input type="hidden" name="action" value="supprimer" />	
 
								   <input type="image" src="../image/delete.png" alt="supprimer" name="del_img">
								   </form> 
								</td> 
							</tr>				
 
 
 
				</tbody>
			</table>
 
	</div>
</body>
</html>	</div>
 
 
</body>
 
</html>

Invité · 02/05/2012, 13h27

Le code complet de ../css/tab.css ?

+ dis-nous QUEL navigateur/version tu utilises ?

**redoran** · 02/05/2012, 14h46

Le code complet de ../css/tab.css ?

cidessus http://www.developpez.net/forums/d12...v/#post6654282
MozillaFireFox 12.0 sur la machine production.

Invité · 02/05/2012, 15h06

Ce code CSS ne suffit pas pour obtenir le même aspect que sur ta copie d'écran.

Cela dit, tu as un autre problème :

Code :

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

1
2
	<!--  place pour inceré les pages selon le menu -->
			<?php include('../interfaces/aff.inc.php'); ?>

Les fichiers en include NE doivent PAS comporter de balises <html><head>, <body>,... PUISQUE ces balises sont DEJA dans le fichier principal.

+ ne pas confondre :
- incérer : "Donner un caractère de cire à"
- et insérer : "Introduire une chose dans une autre de façon qu’elle forme un tout avec elle."

Invité · 02/05/2012, 15h16

Vu !! dans le fichier en include !!

Code :

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

<link rel="stylesheet" media="screen" type="text/css" href="../css/aff.css">

Il faut que ce fichier soit déclaré dans le <head> du fichier principal

**redoran** · 02/05/2012, 15h19

Re ;

faute d’orthographe désolé.

Les fichiers en include NE doivent PAS comporter de balises <html><head>, <body>,... PUISQUE ces balises sont DEJA dans le fichier principal.

justement j'ai corrigé.
je crois c'est le code css de la page insérée qui manqué:

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
 
.conteneur {
border: thin solid #6495ed;
position:relative;	
 
}
 
.dat {
float:left;
 
}
 
.tab {
border: thin solid #6495ed;
border-collapse: collapse;  /* cellules cote acote */
width: 100%;
margin:0;
}
th {
font-family: monospace;
color:  #FFFFFF;
border: thin solid #6495ed;
width: 130px;
padding: 5px;
background-color:  #3F8FD2 ;  
 
}
 /* format cellule tableau */
td {
font-family: monospace;
border: thin solid #6495ed;
text-align: center;
width: 130px;
padding: 5px;
}
 /* format bouton */
 
a.bouton{
 
padding:5px;
background-color: #92c3e8;
text-decoration:none;
color:#fff;
-moz-border-radius:    5px 10px 5px 10px;
-webkit-border-radius: 5px 10px 5px 10px;
-o-border-radius:      5px 10px 5px 10px;
-ms-border-radius:     5px 10px 5px 10px;
border-radius:         5px 10px 5px 10px;
 
}
a.bouton:hover 
	{
	background-color: #FF6600;
	border-top:1px #FFCC00 solid;
	border-left:1px #FFCC00 solid;
	border-bottom:1px #CC0000 solid;
	border-right:1px #CC0000 solid;
	}
/*  alterner les couleurs d'un tableau*/
.tab tr:nth-child(2n+1)
{
    background-color: #e8f0fe;
	font-weight: bold;
}
 .tab tr:nth-child(2n)
{
    font-weight: bold;
	 background-color:#ABCAFC;
}

Invité · 02/05/2012, 15h54

Compte tenu que tu es sur une et une seule page, il vaudrait mieux réunir les 2 CSS en un seul fichier.

D'autre part,
1/ la class="conteneur" est sur <body class="conteneur"> ET sur un <div class="conteneur">
Ce n'est pas très judicieux.
2/ pour des éléments UNIQUES, il est préférable de mettre id="..." au lieu de class="..."

Bref : il faut remettre de l'ordre dans tes fichiers/codes !

**redoran** · 02/05/2012, 16h01

Merci jreaux63 ; ma page tab.php doit contenir plusieurs page in include dans son body selon le choix de l'utilisateur dans le menu.
dans ce cas je dois mettre tous les css des pages include dans le css de la table tab.php.

**redoran** · 03/05/2012, 10h17

Salam ; j'ai suivit tes conseils mes apparemment le problème persiste

Mise en page avec des DIV

CSS

Discussions similaires

Partager

Partager