Mise en page sous IE - Probleme 18p - 22p

**Adaeria** · 20/10/2009, 01h08

Bonjour, je suis tout nouveau dans la conception de site web HTML/CSS

Depuis quelque temps j'ai certain problème :
- tout d abord l'adaptation entre le 22 pouce et le 18 pouce ce fait très bien depuis mon ordinateur (deux écran). Mais par contre sur d'autre ordinateur cela décale tout , qu'il y est deux écran sur un même ordinateur ou qu'un.

- Et puis le plus gros de mes problème c'est que sous Mozilla la mise en page est nickel mais sur Internet Explorer c'est autre chose tout est décalé, si j'ai tout compris IE ne lit pas les " float " , mais je ne sais pas comment faire sans.

Je vous envoi mon code en espérant que vous pourrez m'aider.

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
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
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Accueil</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />
 
		</head>
 
	   <body>
 
 
 
	<div id="entete"> 
	<img id='header'src="image/headertt.jpg" alt="J D R Project" border="none" />
	<div>
 
<div id="hmenu">
 <img id='menuH'src="image/menuH.bmp" alt="J D R Project" border="none"  />  <a href="index.html"><img  id="accu" src="image/accu.gif" alt="J D R Project" border="none"/></a> 	<a href="news.html"><img  id="inew" src="image/news.gif" alt="J D R Project" border="none" /></a><a href="calendrier.html"><img  id="ical" src="image/calendrier.gif" alt="J D R Project" border="none"  /></a><a href="galerie.html"><img  id="igal" src="image/galerie.gif" alt="J D R Project" border="none"  /></a>
 
 </div>
 
 
  	  <div id="enum">
 
<table>
 
   <tr> 
   <div id="unem">
<img id="imenu"  src="image/bmenu.gif" alt="J D R Project" border="none"  /> 
</div>
   <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
   </tr>
   </table>
 
 
   </div><br><br><br>
	  <div id="corps">
 
<table>
 
   <tr>
 
 
 <br>
 
<div id="msg">
<center>Toulouse Athletic Club Tennis de Table</center>
</div>
 
 <div id="tac">
<img id="logotac"src="image/tt.jpg" alt=" J D R Project " /><p>Écrivain français, qui s’illustra comme poète, auteur de contes fantastiques <br>et critiques d’art et qui fut l’auteur notamment d’un célèbre roman de cape et d’épée, le Capitaine Fracasse. Né à Tarbes le 30 août 1811,<br> Théophile Gautier était issu d’une famille de petite bourgeoisie avec laquelle il vint rapidement s’établir à Paris. Il se destinait initialement à une carrière de peintre, mais, le 27 juin 1829, <br>il fit une rencontre décisive, celle de Victor Hugo, qui lui donna aussitôt le goût de la littérature.
 
C’est le 4 mai 1831 que le Cabinet de lecture<br> publia la Cafetière, son premier conte fantastique.
<br>
Dès lors, son talent dans cette veine très en vogue ne devait cesser<br> de s’affirmer avec des textes comme Arria Marcella (1852), <br>le Roman de la momie (1858) ou Spirite (1866). Parallèlement à ses poèmes, Gautier publia de nombreux textes de prose, comme les Jeunes-France, romans goguenards (1883) — recueil de nouvelles souvent parodiques<br> — ou le roman Mademoiselle de Maupin (1835), qu’il fit précéder d’une préface provocante et scandaleuse, où il affirmait ses principes esthétiques.</p>
<br><br>
</div>
 
 <div id="coor">
<center>Entrainement</center>
</div>
  <div id="donne">
<span id="lala"><center><br> Horraire:</center><center> </span>  Entrainements libres ouverts  à tous, le Mardi et le Jeudi de 18h30 à 21h30.
<br> Jeunes et débutants le Mercredi de 14h30 à 16h30 : entrainement dirigé.<br><br>
<span id="lala"><center> Adresse: </center></span><center> 	Complexe sportif GIRONIS: -  35, rue de GIRONIS
 -  31100 TOULOUSE </center>
 
</div>
 
 
<div id="archive">
<center>News</center>
 
</div>
<div id="actu"><br>
&nbsp &nbsp &nbsp &nbsp <span id="lala"> 21/09/09:</span>&nbsp <a id="liall" href="news.html"> Test du Site  </a><br>
&nbsp &nbsp &nbsp &nbsp <span id="lala"> 20/09/09:</span>&nbsp <a id="liall" href="news.html"> Défaite de la D4 face au PTT  </a><br>
&nbsp &nbsp &nbsp &nbsp <span id="lala"> 19/09/09:</span> &nbsp <a id="liall" href="news.html"> Défaite de la R3 à FR Crampagna </a><br><br>
&nbsp &nbsp &nbsp &nbsp  (<a id="arch" href="news.html">Voir Achive  </a>)<br><br>
</div>
 
<br>
 
 
 
 
 
<div id="lien" >
<center>Lien</center>
</div>
<div id="utili" ><br>
&nbsp &nbsp &nbsp &nbsp <a id="hyper" href="http://www.fftt.com" ><span id="lala">Site de la FFTT</span></a>&nbsp : &nbsp <a id="liall" href="http://www.fftt.com/sportif/sportif.htm" >Classement Joueur</a>&nbsp / &nbsp <a id="liall" href="http://www.fftt.com/sportif/pclassement/php3/FFTTlj.php3?session=reqid%3D211%26precision%3D22310008" >Joueur du T.A.C</a><br>
&nbsp &nbsp &nbsp &nbsp <a id="hyper" href="http://cd31-tt.com/" ><span id="lala">Site du CD 31</span></a>&nbsp : &nbsp
<a id="liall"   href="http://www.fftt.com/sportif/chpt_equipe/chp_div.php?organisme_pere=1022&cx_poule=5934&D1=3588&virtuel=0" >Résultat de la R3</a> &nbsp / &nbsp <a id="liall"   href="http://www.fftt.com/sportif/chpt_equipe/chp_div.php?organisme_pere=31&cx_poule=618190&D1=13611&virtuel=0" >Résultat de la D4</a><br>
 &nbsp &nbsp &nbsp &nbsp <a id="hyper" href="http://www.lmptt.org/" ><span id="lala">Site de la ligue Midi Pyrénées</span></a>&nbsp : &nbsp <a id="liall" href="http://www.lmptt.org/" >LMPTT</a><br><br> </div>
 
 
</div>
 <div>
<img id="rencontre"style="border:0;"src="image/rencontre.gif"  width="32" height="20">Rencontre   <a id="ia"href="indexD4.html"> R3</a>&nbsp | <a id="ire"href="indexD4.html">D4</a>: <br><br>
&nbsp  Reçoie: Us Plaisantine 1<br>
&nbsp  Equipe: 
</div>
 
<div id="photo">
<center>Galerie</center>
</div>
<div id="galerie" >
<a href="galerie.html" ><img id="mini"src="galerie/d4tac1mini.jpg" alt=" J D R Project " /> </a>
<a href="galerie.html" ><img id="2mini"src="galerie/r2tac1mini.jpg" alt=" J D R Project " /></a>
<br>
</div>
</td>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
 
 </tr>
 </td>
 
     <br><br>
  </div>
</table>
 
 
 
 
   </body>
 
		  </html>

CSS:

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
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
143
144
145
146
147
 
 
body
{  background-color: white; margin:auto; font-size:13px; color:rgb(83,85,87);}
 
 
 
  /*Partie header*/
 
 
 
 
#header
{ width:100%; background-color: white;	margin-left: 0px;	 padding:0px; margin:0px;  border-collapse:collapse; white-space:nowrap;  }
 
#hmenu
 { border-collapse: collapse;   border:none; margin:0px; margin-left:0px; padding:0px; white-space:nowrap; }
 
 
 
 
 
 
 
   /*Fin Partie header_ Debut Partie Menu du Haut*/
 
 
 
#accu
 { margin:auto; position: absolute;  z-index:5;  width:9%; white-space:nowrap;  }
 
 #inew
 {  margin:auto; position: absolute;  z-index:5;  width:9%;  margin-left:190px; white-space:nowrap;  }
 
 #imenu
 {  margin:auto; position: absolute;  z-index:5; margin-left:30px; white-space:nowrap;   }
 
 #ical
  { margin:auto; position: absolute;  z-index:5;  width:9%;  margin-left:380px; white-space:nowrap; 
  }
 
#igal
{ margin:auto; position: absolute;   z-index:5;   width:9%;   margin-left:570px;  white-space:nowrap;   }
 
#menuH
{ position: absolute; z-index:1;  width:100%; padding:0px; margin:0px; border-collapse:collapse;  white-space:nowrap;  }
 
 
 
 /*Fin Partie Menu du Haut  _ Debut Partie Menu*/
 
 
 
 
 #enum
{ float:right; margin-right:15px; border: 1px solid rgb(184,186,188);  width:15%; }
 
#unem
{  margin-right:15px; border: 1px solid rgb(184,186,188);  width:100%; 	font-weight:bold; background-color:rgb(121,122,159); color:rgb(223,224,225); font-family: Palatino Linotype,Candara,Consolas,Constantia,Georgia; font-size:20px; }
 
 
 
/*Fin Partie Menu   _ Debut Partie Corp*/
 
 
 
#corps
{ margin-right:18px; margin-left:15px;   border: 1px solid rgb(184,186,188);  width:82.2%; background-color:rgb(249,249,249); }
 
 /*Partie Corp_ Le T.A.C*/
 
#msg
{   margin-left:10px; width:46.55%; border-bottom: none;  border-right: 1px solid rgb(160,160,160); border-left: 1px solid rgb(160,160,160); border-top: 1px solid rgb(160,160,160); background-image:url(image/barretitre.bmp); font-family: Candara,Consolas,Constantia,Georgia; color:rgb(83,85,87);  position:absolute; }
 
#tac
{ float:left; margin-left:10px; margin-top:16px; width:56.6%; border-right: 1px solid rgb(160,160,160); border-left: 1px solid rgb(160,160,160); border-top:none;  border-bottom: 1px solid rgb(160,160,160) ; background-color:white; font-family: Georgia; color:rgb(83,85,87); font-size:13px; }
 
#logotac{ float:left; }
 
  /*Partie Corp_ L'Entrainement*/
 
#coor
  { float:left; margin-left:15px;  width:41%; border-bottom: none;  border-right: 1px solid rgb(160,160,160); border-left: 1px solid rgb(160,160,160); border-top: 1px solid rgb(160,160,160); background-image:url(image/barretitre.bmp); font-family: Candara,Consolas,Constantia,Georgia;   font-family: Candara,Consolas,Constantia,Georgia;  color:rgb(83,85,87);  }
 
#donne
  { float:left; margin-left:15px; width:41%;border-right: 1px solid rgb(160,160,160); border-left: 1px solid rgb(160,160,160); border-top:none;  border-bottom: 1px solid rgb(160,160,160) ; background-color:rgb(235,235,235); font-family: Trebuchet MS; color:rgb(83,85,87); font-size: 13px; font-weight:bold; padding-bottom:25px; padding-top:0px; }
 
  /*Partie Corp_ News*/
 
#arch 
{ color: rgb(103,125,186); font-size:11px;}
 
#archive 
{ margin-top:15px; float:left; margin-left:15px; width:41%;  border-bottom: none;  border-right: 1px solid rgb(160,160,160); border-left: 1px solid rgb(160,160,160); border-top: 1px solid rgb(160,160,160); background-image:url(image/barretitre.bmp);  font-family: Candara,Consolas,Constantia,Georgia; color:rgb(83,85,87);    }
 
#actu
  { float:left; margin-left:15px; width:41%; border-right: 1px solid rgb(160,160,160); border-left: 1px solid rgb(160,160,160); border-top:none;  border-bottom: 1px solid rgb(160,160,160) ; background-color:white;  font-family: Georgia;   color:rgb(83,85,87);    font-size:13px; }
 
  /*Partie Corp_ Lien*/
 
 
#lien
{   margin-left:10px; width:56.6%; border-bottom: none;  border-right: 1px solid rgb(160,160,160); border-left: 1px solid rgb(160,160,160); border-top: 1px solid rgb(160,160,160); background-image:url(image/barretitre.bmp);  font-family: Candara,Consolas,Constantia,Georgia; color:rgb(83,85,87);    float:left; margin-top:15px; }
 
#utili
{ float:left; margin-left:10px; margin-top:0px; width:56.6%; border-right: 1px solid rgb(160,160,160); border-left: 1px solid rgb(160,160,160); border-top:none;  border-bottom: 1px solid rgb(160,160,160) ; background-color:white; font-family: Georgia; color:rgb(83,85,87); font-size:13px; }
 
   /*Partie Corp_ Galerie*/
 
#photo
{   margin-left:10px; width:56.6%;  border-bottom: none;  border-right: 1px solid rgb(160,160,160); border-left: 1px solid rgb(160,160,160); border-top: 1px solid rgb(160,160,160); background-image:url(image/barretitre.bmp);  font-family: Candara,Consolas,Constantia,Georgia; color:rgb(83,85,87);    float:left; margin-top:15px;}
 
#galerie
{ float:left; margin-left:10px; margin-top:0px; width:56.6%; border-right: 1px solid rgb(160,160,160); border-left: 1px solid rgb(160,160,160); border-top:none;  border-bottom: 1px solid rgb(160,160,160) ; background-color:white; font-family: Georgia; color:rgb(83,85,87); font-size:13px; }
 
 
#mini
{ margin-left:280px; }
 
#2mini
{ margin-left:0px; }
 
 /* Corp_ Equipe*/
 
 #rencontre
{ margin-top:5px; }
 
 
 
 
   /*Fin Partie Corp_ Equipe*/
 
a
{ text-decoration: none; color:rgb(83,85,87); font-size:13px;;}/*Lien Corp */
 
#hyper
 { color:rgb(83,85,87); font-size:13px;} /*Lien Corp Gris*/
 
 #ia
 { color: rgb(83,85,87); font-size:12px;}
 
#ire
 { color: rgb(103,125,186); font-size:12px;}
 
#liall { color: rgb(103,125,186); font-size:13px;}  /*Lien Corp Bleu*/
 
#lala { font-weight:bold; }

Puis la mise en page que j'aimerai obtenir :

http://www.casimages.com/img.php?i=0...1051368884.jpg

Pouvez vous m'aider svp ?

Bye.Adaeria

**sebhm** · 20/10/2009, 08h55

Bonjour,

tu as un Doctype (premiere ligne) qui dit que tu veux faire du XHTML strict : c'est à dire que tu dois respecter scrupuleusement la syntaxe XHTML, ce qui n'est pas le cas.

Je commencerais à ta place par passer en transitionnel : regarde la faq

puis enleve au moins tes balises <table> dans ton code qui ne sont pas à leur place et ne sont pas bien utilisées.

et puis il va falloir y aller petit à petit...

si j'ai tout compris IE ne lit pas les " float "

non, tu n'as pas tout compris.
Tous les navigateurs (je pense) implémentent cette propriété

**Adaeria** · 20/10/2009, 14h46

Bonjour , merci pour ta réponse :

Pour la Doctype est ce mieux comme cela ?

Code :

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Pour les <table> , j'ai un probleme c'est que si je les supprime j'ai plus le cadre gris qui encadre la mise en page , comment faire pour rendre le même effet sans le <table> ??

Et aussi comment organiser cette mise en page pour quel soit lisible sous IE ???
Visiblement il refuse de m'afficher les <div> a part quand il y a un " position:absolute;' ??

Edit 14.22:
J'ai essaye sous IE ( je n'avais vue qu'avec Mozilla ) il y a deux minute sans les <table> or mi qu'il n'y a plus la cadre gris dessous, mes souci de décalage sur IE se son arrange .

J'ai encore le cadre gris de ma <div id="corp"> mais il n'est pa a la bonne taille , comment je peut le changer de taille ? (hauteur) Svp ?

**sebhm** · 20/10/2009, 15h38

oui c'est mieux le doctype.

Pour comprendre comment fonctionne tes div, mets un style css :

Code :

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

<style type="text/css">div { border : 1px solid red;}</style>

et tu verras deja la place qu'ils prennent reellement (sans la marge).

Donne nous ton code modifié (et simplifié au possible)
et explique nous bien ce que tu veux pour chaque div

**12monkeys** · 20/10/2009, 22h18

Bonsoir

Il faut commencer progressivement... Et commencer par lire les cours : http://j-willette.developpez.com/tut...bases-du-html/ et http://css.developpez.com/cours/

Par exemple les éléments dans un tableau doivent toujours se trouver dans une cellule (balise <td></td>) et pas entre <table> et <tr> ou encore dans une ligne (balise <tr>)

Code :

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

1
2
3
4
5
6
7
<table>
  <tr>
    <td>
Contenu
    </td>
  </tr>
</table>

De plus utiliser des position absolute de partout ce n'est pas une bonne idée, utilises au maximum le positionnement dans le flux naturel...

**Adaeria** · 21/10/2009, 18h16

Envoyé par 12monkeys

Bonsoir

Par exemple les éléments dans un tableau doivent toujours se trouver dans une cellule (balise <td></td>) et pas entre <table> et <tr> ou encore dans une ligne (balise <tr>)

Code :

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

1
2
3
4
5
6
7
<table>
  <tr>
    <td>
Contenu
    </td>
  </tr>
</table>

Bonjour, désolé de la lenteur de ma réponse. Merci pour ton conseille avec cela je récupère mon cadre =P et IE ne me fait plus la tête.

Sebhm: Voila le code simplifier pour juste les div ( pas trop j'espère ).

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Accueil</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />
 
		</head>
 
	   <body>
 
 
 
	<div id="entete"> 
<!-- Header -->
	<div>
 
<div id="hmenu">
 
<!-- Menu du haut -->
 
 </div>
 
 
 
 <div id="enum">
 
  <!-- Menu droite  -->
 
   </div>
 
   <br><br><br>
 
 
 
	  <div id="corps">
 
	 <!-- Corp  -->    
 
<table> 
 <tr>
 <td>
 <br>
 
<div id="msg">
 
 <!-- Corp Titre tac  -->
 
</div>
 
 <div id="tac">
 
 <!-- Corp contenue tac  -->
 
</div>
 
 
 <div id="coor">
 
 <!-- Corp titre Coordonne  -->
 
</div>
 
 
  <div id="donne">
 
 <!-- Corp contenue Coordonne  -->
 
</div>
 
 
<div id="archive">
 
 <!-- Corp titre News  -->
 
 
</div>
 
 
<div id="actu"><br>
 
 <!-- Corp contenue News -->
 
</div>
 
<br>
 
 
<div id="lien" >
 
 <!-- Corp Titre Lien  -->
 
</div>
 
 
<div id="utili" ><br>
 
 <!-- Corp contenue Lien  -->
 
</div>
 
 
 <div id="rencontre">
 
  <!-- Corp contenue Rencontre  -->
 
</div>
 
 
<div id="photo">
 
 <!-- Corp Titre Galerie  -->
 
</div>
 
 
<div id="galerie" > <center>
 
 <!-- Corp contenue Galerie -->
 
</div>
 
 
 
    </td>
  </tr>
</table>
 
 
  </div>
 
 
 
 
 
   </body>
 
		  </html>

CSS :

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
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
body
{   margin:auto;  color:rgb(83,85,87);}
 
 
 
  /*Partie header*/
 
 
 
 
#hmenu
 { border-collapse: collapse;   margin:0px; margin-left:0px; padding:0px; white-space:nowrap; }
 
 
 
 
   /*Fin Partie Menu du Haut  _ Debut Partie Menu*/
 
 
 
 
 #enum
{ float:right; margin-right:15px;  width:15%; }
 
 
 
 
/*Fin Partie Menu   _ Debut Partie Corp*/
 
 
 
#corps
{ margin-right:18px; margin-left:15px;    width:82.2%;   }
 
 /*Partie Corp_ Le T.A.C*/
 
#msg
{   margin-left:10px; width:46.49%; border-bottom: none;    position:absolute;  }
 
#tac
{ float:left; margin-left:10px; margin-top:16px; width:56.6%;  border-top:none;  }
 
 
  /*Partie Corp_ L'Entrainement*/
 
#coor
  { float:left; margin-left:15px;  width:41%; border-bottom: none; }
 
#donne
  { float:left; margin-left:15px; width:41%; border-top:none;    }
 
  /*Partie Corp_ News*/
 
 
 
#archive 
{ margin-top:15px; float:left; margin-left:15px; width:41%;  border-bottom: none;   }
 
#actu
  { float:left; margin-left:15px; width:41%; border-top:none;  }
 
  /*Partie Corp_ Lien*/
 
 
#lien
{   margin-left:10px; width:56.6%; border-bottom: none;    float:left;  margin-top:15px; }
 
#utili
{ float:left; margin-left:10px;  width:56.6%; border-top:none; }
 
   /*Partie Corp_ Galerie*/
 
#photo
{  margin-left:10px;  width:56.6%;  border-bottom: none;  float:left;  margin-top:15px;}
 
#galerie
{ float:left;  margin-left:10px;   width:56.6%;  border-top:none;  }
 
 
 
 
 /* Corp_ Equipe*/
 
 #rencontre
{ margin-top:5px; }
 
 
 
 
   /*Fin Partie Corp_ Equipe*/
 
  /*Fin Partie Corp*/

Avec le petit Schéma ( Trés mal fait =P mais compréhensible ) :

http://www.casimages.com/img.php?i=0...1940843144.jpg

Voila tout marche , mais je voudrai savoir si mon code est bien , et comment l'améliorai svp =)

**sebhm** · 21/10/2009, 18h55

Bonjour,

c'est mieux mais tu devrais plutot positionner tes div en CSS plutot qu'utiliser un tableau pour la mise en page, ce qui est mal

(c'est pas interdit, et tu ne risques aucun proces, mais c'est déprécié depuis un moment maintenant).

Tu n'as pas besoin de faire ceci

Code :

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

1
2
<div id="un_div">...</div>
<br /><br />

pour gérer l'espace sous le div, utilises la marge

Code :

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

1
2
3
4
5
6
<div id="un_div">...</div>
 
CSS :
div#un_div {
  margin-bottom : 25px;
}

**Adaeria** · 21/10/2009, 19h05

Erf, ce n'est pas fini ^^.

Maintenant j'ai un autre probléme : 19 pouce - 22 pouce et +

c'est l'adaptation écran : avec une résolution de 1600x1900 sur mon 19 pouce tout va bien , c'est adapter , mais maintenant si je diminue la résolution en dessous de 1600x900 , sur tout les autre résolution plus petite les tableau s'écrase ( comme si il n'y avait pas assez de place ).

Malheureusement j'ai regarder un peut sur le net et peut de personne sont en 1600x900.

Je croyais que si je m'était la taille de mes <div> avec des " width: ..% " ?

Ou est le probléme svp ?

**12monkeys** · 21/10/2009, 19h35

Ben c'est normal : tu spécifie les tailles en pourcentages, donc ton site va s'adapter à l'affichage de chacun...

Si tu donnes une taille de 50% au body par exemple, il prendra la moitié de l'écran chez tout le monde, que la personne ait une petite ou une grande résolution... Celui en 800*600 verra le body en 400 pixels ; et celui en 1600*... verra le body en 800 pixels...

Soit tu veux que ton site s'adapte et il faut rester avec des valeurs de longueur en pourcentage... Soit tu veux une taille de ton site fixe, se posera alors la question de quelle taille choisir : 800px, 1024px, 1280px ? Pour le moment il semblerait que ce soit plutôt encore la seconde.

Dans le cas d'un affichage qui s'adapte, ce que tu peux aussi faire c'est limiter l'adaptation avec les propriété min-width et max-width (idem pour height) : cela permet de dire que si la largeur atteint la taille spécifiée, l'élément arrête de se redimensionner... Mais ces propriétés ne sont pas comprises par tous les navigateurs (IE...)

**Adaeria** · 21/10/2009, 21h01

Envoyé par 12monkeys

Ben c'est normal : tu spécifie les tailles en pourcentages, donc ton site va s'adapter à l'affichage de chacun...

Si tu donnes une taille de 50% au body par exemple, il prendra la moitié de l'écran chez tout le monde, que la personne ait une petite ou une grande résolution... Celui en 800*600 verra le body en 400 pixels ; et celui en 1600*... verra le body en 800 pixels...

Soit tu veux que ton site s'adapte et il faut rester avec des valeurs de longueur en pourcentage... Soit tu veux une taille de ton site fixe, se posera alors la question de quelle taille choisir : 800px, 1024px, 1280px ? Pour le moment il semblerait que ce soit plutôt encore la seconde.

Dans le cas d'un affichage qui s'adapte, ce que tu peux aussi faire c'est limiter l'adaptation avec les propriété min-width et max-width (idem pour height) : cela permet de dire que si la largeur atteint la taille spécifiée, l'élément arrête de se redimensionner... Mais ces propriétés ne sont pas comprises par tous les navigateurs (IE...)

Je croi que je me suis mal exprimé

, ce que je veut c'est adapter mon site a toute les résolution. C'est donc effectivement pour sa que j'ai mis des "width:..%" l'adaptation marche bien entre les résolution ( y comprise ) 1600x900 jusqu'a 1680x1050 et plus je pense ( si il y a ).

Mais en dessous de la résolution 1600x900 tout bug , les tableau de mon "corp" s'écrase entre eux. Et je ne voie pas d'où cela viens.

Voila mon code CSS :

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
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
 
 
body
{   margin:auto;  color:rgb(83,85,87);}
 
 
 
  /*Partie header*/
 
 
 
 
#hmenu
 { border-collapse: collapse;   margin:0px; margin-left:0px; padding:0px; white-space:nowrap; }
 
 
 
 
   /*Fin Partie Menu du Haut  _ Debut Partie Menu*/
 
 
 
 
 #enum
{ float:right; margin-right:15px;  width:15%; }
 
 
 
 
/*Fin Partie Menu   _ Debut Partie Corp*/
 
 
 
#corps
{ margin-right:18px; margin-left:15px;    width:82.2%;   }
 
 /*Partie Corp_ Le T.A.C*/
 
#msg
{   margin-left:10px; width:46.49%; border-bottom: none;    position:absolute;  }
 
#tac
{ float:left; margin-left:10px; margin-top:16px; width:56.6%;  border-top:none;  }
 
 
  /*Partie Corp_ L'Entrainement*/
 
#coor
  { float:left; margin-left:15px;  width:41%; border-bottom: none; }
 
#donne
  { float:left; margin-left:15px; width:41%; border-top:none;    }
 
  /*Partie Corp_ News*/
 
 
 
#archive 
{ margin-top:15px; float:left; margin-left:15px; width:41%;  border-bottom: none;   }
 
#actu
  { float:left; margin-left:15px; width:41%; border-top:none;  }
 
  /*Partie Corp_ Lien*/
 
 
#lien
{   margin-left:10px; width:56.6%; border-bottom: none;    float:left;  margin-top:15px; }
 
#utili
{ float:left; margin-left:10px;  width:56.6%; border-top:none; }
 
   /*Partie Corp_ Galerie*/
 
#photo
{  margin-left:10px;  width:56.6%;  border-bottom: none;  float:left;  margin-top:15px;}
 
#galerie
{ float:left;  margin-left:10px;   width:56.6%;  border-top:none;  }
 
 
 
 
 /* Corp_ Equipe*/
 
 #rencontre
{ margin-top:5px; }
 
 
 
 
   /*Fin Partie Corp_ Equipe*/
 
  /*Fin Partie Corp*/

**Adaeria** · 21/10/2009, 21h09

Envoyé par sebhm

Bonjour,

c'est mieux mais tu devrais plutot positionner tes div en CSS plutot qu'utiliser un tableau pour la mise en page, ce qui est mal

(c'est pas interdit, et tu ne risques aucun proces, mais c'est déprécié depuis un moment maintenant).

Tu n'as pas besoin de faire ceci

Code :

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

1
2
<div id="un_div">...</div>
<br /><br />

pour gérer l'espace sous le div, utilises la marge

Code :

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

1
2
3
4
5
6
<div id="un_div">...</div>
 
CSS :
div#un_div {
  margin-bottom : 25px;
}

Erf, désolé je n'avai pas vue ton message.
J'ai essayé comme tu ma dit :

Code :

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

1
2
#corps
{ margin-right:18px; margin-left:15px;   border: 1px solid rgb(184,186,188);  width:82.2%; background-color:rgb(249,249,249); margin-bottom:250px;  }

Mais ceci ne marche pas :
Cela me donne sa :

http://www.casimages.com/img.php?i=0...1505680551.jpg

**12monkeys** · 21/10/2009, 21h13

J'ai du mal pour comprendre ce que tu entends par "s'écrase" ?

As tu une page en ligne ou une capture d'écran, qu'on puisse voir ? Ainsi que le code HTML...

Sinon c'est surement que tes tableaux ont trop de données, ou ils sont trop larges. C'est tellement évident que j'ose pas le dire, mais si

: si ton tableau s'affiche bien en 1600 pixels, il sera forcément écrasé avec 2 fois moins de place, en 800 pixels...

**Adaeria** · 21/10/2009, 21h40

Envoyé par 12monkeys

J'ai du mal pour comprendre ce que tu entends par "s'écrase" ?

As tu une page en ligne ou une capture d'écran, qu'on puisse voir ? Ainsi que le code HTML...

Sinon c'est surement que tes tableaux ont trop de données, ou ils sont trop larges. C'est tellement évident que j'ose pas le dire, mais si

: si ton tableau s'affiche bien en 1600 pixels, il sera forcément écrasé avec 2 fois moins de place, en 800 pixels...

Effectivement je me suis mal exprimé , je pense :

voila un screen : http://www.casimages.com/img.php?i=0...3326924156.jpg

Envoyé par 12monkeys

Sinon c'est surement que tes tableaux ont trop de données.

Effectivement : j'ai enlèvé mes" margin-left :..px" pour décalé tout va mieux les <div> s'adapte ; Et je les ai remplacés par "margin-left:..%".

Tout marche comme je le souhaite, mais voila 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
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
body
{  background-color: white; margin:auto; font-size:13px; color:rgb(83,85,87);}
 
 
 
  /*Partie header*/
 
 
 
 
#header
{ width:100%; background-color: white;	margin-left: 0px;	 padding:0px; margin:0px;  border-collapse:collapse; white-space:nowrap;  }
 
#hmenu
 { border-collapse: collapse;   border:none; margin:0px; margin-left:0px; padding:0px; white-space:nowrap; }
 
 
 
 
 
 
 
   /*Fin Partie header_ Debut Partie Menu du Haut*/
 
 
 
#accu
 { margin:auto; position: absolute;  z-index:5;  width:9%; white-space:nowrap;  }
 
 #inew
 {  margin:auto; position: absolute;  z-index:5;  width:9%;  margin-left:190px; white-space:nowrap;  }
 
 #imenu
 {  margin:auto; position: absolute;  z-index:5; margin-left:30px; white-space:nowrap;   }
 
 #ical
  { margin:auto; position: absolute;  z-index:5;  width:9%;  margin-left:380px; white-space:nowrap; 
  }
 
#igal
{ margin:auto; position: absolute;   z-index:5;   width:9%;   margin-left:570px;  white-space:nowrap;   }
 
#menuH
{ position: absolute; z-index:1;  width:100%; padding:0px; margin:0px; border-collapse:collapse;  white-space:nowrap;  }
 
 
 
 /*Fin Partie Menu du Haut  _ Debut Partie Menu*/
 
 
 
 
 #enum
{ float:right; margin-right:15px; border: 1px solid rgb(184,186,188);  width:15%; }
 
#unem
{  margin-right:15px; border: 1px solid rgb(184,186,188);  width:100%; 	font-weight:bold; background-color:rgb(121,122,159); color:rgb(223,224,225); font-family: Palatino Linotype,Candara,Consolas,Constantia,Georgia; font-size:20px; }
 
 
 
/*Fin Partie Menu   _ Debut Partie Corp*/
 
 
 
#corps
{    border: 1px solid rgb(184,186,188); margin-left:0.3%; width:80%; background-color:rgb(249,249,249); margin-bottom:250px;  }
 
 /*Partie Corp_ Le T.A.C*/
 
#msg
{ margin-left:0.4%;  width:45.1%; border-bottom: none;  border-right: 1px solid rgb(160,160,160); border-left: 1px solid rgb(160,160,160); border-top: 1px solid rgb(160,160,160); background-image:url(image/barretitre.bmp); font-family: Candara,Consolas,Constantia,Georgia; color:rgb(83,85,87); position:absolute;  }
 
#tac
{ margin-left:0.5%; float:left;  margin-top:16px; width:56.6%; border-right: 1px solid rgb(160,160,160); border-left: 1px solid rgb(160,160,160); border-top:none;  border-bottom: 1px solid rgb(160,160,160) ; background-color:white; font-family: Georgia; color:rgb(83,85,87); font-size:13px;   padding-bottom:23.5px; }
 
#logotac{ float:left; }
 
  /*Partie Corp_ L'Entrainement*/
 
#coor
  {margin-left:0.5%; float:left;  width:41%; border-bottom: none;  border-right: 1px solid rgb(160,160,160); border-left: 1px solid rgb(160,160,160); border-top: 1px solid rgb(160,160,160); background-image:url(image/barretitre.bmp); font-family: Candara,Consolas,Constantia,Georgia;   font-family: Candara,Consolas,Constantia,Georgia;  color:rgb(83,85,87);   }
 
#donne
  { margin-left:0.5% ; float:left; width:41%;border-right: 1px solid rgb(160,160,160); border-left: 1px solid rgb(160,160,160); border-top:none;  border-bottom: 1px solid rgb(160,160,160) ; background-color:rgb(235,235,235); font-family: Trebuchet MS; color:rgb(83,85,87); font-size: 13px; font-weight:bold; padding-bottom:25px; padding-top:0px;  }
 
  /*Partie Corp_ News*/
 
#arch 
{ color: rgb(103,125,186); font-size:11px;}
 
#archive 
{ margin-left:0.5% ; margin-top:15px; float:left;  width:41%;  border-bottom: none;  border-right: 1px solid rgb(160,160,160); border-left: 1px solid rgb(160,160,160); border-top: 1px solid rgb(160,160,160); background-image:url(image/barretitre.bmp);  font-family: Candara,Consolas,Constantia,Georgia; color:rgb(83,85,87);    }
 
#actu
  {margin-left:0.5% ;  float:left;  width:41%; border-right: 1px solid rgb(160,160,160); border-left: 1px solid rgb(160,160,160); border-top:none;  border-bottom: 1px solid rgb(160,160,160) ; background-color:white;  font-family: Georgia;   color:rgb(83,85,87);    font-size:13px; }
 
  /*Partie Corp_ Lien*/
 
 
#lien
{  margin-left:0.5% ;  width:56.6%; border-bottom: none;  border-right: 1px solid rgb(160,160,160); border-left: 1px solid rgb(160,160,160); border-top: 1px solid rgb(160,160,160); background-image:url(image/barretitre.bmp);  font-family: Candara,Consolas,Constantia,Georgia; color:rgb(83,85,87);    float:left; margin-top:15px; }
 
#utili
{margin-left:0.5% ;  float:left;  margin-top:0px; width:56.6%; border-right: 1px solid rgb(160,160,160); border-left: 1px solid rgb(160,160,160); border-top:none;  border-bottom: 1px solid rgb(160,160,160) ; background-color:white; font-family: Georgia; color:rgb(83,85,87); font-size:13px; }
 
   /*Partie Corp_ Galerie*/
 
#photo
{ margin-left:0.5% ;    width:56.6%;  border-bottom: none;  border-right: 1px solid rgb(160,160,160); border-left: 1px solid rgb(160,160,160); border-top: 1px solid rgb(160,160,160); background-image:url(image/barretitre.bmp);  font-family: Candara,Consolas,Constantia,Georgia; color:rgb(83,85,87);   float:left;  margin-top:15px;}
 
#galerie
{margin-left:0.5% ;  float:left;  margin-top:0px; width:56.6%; border-right: 1px solid rgb(160,160,160); border-left: 1px solid rgb(160,160,160); border-top:none;  border-bottom: 1px solid rgb(160,160,160) ; background-color:white; font-family: Georgia; color:rgb(83,85,87); font-size:13px; }
 
 
 
 
 /* Corp_ Equipe*/
 
 #rencontre
{ margin-top:5px; }
 
 
 
 
   /*Fin Partie Corp_ Equipe*/
 
a
{ text-decoration: none; color:rgb(83,85,87); font-size:13px;;}/*Lien Corp */
 
#hyper
 { color:rgb(83,85,87); font-size:13px;} /*Lien Corp Gris*/
 
 #ia
 { color: rgb(83,85,87); font-size:12px;}
 
#ire
 { color: rgb(103,125,186); font-size:12px;}
 
#liall { color: rgb(103,125,186); font-size:13px;}  /*Lien Corp Bleu*/
 
#lala { font-weight:bold; }

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
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
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Accueil</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />
 
		</head>
 
	   <body>
 
 
 
	<div id="entete"> 
	<img id='header'src="image/headertt.jpg" alt="J D R Project" border="none" />
	<div>
 
<div id="hmenu">
 <img id='menuH'src="image/menuH.bmp" alt="J D R Project" border="none"  />  <a href="index.html"><img  id="accu" src="image/accu.gif" alt="J D R Project" border="none"/></a> 	<a href="news.html"><img  id="inew" src="image/news.gif" alt="J D R Project" border="none" /></a><a href="calendrier.html"><img  id="ical" src="image/calendrier.gif" alt="J D R Project" border="none"  /></a><a href="galerie.html"><img  id="igal" src="image/galerie.gif" alt="J D R Project" border="none"  /></a>
 
 </div>
 
 
  	  <div id="enum">
 
 
 
 
   <div id="unem">
<img id="imenu"  src="image/bmenu.gif" alt="J D R Project" border="none"  /> 
</div>
 
   <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
 
 
 
   </div><br><br><br>
	  <div id="corps"> 
 
 
<table> 
 <tr>
 <td>
 <br>
 
<div id="msg">
<center>Toulouse Athletic Club Tennis de Table</center>
</div>
 
 <div id="tac">
<img id="logotac"src="image/tt.jpg" alt=" J D R Project " /><p>Écrivain français, qui s’illustra comme poète, auteur de contes fantastiques <br>et critiques d’art et qui fut l’auteur notamment d’un célèbre roman de cape et d’épée, le Capitaine Fracasse. Né à Tarbes le 30 août 1811,<br> Théophile Gautier était issu d’une famille de petite bourgeoisie avec laquelle il vint rapidement s’établir à Paris. Il se destinait initialement à une carrière de peintre, mais, le 27 juin 1829, <br>il fit une rencontre décisive, celle de Victor Hugo, qui lui donna aussitôt le goût de la littérature.
 
C’est le 4 mai 1831 que le Cabinet de lecture<br> publia la Cafetière, son premier conte fantastique.
<br>
Dès lors, son talent dans cette veine très en vogue ne devait cesser<br> de s’affirmer avec des textes comme Arria Marcella (1852), <br>le Roman de la momie (1858) ou Spirite (1866). Parallèlement à ses poèmes, Gautier publia de nombreux textes de prose, comme les Jeunes-France, romans goguenards (1883) — recueil de nouvelles souvent parodiques<br> — ou le roman Mademoiselle de Maupin (1835), qu’il fit précéder d’une préface provocante et scandaleuse, où il affirmait ses principes esthétiques.</p>
<br><br>
</div>
 
 <div id="coor">
<center>Entrainement</center>
</div>
  <div id="donne">
<span id="lala"><center><br> Horraire:</center><center> </span>  Entrainements libres ouverts  à tous, le Mardi et le Jeudi de 18h30 à 21h30.
<br> Jeunes et débutants le Mercredi de 14h30 à 16h30 : entrainement dirigé.<br><br>
<span id="lala"><center> Adresse: </center></span><center> 	Complexe sportif GIRONIS: -  35, rue de GIRONIS
 -  31100 TOULOUSE </center></center>
 
</div>
 
 
<div id="archive">
<center>News</center>
 
 
</div>
<div id="actu"><br>
&nbsp &nbsp &nbsp &nbsp <span id="lala"> 21/09/09:</span>&nbsp <a id="liall" href="news.html"> Test du Site  </a><br>
&nbsp &nbsp &nbsp &nbsp <span id="lala"> 20/09/09:</span>&nbsp <a id="liall" href="news.html"> Défaite de la D4 face au PTT  </a><br>
&nbsp &nbsp &nbsp &nbsp <span id="lala"> 19/09/09:</span> &nbsp <a id="liall" href="news.html"> Défaite de la R3 à FR Crampagna </a><br><br>
&nbsp &nbsp &nbsp &nbsp  (<a id="arch" href="news.html">Voir Achive  </a>)<br><br>
</div>
 
<br>
 
 
 
 
 
<div id="lien" >
<center>Lien</center>
</div>
<div id="utili" ><br>
&nbsp &nbsp &nbsp &nbsp <a id="hyper" href="http://www.fftt.com" ><span id="lala">Site de la FFTT</span></a>&nbsp : &nbsp <a id="liall" href="http://www.fftt.com/sportif/sportif.htm" >Classement Joueur</a>&nbsp / &nbsp <a id="liall" href="http://www.fftt.com/sportif/pclassement/php3/FFTTlj.php3?session=reqid%3D211%26precision%3D22310008" >Joueur du T.A.C</a><br>
&nbsp &nbsp &nbsp &nbsp <a id="hyper" href="http://cd31-tt.com/" ><span id="lala">Site du CD 31</span></a>&nbsp : &nbsp
<a id="liall"   href="http://www.fftt.com/sportif/chpt_equipe/chp_div.php?organisme_pere=1022&cx_poule=5934&D1=3588&virtuel=0" >Résultat de la R3</a> &nbsp / &nbsp <a id="liall"   href="http://www.fftt.com/sportif/chpt_equipe/chp_div.php?organisme_pere=31&cx_poule=618190&D1=13611&virtuel=0" >Résultat de la D4</a><br>
 &nbsp &nbsp &nbsp &nbsp <a id="hyper" href="http://www.lmptt.org/" ><span id="lala">Site de la ligue Midi Pyrénées</span></a>&nbsp : &nbsp <a id="liall" href="http://www.lmptt.org/" >LMPTT</a><br><br> </div>
 
 
</div>
 <div>
<img id="rencontre"style="border:0;"src="image/rencontre.gif"  width="32" height="20">Rencontre   <a id="ia"href="indexD4.html"> R3</a>&nbsp | <a id="ire"href="indexD4.html">D4</a>: <br><br>
&nbsp  Reçoie: Us Plaisantine 1<br>
&nbsp  Equipe: 
</div>
 
<div id="photo">
<center>Galerie</center>
</div>
<div id="galerie" > <center>
<a href="galerie.html" ><img id="mini"src="galerie/d4tac1mini.jpg" alt=" J D R Project " /> </a>
<a href="galerie.html" ><img id="2mini"src="galerie/r2tac1mini.jpg" alt=" J D R Project " /></a> </center>
<br>
</div>
 
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
    </td>
  </tr>
</table>
 
 
     <br><br>
  </div>
 
 
 
 
   </body>
 
		  </html>

Il me reste toujours le problème avec le tableau.

**12monkeys** · 21/10/2009, 23h09

J'ai fait un copié / collé de ton code et je l'ai testé, pour ma part ces cadres se redimensionnent bien et il n'y a pas de décalage...

Dans la capture que tu donnes, il semblerait que le cadre de droite "Entrainement" n'a pas assez de place et il se décale en dessous de son voisin...

Tu teste sur quel navigateur ? Tu as une page en ligne ?

Mais enfin il y a pas mal de choses à améliorer, rien que sur cet exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
 <div id="coor">
<center>Entrainement</center>
</div>
  <div id="donne">
<span id="lala"><center><br> Horraire:</center><center> </span>  Entrainements libres ouverts  à tous, le Mardi et le Jeudi de 18h30 à 21h30.
<br> Jeunes et débutants le Mercredi de 14h30 à 16h30 : entrainement dirigé.<br><br>
<span id="lala"><center> Adresse: </center></span><center> 	Complexe sportif GIRONIS: -  35, rue de GIRONIS
 -  31100 TOULOUSE </center></center>
 
</div>

Il faudrait regrouper les 2 divs en un seul parce que là ils peuvent se balader. Pourquoi tous ces <center> ? Un simple text-align:center en css et ça remplace ces 5/6 center...
Utiliser des balises sémantiques : les balises ont un sens, il faut les utiliser en tenant compte de ce sens et ne pas mettre des div (qui n'a pas de sens précis) partout. Par exemple le texte "Entrainement" est un titre (utiliser une balise <hx>)
Tu déclares 2 fois font-family dans ta id coor. De plus tu indiques des polices, me semble t'il, exotiques ? Sais tu que si elles ne sont pas présentes sur l'ordinateur du visiteur elles ne s'afficheront pas. Donc utiliser des polices plus génériques et indiquer une famille générique (serif, sans-serif...)

Ce qui donnerait plus :

Code :

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

1
2
3
4
5
6
7
8
<div id="coor">
  <h3>Entrainement</h3>
    <p>Horraire:</p>
    <p>Entrainements libres ouverts  à tous, le Mardi et le Jeudi de 18h30 à 21h30.</p>
    <p>Jeunes et débutants le Mercredi de 14h30 à 16h30 : entrainement dirigé.</p>
    <p>Adresse:</p>
    <p>Complexe sportif GIRONIS: -  35, rue de GIRONIS -  31100 TOULOUSE </p>
</div>

Pour remplacer le span="lala" et les center tu mets dans ton css :

Code css :

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

#coor p { font-weight : bold;text-align:center;}

**Adaeria** · 21/10/2009, 23h24

J'ai fait ce que tu a dit pour centrer le texte , c'est nickel merci

.
Par contre : voila pourquoi j'ai mis deux <div> car entre la <div> du titre et celle du texte : je ne veut pas le même fond : Comment faire sans mettre deux <div> ?

Je teste sous Mozilla et Internet Explorer version 8.
Non la page n'est pas en ligne , pourrait tu m'indiquer ou l'héberger gratuitement le temps que mon code soit propre ?

**12monkeys** · 21/10/2009, 23h53

Tu peut indiquer ton arrière plan principal sur le div, et sur le titre <h3> tu indiques celui que tu veux pour le titre (barretitre.bmp).

Mais attention le code que j'ai donné n'est qu'un exemple, tout n'est pas fait, notamment la gestion des marges du titre et des paragraphes par exemple...

J'ai également testé sous Firefox 3.5 et Internet Explorer 8, et je n'ai pas ces soucis... chez moi tout se redimensionne correctement...

Pour un hébergeur il y aurait free, mais ça prendra du temps, en plus si t'en as pas vraiment besoin... Ce que tu peut faire c'est une archive avec les fichiers et les images et la mettre ici...

**Adaeria** · 22/10/2009, 17h55

Coucou,

J'ai fait comme tu ma dit : le problème c'est que le <h3> me fait sauter un ligne et mon texte ne se retrouve plus tout en haut .

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
<div id="donne">
 <h3>Entrainement</h3>
    <p>Horraire:</p>
    <p>Entrainements libres ouverts  à tous, le Mardi et le Jeudi de 18h30 à 21h30.</p>
    <p>Jeunes et débutants le Mercredi de 14h30 à 16h30 : entrainement dirigé.</p>
    <p>Adresse:</p>
    <p>Complexe sportif GIRONIS: -  35, rue de GIRONIS -  31100 TOULOUSE </p>
 
</div>

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
 
#donne
  { margin-left:0.7% ; float:left; 
width:41%;
border-right: 1px solid rgb(160,160,160); 
border-left: 1px solid rgb(160,160,160);
 border-top:1px solid rgb(160,160,160) ; 
 border-bottom: 1px solid rgb(160,160,160) ; 
background-color:rgb(235,235,235); 
font-family: Trebuchet MS; 
color:rgb(83,85,87); 
font-size: 13px;
 font-weight:bold;
 padding-bottom:25px;
 padding-top:0px;  }
 
  #titre {
 background-image:url(image/barretitre.bmp); 
font-family: Candara,Consolas,Constantia,Georgia;  
color:rgb(83,85,87); 
}

J'ai fait la même chose sauf que j'ai remplace le <h3> par des <center>.
Sa marche mais bon si j'ai tout compris ce n'est pas très bien =P.
Comment faire pour que le <h3> ne me saute pas d'espace =/ ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
<div id="donne">
 <center>Entrainement</center>
    <p>Horraire:</p>
    <p>Entrainements libres ouverts  à tous, le Mardi et le Jeudi de 18h30 à 21h30.</p>
    <p>Jeunes et débutants le Mercredi de 14h30 à 16h30 : entrainement dirigé.</p>
    <p>Adresse:</p>
    <p>Complexe sportif GIRONIS: -  35, rue de GIRONIS -  31100 TOULOUSE </p>
 
</div>

Code :

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

1
2
3
#titre { background-image:url(image/barretitre.bmp);   
 font-family: Candara,Consolas,Constantia,Georgia; 
 color:rgb(83,85,87); }

**12monkeys** · 23/10/2009, 00h36

Je t'avais prévenu

Envoyé par Adaeria

J'ai fait comme tu ma dit : le problème c'est que le <h3> me fait sauter un ligne et mon texte ne se retrouve plus tout en haut .

Envoyé par 12monkeys

Mais attention le code que j'ai donné n'est qu'un exemple, tout n'est pas fait, notamment la gestion des marges du titre et des paragraphes par exemple...

Il faut juste gérer les marges sur le titre :

Code css :

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

h3 { margin:0;padding:0; }

**Adaeria** · 23/10/2009, 13h59

Salut , un truc tout con , je n'avai pas fait gaf a ton avertissement =) , merci

Un autre problème se pause : J'ai teste sous version IE 7 , 8 et 6 .

Le problème c'est que dans le 8 et le 7 tout est nickel , proportion , etc...
Mais dans le 6 mon menu de gauche est trop décalé (margin-left :..%) et ce décalage empêche mon <corp> de monter a sa place.
Si je diminue le margin: c'est dans Mozilla et IE 7 et 8 que le menu est décalé.
Comment faire ? Le hack CSS ? Toute les version d ' IE le prendrons en compte: donc décalage pour IE 7 et 8. Une idée ?

**12monkeys** · 23/10/2009, 18h30

Je n'ai pas Internet Explore 6 sous la main pour tester...

Mais tu peux parfaitement utiliser les commentaires conditionnels :

<!--[if IE 6]> ne va appliquer le code que à IE 6

Sinon tu peut rajouter lt, lte et gt, gte :

lt signifie strictement inférieur à
lte signifie inférieur ou égal à
gt signifie strictement supérieur à
gte signifie supérieur ou égal à

Donc

Code :

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

1
2
3
<!--[if lt IE 7]>
...
<![endif]-->

s'appliquera pour toutes les versions antérieures à IE7

Mise en page sous IE - Probleme 18p - 22p

HTML

Discussions similaires

Partager

Partager