Portée d'un div avec id, avec class ou sans rien

**awalter1** · 23/02/2023, 14h59

Bonjour,

Dans le cas du code suivant, le texte apparait sous l'image, alors que je pensais qu'il se mettrait à sa droite.
Si j'utilise une classe pour mon div, idem!
Dans le style si je remplace "#divApropos {" par "div {", les texte se met alors à la droite de l'image (ce que je voulais). Je ne comprends pas, je ciblais bien le div souhaité, non ?
Pour un gros pg html, le div étant trop générique, comment faire pour cibler le seul bloc qui m’intéresse?

Merci de vos éclaircissements.

Code:

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
<!DOCTYPE html>
<html lang="fr">
 
<head>
    <meta charset="UTF-8">
    <style>
        #divApropos {
            /* div { */
            display: table;
            float: left;
            height: 400px;
            width: 23%;
            padding: 10px 10px;
        }
 
        #col1 {
            background-color: rgb(36, 196, 44);
            width: 200px;
        }
 
        #col2 {
            background-color: rgb(149, 150, 202);
        }
    </style>
</head>
 
<body>
    <h2>A propos</h2>
    <div id="divApropos">
        <div id="col1">
            <img src="medias/moi-en-peintre.jpg" alt="photo du peintre" width="200px">
        </div>
        <div id="col2">
            <P>blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
                blabla blabla blabla blabla blabla blabla .</P>
        </div>
    </div>
</body>
 
</html>

**ddaweb** · 23/02/2023, 18h18

Ce sont col1 et col2 qui doivent se mettre l'une à côté de l'autre :

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
    <style>
        #divApropos {
            display: table;
            height: 400px;
            width: 23%;
            padding: 10px 10px;
        }
 
        #col1 {
            float: left;
            background-color: rgb(36, 196, 44);
            width: 200px;
        }
 
        #col2 {
            float: left;
            background-color: rgb(149, 150, 202);
        }
    </style>

Attention, si ton site est responsive : mettre des % et de px risque de te poser des problèmes

**awalter1** · 23/02/2023, 18h29

Ben non, ta solution ne change rien : le blabla reste sous l'image.
Je m'étais inspiré de ce lien : https://fr.w3docs.com/tools/code-editor/7056 ou le float:left était au niveau du div.
Ok pour ta remarque sur la cohabitation risquée entre px et %.

Merci

**ddaweb** · 23/02/2023, 19h25

Il faut appeler les class :

Code HTML :

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

1
2
3
4
5
6
7
8
9
<div class="divApropos">
        <div class="col1">
            <img src="medias/moi-en-peintre.jpg" alt="photo du peintre" width="200px">
        </div>
        <div class="col2">
            <P>blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla
                blabla blabla blabla blabla blabla blabla .</P>
        </div>
</div>

Je n'ai jamais travaillé avec ID pour le CSS ... mais dans ton exemple, il y a le CSS "boxes" qui joue

**NoSmoking** · 24/02/2023, 11h15

Bonjour,

Envoyé par awalter1

Je m'étais inspiré de ce lien : ... ou le float:left était au niveau du div.

Devant les innombrables exemples qui existent, tu aurais pu choisir autre chose.

Ceci étant, quelques précisions.

• Le float :left ne t'apportera que des cheveux blanc.

• Si tu mets un display:table sur le parent il te faut mettre un display:table-cell sur les enfants.

• Par contre si tu mets des display:table-cell sur les enfants tu peux omettre le display:table sur le parent.

• Dans ton cas tu as une image et du texte correspondant autant utiliser une structure du type :

Code html :

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

1
2
3
4
5
6
<figure>
  <img src="nom-fichier-image" alt="">
  <figcaption>
    <p>Du texte en rapport avec l'image.</p>
  </figcaption>
</figure>

**awalter1** · 24/02/2023, 12h05

La directive display:flex dans #divApropos résouds mon problème

.
Merci

Merci aussi à NoSmoking. Je testerai ta solution plus tard.
Je suis intrigué sur ta remarque concernant le lien https://fr.w3docs.com/tools/code-editor/7056, ce n'est pas un site qui fait autorité?

Merci

**mathieu** · 23/02/2023, 19h58

avec le sélecteur "div", le code css va aussi s'appliquer à "col1" et "col2" d'où la différence de résultat.

essayez plutot le modèle flex comme cela :

Code css :

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

1
2
3
4
5
6
        #divApropos {
            display: flex;
            height: 400px;
            width: 23%;
            padding: 10px 10px;
        }

https://developer.mozilla.org/fr/doc...ble_Box_Layout

Envoyé par ddaweb

Il faut appeler les class

les identifiants et les classes sont justes 2 sélecteurs différents mais on peux faire la même chose avec n'importe quel sélecteurs
https://developer.mozilla.org/fr/doc...%C3%A9lecteurs

Portée d'un div avec id, avec class ou sans rien

CSS

Vue hybride

Discussions similaires

Partager

Partager