Discussion :

[noradan]

Bonjour
je fais quelque chose de mal mais je ne sais pas comment corriger ça mes capacité en flex étant très limité.
Voilà la situation:
Ma page est divisée en trois colonnes : une à gauche une au centre une à droite.

La colonne de droite fait 620px de haut du fait de ce qu'elle contient et ceci ne change pas.
Le problème concerne celle du centre qui est constituée de l'emboîtage 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
 
.corps {
  width: 950px;
  flex: 0 1 950px;
  display: flex;
flex-wrap: wrap;}
 
#entete {
  height: 200px;
  position: sticky;
  top: 0;
  flex: 0 1 700px;}
 
.cadretitre {
  justify-content: space-between;
  align-items: center;
  border-top: solid;
  display: flex;
  flex: 1 1 950px;
  margin: auto;
  text-align: center;
  padding: .7rem;
 
.lyrics {
  font-size: 16px
  padding: 2em;}

pour ce qui est des styles et de

Code :

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

1
2
3
4
5
6
7
8
9
 
  <div class="corps">
<div id="entete">
 
<div class="groupe"></div> 
<div class="album"></div> 
<div class="cadre"></div> 
</div> fin dentete
<div class="lyrics">

pour ce qui est de leur emboîtage (j'ai omis tout ce qui ne sert à rien comme les contenus des boîtes qui font la même taille ainsi que les classes "groupe" et "album" qui ne gèrent que des tailles de fontes).

Ceci étant posé, lorsque cette colonne fait moins de 620px de haut l'élément "entete" s'étire pour combler le vide et du coup la présentation est moche.
J'ai bien testé diverses combinaisons de flex-direction et autre données flexible sans succès
Comment dois-je modifier mes flex pour que ce soit l'élément "lyrics" qui s'étire vers le bas (mais pas son contenu qui doit rester en haut).

[mathieu]

j'ai le résultat suivant avec votre code, en bleu l'entête et en vert lyrics.
je ne vois pas ce que vous voulez dire par "l'élément "entete" s'étire".



pouvez vous rajouter des exemples de contenus dans le code de test suivant pour bien comprendre le souci.

Code html :

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
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>t1</title>
</head>
 
<body>
 
<style>
.corps {
    width: 950px;
    flex: 0 1 950px;
    display: flex;
    flex-wrap: wrap;
}
 
#entete {
    height: 200px;
    position: sticky;
    top: 0;
    flex: 0 1 700px;
    background-color: #bbf5ff;
}
 
.cadretitre {
    justify-content: space-between;
    align-items: center;
    border-top: solid;
    display: flex;
    flex: 1 1 950px;
    margin: auto;
    text-align: center;
    padding: .7rem;
}
 
.lyrics {
    font-size: 16px;
    padding: 2em;
    background-color: #94fc9d;
}
</style>
 
 
<div class="corps">
    <div id="entete">
 
        <div class="groupe">groupe</div>
        <div class="album">album</div>
        <div class="cadre">cadre</div>
 
    </div>
    <div class="lyrics">lyrics</div>
</div>
 
</body>
 
</html>

[noradan]

Là tout de suite je vous mets une copie écran

entete est le bloc jaune paille qui déborde vers le bas au delà du cadre corail contenant "longing" or ce ne doit pas être le cas.
C'est éventuellement le bloc en blanc qui doit s'étirer.
l'idéal étant bien sûr que rien ne s'étire et que le bloc central soit de la taille qui est la sienne. Mais en fait j'ai compris qu'il s'aligne sur le morceau à sa gauche (c'est lui qui fait exactement 620 de haut)



Je vais tâcher de bricoler un truc avec le code.
Ce n'est pas simple car toute la page est fabriquée avec des appels de fonction php auxquelles je passe des arguments

[casperweb]

Bonjour, pour ma part la capture écran n'aide pas plus à comprendre le problème.
Vous disposez actuellement d'un hébergement, vous pourriez nous communiquer l'URL de la page qui pose problème. Outre le fait de nous fournir le code complet, on pourrait voir le problème et l’analyser avec les outils de développement du navigateur.

Avez vous regarder le problème avec l’inspecteur de code (F12)?

Comme vous semblez avoir des difficultés récurrentes avec flexbox et que les informations sur cette techno qui sont disponibles sur le web ne vous aide pas dirait-on; je vous recommande ce livre:
"CSS3 Flexbox, plongez dans les CSS modernes" de Raphaël Goetter
https://www.alsacreations.com/livres...-modernes.html
https://www.eyrolles.com/Informatiqu...9782212143638/

[noradan]

Voici l'URL
https://prog-lyrics.alwaysdata.net/A...od-Longing.php

vous pouvez aller et venir avec les flèches vertes; elles fonctionnent !

Je suis toujours sous inspecteur et il indique bien un changement de taille de boîte.
Pour ce qui est des éléments de base concernant les flex à force je comprends un peu ce qui se passe ce qui m'a permi de faire plein de choses tout seul.
mais dans ce cas précis, je ne comprends pas d'autant qu'il n'y a justement pas des emboitages déments avec des changements de flex-direction, de wrap j'en passe et des meilleurs

Le problème est apparu lorsque j'ai mis récemment dans ma colonne droite une liste avec un curseur qui évidement a imposé sa taille à la page lorsque le div "corps" est petit.
Autrefois j'avais imposé une hauteur fixe à l'entete mais ça pose des problèmes lorsque certains titres sont sur deux lignes ou bien lorsque l'on réduit la largeur de la fenêtre du navigateur.

[noradan]

En me bottant les fesses, parce que c'est quand même vexant, je pensais avoir trouvé quelque chose.
j'étais convaincu que c'était idiot et de fait j'ai ajouté simplement un "align-items:start" au corps

Ca a vaguement l'air de marcher reste à voir si ça ne va pas me mettre le bazard ailleurs

[Declique69]

Sans regarder plus loin, je constate déjà qu'il manque display:flex sur le cadre #entete …

Il te manque aussi une accolade fermante à la fin du bloc .cadreTitre.

Bon celui-ci n'est pas utilisé mais enfin...
Si tu veux en savoir plus sur les flex-box je te recommande ce tutoriel.

[casperweb]

Bonjour,

Avant d’écrire la première ligne de code en CSS il faut avoir un code HTML valide, c’est-à-dire sans erreur de syntaxe, c’est important. En commencent par avoir le bon doctype !!!! C’est-à-dire :

Code :

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

<!DOCTYPE html>

Aidez vous du validateur pour voir et corriger vos erreurs => https://validator.w3.org

Un document est soit en français soit en anglais mais pas les deux en même temps. L’attribut lang de la balise HTML ne peut être en double, dans aucune balise d’ailleurs.

Si vous utilisez Firefox, en regardant le code générer via un CTRL + U vous verrez des balises en rouge.

La balise link en L10 doit se trouver dans le <head> et pas ailleurs. Idem pour la balise <style>.

Pour l’encodage des caractères utiliser :

Code :

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

<meta charset="UTF-8">

L57 et L70 un espace avant d’écrire un attribut dans une balise HTML. Et plutôt que de passer un <h2> en display : inline; placer le lien autour du texte à l’intérieur du H2. Cela vous évitera d’écrire des pirouettes.

Un espace insécable s’écrit avec un point-virgule à la fin soit &nbsp;

L94 vous avez deux fermetures de <li> à la suite et un qui n’est pas ouvert.

L136 à 139 il y a un problème d’imbrication de balise et je ne pense pas que <figcaption> dans un titre soit valide.

La balise <img> ne sort jamais sans sont attribut alt obligatoire (même vide) il sert à indiquer un texte alternatif aux images utile aux personnes qui n’affichent pas les images.

<div class="titre">Longing </div> Si c’est un titre c’est les balises de titres qu’il faut utiliser, soit H1 à H6.

Vous avez un problème dans la hiérarchie de titre.

Après toutes ces corrections on peut ce poser des questions sur la mise en forme en CSS.