28172 sujets

CSS et mise en forme, CSS3

Blocs flottants et positionnement

Bonjour à tous,

Je en viens pas très souvent par ici, j'arrive en général à me débrouiller pour mes mises en forme mais là.... je sèche Smiley decu

Actuellement la mise en page que j'ai est conforme aux besoins.
Mais je souhaite en faire une version mobile, et donc changer l'ordre des éléments...

Voici ci-dessous une capture explicative de la version bureau actuelle :

upload/5352-Capture.png

à gauche on a le contenu principal, et à droite les éléments de couleurs 1, 2 et 3.
Les éléments 1,2 et 3 sont actuellement en flottant et placés avant dans le code afin de permettre au contenu principal de "couler autour" de ces éléments qui n'ont pas tous la meme largeur.

Pour la version mobile je souhaiterais placer ces éléments après.
On a donc deux solutions à priori :
- Changer le code html actuel pour placer les éléments secondaires après le contenu principal, la version mobile sera donc simple à mettre en place, mais je ne vois pas comment avoir le rendu actuel pour al vresion bureau.
- Trouver le moyen de changer l'ordre d'apparition en Css uniquement pour la version mobile (on ne touche pas au html actuel).

La première solution serait préférable en terme de référencement/sémantique, car le contenu principal serait placé avant.

Le site actuel étant déjà en production voici un exemple de la version bureau (la version mobile est en développement) : http://galapiat-cirque.fr/c19-Risque-ZerO/

Merci d'avance pour vos précieux conseils Smiley smile

N'hésitez pas si vous avez des questions sur le problème !

Cordialement,
Bonjour !

Merci pour ta réponse, le problème c'est qu'actuellement sur les stats du site, j'ai encore 12% d'IE...
Certes il y a quelques IE10 mais ce n'est pas encore la joie...

Je vais tout de meme relire avec attention l'article cité.

Je reviendrais écrire mes réflexions ici Smiley smile

Merci !
Re-Bonjour,

Après pas mal d'essais, j'ai commencé à mettre en place le modèle flex-box pour mon problème...
Mais j'avoue etre un peu perdu.
On parle parfois de propriété "flex-flow" parfois de "flex-direction", et j'ai du mal à m'y retrouver.
De plus les exemples ou les générateurs permettant de spécifier l'ordre n'éxistent pas, je n'arrive pas à en trouver.
J'ai du mal en conséquence à écrire un code qui fonctionne sur le plus de navigateurs possibles...

Actuellement j'ai ceci : 
article {

    display: -webkit-flex; /* OK chrome 21 */
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;

    .elmt-a {

        box-ordinal-group: 2;
        -webkit-order: 2;
        order: 2;
    }
    .elmt-b {
        box-ordinal-group: 1;
        -webkit-order: 1;
        order: 1;
    }
}


Mais ça ne fonctionne pas sur mon viel android (2.3.5).

Je suis en train d'essayer d'élargir les propriétés propriétaires ( Smiley ravi ) , ça donne ceci : 
article {
    display: -ms-flexbox;
    -ms-box-orient: horizontal;

    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;

    -webkit-flex-flow: column wrap;
    -moz-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;

    .elmt-a {

        box-ordinal-group: 2;
        -webkit-order: 2;
        order: 2;
    }
    .elmt-b {
        box-ordinal-group: 1;
        -webkit-order: 1;
        order: 1;
    }
}


Mais je ne sais pas si je vais dans le bon sens, c'est tellement mouvant cette histoire... Smiley ohwell
Et je ne trouve pas la propriété d'ordre pour IE... -ms-order ?

Bref, c'est pas encore la joie :-°
Bon voici le code que j'ai au final : 
article {

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    .elmt-a {
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        -ms-flex-order: 2;
        -webkit-order: 2;
        -moz-order: 2;
        order: 2;
    }
    .elmt-b {
        -webkit-box-ordinal-group: 1;
        -moz-box-ordinal-group: 1;
        -ms-flex-order: 1;
        -webkit-order: 1;
        -moz-order: 1;
        order: 1;
    }
}


Un mix entre knacss et d'autres ressources.
ça fonctionne au moins pour mon android, le reste j'ai pas de quoi tester Smiley smile
Sujet clos
Aller à