Affichage décalé sous Internet explorer

**sheira** · 07/10/2010, 15h09

Bonjour,

J'ai un pb de compatibilité de mon code sous IE.
Voici le lien du : Site en question.
Les pages : "Nos tarifs" et "Proposer une mission" dans le menu à gauche ne passent pas sous IE alors que ça fonctionne bien sous firefox et safari.
Toute aide est la bienvenue...je comprends pas tous ces décalages.

Merci d'avance

**c_s_s** · 07/10/2010, 15h43

Bonjour,

Quelle version de IE ?
Avec une résolution particulière ?

**Air P-E** · 07/10/2010, 16h45

Tu parles probablement de IE 6 ? Je viens de faire le test sous ce navigateur (je me demande pourquoi il est encore utilisé...)

Pour la page "nos tarifs" comment c'est fait ? Tu as deux div ? Une contenant la partie "simulation" et l'autre contenant la partie "plus de renseignements" ? Ou comment c'est fait ? Ne pourrais-tu mettre un petit peu de code ou au moins l'architecture...

Après si ton bug n'est que sous ie6, il y a un moment où il faut se dire qu'il faut arrêter de vouloir adapter aux versions antérieures à ie7, sinon on n'avancera jamais dans les nouvelles techno et applications !
IE 6 est surtout utilisé en entreprise, pour des raisons d'outils déjà mis en place qui fonctionnent, donc on ne veut rien modifier, etc...
Mais ton site en l'occurrence, je pense qu'il sera surtout visualiser par des particuliers... Plus beaucoup de monde est encore sous ie6 de nos jours...
Moi je serais toi je ne regarderais même pas le résultat sous IE6 (sauf pour rigoler un bon coup on se disant "aaah... Quelle belle daube !"

)

**sheira** · 07/10/2010, 17h45

Mdrrr Air P-E!

J'en ris aujoud'hui j'espère ne pas en pleurer plus tard...
Malheureusement ça ne passe pas non plus sous IE 8 avec une résolution 1440x900.

Pour ce qui est du code, y a plusieurs fichiers, est-ce que je pourrai vous les transmettre par mail?

**Air P-E** · 07/10/2010, 22h28

Effectivement sous ie8, c'est un tantinet ballot si ça ne passe pas !

Cependant j'ai testé chez moi avec ie8 en résolution 1440x900 et ça passe, je ne vois aucun problème d'affichage particulier !

Par contre les problèmes surviennent quand tu resizes la fenêtre du naviateur, mais que ce soit sous ie8 ou firefox, tes divs s'entrelaçent... (Juste à noter que sous ie8, l'image de l'entreprise à droite pour l'onglet "proposer une mission" ne s'affiche pas et le panel contenant le formulaire au milieu s'allonge)

Pour le problème des divs qui s'entrelaçent, c'est sûrement parce que tu n'as pas définit de min-heigth et min-width (plus important) sur la/les divs en question !

j'allais te proposer d'utiliser le "reset.css" mais je vois que tu l'as déjà mis !

Le formulaire qui s'allonge vers le bas j'avais déjà eu ce problème, je l'avais réglé (il me semble) avec un hr et dans le css :

Code :

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

1
2
3
4
5
hr
{
    clear: both;
    visibility: hidden;
}

Et pour l'image qui disparaît, j'aurais tendance à penser que lors du resize, l'image est trop grande pour rester dans l'espace disponible... Pareil un min-width fera l'affaire je pense, au pire l'image sera un peu coupé...

Par contre j'ai regardé un peu la source, et je trouve qu'il y a énooooooormément de div ! En tout cas beaucoup plus que je n'en mettrais !

Tu es sûr d'avoir besoin de toute ces div ? Surtout que tu les imbriques comme ça sans avoir forcément de contenu (à part une autre div).

Pour les sources, je ne pense pas que tu sois censé les donner en entière !

et puis je n'accepte pas les mails perso, sinon le forum ne sert plus à rien !

Je voulais pas que tu nous mettes toutes les sources mais juste là où ça pose problème : code html des divs en questions et le css qui va avec.

**sheira** · 11/10/2010, 09h01

Tout d'abord merci d'avoir pris sur votre temps pour me répondre.
Je n'ai pas vu de soucis d'affichage lorsque je réduis la page de mon navigateur sous ie8 et Firefox 3.6.10.

Voici le code de la partie "centrale de ma page" (les deux images) :

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
    <div id="col1n2" class="maxheight" style="float:left;width:74.5%;overflow-y:hidden";>
    <!-- [start Col2-->
    <div id="candArea" class="col_2 maxheight withbgphoto"><?php
      $this->user = Zend_Auth::getInstance()->getIdentity();
      if (@$this->user->role == 'candidat') {?>
        <div onclick="window.location = 'candidats/account/dashboard';" class="indent maxheight"><?php
      }else{?>
        <div onclick="pushDivContent2div('loginCand','recruArea','no','loginCandidat');" class="indent maxheight"><?php
      }?>
        <div class="block1 maxheight">
          <div class="maxheight bgphoto">
          <img class="maxheight" style="-ms-interpolation-mode: bicubic;" src="<?= DEFAULT_SKIN_PATH;?>images/candidat2.jpg" />
          </div>
          <div style="position:relative">
            <div class="inner withbgphoto" id="contentCand">
              <div class="title_block">
                <a href="<?= $this->baseUrl();?>/candidats/auth/login"><h2>Candidat</h2></a>
                <div class="clear"></div>
              </div>
              <div class="inner1">
                <p>Optimisez vos chances de trouver l'<strong><a href="<? $this->baseUrl();?>index/recherche?cr=poste">emploi</a></strong> dont vous avez besoin. Avec <?=SITE_DOMAIN;?>, vous rentrez en contact avec des centaines de recruteurs sur tout le territoire et dans tous les secteurs.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- [end] Col2-->
    <!-- [start] Col3-->
    <div id ="recruArea" class="col_3 maxheight withbgphoto"><?php
      $this->user = Zend_Auth::getInstance()->getIdentity();
      if (@$this->user->role == 'client' || @$this->user->role == 'admin' || @$this->user->role == 'agence') {
                          switch (@$this->user->role) {
                            case 'agence':
                              $redir = 'manager/clients/dashboard/ag_id'.$this->user->nodes_access;
                              break;
                            case 'client':
                              $redir = 'manager/clients/dashboard/cli_id/'.$this->user->nodes_access;
                              break;
                            case 'admin':
                              $redir = 'manager/index/dashboard';
                          }?>
        <div onclick="window.location = '<?= $redir;?>';" class="indent maxheight"><?php
      }else{?>
        <div class="indent maxheight" onclick="pushDivContent2div('loginRecru','candArea','no','login')" style="cursor: pointer"><?php
      }?>
        <div class="block1 maxheight">
          <div class="maxheight bgphoto">
            <img class="maxheight" style="-ms-interpolation-mode: bicubic;" src="<?= DEFAULT_SKIN_PATH;?>images/recruteur2.jpg" />
          </div>
            <div style="position:relative">
              <div class="inner" id="contentRecr">
                <div class="title_block">
                  <a href="<?= $this->baseUrl();?>/recruteurs"><h2>E.T.T.</h2></a>
                <div class="clear"></div>
              </div>
              <div class="inner1">
                <p>Maximisez vos chances de trouver le meilleur candidat pour vos clients. Avec <?=SITE_DOMAIN;?>, des milliers de candidats vous proposent leurs services et consultent chaque jour vos <strong><a href="<? $this->baseUrl();?>index/recherche?cr=poste">offres</a></strong>.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- [end] Col 3-->
  </div>
  <div class="clear"></div>  
</div>

J'utilise le javascript pour modifier le contenu suivant le clic en appelant la fonction pushDivContent2div.

Voici maintenant le script de ma page "Proposer une mission:

1ère partie (le formulaire):

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
<div style="padding: 1em;position: relative; line-height: 2em;">
  <h1 style="text-align: center">Appel d'offres</h1><?php
if ($this->message) {
  print $this->message;
}else{?>
  <div style="redac">Pour passer un appel d'offre, remplissez le formulaire suivant. Apr&egrave;s validation, vous recevrez un mail contenant un lien. Ce n'est que lorsque vous l'aurez cliquer que votre appel d'offre sera actif.</div>
  <form id="callForm" method="post" action="<?php echo $this->baseUrl(); ?>/entreprise/call/index" class="formBase">
  <h3>Mission</h3>
  <label for="intitule">Intitul&eacute; de mission</label>: <?php print $this->formText('intitule');?><br />
  <label for="periode">P&eacute;riode</label>: <?php print $this->formText('periode');?><br />
  <label for="regionId">R&eacute;gion</label>: 
  <select name="regionId" id="regionId">
    <option value="">-- S&eacute;lectionnez --</option><?php
    foreach($this->regions as $k => $v) {?>
      <option value="<?= $k;?>"><?= $v;?></option><?php
    }?>
  </select><br />
  <label for="secteurId">Secteur d'activit&eacute;</label>: 
  <select name="secteurId" id="secteurId">
    <option value="">-- S&eacute;lectionnez --</option><?php
    foreach($this->secteurs as $k => $v) {?>
      <option value="<?= $k;?>"><?= $v;?></option><?php
    }?>
  </select><br />
  <label for="desc">Descriptif</label>: <?php print $this->formTextarea('desc');?><br />
 
  <h3 style="padding-top: 100px">Contact</h3>
  <label for="societe">Soci&eacute;t&eacute;</label>: <?php print $this->formText('societe');?><br />
  <label for="nom">Votre nom</label>: <?php print $this->formText('nom');?><br />
  <label for="mail">Email</label>: <?php print $this->formText('mail');?><br>
  <label for="tel">T&eacute;l&eacute;phone</label>: <?php print $this->formText('tel','',array('style'=>'width:133px'));?>
  <?php print $this->formSubmit('submit','Ok',array('style'=>'left:273px;width:40px;'));?>
 
  </form><?php
}?>
</div>

et l'image:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id='callpix' class="maxheight" style="display:none;"><div style="height:100%;width:99.6%;background:#cfeffe;overflow:hidden">
  <img src='<?= DEFAULT_SKIN_PATH;?>/images/entreprise.jpg' style='height:100%' class="maxheight"  />
            <div style="position:relative;background:#cfeffe">
            <div class="inner withbgphoto" style="width:100%;">
              <div class="title_block">
                <h2>Entreprise</h2>
                <div class="clear"></div>
              </div>
              <div class="inner1">
                <p style="text-align: center">Lancez un appel d'offre en utilisant le formulaire ci-contre.<br /> Les agences d'int&eacute;rim pourront les consulter dans leur espace d'administration et vous faire leurs propositions.</p>
              </div>
            </div>
          </div>
</div></div>

Pour le 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
.page1  .row_1 .col_2 , .page1  .row_1 .col_3, .page1  .row_1 .block1, .page1  .row_1 .block1 .bgphoto{
height: 458px;
 
 
.col_1, .col_2, .col_3, .col_4, .col_5, .column1, .column2, .column3, #search_engine_inputs,  #gosearch {
  display: inline;
 
 
.withbgphoto .inner a {color: #EEE9E0;}
 
.withbgphoto .block1 {
background: transparent;
}
 
.withbgphoto .inner {
bottom:-1px;
left:0;
background: rgba(0,0,0,.5);
color: white;
position: absolute;
width: 100%;
}
 
.withbgphoto .left_bottom_corner {
}
}
}

J'espère que ça pourra vous aider à m'aider...parce que le css c'est pas vraiment ma tasse de thé.

Il y a un phénomène étrange de toute façon quand je clic d'abord sur la page "Nos tarifs" puis que je clic que proposer une mission, celle ci s'affiche correctement.

Merci d'avance

**Air P-E** · 15/10/2010, 22h37

Bon deuxième tentative... J'ai eu un bug juste magnifique !

Donc Salut Sheira !
Désolé de ne pas avoir répondu plus tôt ! J'ai beaucoup de taf en ce moment !

Tu as avancé depuis la dernière fois, t'as résolu quelque chose ?

En voyant ton code je me suis dit que j'étais content de ne pas faire du php !

Code :

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

1
2
$this->user = Zend_Auth::getInstance()->getIdentity();
      if (@$this->user->role == 'candidat') {?>

Sérieux, la syntaxe, elle est dégueu !

(Attention je dis pas que ce que tu as fait n'est pas bien, je dis que la syntaxe de php est franchement bof...) Après je ne connais que trèèèèèèès peu php, je suis plus orienté java, donc j'y suis pas habitué... Bref !

Dans ton code plusieurs choses m'interpèlent !

Code :

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

<div id="col1n2" class="maxheight" style="float:left;width:74.5%;overflow-y:hidden";>

essaie de bien séparer le HTML du CSS ! Tu vas gagner en lisibilité et en maintenance, c'est indéniable ! Si tu commences à mettre du CSS dans le HTML mais aussi dans le fichier CSS, tu sauras plus ce que tu as mit et où...

Fait plutôt ceci :

Code :

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

<div id="col1n2" class="maxheight" >

(dans ton HTML)

Code :

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

1
2
3
4
5
6
#col1n2 //ou .maxheight, ça dépend ce que tu veux...
{
    float: left;
    width: 74.5%;
    overflow-y: hidden;
}

Comme ça ton code HTML est bien plus lisible et si tu veux savoir comment il doit être agencé, affiché, coloré etc... tu vas jeter un coup d'oeil dans le CSS et tu vois tout d'un coup.

Ensuite pour une architecture comme la tienne, qui est assez conséquente, je te suggère de hiérarchiser ton CSS pour chaque élément, comme tu l'as fait un peu :

par exemple pour définir un texte rouge d'une balise p dans des divs imbriquées :

Code :

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

1
2
3
4
5
 
#div1 #div2 #div3 p
{
    color: red;
}

Crois moi ça t'évitera souvent des problèmes ! Et tu gagnes en lisibilité aussi, après c'est une question d'habitude !
Mais ceci n'est pas à appliquer sur des style que tu veux commun sur toute la page par exemple la couleur de ton lien, dans ce cas tu mets directement :

Code :

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

1
2
3
4
a
{
    color: blue;
}

Evites les espaces pour les noms des ids, class, nom de fonction javascript ou php comme tu le fais ici :

Code :

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

<div onclick="window.location = 'candidats/account/dashboard';" class="indent maxheight">

ton attribue class contient un espace, remplace les espaces par des undescore.
Je ne suis pas sûr que le CSS comprenne quelque chose dans le genre :

Code :

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

#div_sans_espaces #div avec espaces #div1

Je n'ai jamais essayé ça mais à mon avis ça ne fonctionne pas, il doit prendre l'espace comme si tu spécifiais l'id suivant ! A confirmer

Un dernier truc, je t'en ai déjà parlé. Es-tu sûr d'avoir besoin de toutes tes divs ?
Par exemple, ici :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div style="position:relative">
            <div class="inner withbgphoto" id="contentCand">
              <div class="title_block">
                <a href="<?= $this->baseUrl();?>/candidats/auth/login"><h2>Candidat</h2></a>
                <div class="clear"></div>
              </div>
              <div class="inner1">
                <p>Optimisez vos chances de trouver l'<strong><a href="<? $this->baseUrl();?>index/recherche?cr=poste">emploi</a></strong> dont vous avez besoin. Avec <?=SITE_DOMAIN;?>, vous rentrez en contact avec des centaines de recruteurs sur tout le territoire et dans tous les secteurs.</p>
              </div>
            </div>
          </div>

A quoi sert la première div ? Elle contient qu'une seule div ! Tu peux définir le position relative (dans le CSS bien sûr !

) sur sa seule div enfant et donc supprimer une div qui ne sert à rien ! Et je suis sûr que tu as fait ça un peu partout !

Finalement je me demande si tes problèmes d'affichages ne sont pas en partie lié à tout ce que je viens de te dire !

surtout les noms avec espaces et les divs inutiles.

Essai d'alléger ton code HTML en enlevant tout ce qui est superflue et sépare le HTML du CSS, on y verra plus clair après !

**sheira** · 26/10/2010, 17h17

Salut Air P-E,

Je reviendrai sur la page en question un peu plus tard j'ai dû me mettre sur autre chose mais là aussi ma page n'est pas identique sur tous les navigateurs et suivant la résolution de l'écran.

Je m'explique:

En résolution: 1280x700, j'ai un ascenseur horizontal...c'est pas bien du tout ça mais pire encore sous IE8 je n'en ai pas du coup je ne vois pas le contenu de droite.

Sous FF 3.6.11:

En résolution 1440x900, ça va j'ai juste les blocs "Communiquez" et "Contactez-nous" qui dépassent légèrement à droite sous ie8

Par contre sous ie7 et là c'est un big problème ça ne passe pas du tout:

Merci d'avance pour votre aide!

Je comprends pas pourquoi mes images sont troquées sous IE7??

Sheira.

**Air P-E** · 27/10/2010, 18h37

Encore cette blonde !! On la voit partout ! Heureusement qu'elle est jolie !

Salut Sheira !

Décidément t'es abonné aux problèmes d'affichage toi !

Pour ta scrollbar horizontal je suppose que tu veux l'enlever carrément !

Quand tu définies la taille de tes divs dans le CSS il faut que le spécifies en % et pas en px.

Code :

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

1
2
3
4
#div
{
     width: 100%;
}

Ceci va permettre par exemple à ta div de s'afficher sur toute la largeur de la page quoi que soit la résolution utilisé !

Si je fais un exemple rapide pour ton cas, d'après ce que je vois ta page est séparée principalement en deux parties : une partie contenant tous ce qui est relatif à "Nos tarifs à partir du...", à gauche et la partie "communiquez" et "contactez-nous", à droite donc deux divs principales.

Ceci donnerait :

(dans le HTML)

Code :

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

1
2
3
4
5
 
<body>
    <div id="div_de_gauche" />
    <div id="div_de_droite" />
</body>

(et dans le CSS)

Code :

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

1
2
3
4
5
6
7
8
9
#div_de_gauche
{
    width: 70%;
}
 
#div_de_droite
{
    width: 30%;
}

Qu'en penses-tu ?

D'après moi, les px sont à utiliser le moins souvent possible que ce soit pour la taille des divs ou pour le texte (em pour le texte), car suivant les résolutions, surtout les grandes résolutions dépassant 1920, l'espace utilisé est moindre, et le texte écrit tout piti...

Et à propos de ton image coupé, tout ce qui est coupé fait parti de la même image ? Le texte aussi à gauche fait partie de l'image ? Si non, ça me perturbe !

Mais je pense que pour ce soucis il faut jouer avec z-index.

**sheira** · 27/10/2010, 21h49

Je testerai tes suggestions demain

Mais voici le corps de la page qui pose problème:

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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<div* style="background: #fff;height:510px;">
<table><tr>
*** <td>
<div* style="background: #fff; padding: 1em;height:500px; width:593px">
 
 
*** <h1 style="margin: -139px -12px 10px; background: #226284;text-align:center;color:#fff;padding:7px 16px;font-size:16px">Nos tarifs &agrave; partir du 15/10/2010</h1>
 
<div>
*** <div* style=" float: left; height:150px;">
******* <p style="font-size* : 1em; margin: -8px 0px 0px 1px">Le site d'emploi d&eacute;di&eacute; &agrave; l'int&eacute;rim</p>
******* <p style="font-size* : 0.9em;">D&eacute;couvrez <strong><?=SITE_DOMAIN;?></strong> la solution<br>
******** simple et efficace capable de<br>
******* r&eacute;pondre &agrave; toutes vos probl&eacute;matiques<br>
******* de recrutement!<br>
******* Un tarif modulable<br>
******* Optez d&egrave;s &agrave; pr&eacute;sent pour le meilleur tarif!</p>
*** </div>
*** <div style="margin-left: 15px;">
******* <?php 
* 
******* $img_pi ='<img src="'. PUBLIC_PATH . 'images/les 2.png" width="281px" height="150px"* />';
******* echo $img_pi;
***** //* exit;
******* ?>
*** </div>
 
</div>
 
<div style=" float: left; background: url('<?= PUBLIC_PATH;?>/images/combo1.png') no-repeat; width: 130px;height: 300px;margin: -1px 20px;">
*** 
** <div align="center" style="margin-top: -3px; vertical-align: middle; line-height: 29px;"><b><font color="#FFFFFF" >Pack visibility</font></b></div>
*** 
*** <div align="center" style="margin-top: 5px"><b><font size="1.5" color="#29617E" ><?php echo utf8_decode('Référencement');?></font></b></div>
*** <div align="center" style="margin-top: -5px"><b><font size="1.5" color="#29617E" >+</font></b></div>
*** <div align="center"* style="margin-top: -5px; margin-bottom: 24px;"><b><font size="1.5" color="#29617E" ><?php echo utf8_decode('Accès CVthèque');?></font></b></div>
 
*** <div align="center"><font size="1" ><?php echo utf8_decode('Présentez votre agence, insérez votre logo et lien vers votre site accédez à');?><br><?php echo utf8_decode('la CVthèque');?></font></div>
*** 
*** <div align="center" style="margin-top: 15px" ><b><font size="1" color="#29617E" ><?php echo utf8_decode('Abonnement de 3 mois');?></font></b></div>
*** <div align="center"><b>179 &euro; H.T.<font size="1" color="#29617E" >/mois<sup>*</sup></font></b></div>
*** <div align="center"><b><font size="1" color="#29617E" ><?php echo utf8_decode('Abonnement de 6 mois');?></font></b></div>
*** <div align="center"><b>129 &euro; H.T.<font size="1" color="#29617E" >/mois<sup>*</sup></font></b></div>
*** <div align="center" ><b><font size="1" color="#29617E" ><?php echo utf8_decode('Abonnement de 12 mois');?></font></b></div>
*** <div align="center"><b>99 &euro; H.T.<font size="1" color="#29617E" >/mois<sup>*</sup></font></b></div></p>
** 
*** <!--<div style="background: url('<?= PUBLIC_PATH;?>/images/bouton.png') no-repeat; width: 100px;height: 15px; text-align: center;margin-left: auto; margin-right: auto; margin-top:1px;vertical-align:middle;">
******* <b><font size="1.5" color="#FFFFFF" ><a style='color:white;text-decoration:none' href="#" onclick="">Demande de devis</a></font></b>
*** </div>-->
*** 
 
</div>
 
<div style=" float: left; background: url('<?= PUBLIC_PATH;?>/images/combo1.png') no-repeat; width: 130px;height: 300px; margin: -1px 20px;">
*** <center><b><font color="#FFFFFF" >Pack visibility <br> + 5 annonces</font></b></center>
*** <div align="center" style="margin-top: 0.5px"><b><font size="1.5" color="#29617E" ><?php echo utf8_decode('Référencement');?></font></b></div>
*** <div align="center" style="margin-top: -5px"><b><font size="1.5" color="#29617E" >+</font></b></div>
*** <div align="center" style="margin-top: -5px"><b><font size="1.5" color="#29617E" ><?php echo utf8_decode('Accès CVthèque');?></font></b></div>
*** <div align="center" style="margin-top: -5px"><b><font size="1.5" color="#29617E">+</font></b></div>
*** <div align="center" style="margin-top: -5px"><b><font size="1.5" color="#29617E" >5 annonces</font></b></div>
 
*** 
*** <div align="center" style="margin-top: 0px"><font size="1" ><?php echo utf8_decode('Présentez votre agence, accédez à la CVthèque');?><br><?php echo utf8_decode('en illimité, recrutez immédiatement avec 5 annonces');?></font></div>
*** 
* 
*** <div align="center" ><b><font size="1" color="#29617E" ><?php echo utf8_decode('Abonnement de 3 mois');?></font></b></div>
*** <div align="center"><b>299 &euro; H.T.<font size="1" color="#29617E" >/mois<sup>*</sup></font></b></div>
*** <div align="center"><b><font size="1" color="#29617E" ><?php echo utf8_decode('Abonnement de 6 mois');?></font></b></div>
*** <div align="center"><b>259 &euro; H.T.<font size="1" color="#29617E" >/mois<sup>*</sup></font></b></div>
*** <div align="center"><b><font size="1" color="#29617E" ><?php echo utf8_decode('Abonnement de 12 mois');?></font></b></div>
*** <div align="center"><b>199 &euro; H.T.<font size="1" color="#29617E" >/mois<sup>*</sup></font></b></div>
*** 
*** <!--<div style="background: url('<?= PUBLIC_PATH;?>/images/bouton.png') no-repeat; width: 100px;height: 15px; text-align: center;margin-left: auto; margin-right: auto; margin-top:-2px;vertical-align:middle;">
******* <b><font size="1.5" color="#FFFFFF" ><a style='color:white;text-decoration:none' href="#" onclick="">Demande de devis</a></font></b>
*** </div>-->
 
</div>
 
<div style=" float: left; background: url('<?= PUBLIC_PATH;?>/images/combo1.png') no-repeat; width: 130px;height: 300px;margin: -1px 20px;">
*** <center><b><font color="#FFFFFF" >Pack visibility <br><?php echo utf8_decode(' + annonces illimitées');?></font></b></center>
* 
*** <div align="center" style="margin-top: 0.5px"><b><font size="1.5" color="#29617E" ><?php echo utf8_decode('Référencement');?></font></b></div>
*** <div align="center" style="margin-top: -5px"><b><font size="1.5" color="#29617E" >+</font></b></div>
*** <div align="center" style="margin-top: -5px"><b><font size="1.5" color="#29617E" ><?php echo utf8_decode('Accès CVthèque');?></font></b></div>
*** <div align="center"* style="margin-top: -5px"><b><font size="1.5" color="#29617E">+</font></b></div>
*** <div align="center"* style="margin-top: -5px"><b><font size="1.5" color="#29617E" ><?php echo utf8_decode('Annonces illimitées');?></font></b></div>
 
*** <div align="center"* style="margin-top: 0px"><font size="1" ><?php echo utf8_decode('Présentez votre agence, accédez à la CVthèque');?><br><?php echo utf8_decode('en illimité, diffusez vos annonces en illimité');?></font></div>
*** 
*
*** <div align="center" style="margin-top: 16px"><b><font size="1" color="#29617E" ><?php echo utf8_decode('Abonnement de 3 mois');?></font></b></div>
*** <div align="center"><b>399 &euro; H.T.<font size="1" color="#29617E" >/mois<sup>*</sup></font></b></div>
*** <div align="center"><b><font size="1" color="#29617E" ><?php echo utf8_decode('Abonnement de 6 mois');?></font></b></div>
*** <div align="center"><b>359 &euro; H.T.<font size="1" color="#29617E" >/mois<sup>*</sup></font></b></div>
*** <div align="center"><b><font size="1" color="#29617E" ><?php echo utf8_decode('Abonnement de 12 mois');?></font></b></div>
*** <div align="center"><b>99 &euro; H.T.<font size="1" color="#29617E" >/mois<sup>*</sup></font></b></div>
*** 
*** <!--<div style="background: url('<?= PUBLIC_PATH;?>/images/bouton.png') no-repeat; width: 100px;height: 15px;margin-left: auto; margin-right: auto; margin-top:-1px; text-align: center;vertical-align:middle;">
***** <b><font size="1.5" color="#FFFFFF" ><a style='color:white;text-decoration:none' href="#" onclick="">Demande de devis</a></font></b>
*** </div>-->
 
</div>
* 
 
<?php
 
** // exit;
*** ?>
</div>
</td>
<td>
<div* style="background: #fff;width:300px">
<div* style="background: #fff; padding: 1em; height:110px; width:300px">
*** <h1 style="margin: -12px -26px -12px -10px; background: #226284;text-align:center;color:#fff;padding:7px 16px;font-size:16px">Communiquez</h1>
 
*** <div align="center"* style="margin: 12px"><b><font color="#29617E" ><?php echo utf8_decode('Réservez dès à présent votre emplacement sur');?></font></b></div>
 
*** <div align="center"><b><font color="#29617E" ><?=SITE_DOMAIN;?></font></b></div>
 
*** <div align="center" style="margin: 2px 0px 0px"><b><font><?php echo utf8_decode('Appelez-nous au');?></font></b></div>
*** <div align="center"><b><font size=3>03 67 21 19 17</font></b></div>
 
*</div>
*<div* style="background: #fff; padding: 1em; height:380px; width:300px">
***** <h1 style="margin:* -32px -26px 10px -10px; background: #226284;text-align:center;color:#fff;padding:7px 16px;font-size:16px">Contactez-nous</h1>
 
*** <p style="margin-left:-10px; margin-top: -10px "><font size="-1"><?php echo utf8_decode('Pour toute demande adressez-vous à:');?></font></p>
*** <p style="margin-left:-10px "><img src="<?= PUBLIC_PATH;?>/images/layout/monsite.com/logo-com.png" /></p>
***** 
*** 
*** <p style="margin-left:-10px "><font size="-1"><?php echo utf8_decode('(54, route de hour);?></font></p>
*** <p style="margin-left:-10px "><font size="-1"></font></p>
 
*** <p style="margin-left:-10px "><font size="-2"><?php echo utf8_decode('Pour toute information complémentaire n\'hesiter pas à nous contacter en renseignant le formulaire ci-dessous:');?></font></p>
 
**** <form id="formTarifs" method="post" action="<?php echo $this->baseUrl(); ?>/index/tarifs2#form" name="formulaire" class="form">
*** <a name="form"></a>
 
*** <?php
*** /* Messages d'erreur du formulaire*/
*** echo $this->partial('index/messenger2.phtml',array(
*** *** 'prepend' => 'Le formulaire n\'a pas été envoyé, merci de vérifier les points suivant :',
*** *** 'erreurs' => $this->erreurs
*** ));
 
* ?>
*** <table style="margin-left:-10px ">
*** *** *** <tr class="noprint"><td><label for="societe">Soci&eacute;t&eacute; * </label></td>
*** *** *** <td>
*** *** *** *** <?php echo $this->formulaire['societe']['element']; ?>
*** *** *** </td>
*** *** </tr>*** *** <tr class="noprint"><td><label for="nom">Nom * </label></td>
*** *** *** <td>
*** *** *** *** <?php echo $this->formulaire['nom']['element']; ?>
*** *** *** </td>
*** *** </tr>
*** *** <tr class="noprint"><td><label for="nom">Pr&eacute;nom </label></td>
*** *** *** <td>
*** *** *** *** <?php echo $this->formulaire['prenom']['element']; ?>
*** *** *** </td>
*** *** </tr>
 
*** *** <tr class="noprint"><td><label for="email">E-mail * </label></td>
*** *** *** <td>
*** *** *** *** <?php echo $this->formulaire['email']['element']; ?>
*** *** *** </td>
*** *** </tr>
 
*** *** <tr class="noprint"><td><label for="tel">Tel. * </label></td>
*** *** *** <td>
*** *** *** *** <?php echo $this->formulaire['telephone']['element']; ?><br />
*** <span class="noprint">* Champs obligatoires</span>
*** *** *** </td>
*** *** </tr>
*** *** <tr class="noprint"><td><br /><label for="message">Message * </label></td>
*** *** *** <td><br />
*** *** *** *** <?php echo $this->formulaire['message']['element']; ?>
*** *** *** </td>
*** *** </tr>
*** <tr><td></td><td><?php echo $this->formulaire['submit']['element']; ?></td></tr>
*** </table>
</form>
 
*</div>
** <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</td>
</tr>
<!--<tr> <td>
******* <div style="text-align: left; margin-left: 42px; margin-right: auto; margin-top: -293px;">
*********** <font size="1" color="#29617E" ><b>* +10&euro;/agence</b></font>
******* </div>
*** </td>
*** <td></td>
</tr>-->
</table>
</div>

**Air P-E** · 28/10/2010, 00h35

Je me permets de te faire des petits commentaires sur le code !

Bon déjà indente le qu'on y voit quelque chose !

C'est le cafouillis (je suis pas sûr de l'orthographe !

), je ne sais pas comment tu fais pour t'y retrouver !
J'ai à peu près les mêmes commentaires que précédemment à savoir, concernant la séparation du HTML et du CSS.
Pourquoi il y a des étoiles dans les divs ?

par exemple la première ligne, il y a <div* ... C'est pas trop normal.

une chose à éviter absolument ! => les valeurs négatives pour les margins et paddings !! Tu dois toujours pouvoir te débrouiller pour ne pas utiliser de valeurs négatives, c'est exactement le genre de trucs qui causent des affichages différents suivant les navigateurs ! Utilise le reset.css

la balise de saut de ligne est <br /> et non pas <br>
de plus les :

Code :

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

1
2
3
</div>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>

à éviter, c'est pas très pros !

Utilises des margin-top ou margin-bottom.
J'ai aussi vu que tu utilises des <table> pour mettre en forme ta page, tu utilises déjà beaucoup de div (à mon goût), pour mettre en forme pourquoi mélanger les deux ? (A préférer largement les div au table malgré que ce soit plus facile à mettre en place...)

Je serais toi j'utiliserais deux div principales comme je t'ai déjà montré dans mon précédant post, pour la partie de gauche et la partie de droite.
Pour la div de gauche :
- une div contenant, pourquoi pas dans ce cas précis, une table avec une ligne et deux colonnes pour le texte à gauche et l'image à droite (même si moi j'utiliserais exclusivement que des divs)
- une div contenant trois autre divs pour les colonnes "Pack Visibility"

et pour la div de droite, deux divs, une pour "communiquez" et la seconde pour le formulaire.

Utilises absolute et relative pour placer tes divs !

Tu vois au final, ça fait beaucoup moins de div que ce que tu as là ! Et si tu fais une architecture un peu comme je viens de te dire tu pourra aisément modifier l'emplacement des divs et donc de l'affichage par l'avenir.

Pour le problème de l'image qui se coupe, le texte aussi est coupé, je pensais que le tout était une image mais en observant ton code j'ai vu que c'était du texte. Donc ce qui coupe ton image et ton texte doit peut-être être une de tes nombreuses divs qui vient se superposer.

Je pense qu'il faudrait que tu regardes un bon tuto sur le HTML (ceux du site) parce que j'ai l'impression que tu as récupéré le projet de quelqu'un (qui a fait ça un peu à la va-vite à mon goût) et que tu es un peu pommé parce que tu ne connais pas assez bien le HTML/CSS, je me trompe ? Si oui à ne pas prendre tous mes commentaires comme des critiques ! Ou plutôt si mais constructives !

**sheira** · 28/10/2010, 16h31

Merci pour tout tes conseils Air P-E!

Alors je n'ai plus qu'un seul soucis sous IE7 mon image est tronqué et mon bandeau: "Nos tarifs" en haut, IE7 semble ne pas vouloir de mon margin-top negatif! Alors que ça passe ailleurs.

Voilà 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
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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<div  style="background: #fff;  width:100% ; height:100%;">
    <table width="100%" style="background: #fff;">
        <tr>
            <td width="55%">
                <div  style="float: left;margin-top:-55px; margin-left: -20px; background: #fff; padding: 1em; width:100%; height:100%;">
 
                        <h1 style="  background: #226284;text-align:center;color:#fff;padding:7px 16px;font-size:16px">Nos tarifs &agrave; partir du 15/10/2010</h1>
                        <!-- -90px -12px 0px;-->
                        <div style="">
                                <table>
                                        <tr>
                                                <td>
 
                                                        <p style="font-size  : 1em; margin-left:22px">Le site d'emploi d&eacute;di&eacute; &agrave; l'int&eacute;rim</p>
                                                        <p style="font-size  : 0.9em; margin-left:22px">D&eacute;couvrez <strong><?=SITE_DOMAIN;?></strong> la solution<br>
                                                         simple et efficace capable de<br>
                                                        r&eacute;pondre &agrave; toutes vos probl&eacute;matiques<br>
                                                        de recrutement!<br>
                                                        Un tarif modulable<br>
                                                        Optez d&egrave;s &agrave; pr&eacute;sent pour le meilleur tarif!</p>
                                                </td>
                                                <td>
                                                        <?php $img_pi ='<img src="'. PUBLIC_PATH . 'images/les 2.png"   />';
                                                        echo $img_pi;?>
                                                </td>
                                        </tr>
                                </table>
                        </div>
                        <div  style="">
                                <div style=" float: left; background: url('<?= PUBLIC_PATH;?>/images/combo1.png') no-repeat; width: 130px;height: 300px;margin: -1px 22px 1px;">
 
                                        <div align="center" style="margin-top: -3px; vertical-align: middle; line-height: 29px;"><b><font color="#FFFFFF" >Pack visibility</font></b></div>
 
                                        <div align="center" style="margin-top: 5px"><b><font size="1.5" color="#29617E" ><?php echo utf8_decode('Référencement');?></font></b></div>
                                        <div align="center" style="margin-top: -5px"><b><font size="1.5" color="#29617E" >+</font></b></div>
                                        <div align="center"  style="margin-top: -5px; margin-bottom: 24px;"><b><font size="1.5" color="#29617E" ><?php echo utf8_decode('Accès CVthèque');?></font></b></div>
 
                                        <div align="center"><font size="1" ><?php echo utf8_decode('Présentez votre agence, insérez votre logo et lien vers votre site accédez à');?><br><?php echo utf8_decode('la CVthèque');?></font></div>
 
                                        <div align="center" style="margin-top: 15px" ><b><font size="1" color="#29617E" ><?php echo utf8_decode('Abonnement de 3 mois');?></font></b></div>
                                        <div align="center"><b>179 &euro; H.T.<font size="1" color="#29617E" >/mois<sup>*</sup></font></b></div>
                                        <div align="center"><b><font size="1" color="#29617E" ><?php echo utf8_decode('Abonnement de 6 mois');?></font></b></div>
                                        <div align="center"><b>129 &euro; H.T.<font size="1" color="#29617E" >/mois<sup>*</sup></font></b></div>
                                        <div align="center" ><b><font size="1" color="#29617E" ><?php echo utf8_decode('Abonnement de 12 mois');?></font></b></div>
                                        <div align="center"><b>99 &euro; H.T.<font size="1" color="#29617E" >/mois<sup>*</sup></font></b></div>
 
 
                                </div>
 
                                <div style=" float: left; background: url('<?= PUBLIC_PATH;?>/images/combo1.png') no-repeat; width: 130px;height: 300px; margin: -1px 22px 1px;">
                                        <center><b><font color="#FFFFFF" >Pack visibility <br> + 5 annonces</font></b></center>
                                        <div align="center" style="margin-top: 0.5px"><b><font size="1.5" color="#29617E" ><?php echo utf8_decode('Référencement');?></font></b></div>
                                        <div align="center" style="margin-top: -5px"><b><font size="1.5" color="#29617E" >+</font></b></div>
                                        <div align="center" style="margin-top: -5px"><b><font size="1.5" color="#29617E" ><?php echo utf8_decode('Accès CVthèque');?></font></b></div>
                                        <div align="center" style="margin-top: -5px"><b><font size="1.5" color="#29617E">+</font></b></div>
                                        <div align="center" style="margin-top: -5px"><b><font size="1.5" color="#29617E" >5 annonces</font></b></div>
                                        <div align="center" style="margin-top: 0px"><font size="1" ><?php echo utf8_decode('Présentez votre agence, accédez à la CVthèque');?><br><?php echo utf8_decode('en illimité, recrutez immédiatement avec 5 annonces');?></font></div>
 
                                        <div align="center" ><b><font size="1" color="#29617E" ><?php echo utf8_decode('Abonnement de 3 mois');?></font></b></div>
                                        <div align="center"><b>299 &euro; H.T.<font size="1" color="#29617E" >/mois<sup>*</sup></font></b></div>
                                        <div align="center"><b><font size="1" color="#29617E" ><?php echo utf8_decode('Abonnement de 6 mois');?></font></b></div>
                                        <div align="center"><b>259 &euro; H.T.<font size="1" color="#29617E" >/mois<sup>*</sup></font></b></div>
                                        <div align="center"><b><font size="1" color="#29617E" ><?php echo utf8_decode('Abonnement de 12 mois');?></font></b></div>
                                        <div align="center"><b>199 &euro; H.T.<font size="1" color="#29617E" >/mois<sup>*</sup></font></b></div>
 
                                </div>
 
                                <div style=" float: left; background: url('<?= PUBLIC_PATH;?>/images/combo1.png') no-repeat; width: 130px;height: 300px;margin: -1px 22px 1px;">
                                        <center><b><font color="#FFFFFF" >Pack visibility <br><?php echo utf8_decode(' + annonces illimitées');?></font></b></center>
 
                                        <div align="center" style="margin-top: 0.5px"><b><font size="1.5" color="#29617E" ><?php echo utf8_decode('Référencement');?></font></b></div>
                                        <div align="center" style="margin-top: -5px"><b><font size="1.5" color="#29617E" >+</font></b></div>
                                        <div align="center" style="margin-top: -5px"><b><font size="1.5" color="#29617E" ><?php echo utf8_decode('Accès CVthèque');?></font></b></div>
                                        <div align="center"  style="margin-top: -5px"><b><font size="1.5" color="#29617E">+</font></b></div>
                                        <div align="center"  style="margin-top: -5px"><b><font size="1.5" color="#29617E" ><?php echo utf8_decode('Annonces illimitées');?></font></b></div>
 
                                        <div align="center"  style="margin-top: 0px"><font size="1" ><?php echo utf8_decode('Présentez votre agence, accédez à la CVthèque');?><br><?php echo utf8_decode('en illimité, diffusez vos annonces en illimité');?></font></div>
 
                                        <div align="center" style="margin-top: 16px"><b><font size="1" color="#29617E" ><?php echo utf8_decode('Abonnement de 3 mois');?></font></b></div>
                                        <div align="center"><b>399 &euro; H.T.<font size="1" color="#29617E" >/mois<sup>*</sup></font></b></div>
                                        <div align="center"><b><font size="1" color="#29617E" ><?php echo utf8_decode('Abonnement de 6 mois');?></font></b></div>
                                        <div align="center"><b>359 &euro; H.T.<font size="1" color="#29617E" >/mois<sup>*</sup></font></b></div>
                                        <div align="center"><b><font size="1" color="#29617E" ><?php echo utf8_decode('Abonnement de 12 mois');?></font></b></div>
                                        <div align="center"><b>99 &euro; H.T.<font size="1" color="#29617E" >/mois<sup>*</sup></font></b></div>
 
 
                                </div>
 
 
 
                        </div>
 
                </div>
            </td>
            <td width="35%" height="100%">
 
                 <!--<div  style="float: left; background: #fff; padding: 1em;  margin-top:-12px; ">-->
                 <div  style="float: left; background: #fff; width:100%">
 
                        <h1 style=" background: #226284;text-align:center;color:#fff;padding:7px 16px;font-size:16px;">Communiquez</h1>
 
                        <div align="center"  style="margin: 12px" ><b><font color="#29617E" ><?php echo utf8_decode('Réservez dès à présent votre emplacement sur');?></font></b></div>
 
                        <div align="center" ><b><font color="#29617E" ><?=SITE_DOMAIN;?></font></b></div>
 
                        <div align="center" style="margin: 2px 0px 0px" ><b><font><?php echo utf8_decode('Appelez-nous au');?></font></b></div>
                        <div align="center" ><b><font size=3></font></b></div>
 
                </div>
 
                <div  style="float: left; background: #fff; width:100%">
                      <h1 style=" background: #226284;text-align:center;color:#fff;padding:7px 16px;font-size:16px;">Contactez-nous</h1>
 
                    <p style="margin-left:8px; margin-top: 0px "><font size="-1"><?php echo utf8_decode('Pour toute demande adressez-vous à:');?></font></p>
                    <p style="margin-left:8px "><img src="<?= PUBLIC_PATH;?>/images/layout/monsite.com/logo-com.png" /></p>
 
 
                    <p style="margin-left:8px "><font size="-1"><?php echo utf8_decode('');?></font></p>
                    <p style="margin-left:8px "><font size="-1"></font></p>
 
                    <p style="margin-left:8px "><font size="-2"><?php echo utf8_decode('Pour toute information complémentaire n\'hesiter pas à nous contacter en renseignant le formulaire ci-dessous:');?></font></p>
 
                     <form id="formTarifs" method="post" action="<?php echo $this->baseUrl(); ?>/index/tarifs2#form" name="formulaire" class="form">
                        <a name="form"></a>
 
                        <?php
                        /* Messages d'erreur du formulaire*/
                        echo $this->partial('index/messenger2.phtml',array(
                                'prepend' => 'Le formulaire n\'a pas été envoyé, merci de vérifier les points suivant :',
                                'erreurs' => $this->erreurs
                        ));
 
                        ?>
                        <table style="margin-left:8px ">
                                <tr ><td><label for="societe">Soci&eacute;t&eacute; * </label></td>
                                        <td>
                                                <?php echo $this->formulaire['societe']['element']; ?>
                                        </td>
                                </tr>		<tr class="noprint"><td><label for="nom">Nom * </label></td>
                                        <td>
                                                <?php echo $this->formulaire['nom']['element']; ?>
                                        </td>
                                </tr>
                                <tr ><td><label for="nom">Pr&eacute;nom </label></td>
                                        <td>
                                                <?php echo $this->formulaire['prenom']['element']; ?>
                                        </td>
                                </tr>
 
                                <tr ><td><label for="email">E-mail * </label></td>
                                        <td>
                                                <?php echo $this->formulaire['email']['element']; ?>
                                        </td>
                                </tr>
 
                                <tr ><td><label for="tel">Tel. * </label></td>
                                        <td>
                                                <?php echo $this->formulaire['telephone']['element']; ?><br />
                                                <span class="noprint">* Champs obligatoires</span>
                                        </td>
                                </tr>
                                <tr  ><td ><br /><label for="message">Message * </label></td>
                                        <td><br />
                                                <?php echo $this->formulaire['message']['element']; ?>
                                        </td>
                                </tr>
                                <tr  >
                                    <td></td>
                                    <td><?php echo $this->formulaire['submit']['element']; ?></td>
                                </tr>
 
                        </table>
                    </form>
 
            </div>
 
            </td>
        </tr>
    </table>
 
 
</div>

J'ai utilisé un tableau pour le bloc "Nos tarifs" et "Communiquez/Contactez-nous" parce que j'arrivais pas a les mettre dans des div l'une à côté de l'autre.

J'ai testé les positionnement absolute et relative mais ça me donne des trucs étrange...ou c'est moi qui l'utilise mal..

Et voilà ce que ça donne sous IE7:

Comment résoudre ce problème?

Merci d'avance.

**sheira** · 29/10/2010, 09h44

C'est bon je l'ai résolu en mettant un div position: absolute finalement.
Ce qui donne:

Code :

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

1
2
3
4
<div style="position: absolute; margin-top:-57px; margin-left: -12px;padding: 1em; width:60%">
                        <h1 style="  background: #226284;text-align:center;color:#fff;padding:7px 16px;font-size:16px">Nos tarifs &agrave; partir du 15/10/2010</h1>
                        <!-- -90px -12px 0px;-->
                    </div>

Encore merci pour votre aide!

**Air P-E** · 02/11/2010, 00h12

Tu vois que tu as réussi avec le position absolute !

De rien !

Affichage décalé sous Internet explorer

HTML

Discussions similaires

Partager

Partager