Forum du club des d�veloppeurs et IT Pro - Mise en page CSS

mauvaise gestion d'�l�ments flex

noradan — Fri, 02 Oct 2026 10:47:00 GMT

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:

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:

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).

CSS non rafraichi

zool.bzh — Mon, 21 Sep 2026 03:40:17 GMT

Bonjour
Mon css reste dans la m�moire serveur
Pour vider la memoire cache du PC : ctrl shift suppr ; j'ai tout coch� et rien.
cot� serveur :

Code:

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="style.css?v= echo filemtime($_SERVER['DOCUMENT_ROOT'] . 'style.css'); ?>"/>
 head>

La page reste avec le CSS initial
Alors comment faire pour rafra�chir mon CSS ?

supression d'espace ind�sirable entre des icones

noradan — Sat, 19 Sep 2026 13:31:55 GMT

Bonjour
J'ai le code

Code:

1
2
3
4
5
6
7
8
9
>
.player-btn{padding:0;
margin:0;}
audio{padding:0;margin:0}
#audioPlayer:margin:0;padding:0}

<audio id="audioPlayer" controls > 
audio>  <img src="/materiel_prog/bouton-prec.png" width="30px" style="margin:0px;padding:0px">
<img src="/materiel_prog/bouton-suivant.png" width="30px" style="margin:0px;padding:0px">

et je voudrais que mes boutons soient coll�s � l'�l�ment audio et �galement coll�s entre eux pour faire comme si les boutons faisaient partie de la barre de lecture.

Il se trouve que j'ai un petit espace de quelques pixels dont je n'arrive pas � me d�barrasser malgr� les padding et margin:0.

Quelqu'un sait-il comment je pourrais faire ?

Afficher des caract�res avec un contour

schnee — Sat, 05 Sep 2026 20:31:45 GMT

Bonjour,
en affichant 8 fois un texte d'une couleur (par ex. noir) et d�cal� d'un ou deux pix dans les 4 directions, puis le m�me texte d'une autre couleur (par ex. blanc), j'arrive � afficher un texte avec contour.
Bon, �a marche, mais c'est un peu lourd quand m�me.
Je m'�tonne de n'avoir trouv� aucun truc pour obtenir le m�me effet avec une seule propri�t� CSS.
Ai-je manqu� quelque chose ?
�a serait bien utile pour afficher du texte par dessus une image.

Images attach�es

Disparition d'ic�nes dans un bandeau li�e � la dimansion de la fen�tre

goofyto8 — Wed, 02 Sep 2026 12:01:32 GMT

Bonjour,

je voudrai savoir si la disparition d'ic�nes (en fonction de la dimension de la fen�tre du navigateur) dans un bandeau en haut de la page d'un site d'une banque (donc normalement con�u par un pro) est normale ou r�sulte d'une programmation insuffisante.
Deux ic�nes disparaissent si l'utilisateur n'est pas en plein �cran.(Firefox 155.0 /windows10)

Images attach�es

font: ne marche pas

noradan — Sat, 08 Aug 2026 18:07:32 GMT

Bonjour
je cherche � personnaliser un formulaire et la d�claration "font" dans label ne marche pas j'ai du �crire tout en d�tail. Est-ce normal

Code:

1
2
3
4
5
6
label {
  display: inline-block;
  /*1width: 90px;*/
  text-align: right;
 font:1em bold;
}

ne fait rien et je dois �crire

Code:

1
2
3
4
5
6
7
8
9
 
label {
  /* Taille et alignement uniformes */
  display: inline-block;
  /*1width: 90px;*/
  text-align: right;
 font-size: 1em;
 font-weight:bold;
}

Et c'est pareil dans les groupement "legend".
En revanche

Code:

1
2
3
4
5
6
input, textarea {
vertical-align:top;
  font: 1em sans-serif;
  box-sizing: border-box;
  border: 1px solid #999;
}

�a, �a marche !
Qu'est-ce que j'ai rat� ?

justifier un texte

noradan — Tue, 04 Aug 2026 15:48:38 GMT

Normalement "justifi�" �tire un texte sur les marges droite et gauche mais j'ai un probl�me avec mon figcaption

Code:

1
2
3
4
5
6
7
8
.photo_groupe {
  display: flex;
  flex-direction: column;
  align-items: end;}
.figure {
  font-size: .88rem;}
.figcaption {
  text-align: center;}

Code:

1
2
3
4
5
6
<div class="photo_groupe">
  <figure class="">
    <img src="mon image.jpg" alt="mon alt" width="300px">
    <figcaption> pimpim, pampam, poumpoumfigcaption>
  figure>
div>

Si je remplace "center " par "justify" le texte n'est pas du tout justifi� mais cal� � gauche.
justify-content ne marche naturellement pas puisqu'en tant que petit-fils d'un flex il n'en est pas un.

Je voudrais un texte justifi�.

Qu'est-ce que je peux faire

Formulaire : mettre le label en haut

noradan — Mon, 03 Aug 2026 14:49:21 GMT

Bonjour
j'ai �a

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
>
form {
  /* On centre le formulaire */
  margin: 0 auto;
  width: 600px;
  /* Le contour du formulaire */
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 1em;
}
ul { list-style: none;
  padding: 0;
  margin: 0;
}
label {
  /* Taille et alignement uniformes */
  display: inline-block;
  width: 90px;
  text-align: right;
}
input,
textarea { font: 1em sans-serif;
  width: 300px;
  box-sizing: border-box;
  border: 1px solid #999;
}
 
textarea, input[id="msg"] {
  width: 100%;
  max-width: 500px;
  height: 200px;
 

 
<form action="/envoie" method="post">
  <ul>
    <li>
      <label for="name">Nom :label>
      <input type="text" id="name" name="user_name" />
    li>
    <li>
      <label for="mail">E-mail :label>
      <input type="email" id="mail" name="user_mail" />
    li>
    <li>
      <label for="msg">Message :label>
      <textarea id="msg" name="user_message">textarea>
    li>
  ul>
  <div class="button">
  <button type="submit">Envoyer le messagebutton>
div>
form>

C'est joli mais le label "message" est en bas de sa bo�te et je voudrais l'avoir en haut, qu'est ce que je peux �crire ? Mes "top" casse tout !

�l�ments flex en colonne

noradan — Fri, 31 Jul 2026 13:20:46 GMT

bonjour
ma question est bien s�r un standard mais malgr� mes lectures je n'ai pas r�ussi � obtenir ce que je souhaitais
J'ai le css suivant

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.colgauche{flex: 1 0 25%;
display:flex;
flex-direction:column;
flex-wrap:wrap}
 
.hautgauche{
/*height:60px;*/
flex-grow:1;
display:flex;
justify-content:space-between}
 
.seekingfor{
display:flex;
flex-grow:1;
color:yellow}

destin� � cr�er une colonne "colgauche" dans laquelle je souhaite empiler plusieurs autres �l�ments "hautgauche" et "seekingfor"

en html j'ai �crit

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="colgauche">
<div class="hautgauche">
<a blablabla >
<h2>bliblibli h2>
a>
 
<h2> tagadah2>
 
div>  
 
<div class="seekingfor"> seeking fordiv>
 
div>

Le "haut gauche est bien en haut � gauche , les deux �l�ments "bliblibi" et "tagada" sont bien sur une ligne, � chaque bout de la div (raison de mon space-between).
MAIS l'�l�ment "seekingfor" est au milieu de la colonne et non en haut, c'est-�-dire sous le hautgauche. De plus ma hauteur de 60px n'est pas prise en compte car avec f12 il fait ~570px tout comme seekingfor. Ma colonne a donc �t� coup�e en deux et les deux �l�ments prennent tout l'espace dispo.
Comment dois faire pour avoir mon hautgauche avec ses 60px de hauteur et juste en dessous mon "seekingfor" dont j'aimerais �galement limiter la hauteur

Animation d un conteneur

labarre2002 — Thu, 21 May 2026 17:14:49 GMT

Bonsoir

Je m ' excuse pour le titre je trouve pas mieux .Je d�sire r�aliser cette animation

https://dribbble.com/shots/7047827-A...ader-Animation

voici mon code

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
 
 
<main class="content">
 
  <div class="left lateral">
 
    div>
  <div class="wrapper-bar">
    <div class="bg-picture">
      <img src="https://images.unsplash.com/photo-1772289935157-f64bc178b47d?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NzkzODE0NTJ8&ixlib=rb-4.1.0&q=85">
    div>
 
    <div class="bar one">
      <div class="letter">
        <span>a span>
      div>
    div>
     <div class="bar two">
       <div class="letter">
        <span>b span>
      div>
    div>
     <div class="bar three"> 
       <div class="letter">
        <span>c span>
      div>
    div>
 
     <div class="bar four">
       <div class="letter">
        <span>d span>
      div>
    div>
 
 
  div>
  main>

mon code CSS:

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
 
html{
  height:100vh;
}
 
.content{
  width:100vw;
  height:100vh;
  display:flex;
  overflow:hidden;
}
 
.left{
  width:30vw;
  height:100%;
  background-color:#a39300;
}
.wrapper-bar{
  width:70vw;
  height:100%;
  position:relative;
  display:flex;
}
 
.bg-picture{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1;
}
 
.bg-picture  img{
  width:100%;
  height:100%;
  object-fit:cover;
}
 
.bar{
  flex:0 0 25%;
  opacity:.5;
   z-index:2;
  }
.one{
  background-color:#dfada2;
}
 
.two{
  background-color:#f88779;
}
 
.three{
  background-color:#897471;
}
 
.four{
  background-color:#b3a3a3;
}

Mon est celui puis avoir une piste pour r�aliser la premi�re animation dans mon code c 'est le containeur avec la classe .wrapper-bar qui au d�but couvre enti�rement l ' �cran puis occupe prends la taille de

Code:

width:70vw;

Merci.

Utiliser un positionnement relatif pour sticky

Elliot2.0 — Thu, 14 May 2026 11:24:34 GMT

Bonjour,

J'aimerai cr�� un �l�ment sticky dans mon site comme cela :

Code:

<div class='sticky'>Texte...div>

Code:

1
2
3
4
.sticky{
	position : sticky;
	top : /* 10px avant l'élément */
}

Mais je ne sais pas comment faire pour mettre top 10 pixel ai dessus de l'�l�ment et donc commencer l'effet de sticky quand l'�l�ment scroll de 10px vers le haut (je suis d�sol� si je n'utilise pas les bons mots pour dire cela mais j'esp�re que vous comprendrez).

Merci d'avance !

Gestion d'un effet de r�v�lation de texte

labarre2002 — Sat, 11 Apr 2026 13:15:13 GMT

Bonjour

je viens de r�aliser cette page

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
 
<body>
 
    <main class="content">
           <div class="pic first">
 
                   <div class="text">
                        <span>chiotspan>
                    div>
                <div class="overlay" style="--i:0;"> 
 
                div>
           div>
                  <div class="pic two">
                         <div class="text">
                            <span>huskyspan>
                         div>
                      <div class="overlay" style="--i:1;">
 
                      div>
                  div>
           <div class="pic three">
                      <div class="text">
                        <span>bergerspan>
                      div>
                 <div class="overlay" style="--i:2;" >
 
                 div>
           div>
 
 
    main>

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
95
96
97
 
body{
    height: 100svh;
}
.content{
    width: 100%;
    height: 100%;
   display: flex;
}
 
.content> *{
    flex: 1;
}
 
.text{
    width: 80%;
    height: 8%;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    mix-blend-mode:difference;
 
    }
 
span{
font-family: verdana;
font-size: 3.5rem;
color: darkgray;
font-weight: bold;
text-transform: capitalize;
display: block;
letter-spacing: 8px;
text-align: center;
line-height:1.2;
transform: translateY(100%);
transition: .5s cubic-bezier(.06,1,.21,.95);
animation: up 2.5s forwards;
}
 
 
 
 
.first{
    background-image: url("img/two.jpg");
    background-position: center;
    background-size: cover;
}
.two{
    background-image: url("img/husky.jpg");
    background-position: center;
    background-size: cover;
}
 
.three{
    background-image: url("img/berger.jpg");
    background-position: center;
    background-size: cover;
}
 
.pic{
    position: relative;
   }
 
.overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 2;
    animation: fade-in 1.5s forwards 300ms;
    animation-delay: calc(var(--i)* 1s);
}
 
@keyframes up{
    0%{
        transform: translateY(100%);
    }
 
    100%{
        transform: translateY(0);
    }
}
 
 
@keyframes fade-in{
    0%{
        transform: translateY(0);
    }
 
    100%{
        transform: translateY(-100%);
    }
}

Je souhaite que l'animation sur l'apparition des textes se d�clenche quand le rideau est lev� puis-je avoir une suggestion ou des pistes ?

Merci.

Apparition d une scrollbar verticale et horizontale

labarre2002 — Thu, 09 Apr 2026 17:50:50 GMT

Bonsoir

Je r�alise une mise en page assez simple mais j obtiens un d�bordement occasionnant l'appartion de deux scrollbar

mon HTML

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
 
 
<body>
 
    <main class="content">
           <div class="pic first">
                    <div class="text">
                        <span>chiotspan>
                    div>
                <div class="overlay">
 
                div>
           div>
                  <div class="pic two">
                         <div class="text">
                            <span>huskyspan>
                         div>
                      <div class="overlay">
 
                      div>
                  div>
           <div class="pic three">
                      <div class="text">
                        <span>bergerspan>
                      div>
                 <div class="overlay">
 
                 div>
           div>
 
 
    main>

mon

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
 
*,*::before,*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
.content{
    width: 100vw;
    height: 100vh;
   display: flex;
}
 
.content> *{
    flex: 1;
}
 
.text{
    width: 80%;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    }
 
span{
font-family: verdana;
font-size: 3rem;
color: #cc5500;
font-weight: bold;
text-transform: capitalize;
display: block;
letter-spacing: 8px;
 
}
 
.first{
    background-image: url("img/two.jpg");
    background-position: center;
    background-size: cover;
}
 
.two{
    background-image: url("img/husky.jpg");
    background-position: center;
    background-size: cover;
}
 
.three{
    background-image: url("img/berger.jpg");
    background-position: center;
    background-size: cover;
}
 
.pic{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

voici une capture d ' �cran

Merci d avance

Images attach�es

Centrer le HEADER sur une page

OUZFA — Tue, 07 Apr 2026 18:33:12 GMT

Bonjour � tous,
J'ai une page mod�le qui contient un header. Cette page mod�le est appel�e dans certaines autres page avec include. Sur certaines pages qui appellent la page mod�le, j'ai mis des div plus larges que le view afin de pouvoir y d�poser beaucoup d'�l�ments sur la largeur.

Lorsque je scroll � droite (plus loin que la largeur de la page), le header se d�place avec l'extr�mit� gauche de la page (ce qui est normal).

Comment pourrais-je scroller � droite (plus loin que l'extr�mit� droite de la page) tout en gardant le header toujours au centre ?

Merci de votre aide

justifier un seul mot � droite

noradan — Sat, 21 Mar 2026 12:55:50 GMT

Bonjour
parfois par exemple si un vers d'une po�sie est trop long il serait utile de pouvoir passer le dernier mot � la ligne et de le caler � droite.
Je ne trouve pas vraiment �a sur la toile : un changement de justification sur un seul mot.
A tout hasard, j'ai essay� avec un
mais �a ne fonctionne pas
Quelqu'un aurait-il une id�e?