Notice: Undefined index: HTTP_64 in
/homepages/18/d292512461/htdocs/wp-content/plugins/wp-syntax/geshi/geshi.php on line
1947
Dernièrement, je chercher à faire ce qui suit,
pour un code html brute comme celui-ci :
1
2
3
4
5
| <div class="conteneur">
<div class="element1">element 1</div>
<div class="element2">element 2</div>
<div class="element3">element 3</div>
</div> |
obtenir un affichage comme celui-là:
1
2
3
4
5
| <div class="conteneur">
<div class="element1">element 1</div>
<div class="element3">element 3</div>
<div class="element2">element 2</div>
</div> |
En bref, pouvoir inverser deux balise DIV, et seulement avec du CSS tant qu’à faire. Mais pourquoi faire me direz-vous?
Le code html est généré dynamiquement, je n’est pas la main dessus. Il me restait donc du javascript, ou du CSS.
J’ai pas mal galèré, mais je suis tombé sur ce blog :
www.tomsyweb.com
ou encore, celui-ci :
hacks.mozilla.org
Pour y arriver, il m’a juste fallut rajouter ces petites lignes de code à mon fichier CSS.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| .conteneur {
-webkit-box-orient: vertical;
display: -webkit-box;
-moz-box-orient: vertical;
display: -moz-box;
box-orient: vertical;
display: box;
}
.element2 {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
} |
Alors effectivement ce bout de code est du CSS3. Survient alors un inconvénient majeur à cette méthode, le manque de compatibilité avec tous les navigateurs internet sur le marché ( IE pour ne siter que lui 
).
Firefox en version 3.0+, ou Chrome en version 5.0+, ainsi que Safari en version 3.2+ (en utilisant le préfixe -moz- ou -webkit-) supportent ces propriétés.
