28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
le titre de mon sujet étant clair, vous comprenez de quoi il s'agit !
Je suis lentement en train de mettre en place un menu pour mon site/Galerie d'illustrateur à 2 balles ! Le menu s'affiche très bien sous I.E mais pas sous Firefox ...
Il y a un petit espace très gênant entre mon logo animé "Chat box" et la shoutbox en question.
Je ne suis pas un fou du code, et je me doute que le soucis vient de là.
Est-ce que vous pouvez éventuellement me dire d'où le soucis pourrait venir ?
Je vous remercie infiniment. ^__^

Page : http://octokom.free.fr/Chaman/HTML/Tot.html

Code de ma 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body>

			<!-- Menu en CSS >--> 

<div id="menu">
<ul>
		  <li><img src="../../Images/Interface/Menu/entete.png" width="150" height="132" /><br />
	 	  <li><a href="#1" title="">|Acceuil-</a></li>
			<li><a href="#2" title="">|Galerie-</a></li>
			<li><a href="#3" title="">|Contact-</a></li>
			</li>
  <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="150" height="130">
			  <param name="movie" value="../../Images/Interface/Menu/bas.swf" />
			  <param name="quality" value="high" />
			  <param name="wmode" value="opaque" />
			  <param name="swfversion" value="6.0.65.0" />
			  <!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
			  <param name="expressinstall" value="Scripts/expressInstall.swf" />
			  <!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
			  <!--[if !IE]>-->
			  <object type="application/x-shockwave-flash" data="../../Images/Interface/Menu/bas.swf" width="150" height="130">
			    <!--<![endif]-->
			    <param name="quality" value="high" />
			    <param name="wmode" value="opaque" />
			    <param name="swfversion" value="6.0.65.0" />
			    <param name="expressinstall" value="Scripts/expressInstall.swf" />
			    <!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
			    <div>
			      <h4>Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.</h4>
			      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" width="112" height="33" /></a></p>
		        </div>
			    <!--[if !IE]>-->
		      </object>
			  <!--<![endif]-->
  </object>
			<img src="../../Images/Interface/Menu/entre.png" width="150" height="6" /><br />
<iframe src="http://www.i-tchat.com/shoutbox/shoutbox.php?idShoutbox=60724" width="150" height="150" frameborder="0" allowtransparency="true" >Votre navigateur semble incompatible, essayez d'ouvrir le <a href="http://www.i-tchat.com" onclick="window.open(this.href+'?60724');">tchat</a>, ou rencontrez le webmaster pour plus d'informations.</iframe>
<object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="150" height="30">
  <param name="movie" value="../../Images/Interface/Menu/superbas.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="opaque" />
  <param name="swfversion" value="6.0.65.0" />
  <!-- Cette balise <param> invite les utilisateurs de Flash Player en version 6.0 r65 et ultérieure à télécharger la version la plus récente de Flash Player. Supprimez-la si vous ne voulez pas que cette invite soit visible. -->
  <param name="expressinstall" value="Scripts/expressInstall.swf" />
  <!-- La balise <object> suivante est destinée aux navigateurs autres qu'IE. Supprimez-la d'IE à l'aide d'IECC. -->
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="../../Images/Interface/Menu/superbas.swf" width="150" height="30">
    <!--<![endif]-->
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="6.0.65.0" />
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- Le navigateur affichera le contenu alternatif suivant pour les utilisateurs d'un lecteur Flash de version 6.0 ou de versions plus anciennes. -->
    <div>
      <h4>Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.</h4>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtenir le lecteur Adobe Flash" width="112" height="33" /></a></p>
    </div>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
<br />
</ul>
<br />

 <!-- Image de bas de menu --><script type="text/javascript">
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID2");
 </script>
</body>
<link rel="stylesheet" type="text/css" href="../../Style.css">
</html>




[Edit : Excuse moi d'avoir oublié la balise "code" ! Smiley confused ]
Modifié par Mr.Gerald (13 Jun 2010 - 15:35)
Salut et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Bonne continuation Smiley smile

upload/1-code.gif
Oui il es un poil plus prononcé, j'ai due ruser en intégrant un mini dégradé en bas de mon flash, et en haut de la chat box.
Si j'enlève ces petits bouts d'images, j'ai un trou que je ne peux gérer ! Smiley ohwell
Salut,

En éliminant le <br /> après ton image non? Smiley smile
et en fermant le <li>
Modifié par ghost (13 Jun 2010 - 16:43)
Je viens de trouver !!!! °_O
dans Dreamweaver lorsque l'on insère un flash, tout en bas il faut régler le Wmode.
En transparent ça passe mieux, mais étrangement ca décale le flash vis à vis de l'alignement de mon tableau. Par déffaut ça créait une ligne verticale blanche d'un pixel sur le bord droit de mon flash. En mode "Fenêtre" et "opaque" c'est la même chose.
Il n'y a que en "Transparent" que ça passe un poil mieux outre ce décalage très moche !
Je commence à croire que le flash est une saleté Smiley ohwell


PS : Finalement ça ne remarche plus du tout ! >_< Je crois que je vais craquer !!!
Modifié par Mr.Gerald (13 Jun 2010 - 20:37)
Administrateur
Mr.Gerald a écrit :
Je commence à croire que le flash est une saleté Smiley ohwell

Alors qu'en fait c'est peut-être Dreamweaver la "saleté" Smiley rolleyes Ou les deux ou aucun des deux Smiley rolleyes

Bien passe dans le mode code de ton éditeur favori et c'est parti :
- comme l'a fait remarquer ghost, il faut que tu élimines ce <br> final et que tu corriges tes items de liste. Une liste (ul) ne peut et ne doit avoir comme enfant que des <li>, rien d'autre. Dans ces <li> tu mets à peu près ce que tu veux, c'est donc pas un réel problème de corriger ça. Si tu ne le fais pas, le navigateur prend ton code et essaie de le corriger de lui-même, en général pas comme tu crois qu'il le ferait ni comme un "fou du code" le ferait ...
- passe ton code au validateur HTML du W3C, ton code a 0 faute parfait Smiley smile Sinon corrige.
- tes <object> sont maintenant entourés d'un élément <li> (enfin entourés des deux balises <li> et </li>). Pardon ton object et ton iframe en-dessous. Tu dois modifier leur alignement vertical et fixer :
vertical-align: top;

- corrige l'alternative de tes objets.
a écrit :
Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.
ça dit pas grand chose sur ce qu'il se passerait si l'objet Flash voulait bien s'afficher sur mon navigateur. Est-ce que c'est super important ou bien un détail ? Si ça pouvait dire que c'est une chatbox (ou mieux que ça permet de discuter avec les autres visiteurs du site, tout le monde ne sait pas ce que c'est ni même que ça ne fait pas miaou) et que ça nécessite minimum telle version précise de Flash ce serait encore mieux Smiley cligne Et je sais pas si le chat (l'animal) tout en bas fait du bruit ou sert à quoi que ce soit à part un jeu de mot chat-tchatter et chat-l'animal, porter à confusion à cause de ce jeu de mot mais peut-être qu'il pourrait être remplacé par une simple image et ne pas avoir d'alternative puisque si ça ne s'affiche pas le visiteur ne rate aucune information, c'est juste de la déco.