Quelle technique pour obtenir mon resultat (flex, grid, float)

Version imprimable

2 pièce(s) jointe(s)

Bonsoir à tous

Je suis en train de réfléchir et de faire un peu de prototypage pour structurer un bout de page html pour le rendre responsible.

Voici la structure html que je dispose pour l'instant:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div id="content">
            <div class="main-column">
                Article 1: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus nostrum deserunt ea asperiores maiores omnis, dolorem aperiam eveniet et culpa dolores dolorum dicta quasi labore voluptatum deleniti! Voluptatum, est temporibus.
            </div>
            <div class="main-column">
                Article 2: Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis facilis ut error quasi ea et maiores temporibus, possimus enim aliquid obcaecati minima quidem qui, quas odit, omnis velit earum non! Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur numquam quas illum et, quam fuga voluptatem ex ut veritatis. Rerum accusantium dolore officiis velit ipsum dolores nesciunt quos tenetur voluptatem?
            </div>
            <div class="main-column">
                Article 3: Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque autem officia iusto animi. Eligendi molestias reiciendis soluta omnis ex corrupti. Porro ipsam perferendis dolore placeat quaerat omnis commodi et nisi.
            </div>
            <div class="main-column">
                Article 4: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur itaque aperiam laudantium ipsum ad sapiente et accusantium eum consequuntur blanditiis, vero totam distinctio voluptatibus inventore velit! Adipisci, quasi culpa! Vero.
            </div>
            <div class="main-column">
                Article 5: Lorem ipsum dolor sit, amet consectetur adipisicing elit. At inventore cupiditate atque totam corporis possimus, praesentium consectetur voluptatum. Molestias tenetur deleniti odio labore! Officia repudiandae quia harum illum maiores quisquam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos atque, porro unde reiciendis incidunt natus quod illo eligendi temporibus nesciunt magnam hic? Temporibus officiis asperiores illum. Esse facere quae nemo?
                At repudiandae similique vel veniam temporibus, quas voluptatum porro explicabo voluptates soluta sequi sunt ratione dolor, molestiae doloremque? Aliquid fugit architecto ipsam modi reprehenderit nemo amet corrupti voluptates, sed inventore!
                Illum labore laudantium minus? Perferendis sit unde explicabo ratione neque beatae, id minus ipsum eveniet sequi? Dolor, rem libero sapiente fugiat laboriosam corrupti fuga exercitationem. Ipsa obcaecati consequatur iure? Eum.
            </div>
            <div class="main-column">
                Article 6: Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur, beatae ea! Minus pariatur repellendus maiores cumque quo dicta corrupti debitis, enim labore tempore corporis porro harum odio, eaque, voluptatum quas?
            </div>
            <div class="main-column">
                Article 7: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo laboriosam corporis molestiae animi quae voluptatibus eum illum impedit eius fugit perferendis vitae eos vel laudantium nihil odio reiciendis, sapiente distinctio?
                Dolores voluptatum laudantium porro voluptate modi. Culpa sint quibusdam voluptatem explicabo hic dolores ab corrupti a labore tempora quas cum similique, consequuntur, officiis alias illum neque incidunt. Aperiam, necessitatibus soluta!
                Sunt vel eveniet obcaecati asperiores modi, esse culpa enim quod animi quidem quaerat ipsa ab officia ipsum tempora. Voluptatem, sed. Doloribus vitae maiores neque error eum culpa incidunt modi mollitia.
                Blanditiis vitae aperiam porro impedit hic beatae aspernatur quos molestiae, quas, accusamus alias repellendus, eos at. Incidunt sed commodi quae quos voluptatibus ad, rerum recusandae temporibus debitis doloremque officiis omnis?
                Unde in sunt sit quae repellendus, aliquam eligendi? Natus fugit, recusandae eaque, harum nobis officia dolor iure aliquam delectus est perspiciatis praesentium deserunt dolore suscipit accusamus, architecto expedita esse ab.
            </div>
            <div class="secondary-column" id="test">
                Pub 1
            </div>
             <div class="secondary-column">
                Pub 2
            </div>
             <div class="secondary-column">
                Pub 3
            </div>
             <div class="secondary-column">
                Pub 4
            </div>
             <div class="secondary-column">
                Pub 5
            </div>
    </div>

Et je souhaiterais avoir ce retour pour la version desktop:

Pièce jointe 635029

Et ceci pour la version mobile:

Pièce jointe 635030

L'idée est de pouvoir, pour la version mobile, mettre entre 2 articles une pub (initialement dans cette sorte d'aside).

Initialement, j'avais mis une balise section qui contient les articles et une aside, ces blocs pub..... Hors, en pur css, je ne vois pas comment "extraire" des div spécifiques vers une autre div.

Je me suis donc penché sur le display grid, mais répond en parti à ma problématique, mais qui ne correspond pas exactement à ce que je veux => https://codepen.io/leknoppix/pen/eYLgMad

J'ai pensé aussi au flexbox, mais cela revient à ma première idée => https://codepen.io/leknoppix/pen/BaOpOrN

Auriez vous des idées à me proposer? Merci d'avance.

lemirandais

j'ai fait un test qui se rapproche de ce que vous cherchez mais en mettant les éléments dans un ordre différent dans le code html.
est ce que vous avez un nombre fixe de publicités ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
        
                .principal {
                  background: #FFD;
                  border: 1px solid #000;
                }
                .principal > div {
                  margin: 0.5em;
                  padding: 0.5em;
                }
                
                .texte {
                  background: #FDD;
                }
                .pub {
                  background: #DFD;
                  color: #999;
                }
                
                @media (min-width: 1000px)
                {
                          .principal {
                            display: grid;
                            grid-template-columns: 70% auto;
                          }
                          
                          .texte {
                            grid-column-start: 1;
                          }
                          .pub {
                            grid-column-start: 2;
                          }
                          
                }
                
        </style>
</head>
<body>
 
	<div class="principal">
 
		<div class="texte">Ducimus nostrum deserunt ea asperiores
			maiores omnis.</div>
 
		<div class="pub">pub 1</div>
 
		<div class="texte">
			orem, ipsum dolor sit amet consectetur adipisicing elit.<br>
			Ducimus nostrum deserunt ea asperiores maiores omnis, dolorem aperiam
			eveniet et culpa dolores dolorum dicta quasi labore voluptatum
			deleniti!<br> Voluptatum, est temporibus.
		</div>
 
		<div class="pub">pub 2</div>
 
		<div class="texte">
			orem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus
			nostrum deserunt<br> Voluptatum, est temporibus.
		</div>
 
		<div class="texte">Ducimus nostrum deserunt ea asperiores
			maiores omnis</div>
 
	</div>
 
 
</body>
</html>

02/03/2023, 09h10
lemirandais

Bonjour et merci pour ta réponse.

Pour l'instant, ni la structure html ni le nombre d'articles ou de pub (dans la réalité, ce sera 50% de pub, mais aussi des widgets…) n'a été défini.

L'inconvénient, avec cette technique, est que la taille des articles et blocs pub ne sont pas forcément égaux  et rien ne sera fixe en hauteur!

Je me demande même si cela est faisable en "pur css", ou si je ne vais pas devoir le faire en javascript! Je réfléchis encore!

A titre d'information, la liste des articles sera généré depuis une bdd et le langage php!

ma question au sujet du nombre de publicités, c'était pour déplacer chaque publicité individuellement mais je n'ai pas trouvé comment les déplacer hors du conteneur avec flex donc c'était une mauvaise piste.
le 2e test que j'ai fait fonctionne en fixant la hauteur du conteneur donc ce n'est pas utilisable la plupart du temps. j'ai quand même mis le fichier de test à la fin de ce message, peut-être que vous êtes dans un cas particulier où ça peut être utile.

ensuite, une autre solution est de mettre toutes les publicités en double dans le code html et d'afficher soit un emplacement soit l'autre. c'est en css pur mais ça va rallonger le poids de la page et donc le temps de chargement.

et au final, je pense que le meilleur compromis est de déplacer les éléments en javascript, il suffit de le faire une fois au chargement de la page donc ça n'utilisera pas beaucoup de ressources du navigateur.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
                
                .saut_colonne {
                        display: none;
                }
                
                .principal {
                        background: #FFD;
                        border: 1px solid #000;
                }
                
                .principal > div {
                        margin: 0.5em;
                        padding: 0.5em;
                }
                
                
                .texte {
                        background: #FDD;
                }
                
                .pub {
                        background: #DFD;
                        color: #999;
                }
                
                @media ( min-width : 1000px) {
                        
                        .principal {
                                display: flex;
                                flex-flow: column wrap;
                                height: 90vh;
                        }
                        
                        .texte {
                                width: 70%;
                        }
                        
                        .saut_colonne {
                                display: inline;
                                width: 0;
                                order: 2;
                                height: 90vh;
                        }
                        
                        .pub {
                                order: 3;
                                width: 20%;
                        }
                        
                }
                
        </style>
</head>
<body>
 
	<div class="principal">
 
		<div class="saut_colonne"></div>
 
		<div class="texte">
			Ducimus nostrum deserunt ea<br> asperiores maiores omnis.
		</div>
 
		<div class="pub">pub 1</div>
 
		<div class="texte">
			orem, ipsum dolor sit amet consectetur adipisicing elit.<br>
			Ducimus nostrum deserunt ea asperiores maiores omnis, dolorem aperiam
			eveniet et culpa dolores dolorum dicta quasi labore voluptatum
			deleniti!<br>
			Voluptatum, est temporibus.
		</div>
 
		<div class="pub">pub 2</div>
 
		<div class="texte">
			orem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus
			nostrum deserunt<br>
			Voluptatum, est temporibus.
		</div>
 
		<div class="texte">
			Ducimus nostrum deserunt ea asperiores maiores omnis
		</div>
 
	</div>
 
</body>
</html>

02/03/2023, 15h12
lemirandais

Bonjour à nouveau et merci pour tes réponses.

Dans un premier temps, j'avais pensé vers 2 blocs (un pour les articles et un pour les pubs/widget....), avec un rapport de 350 px pour les pubs (aside) et le reste de l'écran pour les articles et de les positionner en flex.
Hors avec cette technique, et pour la version mobile, les blocs se mettraient l'un en dessous de l'autre. Dommage que je ne puisse pas, comme avec les grids, indiquer dans quelle ranger mettre tel ou tel bloc !

Le système de grid est pas mal, mais impossible d'avoir des blocs côte à côte avec des hauteurs différentes, cela fonctionne mais j'ai des trous blancs entre les lignes!!!

J'avais pensé à doubler les pubs en a mettant certaines en display:none ou équivalent, mais vu que notre régie pub est G*****, j'ai pas envie d'être bloqué ou pénalisé!!!

Pour la partie js, je vais faire des essais pour voir comment faire ? J'ai peur que si cela fonctionne, ce soit beaucoup plus chiant à paramétrer en cas changement de positionnement.

Merci en tout cas pour les pistes.