[RESOLU] Positionnement en css pur cross-browser

Bonjour,

Dans le cadre d'une refonte de notre site, nous cherchons à faire du javascript le moins obstructif possible, voire complètement non-ostructif, comme nous essayons de le faire ici :
Nous avons ainsi créé cette une liste verticale contenant des éléments li à côté duquel vient se positionner le bloc <form> après chaque clic sur le li en question (le clic provoque l'A/R au serveur). Ou plutot devrait car je n'arrive pas à faire cette animation en css pur.
Ma question est : cela est-il possible tout en conservant la compatibilité cross-browser?

Notre idée pour résoudre ça serait d'insérer, server-side, un attribut inline "style" sur le <form> contenant la nouvelle valeur de top. Mais alors nous ne pouvons choisir qu'un navigateur...

<div id="languageContainer">
    <h2>FR</h2>
    
	<ul>
		<li id="currentFlag"><a href="/Customer/Translation.mvc/Edit/195/1"><img src="img/flags/GB.png"  ></img></a></li>
		<li><a href="/Customer/Translation.mvc/Edit/195/2"><img src="img/flags/FR.png"  ></img></a></li>
		<li><a href="/Customer/Translation.mvc/Edit/195/3"><img src="img/flags/NL.png"  ></img></a></li>
		<li><a href="/Customer/Translation.mvc/Edit/195/5"><img src="img/flags/DE.png"  ></img></a></li>
		<li><a href="/Customer/Translation.mvc/Edit/195/6"><img src="img/flags/SE.png"  ></img></a></li>
		<li><a href="/Customer/Translation.mvc/Edit/195/7"><img src="img/flags/ES.png"  ></img></a></li>
		<li><a href="/Customer/Translation.mvc/Edit/195/8"><img src="img/flags/IT.png"  ></img></a></li>
		<li><a href="/Customer/Translation.mvc/Edit/195/9"><img src="img/flags/PT.png"  ></img></a></li>
		<li><a href="/Customer/Translation.mvc/Edit/195/10"><img src="img/flags/JP.png"  ></img></a></li>
		<li><a href="/Customer/Translation.mvc/Edit/195/11"><img src="img/flags/DK.png"  ></img></a></li>
		<li><a href="/Customer/Translation.mvc/Edit/195/12"><img src="img/flags/RU.png"  ></img></a></li>
		<li><a href="/Customer/Translation.mvc/Edit/195/13"><img src="img/flags/GR.png"  ></img></a></li>
		<li><a href="/Customer/Translation.mvc/Edit/195/14"><img src="img/flags/CZ.png"  ></img></a></li>
		<li><a href="/Customer/Translation.mvc/Edit/195/15"><img src="img/flags/PL.png"  ></img></a></li>
	</ul>

    
	<form action="/Customer/Translation.mvc/Edit/195" method="post">
		<textarea cols="20" id="Value" name="Value" rows="2">
			R&#232;gles de contr&#244;le
		</textarea>
	        <input type="submit" value="Save" />
	</form>
</div>

#languageContainer  ul{
	display:inline-block;
}
#languageContainer  ul  li{
	list-style-type:none;
	padding: 10px;
	width: 40px;
	height:20px;
	background-color: white;
}

#languageContainer  ul  li:hover{
	background-color: orange;
}
#languageContainer  ul  li#currentFlag{
	background-color: orange;
}


#languageContainer  form{
//	border: solid 1px green;
	display:inline-block;
	position: relative;
	top: -493px;
	left:-5px;
	padding: 10px;
	background-color: orange;
}
#languageContainer  form p {
	display:inline-block;
	padding:0px;
	margin:0px;
}

J'ai vu que les règles du forum impliquent de mettre une url mais je n'en ai pas à disposition ; j'espère que la simplicité de mon code vous permettront de m'aider quand même.

Merci !
Modifié par ordiminnie (19 Aug 2010 - 11:48)

J'explique très mal ou bien ...? Je suis étonnée de n'avoir même pas une réponse.

Bonjour,

Si je comprend bien, c'est un menu sur une colonne, avec un choix de langue qui serait enregistré pour que l'utilisateur n'ai pas à refaire un choix lorsqu'il revient, je me trompe ? Pourquoi du javascript, et surtout, où est-il ? Je voit du Php, du html et du CSS, mais pas de javascript

Quel est l'effet demandé ou voulu ?

Je suis pas sûr d'être en phase, mais un peu plus de détails seraient les bienvenues.

Bonne chance !

Bonjour,

Les images sont des balises auto-fermantes, alors il vaudrait mieux les écrire ainsi :

<img />

Concernant ta question, je ne suis pas certain d'avoir bien saisie l'objectif. Je vais tout de même y aller de deux propositions.

Option 1
Dans un formulaire, tu présentes la liste des drapeaux avec des input type radio. L'utilisateur clique sur le bon input radio, puis clique sur Sauvegarder.

Option 2
Toujours dans un seul formulaire, tu présentes la liste des drapeaux. Le drapeau lui-même est un input type image. Ce type d'input se comporte sensiblement comme un input submit. Donc, en cliquant sur le drapeau, le formulaire sera soumis et ton script côté serveur pourra connaître le drapeau sélectionné et sauvegarder le choix de l'utilisateur.

À noter que pour l'option 2, il faut vérifier ce que les différents navigateurs transmettent lors du clic. Il y a une légère variation selon le navigateur, mais cela reste tout de même une solution facile à mettre en place et efficace, si l'objectif est de réduire le nombre de clic à un minimum.
Modifié par Tony Monast (03 Jul 2010 - 13:33)

Bonjour et merci pour vos réponses.
Le projet a été remis à plus tard et j'ai un peu oublié cette question...désolée.

Je me rends compte que j'explique très mal car vous n'avez pas compris. Je reprends donc :

- je souhaite faire une animation en css pur (pas de javascript)
- elle consiste à faire bouger un <form>, verticalement, le long d'une liste verticale présentant des drapeaux
- Fonctionnement :
1/ au chargement de la page, le form est positionné au niveau du 1er drapeau
2/ l'utilisateur clique sur le 4ème drapeau
3/ le form glisse vers le bas et s'arrête au niveau du 4ème drapeau.

Information supplémentaire : il est possible d'implémenter un A/R au serveur lorsque l'utilisateur clique sur le drapeau, si cela est utile pour cette animation (par exemple pour mettre un id="currentFlag" sur le drapeau qui vient d'être cliqué)

Pour ceux que ça aide à comprendre, voici à quoi sert la page :
Elle permet de traduire un mot en différente langage. On clique sur le drapeau, rentre la traduction équivalente et sauve en cliquant sur submit.

J'espère avoir été plus claire cette fois. Merci
Modifié par ordiminnie (18 Aug 2010 - 16:45)

Salut,

un déplacement d'élément est plutôt fait en JavaScript. Cela devient possible avec les transitions CSS3 mais c'est encore très mal implémenté.

Je ne comprend pas bien l'intérêt de déplacer le form (et à ma connaissance en CSS, on ne peut pas modifier le code HTML).
Pourquoi ne pas avoir un form qui englobe tous les drapeaux et simplement utiliser un bouton radio (ou équivalent) pour connaitre la langue sélectionnée ?

ex :

<form>
<input type="radio" name="langue" value="fr">
<input type="radio" name="langue" value="en">
<input type="radio" name="langue" value="de">
<input type="radio" name="langue" value="it">
</form>

@Heyoan : merci, c'est exactement le genre de réponse que je recherchais. Même si j'aurais préféré que ce soit possible évidemment...

@RACBasket: Pour avoir un joli petit effet sympa pour l'utilisateur.

Pour l'instant, j'ai positionné en absolu mon élément avec un parent qui englobe tout le monde, positionné en relatif. Je calcule la nouvelle valeur de top en server-side (quand l'utilsateur clique sur le drapeau) en fonction du drapeau sur lequel on a cliqué (ex: 5 drapeau x 30px de hauteur).
Heureusement, l'appli est faite avec une architecture MVC et c'est si bien caché (caching) qu'on ne voit pas le rafraichissement de la page.

Pour mieux faire, faudra une couche de js, avec un petit slide tout smooth...

Merci de votre aide !
Modifié par ordiminnie (19 Aug 2010 - 11:48)

ordiminnie a écrit :
@RACBasket: Pour avoir un joli petit effet sympa pour l'utilisateur.

Je comprend bien, mais le fait d'englober tous tes éléments dans un form n'empêche pas de mettre en place "un joli petit effet sympa pour l'utilisateur" ou alors je ne comprend pas bien ce que tu cherches à faire.

ah oui, ce qui te dérange, c'est de déplacer le form ? Il est vrai que je pourrais englober tous les éléments avec le form et mettre un div autour de mon input et de mon bouton pour pouvoir les déplacer séparément des drapeaux.
Sans rentrer dans les détails de l'appli, je n'ai pas tellement intérêt à avoir les drapeaux dans mon form, donc je n'ai pas fait ça comme ça.

J'espère que je te laisse pas sur ta faim, dans l'incompréhension la plus totale mais j'ai un peu la flegmme de rentrer dans les détails. Tant que t'en perds pas le sommeil, tout va bien !

merci encore !
Modifié par ordiminnie (27 Aug 2010 - 09:10)