Décalage sous Opéra

Question

Gobelin

3 Jan 2007 à 11:30

Bonjour,

J'ai un problème avec le navigateur Opéra, qui me provoque un décalage d'un div en position : absolute; j'ai aucun problème sous IE 7.0 et Mozilla FireFox,
toutes les margin et padding = 0; le père de ce div est parent qui lui mêmepossède les mêmes caractéristiques précedement cité pour sont div enfant...
Je voudrai savoir si vous avais déjà rencontré ce type de problème avec Opéra 9.10 ?

Merci.

Gobelin

3 Jan 2007 à 13:19

J'apporte des précisions avec mon script et ma css,

Ma page :


<div id="conteneur"><!-- Conteneur -->
<div id="site"><!--Corps page-->
<div id="bandeauBan"><!--Bannière-->
<a href="index.asp"><img class="bandGH" src="images/banniere/logo_elite.jpg" width="253" height="83"alt="commentaires" title="commentaires" /></a>
  <object class="bandC" type="application/x-shockwave-flash" data="animFlash/animNewSite.swf" width="494" height="132" >
    <param name="play" value="true" />
    <param name="movie" value="animFlash/animNewSite.swf" />
    <param name="menu" value="false" />
    <param name="quality" value="high" />
    <param name="scalemode" value="noborder" />
    <p> OBJET FLASH NON AFFICHE, TÈLÈGARGER LE PLUGIN FLASH. CLIQUEZ SUR CE  
    <a href="http://www.adobe.com/shockwave/download/index.cgi?Lang=French&P5_Language=French&P1_Prod_Version=ShockwaveFlash?Lang=French">LIEN</a>	  
</p>	  
  </object>
  <img class="bandGB" src="images/banniere/partenaire_ap_2006.jpg" width="253" height="46" alt="commentaires" title="commentaires" />
  <object class="bandD" type="application/x-shockwave-flash" data="animFlash/Neige.swf" width="209" height="132" >
      <param name="play" value="true" />
      <param name="movie" value="animFlash/Neige.swf" />
      <param name="menu" value="false" />
      <param name="quality" value="high" />
      <param name="scalemode" value="noborder" />
      <p> OBJET FLASH NON AFFICHE, TÈLÈGARGER LE PLUGIN FLASH. CLIQUEZ SUR CE  
      <a href="http://www.adobe.com/shockwave/download/index.cgi?Lang=French&P5_Language=French&P1_Prod_Version=ShockwaveFlash?Lang=French">LIEN</a>	  
</p>
</object>
</div><!--Fin Bannière-->
<div class="bandMenu"><!-- BandeauMenu -->
<img class="indigo" src="images/menu/numero_indigo.gif" width="215" height="22" alt="commentaires" title="commentaires" />
</div><!--Fin BandeauMenu -->
<div class="calMenu"><!--Menu -->
<!-- #include file="menu/menu_principal.asp" -->
</div><!--Fin Menu-->
<div class="bord"><img src="images/point.jpg" width="956" height="23" /></div>
</div><!--Fin Corps page-->
</div><!--Fin Conteneur -->

Ma feuille CSS :


/* CSS Document */
/*  ------------------------------------------
/*  Corps Principal Page index
/*  ------------------------------------------
*/
html {
	height: 100%; /* pour centrer la page  */
}

body {
	margin: 0; /* pour éviter les marges */
    text-align: center; /* pour corriger le bug de centrage IE */
	padding: 0;
	height: 100%;
}

img {border: none;}

#conteneur {
	width: 990px;
	height: 100%;
	margin:0 auto;
	background-image: url(../images/boot02.jpg);
	background-repeat: repeat-y;
	background-position: right top;
	background-color: E6E6E6;
}

#site {
	position: relative;
	width: 956px;
	text-align: left;
	margin-left: 0;
	margin-right: 17px; /* img bord Droit */
	text-align: left;
	height: 100%;
	background-color: E6E6E6;
	background-image: url(../images/boot01.jpg);
	background-repeat: repeat-y;
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 17px; /*marge pour image gauche bordure */
	padding-right: 17px; /*marge pour image droite bordure */
}

.imgD {
	float: right;
	width: 17px;
	height: 14px;
	background-image: url(../images/boot02.jpg);
	background-repeat: repeat-y;
	background-position: right;
}
	
/*  ------------------------------------------
/*  Bandeau Bannière
/*  ------------------------------------------
*/

.bandeauBan {
	width: 956px;
	margin: 0;
	padding: 0;
	text-align: left;
	background-color: #FFFFFF;
}

/*  ------------------------------------------
/*  BandeauBannièreGaucheHaut
/*  ------------------------------------------
*/

.bandGH{
	position: absolute;
	width: 253px;
	margin: 0;
	padding: 0;
	text-align: left;
}

/*  ------------------------------------------
/*  BandeauBannièreGaucheBas
/*  ------------------------------------------
*/

.bandGB{
	width: 253px;
	margin-top: 83px;
	margin-bottom: 3px;
	margin-left: 0;
	margin-right:0;
	padding: 0;
}

/*  ------------------------------------------
/*  BandeauBannièreCentre
/*  ------------------------------------------
*/

.bandC{
	position: absolute;
	width: 494px;
	margin-left: 254px;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	padding-right: 0;
}

/*  ------------------------------------------
/*  BandeauBannièreDroite
/*  ------------------------------------------
*/

.bandD{
	position: absolute;
	width: 209px;
	margin-left: 494px;
	padding: 0;
	border: 0;
}

/*  ------------------------------------------
/*  BandeauMenu
/*  ------------------------------------------
*/
.bandMenu {
	position: absolute;
	width: 956px;
	height: 24px;
	margin: 0;
	background-color: #E6E6E6;
}

.indigo {
	position: absolute;
	width: 215px;
	height: 22px;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 19px;
	padding-right: 17px;
}

.calMenu {
	position: absolute;
	margin-top: 1px;
	margin-left: 254px;
	padding: 0;
	width: 702px;
	height: 22px;
}

/*  ------------------------------------------
/*  Bordure Centre
/*  ------------------------------------------
*/
.bord {
	position: absolute;
	width: 956px;
	height: 23px;
	margin-top: 22px;
}

Précision, le div principale de ma bannière posséde 4 div enfants qui sont placer l'es un à coté des autres sauf pour les 2 premier qui sont placé l'un en dessous de l'autre et les autres à coté de ces 2 là, le problème c'est le dernier div qui contien un anim flash est qui est décalé vers la droite sous Opéra et pas sous les autres.

Merci pour votre aide !!

gcyrillus

Modérateur

3 Jan 2007 à 14:08

bonjour,

je n'ai pas encore installé opera 9.10 (je ne suis encore qu'aux versions 7.54 à 9.01)

Mais j'ai du mal a te suivre , ..
je ne retrouve pas tes 4 div enfants , des images et des balise object oui .

Qu'elle est cet "enfant" qui ne tient pas en place dans opera 9.10 ?

.bandeauBan , .bandGH , .bandGB , .bandC , .bandD , .bandMenu ? ou est une autre "balise" qui n'est pas ciblée dans cette liste ?

++

Gobelin

3 Jan 2007 à 17:29

Merci gcyrillus pour ta réponse,

Pour la balise enfant du bloc div bandeauBan qui ne tiens pas en place, c'est le div qui utilise la class="bandD"( il est décaler de quelques pixel vers la droite de la page).
pour t'aider à mieux comprendre, ma structure est la suivante :

<body>
<div conteneur>
<div site>
<div bandeauban>
<div bandGH> </div bandGH>
<div bandGB> </div bandGB>
<div bandC> </div bandC>
<div bandD> </div bandD>
<div bandMenu> </div bandMenu>
</div>
</div>
</div>
</div>
</body>

Merci !!

Gobelin

3 Jan 2007 à 17:30

Merci gcyrillus pour ta réponse,

Pour la balise enfant du bloc div bandeauBan qui ne tiens pas en place, c'est le div qui utilise la class="bandD"( il est décaler de quelques pixel vers la droite de la page).
pour t'aider à mieux comprendre, ma structure est la suivante :


<body>
<div conteneur>
    <div site>
         <div bandeauban>
            <div bandGH> </div bandGH>
                 <div bandGB> </div bandGB>
                 <div bandC> </div bandC>
                 <div bandD> </div bandD>
                 <div bandMenu> </div bandMenu>
            </div>
         </div>
    </div>
</div>
</body>

Merci !!

Gobelin

4 Jan 2007 à 17:17

J'ai beau regarder et tourner mes données de ma feuille de style dans tout les sens je ne parviens pas à pouvoir corriger cette erreur.
Si quelqu'un pouvez m'aider ....

merci.

Gobelin

5 Jan 2007 à 10:37

avez vous déjà rencontré un problème de calage sous Opéra ?

Antoine Cailliau

5 Jan 2007 à 10:48

Dans structure que tu nous donnes tu ferme un div une fois de trop.
banGH il s'arrête où ?

Gobelin

5 Jan 2007 à 11:27

Antoine Cailliau a écrit :
Dans structure que tu nous donnes tu ferme un div une fois de trop.
banGH il s'arrête où ?

Comment ça banGH il s'arrête ou ? je ne comprends pas ta question.

Antoine Cailliau

5 Jan 2007 à 14:21

Est-ce que <div bandGH> </div bandGH> englobe le tout ou pas ?

<body>
<div conteneur>
    <div site>
         <div bandeauban>
            <div bandGH> </div bandGH>
                 <div bandGB> </div bandGB>
                 <div bandC> </div bandC>
                 <div bandD> </div bandD>
                 <div bandMenu> </div bandMenu>
            </div>
         </div>
    </div>
</div>
</body>

Gobelin

5 Jan 2007 à 15:03

le div class bandGH n'englobe pas le tout, simplementil positionne son contenu a savoir l'image bandeau Gauche Haut.


<body>

<div conteneur>

    <div site>

         <div bandeauban>

            <div bandGH> </div bandGH>

                 <div bandGB> </div bandGB>

                 <div bandC> </div bandC>

                 <div bandD> </div bandD>

                 <div bandMenu> </div bandMenu>

         </div>

    </div>

</div>

</body>

Sujet clos

CSS et mise en forme, CSS3

Décalage sous Opéra