28172 sujets

CSS et mise en forme, CSS3

Bonjour a tous, j'ai une page qui contient une div menu gauche et qui a l'interieur contient d'autre div.

Il y a un un des div, le div img, qui contient un lien hypertexte dans le HTML pour faire un popup qui ne prend pas en compte quand je lui met le parametre position absolute, il ce place toujours par raport au div juste au dessus de lui...

J'ai essayer sur le div qui est au dessus de lui et lui fonctionne tres bien en positon absolute, j'pense que sa doit venir qu'il y ai un lien hypertexte dans la div img... Smiley confus


Avez vous une solution? Smiley confused


Mon HTML:


</head>

<body>

<table id="page-table"><tr><td id="page-td">

<div id="conteneur">


<div id="menu_gauche">

<a href="pages/contact.html" target="contenu">contact</a>
<a href="pages/association.html" target="contenu">association</a>
<a href="pages/liens.html" target="contenu">Liens</a>
<a href="http://localhost/cpg1418/displayimage.php?album=lastup&cat=0&pos=5" target="contenu">membres</a>
<a href="galerie/galerie.php" target="contenu">galerie</a>
<a href="pages/auth.html" target="contenu">auth</a>
<?php

$serveur ="localhost";
$login = "root";
$mot_passe = "";
$base = "artkateo";


 
$connexion = mysql_pconnect($serveur, $login, $mot_passe) or die ("impossible de se connecter a MySQL : ".mysql_error());


 
$mabase = mysql_select_db($base) or die ("impossible de ce connecter ma table : ".mysql_error());
$requete = "select * from actualite";
		
		$resultat = mysql_query($requete);
		
		while ($row = mysql_fetch_row($resultat))
		
		{
		
		$titre = $row[1];

		$date = $row[2];

		$resume = $row[3];
		
	
		
		echo stripslashes('<div id="titre">'.$titre.'</div>');
		
		echo stripslashes('<div id="date">'.$date.'</div>');
		
		echo stripslashes('<div id="resume">'.$resume.'</div>');

		

		}



?>

    <div id="img">

            <A HREF="#" class="a" onClick="window.open('image_actu/actualite.jpg','_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=yes, resizable=1, copyhistory=0, menuBar=0, width=460, height=470');return(false)">Cliquez ici<br />
 pour<br />
 voir le visuel</A>    </div>
    
</div>

<div id="menu_haut"></div>

<div id="menu_droit"></div>


<div id="contenu">

<iframe name="contenu" src="" marginheight="0" marginwidth="0" width="460" height="470" scrolling="auto" frameborder="0">accueil</iframe>


</div>

<div id="bas_page"></div>
</div>

</td></tr></table>

</body>
</html>


Mon CSS:


*{
	list-style-type: none;
	margin : 0px;
	padding:0px;
}



body{

	font-family: "Times New Roman", Times, serif;
	height: 100%;
	background-color: #ffffff;
	
}

/*------------ Les 3 étapes suivantes sont pour centrer le contenu de la page */

.centrer {
  margin-left: auto;
  margin-right: auto;
  width : 1000px;
  text-align : left;  /* pour résoudre le bug de centrage de IE */
}


#page-table {
	height: 100%;
	width: 100%;
	border-collapse: collapse;
	text-align: center;
}
#page-td {
	height: 100%;
	padding: 0;
	vertical-align: middle;
}

/* -----------  Div principal (ou conteneur)*/

#conteneur{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	width: 810px;
	height: 610px;
	
}

/*-------------Div du menu gauche */

#menu_gauche{
	width: 280px;
	height: 610px;
	background-image: url(../images/menu_gauche.jpg);
	 
} 

/*-------------------Div du menu du haut */

#menu_haut{
	position: absolute;
	top: 0px;
	width: 460px;
	height: 90px;
	margin-left: 280px;
	background-image: url(../images/menu_haut.jpg);
}


#menu_droit{
	position: absolute;
	top: 0px;
	margin-left: 740px;
	width: 70px;
	height: 610px;
	background-image: url(../images/menu_droit.jpg);
	
}

#contenu{
	position: absolute;
	margin-left: 280px;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-top: 0px;
	top: 90px;
	width: 460px;
	height: 470px;
	
}

#bas_page{
	position: absolute;
	margin-left: 280px;
	top: 560px;
	width: 460px;
	height: 50px;
	background-image: url(../images/bas.jpg);	
}


#titre{

	text-align: center;
	white-space: normal;
	font-weight: bold;
	text-transform: uppercase;
	margin-top: 40px;
	margin-left: 30px;
	margin-right: 70px;
  font-family: Verdana,Geneva, Arial, Helvetica, sans-serif;
  width: 180px;
  color: White;
}

#date{
	text-align: center;
	text-transform: uppercase;
	 font-size: 15px;
	white-space: normal;
	margin-top: 10px;
	margin-left: 30px;
	margin-right: 70px;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  width: 180px;
  color: White;
  
}



#resume{
	text-align: center;
	word-spacing: -2px;
   font-size: 11px;
	white-space: normal;
	margin-top: 15px;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin-left: 30px;
	margin-right: 70px;
	width: 180px;
  color: White;
  
}

#img{
	position: absolute;
	text-align: right;
	word-spacing: -2px;
   font-size: 11px;
	margin-top: 50px;
	margin-left: 30px;
	margin-right: 70px;
	width: 180px;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}


/*-------------Couleur des liens non visité */

.a:link {
	
	text-decoration: none;
	color: White;
	
}

/*-------------Couleur des liens visité */

.a:visited {
	/*text-decoration: none;*/
	color: White;
	
}

/*-------------Couleur des liens au survol de la souris */

.a:hover {
	text-decoration: none;
	color: White;
	
}

/*-------------Couleur des liens quand il y a le click */

.a:active {
	text-decoration: none;
	color: White;

}






Merci d'avance!!! Smiley cligne
Modifié par Chat (14 May 2008 - 17:25)
Bonjour,

#img{
	position: absolute;
	text-align: right;
	word-spacing: -2px;
	font-size: 11px;
	margin-top: 50px;
	margin-left: 30px;
	margin-right: 70px;
	width: 180px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

Je ne vois aucun paramètre de positionnement (top, bottom, left, right).
Ah je ne savais pas qu'il falais lui metre directement un parametre pour qu'il ce mette en pratique, quand j'l'ai mi sur une autre div il est sortie directement du flux... Smiley sweatdrop


Merci pour ton aide!!! Smiley cligne