Discussion :

[Horizon1956]

bonjour
Après plusieurs années sans élaborer de sites Web je me relance dans l'aventure et je viens de découvrir toutes les possibilités offertes par les dernières normes HTML5 et en particulier avec @media
Après plusieurs heures de lecture j'arrive à faire passer mes balises ul de la position horizontale à la positon verticale en fonction de la définition de l'écran via le code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
@media all and (max-width: 1024px)
 
{
 
    nav
 
    {
 
        width: auto;
 
        text-align: left;
 
    }
 
    nav ul
 
    {
 
        flex-direction: column;
 
    }
 
    nav li
 
    {
 
        padding-left: 4px;
 
    }
 
    nav a
 
    {
 
        font-size: 1.1em;
    }
 
    nav a:hover
 
    {
        border-bottom: 0;
    }
    #container
    {
    	 flex-direction: column;
    }
}

par contre je n'arrive pas à faire la même chose avec des images au sein d'un div

Pourriez vous m'apporter vos conseils


Par avance merci

[bonjourajax]

Bonsoir

Il suffit d'appliquer le css aux images

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
img {
...
}

[psychadelic]

En HTML5 il y a maintenant la balise <picture> qui permet d'indiquer autant de <source ... qu'on veut en fonction de la taille affichée.

https://html.spec.whatwg.org/multipa...icture-element
https://developer.mozilla.org/fr/doc...lement/picture

ne pas négliger non plus l'utilisation des balises <figure> et <figcaption> pour encadrer chaque image si un texte leur est lié.

[NoSmoking]

Bonjour,
si ta structure est conforme le fait de passer de passer en flex-direction:column n'empêchera pas ton conteneur d'occuper toute la largeur de la fenêtre sauf si tu l'as déclaré en display: inline-flex;, ... donc en gros il nous manque des informations !