Forum du club des développeurs et IT Pro - Mise en page CSS https://www.developpez.net/forums/ fr Tue, 14 Apr 2026 08:01:56 GMT vBulletin 15 https://forum.developpez.be/images/misc/rss.png Forum du club des développeurs et IT Pro - Mise en page CSS https://www.developpez.net/forums/ <![CDATA[Gestion d'un effet de révélation de texte]]> https://www.developpez.net/forums/showthread.php?t=2183157&goto=newpost Sat, 11 Apr 2026 13:15:13 GMT Bonjour je viens de... 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>chiot</span>
                    </div>
                <div class="overlay" style="--i:0;"> 
 
                </div>
           </div>
                  <div class="pic two">
                         <div class="text">
                            <span>husky</span>
                         </div>
                      <div class="overlay" style="--i:1;">
 
                      </div>
                  </div>
           <div class="pic three">
                      <div class="text">
                        <span>berger</span>
                      </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. ]]> Mise en page CSS labarre2002 https://www.developpez.net/forums/d2183157/webmasters-developpement-web/mise-page-css/gestion-d-effet-revelation-texte/ Apparition d une scrollbar verticale et horizontale https://www.developpez.net/forums/showthread.php?t=2183121&goto=newpost Thu, 09 Apr 2026 17:50:50 GMT Bonsoir Je réalise une... 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>chiot</span>
                    </div>
                <div class="overlay">
 
                </div>
           </div>
                  <div class="pic two">
                         <div class="text">
                            <span>husky</span>
                         </div>
                      <div class="overlay">
 
                      </div>
                  </div>
           <div class="pic three">
                      <div class="text">
                        <span>berger</span>
                      </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
Nom : picture.jpg Affichages : 66 Taille : 129,3 Ko

Merci d avance
Images attachées
 
]]> Mise en page CSS labarre2002 https://www.developpez.net/forums/d2183121/webmasters-developpement-web/mise-page-css/apparition-d-scrollbar-verticale-horizontale/ Centrer le HEADER sur une page https://www.developpez.net/forums/showthread.php?t=2183085&goto=newpost 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 ]]> Mise en page CSS OUZFA https://www.developpez.net/forums/d2183085/webmasters-developpement-web/mise-page-css/centrer-header-page/ justifier un seul mot à droite https://www.developpez.net/forums/showthread.php?t=2182798&goto=newpost Sat, 21 Mar 2026 12:55:50 GMT Bonjour parfois par exemple... 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 <br><span style="text-align:end"> mais ça ne fonctionne pas
Quelqu'un aurait-il une idée? ]]> Mise en page CSS noradan https://www.developpez.net/forums/d2182798/webmasters-developpement-web/mise-page-css/justifier-seul/ <![CDATA[HTML/CSS>> Smple Search Bar - SearchEngine-portail-barre de recherche compatible]]> https://www.developpez.net/forums/showthread.php?t=2182413&goto=newpost Mon, 02 Mar 2026 21:45:03 GMT je suis enclein a ouvrir un... 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 ]]> Mise en page CSS bdxproo https://www.developpez.net/forums/d2182413/webmasters-developpement-web/mise-page-css/html-css-smple-search-bar-searchengine-portail-barre-recherche-compatible/ <![CDATA[la couleur texte definie ne s'affiche pas correctement, je seche]]> https://www.developpez.net/forums/showthread.php?t=2182319&goto=newpost Wed, 25 Feb 2026 17:41:21 GMT Bonjour, Je code un menu... 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
 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :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);
        }
    </style> 
</head>
 
<body>
    <!-- <div class="item_4"> -->
        <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">Poupees</a></li>
                    <li><a href="pg_animaux.php">Animaux</a></li>
                    <li><a href="pg_doudous.php">Doudous</a></li>
                    <li><a href="pg_accessoires.php">Accessoires</a></li>
                    <li><a href="pg_tutoriels.php">Tutoriels</a></li>
                    <li><a href="pg_mercerie.php">Mercerie</a></li>
                </ul>
            </li>
        </ul>
    <!-- </div> -->
 
</body>
 
</html>
]]> Mise en page CSS freddyev https://www.developpez.net/forums/d2182319/webmasters-developpement-web/mise-page-css/couleur-texte-definie-ne-s-affiche-correctement-seche/ Positionnement de div https://www.developpez.net/forums/showthread.php?t=2181869&goto=newpost Mon, 02 Feb 2026 16:42:02 GMT Bonjour. Je cherche à... Bonjour.
Je cherche à realiser ce qui correspond à cette image, le chevauchement :
Nom : 00Screenshot_5.png Affichages : 166 Taille : 32,3 Ko
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">Button</a>
        <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
 
]]> Mise en page CSS SP506 https://www.developpez.net/forums/d2181869/webmasters-developpement-web/mise-page-css/positionnement-div/ Modifier la couleur du pictogramme https://www.developpez.net/forums/showthread.php?t=2181665&goto=newpost 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 ]]> Mise en page CSS dominos https://www.developpez.net/forums/d2181665/webmasters-developpement-web/mise-page-css/modifier-couleur-pictogramme/ Alignement champs de formulaire https://www.developpez.net/forums/showthread.php?t=2181651&goto=newpost Thu, 22 Jan 2026 08:39:14 GMT Bonjour, la team Dans... Bonjour, la team
Dans l'encadré coordonnées de mon formulaire j'ai les champs tout ce qu'il y a de plus basic codé comme ceci.
Code:
1
2
3
4
5
6
7
8
9
10
11
<fieldset><legend>Coordonnées :</legend>
 
		<p><label for="nom">Nom:</label><input type="text" id="nom" name="nom" size="20" tabindex="1" /></p>
                <p><label for="prenom">Prénom:</label><input type="text" id="prenom" name="prenom" size="20" tabindex="2" /></p>
                <p><label for="nom">Adresse:</label><input type="text" id="adresse" name="adresse" size="50" tabindex="3" /></p>
	        <p><label for="cp">Code Postal:</label><input type="text" id="cp" name="cp" size="3" tabindex="4" /></p>
	        <p><label for="ville">Ville:</label><input type="text" id="ville" name="ville" size="50" tabindex="5" /></p>
		<p><label for="email">Email:</label><input type="email" id="email" name="email" size="50"tabindex="6" /></p>
		<p><label for="telephone">Téléphone:</label><input type="tel" id="tel" name="tel" size="00" tabindex="7" /></p>
 
	</fieldset>

Jusque là rien de compliqué. Mais toutes les lignes sont empilées et je dois gagner de la place en hauteur pour le reste de mon formulaire et je voulais donc mettre nom et Prénom sur la même ligne, adresse sur une ligne, CP et ville sur une même ligne et email et téléphone sur une même ligne. Le truc tout simple au premier abord mais après avoir trituré le code avec des <div> des <tr> des <td> des machins et des bidules je n'arrive pas à mes fins.
Je suis arrivé à la dernière mouture suivante non sans mal qui fait presque le job.

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
	<fieldset><legend>Coordonnées :</legend>
 
<table><tbody>
	<tr>
		<td style="width: 100px;">Nom:</td>
		<td valign="right">
			<input type="text" id="nom" name="nom" size="20" tabindex="1" />
		</td>
 
		<td style="width: 100px; margin: 30px;">Prénom:</td>
		<td valign="right">
			<input type="text" id="prenom" name="prenom" size="20" tabindex="2"/>
		</td>
    </tr>
 
</tbody></table>
 
<table><tbody>
 
    <tr>
        <td style="width: 100px;">Adresse:</td>
	    <td valign="top">
			<input type="text" id="adresse" name="adresse" size="50" tabindex="3" />
	    </td>
    </tr>
 
</tbody></table>
 
<table><tbody>
 
    <tr>
        <td style="width: 100px;">Code Postal:</td>
        <td valign="top">
			<input type="text" id="cp" name="cp" size="3" tabindex="4" />
	    </td>
        <td style="width: 100px;">Ville:</td>
        <td valign="top">
			<input type="text" id="ville" name="ville" size="50" tabindex="5" />
	    </td>
    </tr>
 
</tbody></table>
 
<table><tbody>
 
    <tr>
        <td style="width: 100px;">Email:</td>
        <td valign="top">
			<input type="email" id="email" name="email" size="20" tabindex="6" />
	    </td>
        <td style="width: 100px;">Téléphone:</td>
        <td valign="top">
			<input type="tel" id="tel" name="tel" size="10" tabindex="7" />
	    </td>
    </tr>
 
</tbody></table>
 
 
	</fieldset>

Qui donne çà:

Nom : capture.jpg Affichages : 151 Taille : 25,5 Ko

Les champs se retrouvent bien positionnés comme je le veux mais je bloque sur un dernier détail, le réglage de l'espacement vertical entre chaque bloc label/champs.
Je pensais qu'avec un coup de margin comme j'ai mis dans la section style çà règlerait le Pb mais non. J'avoue avoir fouillé moulte tuto mais je n'ai pas trouvé la bonne soluce.
Certains diront que c'est un sujet de débutant, çà tombe bien je suis débutant :lol:
Merci pour l'aide que vous pourriez m'apporter.
Images attachées
 
]]> Mise en page CSS gardeboue https://www.developpez.net/forums/d2181651/webmasters-developpement-web/mise-page-css/alignement-champs-formulaire/ Saut de ligne par CSS ? https://www.developpez.net/forums/showthread.php?t=2181493&goto=newpost Wed, 14 Jan 2026 20:39:25 GMT Bonjour tout le monde, Des... Bonjour tout le monde,

Des liens apparaissant concaténés sur une ligne, pour les rendre plus lisibles j'ai aéré l'affaire avec ceci :

Code:
1
2
3
4
5
6
7
8
9
    a::after
    {
        content:"*|* ";
    }
 
    a
    {
        margin-left:5px;
    }
Maintenant, je vois que ça dépasse la largeur de l'écran, j'aimerais bien ajouter un saut de ligne après le neuvième.

Est-ce que ça peut se faire en CSS ?
J'exécute ça côté client avec l'extension Stylus, donc modifier le code source est tout de suite beaucoup plus compliqué.

J'ai vu que si je mets une balise dans :after, elle n'est pas interprétée. ]]> Mise en page CSS Gluups https://www.developpez.net/forums/d2181493/webmasters-developpement-web/mise-page-css/saut-ligne-css/ <![CDATA[Fonctionnement emboîtage d'éléments en FLEX]]> https://www.developpez.net/forums/showthread.php?t=2180631&goto=newpost Tue, 25 Nov 2025 15:34:26 GMT J'ai un emboîtage de flex qui ne fait pas ce que je pensais et je ne vois pas pourquoi.
La présentation est la suivante

Objet 1
Objet 2 || Objet 3
Objet 4=Image 300px
Objet 5 Image 300px


HTML
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
<div class='corps'>
 
<div class='entete'>
<div class="groupe"> <!-- Colonne 1-->
 <div class="nom">objet1 </div>
<div class="infogroupe">
Objet2
Ojbet 3
</div>   <!--fin infogroupe-->
</div>  <!-- fin groupe=colonne1-->
 
<div>  <!-- Colonne2-->
Objet 4 =image à 300px
Objet 5 = image
</div> <!--Finde colonne 2-->
</div><!--fin dentete-->

Avec le CSS
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.corps{display:flex;
flex: 0 1 950px;
flex-wrap:wrap}  boîtes empilée les unes au dessus des autres
.entete{display:flex;
flex-wrap:nowrap;  dans celle-là  les boîtes sont côte-côte
justify-content:space-between}
.groupe{display:flex;
flex:1 1 600px;
flex-wrap:wrap;} deux blocs superposés
.nom{
  width: 600px;
  display: inline-block;
*/flex:1 1 600px;*/
}
.infogroupe{
grid-template-columns:1fr 1fr;  deux colonnes
font-size:16px;}
Et maintenant lorsque je réduis la fenêtre du navigateur rien ne se passe tout reste à 950px.
Je m'attendais à ce que la colonne 2 passe sous la colonne 1 comme ça se passait lorsque la présentation était
codée en ligne
avec objet 1 et 4 en premier bloc horizontal
objet 2,3,5 en second blocs grid 3x1fr
là, lors d'une réduction l'objet 4 passait sous l'objet1.
J'ai reproduit le même schéma mais ça ne fait pas ce que je pensais.

J'ai tenté divers suppression de ceci ou de cela ou ajout de flex ici ou là notamment avec la définition des 600px mais rien ne change tout reste à 950
Où est-ce que je me trompe ? ]]> Mise en page CSS noradan https://www.developpez.net/forums/d2180631/webmasters-developpement-web/mise-page-css/fonctionnement-emboitage-d-elements-flex/ <![CDATA[Supprimer l'espace sous une image]]> https://www.developpez.net/forums/showthread.php?t=2180244&goto=newpost Sun, 02 Nov 2025 15:45:21 GMT Bonjour je mets des images... Bonjour
je mets des images dans un cadre et j'ai un petit espace blanc sous l'image dont je ne comprend pas l'origine
L'image fait 400x400 et le cadre n'est pas ajusté en bas
Code:
1
2
3
4
5
<div class="adroitep">
  <a href="master/master.php">
    <img src="master/master.jpg">
  </a>
</div>
avec

Code:
1
2
3
4
5
6
7
8
9
.adroitep img{width:200px}
.adroitep{
margin:1em;
float:right;
border:double
}
.adroitep:hover{border:solid;
border-color:lime;
border-width:10px}
Et le même sans lien
Code:
1
2
3
<div class="photogroupe">
  <img src="photogroupe.jpg" alt="Groupe" width="300px">
</div>
avec
Code:
1
2
3
4
5
6
7
8
.photogroupe{width:300px;
border:double;
background-color:#FFF8DC;
font-size:14px;
display:inline-block;
margin-left:30px;
text-align:center
}
.
où pareillement j'ai un petit espace en bas entre l'image et le cadre.
Je ne comprends pas d'où ça vient et surtout, je n'en veux pas, mais je ne vois pas ce que je peux changer. C'est peut-être un truc invisible par défaut.

Comment puis-je faire pour avoir un cadre collé à l'image ? ]]> Mise en page CSS noradan https://www.developpez.net/forums/d2180244/webmasters-developpement-web/mise-page-css/supprimer-l-espace-sous-image/ <![CDATA[Placement d'éléments]]> https://www.developpez.net/forums/showthread.php?t=2180174&goto=newpost Wed, 29 Oct 2025 15:03:16 GMT Bonjour ça fait un an que je... Bonjour
ça fait un an que je m'y suis mis et je n'ai toujours pas pigé comment se placent les éléments.
La seule chose que j'arrive à faire marcher c'est text-align.
Ici j'ai un body puis une colonne centrale de classe "corps"
Code:
1
2
3
4
5
6
7
body{display:flex;
justify-content:center;
background-color:black;
color:yellow}
 
.corps{flex:0 1 800px;
justify-content:center;}
Dans ce corps j'ai une liste que je veux au milieu (normal c'est pour ça que j'ai mis le corps avec un justify-content center)
sauf qu'évidemment autant "... dans un violon" le contenu n'est pas du tout justifié "au centre"!

ma liste est à gauche !

Code:
1
2
ul{width:200px;
background-color:blue;
Je ne comprends toujours pas ce que je dois écrire et où pour avoir mon objet liste au milieu ou d'ailleurs n'importe quel objet.
Le jeu entre justify-content et display me reste totalement étranger !
A chaque fois je pose une question, à chaque fois je crois avoir appris quelque chose et à chaque fois ça recommence
à savoir "ça march'pô ! "

Que ce soit flex ou pasflex, je les veux espacés, ils sont collés, je les veux collés, ils se retrouvent sur deux lignes, je les veux au centre ils sont à gauche...Dieu que c'est énervant ! ]]> Mise en page CSS noradan https://www.developpez.net/forums/d2180174/webmasters-developpement-web/mise-page-css/placement-d-elements/ Comportement bizarre de ma feuille de style https://www.developpez.net/forums/showthread.php?t=2180123&goto=newpost Mon, 27 Oct 2025 19:10:19 GMT bonjour je viens de... bonjour

je viens de fabriquer une page ou j'ai une sous-liste ol ol. J'ai voulu la mettre en lower-roman.

Et bien si dans ma page css j'écris ol ol{list-style-type:lower-roman} il ne se passe rien et les item sont en décimal.
La seule façon de les mettre en lower-roman et d'écrire au début du fichier des balises <style></style> avec le même ol ol{list-style-type:lower-roman} dedans.

Je ne comprend pas pourquoi ?

Il n'y a aucune définition de ol dans mes feuilles de style. ]]> Mise en page CSS noradan https://www.developpez.net/forums/d2180123/webmasters-developpement-web/mise-page-css/comportement-bizarre-feuille-style/ <![CDATA[Propriété CSS pour faire une croix dans le fond d'une DIV]]> https://www.developpez.net/forums/showthread.php?t=2180062&goto=newpost Fri, 24 Oct 2025 08:56:08 GMT bonjour, ça parait bête ou... bonjour,

ça parait bête ou trop simple, mais étrangement je n'ai pas trouvé de propriété CSS pour mettre une croix dans le fond d'une DIV (pour marquer une case comme barrée).
je sais hachurer, mettre une image (fichier),un dégradé, mais il n'y a rien pour mettre une croix en background sans utiliser d'image ?

y-a-t-il une astuce à connaître pour faire la croix ? ]]> Mise en page CSS clavier12AZQSWX https://www.developpez.net/forums/d2180062/webmasters-developpement-web/mise-page-css/propriete-css-faire-croix-fond-d-div/