Bonjour à tous et à toutes,

(Pour faire court) J'ai une série d'éléments (des DIV en l'occurrence) qui sont dans un certain ordre :
Élément 1
Élément 2
Élément 3
Élément 4
Élément 5
Élément 6
Élément 7
Je souhaiterait qu'ils apparaissent dans cet ordre :
Élément 1
Élément 3
Élément 4
Élément 5
Élément 6
Élément 7
Élément 2
Autrement dit, je souhaiterai que l'Élément 2 passe en dernière position.

Problème (de taille) : Je n'ai pas accès au code HTML (ça serait trop simple), mais uniquement au code CSS
D'où ma question : Comment changer l'ordre d'une série d'éléments en CSS uniquement ?

Je vous remercie par avance pour votre aide.
Bonne journée Smiley cligne

P.S : J'ai essayé avec un transformation : translateY(660px), ça déplace bien l'Élément 2, mais l'Élément 3 ne prend pas la place de l'Élément 2 Smiley decu
Modifié par spip93 (15 Oct 2019 - 15:49)
Tu as accès au CSS et pas au code ??????? si tu as ton url à nous indiquer, je peux regarder quoi faire, parce que ce que tu indique est enfantin mais si tu places en position fixe par CSS es-tu certain que ces div's ne sont pas déjà fixés en emplacement ?
@bacasable
Ça fonctionne, merci, sauf que ça me fait sauter toute ma mise en page.
Une idée sur la raison et (surtout) comment résoudre le problème ?

@Jean-Pierre
Je t'envoie l'URL en MP
Modifié par spip93 (16 Oct 2019 - 11:04)
C'est bon, j'ai résolu le problème.
L'élément parent n'était pas sur toute la largeur avec une valeur en pourcentage, mais une valeur en pixels. C'est maintenant sur toute la largeur.
Ensuite, j'ai mis un margin-top et un margin-left.
C'est loin d'être propre (ça reste de la bidouille), mais ça fait le job Smiley lol
Administrateur
spip93 a écrit :
C'est loin d'être propre (ça reste de la bidouille), mais ça fait le job Smiley lol

Hello,

Qu'est-ce qui t'a empêché d'utiliser la solution proposée par bacasable qui est de loin la plus propre pour ce job ?
(ce n'est pas ironique, j'aimerais vraiment savoir)
@Raphael
spip93 a écrit :
@bacasable
Ça fonctionne, merci, sauf que ça me fait sauter toute ma mise en page.
Une idée sur la raison et (surtout) comment résoudre le problème ?
spip93 a écrit :
C'est bon, j'ai résolu le problème.
L'élément parent n'était pas sur toute la largeur avec une valeur en pourcentage, mais une valeur en pixels. C'est maintenant sur toute la largeur.
Ensuite, j'ai mis un margin-top et un margin-left.
C'est loin d'être propre (ça reste de la bidouille), mais ça fait le job Smiley lol

Tu n'as rien résolu du tout, tu a figer pour une vision grand écran la position de ce div par

.limitto .language {
    margin-top: 450px;
    margin-left: -200px;
}

Alors bien sur sur tablette ou pire, sur portables c'est un désastre, comme je te l'ai dit je vais regardé cela ce soir et demain, puisque tout le css que tu maîtrise est dans le code de la page elle même !
tout les autres (un vingtaine de CSS sont appelés et non modifiable !
il faudra donc agir en ajoutant important! sur ce CSS ,pas sur que j'y arrives.
Administrateur
Jean-Pierre-Bruneau a écrit :

Alors bien sur sur tablette ou pire, sur portables c'est un désastre.

... Ou tout simplement si l'utilisateur change sa taille de police, ce qui est bien plus fréquent qu'on ne le pense Smiley ohwell

La propriété "order" effectue parfaitement ce boulot, je le répète.

spip93 a écrit :

Ça fonctionne, merci, sauf que ça me fait sauter toute ma mise en page.

Oui justement, c'est bien ce que j'aimerais comprendre. Mais c'est difficile de deviner ce qui est cassé sans aucun indice.
Modifié par Raphael (17 Oct 2019 - 09:58)
Si j'ai bien compris le css que le moteur de son site lui permet de modifier, à mon sens ce n'est pas suffisant pour résoudre son problème

<style id="appendedstyle" type="text/css">#dk-main .dk-headerobject {display:none;}#dk-main .dk-header-jpeg, #dk-main .dk-header-png  {display:none;}#dk-main .dk-header {
                                border-top-left-radius:5px;
                                border-top-right-radius:5px;
                                background-position: center center;
                                background-repeat:no-repeat;
                                background-image:url("http://1283617105723510294.opac3d.fr/public/1283617105723510294/banner_fr-1.jpg");
                                z-index:0;
                           }#dk-main .dk-logo  {top:10px;margin-left:0px;}
#blocksearch .dk-blockcontent .dk-blockcontent-tl, #blocksearch .dk-blockcontent .dk-blockcontent-tr, #blocksearch .dk-blockcontent .dk-blockcontent-bl, #blocksearch .dk-blockcontent .dk-blockcontent-br, #blocksearch .dk-blockcontent .dk-blockcontent-tc, #blocksearch .dk-blockcontent .dk-blockcontent-bc, #blocksearch .dk-blockcontent .dk-blockcontent-cl, #blocksearch .dk-blockcontent .dk-blockcontent-cr, #blocksearch .dk-blockcontent .dk-blockcontent-cc, #blocksearch .dk-blockcontent .dk-blockcontent-body, #blockcms-X28 .dk-blockcontent-tl, #blockcms-X28 .dk-blockcontent-tr, #blockcms-X28 .dk-blockcontent-bl, #blockcms-X28 .dk-blockcontent-br, #blockcms-X28 .dk-blockcontent-tc, #blockcms-X28 .dk-blockcontent-bc, #blockcms-X28 .dk-blockcontent-cl, #blockcms-X28 .dk-blockcontent-cr, #blockcms-X28 .dk-blockcontent-cc, #blockcms-X28 .dk-blockcontent-body {background:#1caba3;}

.dk-hmenu a .r, .dk-hmenu a .l {background:#1caba3;}

.dk-footer-body {background:#1caba3;}

.dk-blockcontent-body a, .dk-blockcontent-body a:link {color:#1caba3 !important;}

#blockcms-X20 .dk-blockcontent-body a {color:#1caba3 !important;}

.dk-sidebar2 .node-basket .feed-item-description, .dk-sidebar1 .node-basket .feed-item-description{display:none !important;}

#customized-header img{border:0px solid white;}

.dk-postcontent a:link {color:#1caba3 !important;}

.limitto .td.format.last:nth-child(8),
.limitto .td.format.last:nth-child(9),
.limitto .td.format.last:nth-child(11),
.limitto .td.format.last:nth-child(12),
.limitto .td.format.last:nth-child(13),
.limitto .td.format.last:nth-child(14)
 {
    display: none !important;
}
.limitto{
width:100% !important;
}
.limitto .language {
margin-top: 450px;
margin-left: -200px;
}
</style>

Ce code semble donc bien concerner cette partie de la page mais il y a tellement de CSS compilés c'est inextricable !

 <div class="limitto">
                        <div class="dk-PostHeader">
                            <div class="title">
                                Filtrer la recherche
                            </div>
                            <div class="links">
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div id="advanced_newitem">
                       <div class="advanced_checkbox">
                           <input id="advnewitem_newitem" name="multifilter[]"  type="checkbox" value="newitem:T"/>
                        </div>
                        <div class="advanced_clickable advanced_label">
                          <label for="advnewitem_newitem">Nouveautés</span></label>
                        </div>
                        <div class="clear"></div>
                        </div>
                        
    					<div class="td dates">
                         <div class="date daterange">
                            <div class="title">Année de parution </div>
                            <script type="text/javascript">
                                var DKDR1 = new DKDATERANGES('publishDate', 'DKDR1', "Année de parution ", "Advanced");
                                DKDR1.generate_date_picker('');
                                </script>
                          </div>
                      </div>                        
                        <div class="clear"></div>
(Désolé de ne répondre que maintenant, j'étais pas mal occupé Smiley langue )
J'en conviens que c'est un bazar pas possible. Smiley eek
C'est dû au fait que la boite où je travaille fournit des portails aux clients. Ce type de portails d'entrée de gamme propose assez peu de personnalisation.
La seule façon pour le client (et les personnes du support qui répondent aux demandes des clients) de personnaliser les choses c'est d'entrer du code CSS personnalisé (comme sur beaucoup de thèmes WordPress) via une sorte de B.O. (quand ils s'y connaissent un peu en CSS).
Du coup, on se retrouve à avoir des !important de partout avec des règles qui s'annulent ou font doublon...
C'est aussi pour ça que j'ai pas voulu y mettre mon nez dedans (par manque de temps et de motivation aussi). D'autant, qu'à la base, c'était pour rendre service à ma collègue du support.