Bonjour,

J'ai un code qui s'agence de la manière suivante :

<div id="conteneur">

    <div id="premiere_rangee">

        <div class="bloc1">
        </div>

        <div class="bloc2">
        </div>

        <div class="bloc3">
        </div>

    </div>

    <div id="deuxieme_rangee">

        <div class="bloc1">
        </div>

        <div class="bloc2">
        </div>

        <div class="bloc3">
        </div>

    </div>

    <div id="troiseme_rangee">

        <div class="bloc1">
        </div>

        <div class="bloc2">
        </div>

        <div class="bloc3">
        </div>

    </div>

</div>

J'aimerais qu'en dessous de 960px , il n'y ait plus que deux blocs par rangée et non trois.

Il faudrait donc insérer plus de rangées.

Cela ne demande plus seulement de modifier le comportement css avec les media queries mais également le html. J'aurais voulu savoir si c'était possible avec les media queries.

Cela me semble davantage réalisable en Javascript ou PHP avec un if résolution égal tant alors afficher tel code html sinon etc..

Mais là encore je ne sais pas si ces langages ont des fonctions permettant de prendre en compte les résolutions d'écrans des utilisateurs.

Merci d'avance pour vos réponses !

Cordialement,

Tomi

-
Edité par Mr_Craw 14 janvier 2019 à 13:12:11

Bonjour,

Avant toute chose il faut commencer par corriger ton code HTML : un id doit en effet être unique.

Pour le reste, tu peux utiliser des règles media-queries insérées dans ton CSS.

-
Edité par Mewen_bzh 14 janvier 2019 à 13:53:37

Oui effectivement je me suis trompé, dans mon code d'origine j'ai des class Je ne vois pas du tout comment avoir le rendu désiré avec les media queries pourrais tu me montrer un exemple? A moins de jouer sur les display : none;

Bonjour,

En fait au delà de tes questions sur quel méthodes employer, je pense que c'est ta structure qu'il faut revoir.
Est-ce que tu fais des rangées pour y ranger des contenus propre à chaque rangée ou bien tu fais des rangées pour disposer ton contenu ?

Le code HTML représente une structure "logique" dans le code, il ne doit pas servir à agencer. La disposition relève de l'utilisation du CSS.

Si j'ai bien compris ta demande, tu souhaiterais qu'en dessous de 960px ton bloc 3 de la première rangée soit à côté du bloc 1 de la deuxième rangée ?

-
Edité par vernaisc 14 janvier 2019 à 13:51:05

Bonjour,

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : Media Queries)

Bonjour,

Effectivement j'ai choisit cette organisation HTML pour l'agencement de ma page.

Non, j'aimerais que en dessous de 960px ma structure qui à l'origine à cette forme :

123

456

789

Prenne la forme :

12

34

56

78

9

Le code HTML ne doit pas servir à agencer !
Par exemple, cette structure :

<div id="conteneur">
 
    <div id="premiere_rangee">
 
        <div class="bloc1"><br>        </div>
 
        <div class="bloc2"><br>        </div>
 
        <div class="bloc3"><br>        </div>
 
    </div>
 
    <div id="deuxieme_rangee">
 
        <div class="bloc1">
        </div>
 
        <div class="bloc2"><br>        </div>
 
        <div class="bloc3"><br>        </div>
 
    </div>
 
    <div id="troiseme_rangee">
 
        <div class="bloc1">
        </div>
 
        <div class="bloc2">
        </div>
 
        <div class="bloc3">
        </div>
 
    </div>
 
</div>

N'est pas adapté à ta demande. Elle est serait la bienvenue si le contenu de chaque rangée met en avant un contenu original à chaque rangée. Donc il n'y aurait pas lieu de mélanger les blocs de chaque rangée les uns aux autres.

J'ai repris ton code, il n'est pas non plus "propre" d'avoir le syndrome de la divite assez répandu chez les développeurs, il existe de nombreuses balises HTML utiles à la sémantique et à la compréhension du code fait pour remplacer <div>. Mais ça ce n'est qu'un conseil, ton problème n'est pas là.

Petit indice pour ta structure, une <div> suffit. Tu peux après utiliser d'autres éléments HTML qui seront plus adaptés

Une fois une structure HTML plus adapté sémantiquement et logiquement, agence tes blocs de la manière qu'ils doivent être (en jouant sur la largeur par exemple).

Je te laisse creuser un peu, essaye d'obtenir tes 3 rangées de 3 blocs. Une fois cela réussi, la media queries devrait te sembler facile à ajouter. Hésites pas à revenir poser des questions si besoin

Hello !

Je viens aux nouvelles, as-tu réussi à avancé?