28220 sujets

CSS et mise en forme, CSS3

[Résolu] - [CSS]Problème calque height=100% Firefox et IE

Bonjour,

J'ai un petit problème d'affichage avec des calques sous firefox alors que sous IE tout marche parfaitement.

Internet Explorer :
http://adrien20.free.fr/imagesweb/help/ie.jpg

Firefox :
http://adrien20.free.fr/imagesweb/help/firefox.jpg

Voici le source de ma page

a écrit :

<body bgcolor="#DFE4F2">
<div align="center">

<table cellpadding="0" cellspacing="0" border="1" width="300">
<tr>
<td style='height:100%;'>

<SPAN style='position: absolute; height:100%;'>
<table cellpadding=0 cellspacing=0 width=296 height=100%>
<tr>
<td bgcolor=#667ECE></td><td bgcolor=#677fce></td><td bgcolor=#6980ce></td><td bgcolor=#6a81cf></td>
<td bgcolor=#6c83cf></td><td bgcolor=#6d84d0></td><td bgcolor=#6f85d0></td><td bgcolor=#7087d1></td>
<td bgcolor=#7288d1></td><td bgcolor=#7389d2></td><td bgcolor=#758bd2></td><td bgcolor=#778cd3></td>
<td bgcolor=#788dd3></td><td bgcolor=#7a8ed4></td><td bgcolor=#7b90d4></td><td bgcolor=#7d91d5></td>
<td bgcolor=#7e92d5></td><td bgcolor=#8094d6></td><td bgcolor=#8195d6></td><td bgcolor=#8396d7></td>
<td bgcolor=#8498d7></td><td bgcolor=#8699d8></td><td bgcolor=#879ad8></td><td bgcolor=#899bd9></td>
<td bgcolor=#8b9dd9></td><td bgcolor=#8c9eda></td><td bgcolor=#8e9fda></td><td bgcolor=#8fa1db></td>
<td bgcolor=#91a2db></td><td bgcolor=#92a3dc></td><td bgcolor=#94a5dc></td><td bgcolor=#95a6dd></td>
<td bgcolor=#97a7dd></td><td bgcolor=#98a9de></td><td bgcolor=#9aaade></td><td bgcolor=#9cabdf></td>
<td bgcolor=#9dacdf></td><td bgcolor=#9faee0></td><td bgcolor=#a0afe0></td><td bgcolor=#a2b0e1></td>
<td bgcolor=#a3b2e1></td><td bgcolor=#a5b3e2></td><td bgcolor=#a6b4e2></td><td bgcolor=#a8b6e3></td>
<td bgcolor=#a9b7e3></td><td bgcolor=#abb8e4></td><td bgcolor=#adb9e4></td><td bgcolor=#aebbe5></td>
<td bgcolor=#b0bce5></td><td bgcolor=#b1bde6></td><td bgcolor=#b3bfe6></td><td bgcolor=#b4c0e7></td>
<td bgcolor=#b6c1e7></td><td bgcolor=#b7c3e8></td><td bgcolor=#b9c4e8></td><td bgcolor=#bac5e9></td>
<td bgcolor=#bcc6e9></td><td bgcolor=#bec8ea></td><td bgcolor=#bfc9ea></td><td bgcolor=#c1caeb></td>
<td bgcolor=#c2cceb></td><td bgcolor=#c4cdec></td><td bgcolor=#c5ceec></td><td bgcolor=#c7d0ed></td>
<td bgcolor=#c8d1ed></td><td bgcolor=#cad2ee></td><td bgcolor=#cbd4ee></td><td bgcolor=#cdd5ef></td>
<td bgcolor=#cfd6ef></td><td bgcolor=#d0d7f0></td><td bgcolor=#d2d9f0></td><td bgcolor=#d3daf1></td>
<td bgcolor=#d5dbf1></td><td bgcolor=#d6ddf2></td><td bgcolor=#d8def2></td><td bgcolor=#d9dff3></td>
<td bgcolor=#dbe1f3></td><td bgcolor=#dce2f4></td><td bgcolor=#dee3f4></td><td bgcolor=#e0e4f5></td>
<td bgcolor=#e1e6f5></td><td bgcolor=#e3e7f6></td><td bgcolor=#e4e8f6></td><td bgcolor=#e6eaf7></td>
<td bgcolor=#e7ebf7></td><td bgcolor=#e9ecf8></td><td bgcolor=#eaeef8></td><td bgcolor=#eceff9></td>
<td bgcolor=#edf0f9></td><td bgcolor=#eff1fa></td><td bgcolor=#f1f3fa></td><td bgcolor=#f2f4fb></td>
<td bgcolor=#f4f5fb></td><td bgcolor=#f5f7fc></td><td bgcolor=#f7f8fc></td><td bgcolor=#f8f9fd></td>
<td bgcolor=#fafbfd></td><td bgcolor=#fbfcfe></td><td bgcolor=#fdfdfe></td><td bgcolor=#feffff></td>
</tr>
</table>
</span>

<SPAN style='z-index:1;position: relative; top:0;'>
<b><div align=center>Veuillez vous identifier</div></b>
</span>
</td>

</tr>
<tr>
<td align="center"><br>
<form action="login2.php" method="post">
<b>Nom d'utilisateur : </b><input name="nom" type="text"><br>
<b>Mot de passe : </b><input name="pwd" type="password"><br><br>
<input name="" type="submit" value="Login">
</form>
</td>

</tr>
</table>


En faite j'ai crée un script qui génère un dégradé sous forme d'un tableau et j'utilise les calques <span> pour positionner le dégradé en arrière plan d'une cellule d'un tableau. Cet arrière plan doit être de la même hauteur que la cellule c'est pour celà que j'ai utilisé "100%".
Je cherche une solution qui soit compatible avec IE et firefox.

Merci d'avance.
Modifié par porcinet (12 Jul 2005 - 17:22)
Modérateur
Bonjour,

Pourquoi utiliser l'artillerie lourde pour faire ton dégradé lorsque tu pourrais simplement utiliser un gif qui se répète dans le fond de l'élément ?

Il ne faut pas oublier que les tableaux doivent être utilisé uniquement pour afficher des données en lignes et colonnes (données tabulaires), ou dans certains cas d'affichage très particuliers.

N'oublis pas non plus de valider ton document avec le validateur W3C. Si ton document comporte des problèmes de syntaxe, un affichage correcte relève du hasard.

Déjà, dans ton code, je vois que tu met ton tableau dans une balise span, ce qui n'est pas conforme. Une balise inline ne peut pas contenir de balise block. Pour en savoir plus sur les balises de type inline et block, consulte le tutorial à ce sujet.

Je t'invite aussi à lire les articles sur openweb.eu.org et spécialement l'article sur l'utilisation des fonds.
Modifié par Merkel (11 Jul 2005 - 15:31)
J'utilise l'artillerie lourde pour que l'on puisse modifier à volonté les couleurs du dégradé ainsi que la hauteur et la largeur de la cellule juste en remplissant un formulaire.

Je ne suis pas un spécialiste du CSS alors je vais jeter un coup d'oeil sur tout ces liens en espérant y trouvé ma réponse, merci.
Modérateur
porcinet a écrit :
J'utilise l'artillerie lourde pour que l'on puisse modifier à volonté les couleurs du dégradé ainsi que la hauteur et la largeur de la cellule juste en remplissant un formulaire.


Tu pourrais le faire quand même de façon plus propre en permettant à l'utilisateur d'uploader le fond des tableaux, ou encore en lui demandant de choisir les couleurs et ton application web se chargerait de générer en temps réel le gif. Tout dépend si tu as les connaissances pour réaliser une telle chose et si tu as accès aux technologies nécessaires.

Je n'ai pas étudié ton cas, mais déjà, au lieu d'utiliser des span pour positionner tes tableaux, j'utiliserais des div qui est une balise neutre de type block. Évidemment, tu n'es pas obligé de mettre ton tableau dans un conteneur div, tu peux directement positionner le tableau via CSS, sans ajout quelconque.
Je me suis simplifié la tâche en créant un script php qui génère automatiquement une image.

Pour ceux que ça intéresse le voici :
<?
$largeur=$_GET['width'];
$color1=$_GET['color1'];
$color2=$_GET['color2'];

function splitstring($string,$len)
	{
	for($i=0;$i<ceil(strlen($string)/$len);$i++)
   	$rtnarr[$i]=substr($string, $len*$i, $len);
	return($rtnarr);
	}

//string color hexa => array color RVB
function color_hexa2rvb($couleur_hexa)
	{
	$couleur_hexa_rvb=splitstring($couleur_hexa,2);
	$couleur_rvb=array(hexdec($couleur_hexa_rvb[0]),hexdec($couleur_hexa_rvb[1]),hexdec($couleur_hexa_rvb[2]));
	return($couleur_rvb);
	}

//RVB
$couleur1=color_hexa2rvb($color1);
$couleur2=color_hexa2rvb($color2);

//create img dégradé 100px
header ("Content-type: image/png"); 
$img = ImageCreate (100, 1) 
            or die ("Erreur lors de la création de l'image");         
	
	for($i=0;$i<=2;$i++)
		{
		$pas[$i]=($couleur2[$i]-$couleur1[$i])/100;
		}
	
	$couleur_rvb=$couleur1;			
	
	
		for($x=0;$x<100;$x++)
			{
			for($i=0;$i<=2;$i++)
				{$couleur_rvb[$i]=$couleur_rvb[$i]+$pas[$i];}
			$couleur=ImageColorAllocate ($img, $couleur_rvb[0], $couleur_rvb[1], $couleur_rvb[2]);
			ImageSetPixel ($img, $x, 0, $couleur);
			}

//redimension degradé	
	$img2 = imagecreatetruecolor($largeur, 1);
	imagecopyresampled($img2, $img, 0, 0, 0, 0, $largeur, 1, 100, 1);
	ImagePng ($img2); 
?>


Merci pour toutes tes réponses Merkel
Modérateur
Excellent porcinet. Merci d'avoir partagé ton code et je te félicite d'avoir décidé de créer un script qui génère l'image de fond. C'est beaucoup plus propre et c'était la bonne solution. Smiley biggthumpup

Pour ce qui est de la qualité du code PHP, je ne peux en juger étant donné que je fais du Coldfusion, et non du PHP.

Si ton problème est résolu porcinet, je t'invite à ajouter un [Résolu] au début du titre de ton sujet.

Bonne journée ! Smiley smile
Sujet clos
Aller à