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

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?

HTML/CSS>> Smple Search Bar - SearchEngine-portail-barre de recherche compatible

bdxproo — Mon, 02 Mar 2026 21:45:03 GMT

je suis enclein a ouvrir un forum sur une barre de rechErche de moteur de recherche
PS le code m appatient sur codepen: Smple Search Bar - SearchEngine-portail-barre de recherche compatible
https://codepen.io/huange/pen/bGqMqM |
il est en free gratuiciel sur le W3S | il est porter sur WIN 10 11 et compatble tous navigateur

ondiscute un peu du code si vous voulez j en aimerai finalLement une discussion ouverte avec les users du forums
de pseudo : BDXPRO

la couleur texte definie ne s'affiche pas correctement, je seche

freddyev — Wed, 25 Feb 2026 17:41:21 GMT

Bonjour,

Je code un menu d�roulant pour la version responsive de mes pages et depuis deux jours je s�che sur un probl�me qui ne devrait pas en �tre un...
je voudrais afficher les options du menu en blanc sur fond color� mais impossible d'y arriver. j'ai beau s�lectionner n'importe quelle couleur rien a faire ca ne change pas pourtant quand sur la ligne pr�c�dente je change le background, celui-ci prend bien la bonne teinte.
J'ai test� sur deux navigateurs ca donne le m�me r�sultat, quand j'inspecte le code c'est bien la bonne couleur qui est d�finie mais ce que je vois l'�cran ne correspond pas
Si qqun pouvait v�rifier s'il a le m�me probl�me avec ce code je lui en serait tr�s reconnaissant.
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
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
98
99
100
101
102
 

<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    >
        :root {
            /* Default (light) theme */
            --col-fond: #f3e8d8;
            --col-fond-inter: #ab7f77;
            --col-fond-accent: #ead2cd;
            --col-txt: #212121;
            --col-txt-light: #585858;
            --col-txt-ombre: #5858588b;
            --col-bord: #898EA4;
            --col-btn: #0d47a1;
            --col-btn-vol: #0b069f;
            --col-code: #d81b60;
            --col-surligne: #ffdd33;
            --col-desactive: #efefef;
            --col-blanc: #fff;
            --col-noir: #000;
        }
 
        .menu_deroulant {
            list-style: none;
        }
 
        .menu_deroulant li {
            float: left;
        }
 
        .menu_haut_page_deroulant {
            width: 150px;
            /* list-style-type: none; */
            display: none;
            padding: 0;
            margin: 0;
            position: absolute;
 
        }
 
        .menu_haut_page_deroulant li {
            float: none;
            margin: 5px;
            padding: 0;
            color: var(--col-blanc);
        }
 
        /* .menu_haut_page_deroulant li a:link {
            display: block;
            text-decoration: none;
            background-color: var(--col-surligne);
            color: var(--col-surligne);
            font-weight: bold;
            padding: 6px 10px;
        } */
 
        .menu_haut_page_deroulant li a:hover {
            background-color: var(--col-btn-vol);
            color: var(--col-blanc);
            font-weight: bold;
        }
 
        .menu_deroulant li:hover .menu_haut_page_deroulant {
            display: block;
            width: 200px;
            border-radius: 8px;
            padding: 6px 8px;
            margin-top: 5px;
            text-decoration: none;
            background-color: var(--col-surligne);
            font-weight: bold;
            line-height: 200%;
            color: var(--col-blanc);
        }
     
head>
 
<body>
    
        <ul class="menu_deroulant">
            <li>
                <a href=""><img src="https://www.magicmailles.com/images/menu-picto.png" alt="Menu acces aux categories">a>
                <ul class="menu_haut_page_deroulant">
                    <li><a href="pg_poupees.php">Poupeesa>li>
                    <li><a href="pg_animaux.php">Animauxa>li>
                    <li><a href="pg_doudous.php">Doudousa>li>
                    <li><a href="pg_accessoires.php">Accessoiresa>li>
                    <li><a href="pg_tutoriels.php">Tutorielsa>li>
                    <li><a href="pg_mercerie.php">Merceriea>li>
                ul>
            li>
        ul>
    
 
body>
 
html>

Positionnement de div

SP506 — Mon, 02 Feb 2026 16:42:02 GMT

Bonjour.
Je cherche � realiser ce qui correspond � cette image, le chevauchement :

Mon pb est le chevauchement de la partie centrale sur la partie supperieure.
Actuellement je triche avec une div fixed top qui contient le logo, une div qui contient l espace vide au centre pour simuler la superposition et en dessous une div centrale qui passe sous les autres et fait 100% de hauteur.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body class="w3-light-grey">
    <div class="w3-top w3-theme">
      <div class="w1450 header-content w3-padding" style="height: 80px">
        <img src="assets/images/blue_logo.png" alt="Logo" style="width: 50px" />
        <a href="#" class="w3-button w3-primary w3-right">Buttona>
        <br />
      div>
      <div class="w1450 w3-white w3-hide-small" style="height: 50px">div>
    div>
 
    <div class="w1450 w3-white h100" style="padding-top: 150px">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil vel veniam
      totam voluptas eligendi ad ut eius assumenda libero, sit iure quasi maxime
      est quaerat consequuntur atque non. Sint, ab.
    div>
  body>

l un de vous pourrait il m indiquer comment faire �a proprement. Je pr�cise que je voudrais que la partie centrale soit l �quivalent d un height 100%, en but�e en bas et qu au scroll, tout scrool sauf la partie fixed top bien sur...
Merci pour votre aide

Images attach�es

Modifier la couleur du pictogramme

dominos — Thu, 22 Jan 2026 17:05:38 GMT

Bonjour,

Savez-vous s'il est possible de modifier la couleur du pictogramme d'une ic�ne material-icons,
pour l'instant j'arrive juste � change la couleur de l'icone avec color mais pas le pictogramme int�rieur, qui change uniquement si je met background, mais �a d�borde de l'icone.

Code:

1
2
3
4
5
6
7
8
9
.ico-desc {
	color: #fff;
	float: left;
	margin-top: -1px;
	padding-left: 2px;
	text-shadow: 0 0 3px #444;
}
 
<a href="..." class="ico-desc"><i class="material-icons">&#xe88e;</i></a>

En vous remerciant par avance