Changer l'ordre d'apparition des div avec xslt?

[shopoto]

Bonjour tout le monde!

Admettons que par défaut j'ai une structure html ultra simple:

<div id="global">
	<div id="header"></div>
	<div id="search"></div>
	<div id="results"></div>
	<div id="footer"></div>
<div>

Afin d'optimiser le ref nat, je souhaiterais changer la structure des div en ceci:

<div id="global">
	<div id="header"></div>
	<div id="results"></div>
	<div id="search"></div>
	<div id="footer"></div>
<div>

Mais évidement à l'affichage il faut que la section moteur de recherche ("search") apparaisse toujours avant les résultats.


Pour cela j'ai pas bcp de solutions:
Soit j'utilise :
-Jquery : Je sais faire, c'est pas le pb.
Le pb c'est dans le cas des navigateur qui bloque l'utilisation du Javascript...
et oui il y en a ! Donc exit Js et Jquery

-XSLT ou XSL je sais pas bien...
Je souhaiterais donc, des la fin du chargement de la page, déplacer mon container "results" juste après le container "search" a l'aide d'une feuille xsl (ou xslt..)

Quelqu'un a déjà pensé à et/ou utilisé cette technique?
Si oui comment faire?

Merci d'avance!

 

[CARREZ]

Sauf erreur le XSL et XSLT c'est pour mettre en forme du XML pas du HTML.

Il faut utiliser du CSS pour ça, avec la position absolute, en fonction de la complexité de la charte graphique c'est possible. Et accessible !
Si la div "search" à une hauteur qui ne change jamais c'est assez simple à faire en CSS.

Par contre je ne sais pas dans quelle mesure ce n'est pas une "fraude" d'afficher le contenu dans un ordre différent du code source.

 

[shopoto]

Je ne pense pas que ce soit une fraude...
Quand bien même je prend le risque!
Je ne peux utiliser la solution css car mes deux conteneurs search et results ont bien une hauteur variable!
D' ou mon intérêt pr XSL.
De plus Xsl est en effet utilise pr XML mais le html dérive bien du XML
dc xsl doit pouvoir manipuler du html.
Quelqu un saurait faire?

 

[CARREZ]

Pour faire ça, il faut changer un peu la structure du html, ajouter un conteneur ça sera plus simple :

<div id="global">
   <div id="header"></div>
   <div id="contenu">
      <div id="results"></div>
      <div id="search"></div>
   </div>
   <div id="footer"></div>
<div>

Pour que la div search se positionne par rapport à contenu :
#contenu {position: relative; padding-top: XXXpx;}
Avec XXXpx la hauteur de la div search en px

Pour mettre la div searchen haut du contenu
#search {position: absolute; top: 0;}

Normallement ça devrait suffir pour inverser visuellement les deux blocs
Le CSS peut se mettre aussi directement dans les div d'ailleurs !