28173 sujets

CSS et mise en forme, CSS3

Index de background-image inversé sous I.E

Bonsoir,

j'ai fait un cadre extensible verticalement selon son contenu ou si on redimensionne la taille du texte.
Il y a donc un <div> conteneur qui a un background image placé en haut, un <p> pour le contenu et un autre div avec un background placé en bas.
Le background du haut est par dessus le background image du bas et ça coulisse...

Le probleme est que sous IE l'ordre de superposition des deux background image est inversé.
J'ai essayé de d'inverser ds le code, jouer avec z-index...rien a faire.

Quelqu'un connait le truc?

Voir la page en question

Merci.

CSS
	  /* CADRE extensible verticalement */ 
div#cadre {                           /*Conteneur global  */
                           position: absolute;
                           top: 225px; left: 65%; height: 51px;width: 348px;   padding-top : 33px;
						   background: url(./images/cadre_intro_haut.gif) left top no-repeat;}

div#bloccadre {            padding-bottom:10px; width: 348px;
                           background: url(./images/cadre_intro_bas.gif) left bottom no-repeat;} 

div#bloccadre p {          text-align: left; font-size:0.7em; padding: 10px 0px 0px 7px;  }


HTML

				 <div id="cadre">
			 <div id="bloccadre">

<h1>Les courroies de carnelle</h1> 
<p>est une association 
d'exaltés ahurits de cambouis accros à la sauce exquise 
de la bidouille mais aussi de la mecanique qui fonctionne bien 
et différemment, protecteurs et adorateurs des inventions 
et systèmes mecaniques d'horlogerie d'antants. Ceci est un énorme bleblabla servant de texte d'accueil sur ce site ou sur la galejdfn dkdjfosdkjf dsfpikdjfkdjfsdqmlf
</p>
			   </div>
</div>

Modifié par Hum (14 Feb 2006 - 20:51)
En fait j'ai ai retrouvé un de fonctionnel,
je l'ai repris, c'est beaucoup mieux au niveau des backgrounds qui coulissent mais le contenu texte du <p> sort de son conteneur et est centré ...

Le positionnement avait l'air d'influer pas mal, je l'ai viré puis passé en relatif pour le placer ...

Merci
La page de visu.

CSS


div#cadre { position: relative; top: 50%; left: 50%; witdh:462px; height:30%; padding-top: 10px;
              background: url(./images/Cadre_arrondi_part_top.png) left top no-repeat;}
			  
div#bloccadre {padding-bottom: 22px;
               background: url(./images/Cadre_arrondi_part_foot.png) left bottom no-repeat;} 

div#bloccadre p { witdh:462px; font-size:1em; margin-top:10px; margin-right:20px; margin-bottom:5px;}

div#bloccadre a          {   margin:0; padding:0; text-align : right; color:#333300;  
							 text-decoration: none; font-size: 9px;  
						 	 font-family:Verdana, Arial, Helvetica, sans-serif;}
							 
div#bloccadre h1  {margin:5px 0px 0px 0px ; padding:47px 0 8px 0; text-align: center; color:#22211F;          text-decoration: none; font-size: 20px; font-family:Verdana, Arial, Helvetica, sans-serif;}
						  
div#bloccadre a:hover  {      color:#003333;  font-family:Verdana, Arial, Helvetica, sans-serif; 
                              font-size:9px;   margin:0; text-decoration: underline;  }
Sujet clos
Aller à