Span right et activeX flash

Bonjour à tous!! J'ai un petit problème pour lequel j'espère qu'il existe une solution. J'ai inséré un span right sur le code suivant :

<ul>
<select onChange="location = this.options
[this.selectedIndex].value">
<option value="" selected>Selection rapide<option>
<option value="couverts.php">Couverts</option>
<option value="assiettes.php">Assiettes</option>
<option value="verres.php">Verres</option>
<option value="../wb/index.html">La boutique</option>
</select>
	<li><a href="index.php">Accueil</a></li>
	<li><a href="contact.php">Nous contacter</a></li>
	<li><a href="../wb/index.html">La boutique</a></li>
<span><select onChange="location = this.options
[this.selectedIndex].value">
<option value="" selected>Style<option>
<option value="<?php echo $actuel; ?>?style=defaut">Black</option>
<option value="<?php echo $actuel; ?>?style=fushia">Fushia</option>
</select></span>
</ul>

Je suis sur une seule ligne normalement. Safari, IE 6 et IE 7 comprennent parfaitement et me mettent l'ensemble sur une ligne, par contre Firefox me place bien la liste à droite, mais une ligne en dessous. Y a-til un moyen d'éviter cela et de mettre tout sur une seule ligne? Ci-dessous le css :

#recherche {
	background: #333;
	width: 800px;
	height: 25px;
	margin-top: 2px;
	margin-bottom: 0px;
}

#recherche ul {
	margin: 0px;
	padding: 0px;
	font-size: 12px;
}

#recherche li {
	list-style-type: none;
	display: inline;
}

#recherche span {
	float: right;
	_margin-top: -22px;
}
	*+html #recherche li span {
	/* Cette portion de code est interprétée exclusivement par IE7 */
	margin-top: -22px;
}

#recherche a {
	padding-right: 5px;
	padding-left: 5px;
	color: white;
	text-decoration: none;
	text-align: center;
	font-size: small;
	_font-size: 12px;
}

#recherche a:hover {
	color: fuchsia;
	text-decoration: underline;
}

Ma question suivante porte sur l'activeX d'IE7. J'integre une anim flash dès la première page et les visiteurs ne peuvent bénéficier de l'animation sauf s'ils cliquent d'abord dessus. J'ai essayé a méthode backtothehtml mais cela brouille mon code pour les autres navigateurs dans la mesure ou il faut remplacer le flashvars par swremote, donc IE7 reconnait bien mais plus les autres!!! Voici le code :

<script type="text/javascript" src="flash/galerieaccueil/swfobject.js"></script>
<script type="text/javascript" src="flash/galerieaccueil/bz.js"></script>
<object id="bzAnimation" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="638" height="200">
	<param name="movie" value="flash/galerieaccueil/bzAnimation.swf"></param>
	<param name="wmode" value="transparent"></param>
	<param name="allowScriptAccess" value="always"></param>
	<param name="FlashVars" value="swfId=bzAnimation&xmlPath=flash/galerieaccueil/bz.xml&imgPath=flash/galerieaccueil/img&urlType=_top"></param>
	<!--[if !IE]>-->
	<object type="application/x-shockwave-flash" data="flash/galerieaccueil/bzAnimation.swf" width="638" height="200">
		<param name="wmode" value="transparent"></param>
		<param name="allowScriptAccess" value="always"></param>
		<param name="FlashVars" value="swfId=bzAnimation&xmlPath=flash/galerieaccueil/bz.xml&imgPath=flash/galerieaccueil/img&urlType=_top"></param>
	<!--<![endif]-->
	<p style="background-color:#ffffff;color:#000000;padding:1em;">Vous avez une ancienne version du player flash. <a href="http://www.adobe.com/go/getflash/" target="_top">Vous pouvez mettre à jour votre version ici.</a></p>
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>

Voila je vous remercie pour les solutions que vous pourriez m'apporter, j'ai essayé pas mal de choses mais la je ne sais plus quoi faire...

A bientot

Bonjour,

Pour la première question, il faudrait commencer par corriger le code HTML qui est très faux. On ne peut pas travailler correctement à partir d'un code invalide.

Pour la deuxième question, on peut insérer l'animation Flash avec SWFObject par exemple.

Bonjour Merci de ta réponse. En quoi le code est-il faut? Quelles sont les corrections à apporter? Je débute dans la prog et je ne vois pas bien encore mes fautes. Je cherche, sur une ligne horizontale, a mettre : une liste déroulante, un lien accueil, un lien nous contacter, un lien boutique et dans cette même ligne tout à droite, une autre liste déroulante avec le styleswitcher. Apparemment, j'ai tout faut puisque mon code est à refaire Je te remercie de ton aide.

ywan a écrit :
En quoi le code est-il faut?

Les éléments span et select ne peuvent pas être des enfants de l'élément ul. Les seuls enfants autorisés pour ul sont des éléments li.

ywan a écrit :
Je cherche, sur une ligne horizontale, a mettre : une liste déroulante, un lien accueil, un lien nous contacter, un lien boutique et dans cette même ligne tout à droite, une autre liste déroulante avec le styleswitcher.

Un formulaire avec un paragraphe contenant un select (et un bouton pour la validation), puis une liste de trois items (les trois liens), puis un deuxième formulaire avec un deuxième paragraphe contenant là encore un select (et un bouton pour la validation). Le tout dans un div avec un identifiant, disons "header". Ensuite, côté CSS:

div#header form,
div#header p,
div#header ul,
div#header li {
	display: inline;
	margin: 0;
	padding: 0;
}

Quelque chose du genre.

Et le code HTML que j'évoquais, in extenso:

<div id="header">
	<form action="..." method="post">
		<p>
			<select>
				<option>...</option>
				<option>...</option>
			</select>
			<input type="submit" value="ok" />
		</p>
	</form>
	<ul>
		<li><a href="...">...</a></li>
		<li><a href="...">...</a></li>
		<li><a href="...">...</a></li>
	</ul>
	<form action="..." method="post">
		<p>
			<select>
				<option>...</option>
				<option>...</option>
			</select>
			<input type="submit" value="ok" />
		</p>
	</form>
</div><!-- #header -->

Super, je te remercie beaucoup Florent!! Je teste ça demain matin et je te dis ce qu'il est. A +++

Bonjour Florent. J'ai essayé ton code, il fonctionne parfaitement bien et je t'en remercie. Cependant, le problème reste identique pour Firefox. Tout se passe tres bien sur IE6 et 7 et sur Safari, mais Firefox refuse de m'aligner ma liste de droite sur les éléments de gauche. Ci-dessous le code et ensuite le css :

<div id="header">
	<form action="liste" method="post">
		<p>
			<select onChange="location = this.options
			[this.selectedIndex].value">
			<option value="" selected>Selection rapide<option>
			<option value="couverts.php">Couverts</option>
			<option value="assiettes.php">Assiettes</option>
			<option value="verres.php">Verres</option>
			<option value="../wb/index.html">La boutique</option>
			</select>
		</p>
	</form>
	<ul>
		<li><a href="index.php">Accueil</a></li>
		<li><a href="contact.php">Nous contacter</a></li>
		<li><a href="../wb/index.html">La boutique</a></li>
	</ul>
	<div class="right">
	<form action="style" method="post">
		<p>
			<select onChange="location = this.options
			[this.selectedIndex].value">
			<option value="" selected>Style<option>
			<option value="<?php echo $actuel; ?>?style=defaut">Black</option>
			<option value="<?php echo $actuel; ?>?style=fushia">Fushia</option>
			</select>
		</p>
	</form>
	</div>
</div><!-- #header -->

Et le css :

#header {
	width: 800px;
	height: 20px;
	margin: 0;
	padding: 0;
	background-color: #e6e6e6;
}

#header li {
	font-size: 12px;
}

.right {
	float: right;
}

div#header form,
div#header p,
div#header ul,
div#header li,
div.right {
	display: inline;
	margin: 0;
	padding: 0;
}

Sincèrement, je ne comprend plus grand chose.. EN général, Safari et Firefox sont les plus simpa, ils comprennent de suite ce que j'essaye de lur dire et je galère avec IE, mais là, je suis vraiment perdu. La méthode qui fonctionne sous Firefox, est de mettre un "margin-top: -22 !important". Cette méthode pas géniale me permet d'avoir ma liste de droite alignée sur les autres de gauche mais Safari l'interprete également, donc je ne peux pas mettre ça, sinon Safari me met cette liste en hauteur....

Merci de votre aide A bientot.

Bonjour ywan,

Avec les paramètres qui suivent, j'ai un rendu "quasiment" identique sous IE6, IE7, Firefox, Safari et Opéra ( sous Windows XP )

#header {
	width: 800px;
	height: [#blue]30px;[/#] 20px, c'est un peu juste...
	margin: 0;
	padding: 0;
	background-color: #e6e6e6;
}
.right {
	[#blue]position:relative;
	left:380px;[/#]
}

En attendant d'autres propositions, tu peux tester celle là

Cdt,
Sylvain

Sylvain, utiliser le positionnement relatif pour décaler un bloc de 380px vers la droite me semble un peu hasardeux. Je ne partirais pas sur ce genre de solution dans ce cas.

Ywan,

1. Ne pas figer la hauteur de div#header. Autant la laisser s'adapter à son contenu.

2. Ton div.right est à priori inutile: tu as déjà un élément form que tu devrait pouvoir positionner correctement. Cependant, il me semble avoir rencontré des problèmes en tenant de positionner un élément form, donc c'est peut-être sage de fonctionner ainsi.

3. Je pense que le problème avec Firefox est dû à une implémentation légèrement erronée de la propriété float. Je ne rentre pas dans les détails, mais comme en plus il me semble que Firefox n'est pas le seul à avoir ce problème il vaut mieux fonctionner autrement.

4. Si tu veux placer une partie à gauche et une partie toute à droite, fais deux div (div.left et div.right) et fais flotter le premier à gauche et le second à droite, ça marchera très bien. Ce qui donnerait une structure du genre:

<div id="header">
	<div class="left">
		<form>...</form>
		<ul>...</ul>
	</div><!-- .left -->
	<div class="right">
		<form>...</form>
	</div><!-- .right -->
</div><!-- #header -->

Il faudra donner une largeur aux deux flottants (en px ou en %), et à priori éviter que les flottants ne dépassent de leur conteneur (div#header).

Bonjour à tous et merci beaucoup pour vos réponses!! Je vais conserver la solution de Sylvain pour le moment; l est vrai que c'est un peu hazardeux et le rendu n'est pas parfait sur toutes les pages, mais cela fonctionne bien. Je prendrais le temps par la suite de faire un distingo class left et class right.
Pour info, voici l'adresse du site www.adiserve.fr/testphp[/url], vous pourrez voir le travail accompli et si quelque chose vous choque, n'hésitez pas à m'en faire part, j'aime avoir l'avis de pro, ça aide à grandir.

Merci à vous et à bientot.

Bonjour ywan,

Hazardeux ne semble pas le terme...
Florent avait encore une fois tout à fait raison ( ), ma proposition merdouille sous Firefox, je viens de faire le test avec celle proposée par Florent : résultat sans appel : Florent-1/Sylvain-0
La modif ne prend que 30 secondes, et je t'encourage vivement à la mettre en place (vérifiée sous les même navigateurs que précédemment)

Toutes mes excuses pour cette fausse bonne idée

Cdt,
Sylvain

Salut, t'inquiete Sylvain, l'important c'est d'apporter des solutions, je ne suis pas sur de pouvoir aider qui que ce soit dans l'etat actuel de mes connaissances
Cela dit, ta technique fonctionne qd meme bien, meme si le "form" sort un peu du cadre sous Firefox.

Merci tout de meme, a +++

Re-bonjour tout le monde
J'ai fait comme Florent a dit (2 class left et right) et tout fonctionne à merveille, et ce sur n'importe quel navigateur (enfin, pas essayé avec Opéra...). Je tiens à vous remercier tous pour votre aide précieuse dans ces moments ou on se dit qu'on a vraiment rien à faire dans la prog...
A ++