Problème avec la position absolute

gaya_102 -
ouahidiyounes Messages postés 10 Date d'inscription Statut Membre Dernière intervention - 18 janv. 2010 à 18:53

bonjour

Voila c'est au sujet de ma fenêtre centrale.
Voila le code Css de ma fenêtre

.fenetre4{
overflow: auto;
position:absolute;
  width:725px;
  width:725px !important;
height : 402px ;
  top: 150px;
  left: 275px;
 left: 275px !important;
}

Jusqu'a ce matin ca marché très bien autant sous IE que sur Firefox.

J'ai juste changer des mesure sur la largeur de ma fenêtre et d'un seul coup elle avait disparu sous IE. J'ai remis mes anciens paramettres et ca ne marche toujours pas. Du coup j'ai suprimer mon code css. C'est sur c'est en vrac mais c'est afficher. J'ai remis ma position absolute et vlam ma fenttre disparait. Je ne comprend pas pourquoi.

Du coup j'essaye ca

.fenetre{
overflow: auto;
position:relative;

  width:752px;
  top: 10px;
  height : 402px ;

C'est top sous IE mais sur firefox c'est pas bon.

Du coup j'essaye ca

.fenetre{
overflow: auto;
position:relative!important;
position:absolute;
  width:752px;
  top: 10px;
  height : 402px ;

Le problème c'est que ma fenêtre disparait aussito. Pourquoi?

Merci par avance de votre aide.

Au cas ou voila le code de la page

<!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" lang="fr">
<head>
<title>
Faire part naissance et faire part mariage : création de faire part originaux et faire part personalisé sur les faire parts de gaya.</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1;" />
<meta name="description" content="création de faire part de mariage, faire part de naissance et faire part originaux et faire part personalisé"/>
<meta name="keywords" content="faire,part,faire part,faire part naissance,faire part mariage, création de faire part, faire part personalisé, creation, personalisation, faire part de naissance,faire part deuil, bébé, bapteme, modeles faire part pour mariage,fille,garçon, faire parts,faire part photo, faire-part, faire parts naissance, faire parts de naissance, faire-part mariage, faire-part jumeaux, faire-part naissance garçon, faire-parts, faire-parts mariage,marié,liste, gratuit,cartes de remerciement, carte de mariage, carte de naissance, BAPTEME,CARTE DE DEUIL, papier, gratuit, texte faire part, faire part gaya" />
<meta http-equiv="content-language" content="fr, en" />
<meta name="author" content="les faire parts de gaya" />
<link rel="shortcut icon" type="image/x-icon" href="gaya_files/favicon0.htm" />
<link rel="stylesheet" href="page41.css" type="text/css" media="all" />


</head>
<body>
<div class="centreX">
	<div id="header">
		<p class="texte"><strong><span class="titre">Les faire-part de Gaya</span></p> <p class="slogan">Faire-part de mariage originaux et personnalisés.</strong></p>
	
					<?php
include("menu.php");
?>
	
	</div>
	<div id="content">

		<?php
include("menugauche.php");
?>
		<div class="fenetre">
<br>
			<h1>La collection de faire-part de mariage </h1>
			
			<table>
   <tr>
       <td><a href="http://www.lemondedegaya.fr/zen.php" class="uli" ><img src="images/comme_site_devant_petite.jpg" alt="" width="141" height="100" /></a></td>
       <td><a href="http://www.lemondedegaya.fr/oui.php" class="uli" ><img src="images/oui_devant_petite.jpg" alt="" width="141" height="100" /></a></td>
       <td><a href="http://www.lemondedegaya.fr/lesmaries.php" class="uli" ><img src="images/dessin_marie_devant_petite.jpg" alt="" width="141" height="100" /></a></td>
       <td><a href="http://www.lemondedegaya.fr/cygne.php" class="uli" ><img src="images/petites/cygne_petite.jpg" alt="" width="141" height="100" /></a></td>

   </tr>
   <tr>
       <td><a href="http://www.lemondedegaya.fr/zen.php" class="uli" >Zen</a></td>
       <td><a href="http://www.lemondedegaya.fr/oui.php" class="uli" >Oui</a></td>
       <td><a href="http://www.lemondedegaya.fr/lesmaries.php" class="uli" >Les mariés</a></td>
	   <td><a href="http://www.lemondedegaya.fr/cygne.php" class="uli" >Les cygnes</a></td>
	   
  </table>	   
  
  <table class="hauteur">
  </table>
  <table>
   <tr>
       <td><a href="http://www.lemondedegaya.fr/plume.php" class="uli" ><img src="images/petites/plume1_devant_petite.jpg" alt="" width="141" height="100" /></a></td>
       <td><a href="http://www.lemondedegaya.fr/plume.php" class="uli" ><img src="images/petites/plume2_devant_petite.jpg" alt="" width="141" height="100" /></a></td>
       <td><a href="http://www.lemondedegaya.fr/plume.php" class="uli" ><img src="images/petites/plume3_devant_petite.jpg" alt="" width="141" height="100" /></a></td>
		<td><a href="http://www.lemondedegaya.fr/fleur_pastel.php" class="uli" ><img src="images/petites/fleur_pastel_devant_petite.jpg" alt="" width="141" height="100" /></a></td>

   </tr>
   <tr>
       <td><a href="http://www.lemondedegaya.fr/plume.php" class="uli" >Plume1</a></td>
       <td><a href="http://www.lemondedegaya.fr/plume.php" class="uli" >Plume2</a></td>
       <td><a href="http://www.lemondedegaya.fr/plume.php" class="uli" >Plume3</a></td>
	   <td><a href="http://www.lemondedegaya.fr/cygne.php" class="uli" >Fleur pastel</a></td>
   </tr>
   
</table >


<table class="hauteur">
  </table>


<table>
   <tr>
       <td><a href="http://www.lemondedegaya.fr/orchidee.php" class="uli" ><img src="images/petites/orchidee_devant_petite.jpg" alt="" width="141" height="100" /></a></td>
       <td><a href="http://www.lemondedegaya.fr/lys.php" class="uli" ><img src="images/petites/lys_droit_devant_petite.jpg" alt="" width="141" height="100" /></a></td>
       <td><a href="http://www.lemondedegaya.fr/lys.php" class="uli" ><img src="images/petites/lys_couche_petite.jpg" alt="" width="141" height="100" /></a></td>
		<td><a href="http://www.lemondedegaya.fr/lys_blanc.php" class="uli" ><img src="images/petites/lys_blanc_devant_petite.jpg" alt="" width="141" height="100" /></a></td>

   </tr>
   <tr>
	   <td><a href="http://www.lemondedegaya.fr/orchidee.php" class="uli" >L'orchidée</a></td>
       <td><a href="http://www.lemondedegaya.fr/lys.php" class="uli" >Lys</a></td>
       <td><a href="http://www.lemondedegaya.fr/lys.php" class="uli" >Deux lys</a></td>
	   <td><a href="http://www.lemondedegaya.fr/lys_blanc.php" class="uli" >Lys blanc</a></td>
   </tr>
   
<br>

  </table >


<table class="hauteur">
  </table>


<table>
   <tr>
       <td><a href="http://www.lemondedegaya.fr/rose2.php" class="uli" ><img src="images/petites/recrose1_petite.jpg" alt="" width="141" height="100" /></a></td>
       <td><a href="http://www.lemondedegaya.fr/rose2.php" class="uli" ><img src="images/petites/recrose2_petite.jpg" alt="" width="141" height="100" /></a></td>
       <td><a href="http://www.lemondedegaya.fr/rose2.php" class="uli" ><img src="images/petites/recrose3_petite.jpg" alt="" width="141" height="100" /></a></td>
       <td><a href="http://www.lemondedegaya.fr/coquelicot.php" class="uli" ><img src="images/petites/coquelico_devant_petite.jpg" alt="" width="141" height="100" /></a></td>

   </tr>
   <tr>
       <td><a href="http://www.lemondedegaya.fr/rose2.php" class="uli" >Rose</a></td>
       <td><a href="http://www.lemondedegaya.fr/rose2.php" class="uli" >Pétales</a></td>
       <td><a href="http://www.lemondedegaya.fr/rose2.php" class="uli" >Coeur de pétale</a></td>
	   <td><a href="http://www.lemondedegaya.fr/coquelicot.php" class="uli" >Coquelicot</a></td>
	 </tr>  
  </table>	  	
			<table class="hauteur">
  </table>


<table>
   <tr>
       <td><a href="http://www.lemondedegaya.fr/gourmandise.php" class="uli" ><img src="images/petites/carre_devant_petite.jpg" alt="" width="141" height="100" /></a></td>
       <td><a href="http://www.lemondedegaya.fr/gourmandise.php" class="uli" ><img src="images/petites/escargot_devant_petite.jpg" alt="" width="141" height="100" /></a></td>
       <td><a href="http://www.lemondedegaya.fr/gourmandise.php" class="uli" ><img src="images/petites/coeur_chocolat_devant_petit.jpg" alt="" width="141" height="100" /></a></td>
       <td><a href="http://www.lemondedegaya.fr/canelle.php" class="uli" ><img src="images/petites/cannelle_devant_petite.jpg" alt="" width="141" height="100" /></a></td>

   </tr>
   <tr>
       <td><a href="http://www.lemondedegaya.fr/gourmandise.php" class="uli" >Carré de chocolat</a></td>
       <td><a href="http://www.lemondedegaya.fr/gourmandise.php" class="uli" >Escargot en chocolat</a></td>
       <td><a href="http://www.lemondedegaya.fr/gourmandise.php" class="uli" >Coeur en chocolat</a></td>
	   <td><a href="http://www.lemondedegaya.fr/canelle.php" class="uli" >Cannelle</a></td>
	   
  </table>	 
		</div>
	</div>

</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11713821-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

voila le code CSs de la page

li
{display:inline;}

.centreX
{
	position:absolute;
	left:50%;
	margin-left:-500px;
	width: 1000px;
	top:50%;
	margin-top:-276px;
	height: 552px;
	background-image : url("images/fond_page2.JPG");
	background-repeat: no-repeat;
	border :2px solid black;
	font-style: italic;
		font-family:comic sans ms, Times New Roman, Times, serif;

}

.centreX2
{
	position:absolute;
	left:50%;
	margin-left:-500px;
	width: 1000px;
	top:50%;
	margin-top:-276px;
	height: 552px;
	background-image : url("images/fond_page_format.jpg");
	background-repeat: no-repeat;
	border :2px solid black;
	font-style: italic;
		font-family:comic sans ms, Times New Roman, Times, serif;

}

body {
	background-color: #f7d8fc;
		font-family:comic sans ms, Times New Roman, Times, serif;
	font-style: italic;}
	
	span.titre {
color: #b04cbf;

	font-size: 26px;
	text-decoration: none;
	text-align: center;
	position:absolute;
	top: 10px;
	left : 230px;
	font-style: italic;

}

a {
	color: #781d89;
font-style: italic;
	font-size: 17px;
	text-decoration: none;
	text-align: center;
} 

a:hover {
    color: #e365f6;

	font-size: 17px;
	text-decoration: none;
	text-align: center;
	font-style: italic;
}

.slogan {
color: #7890d2;

	font-size: 17px;
	text-decoration: none;
	text-align: right;
	position:absolute;
	top: 180px;
	top: 55px !important;

	left: 582px;
	font-style: italic;
	margin-right:5px;
	}
	
	h1
	{
	font-size: 17px;

text-align:left;
text-decoration: underline ;
position:absolute;
top: 15px;
left:25px;
color: #7890d2;
	font-style: italic;
}
	
	
#menuHorizon {
font-size: 13px;
float:right;
margin-top:110px;
padding-left:0;
padding-right:20px;
font-style: italic;

}

#header p.texte {
margin:0px;
}
#menuHorizon li {
display:inline;
height:400px;
line-height:26px;
vertical-align:top;
left:100px;
}



.a {
position: relative;
	float:left;
	width:165px;
	height:370px;
	top: 230px !important;
top: 130px ;
	text-align: center;
	font-family:comic sans ms, Times New Roman, Times, serif;
font-size: 17px;
	}
	
	
		.fenetre{
overflow: auto;
position:relative!important;
position:absolute;
  width:752px;
  top: 10px;
  height : 402px ;
 
}
	
		
	


	
	table
{
margin: auto; /* Centre le tableau */
position: relative;
top: 40px;
   width:750px;
 
 font-size: 15px;
  }
td
{
text-align: center; /* Tous les textes des cellules seront centrés*/
   border: 0px solid black;
}



																						/* page produit*/

h2{
text-align: center; 
margin-right:15px;
margin-left:5px;
font-size: 15px;
margin: 0;
color: #7890d2;
}

h3{

color: #7890d2;
font-size: 15px;
margin: 0;
}

h4
	{
	font-size: 17px;
top: 15px;
left:50px;
color: #7890d2;
	font-style: italic;
	text-decoration: underline ;
}

.tableau
{
margin: auto; /* Centre le tableau */
position: relative;
top: -25px;
   
 
 font-size: 15px;
 
}

.texte{
text-align: center; 
 width:720px;
 font-weight:bold;
margin-left:15px;
margin-right:55px;
font-size: 15px;
margin: 0;
text-align: center; }


.hauteur{

height:30px;
}

Afficher la suite

A voir également:

Problème avec la position absolute
Ma position - Guide
Suivi position google - Guide
Partage position whatsapp - Guide
Absolute uninstaller - Télécharger - Divers Utilitaires
Position gps - Guide

1 réponse

Réponse 1 / 1

ouahidiyounes Messages postés 10 Date d'inscription Statut Membre Dernière intervention 1

oui je connu ton problème il y a des propriétés css qui fonction dans un navigateur et pas l'autre comme opacity aussi la différence des tailler comme margin-left et top et left pour régler le problème je te conseil de ne pas travailler de cette façon
si ta ce code
<div style="margin-left:400px;border:1px solid #000000;width:30px;height:30px">test</div>

il faut qu'il soit comca et sa fonction dans tous les navigateur
<div style="float:left;widht:400px;height:30px"></div><div style="width:30px;heigth:30px;border:1px solid #000000">test</div>
c'est avec cette aide on creer les site web pour quelles fonction dans tous les navigateurs
A+

Discussions similaires

Bouton ON OFF, O ou I ?

arriere plan

Caler une adresse au niveau de la fenêtre d'une enveloppe

Votre réponse

Discussions similaires