Discussion :

[VertoDebru]

Bonjour,
j'essaye de faire en sorte que mes DIV bubble se retrouve l'un en dessous des autres en les laissant en bas du DIV Bubbles, je suis pas expert en CSS donc je rame un peu là.

Code CSS :

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
#Content
{
    width: 100%;
    height: 100vh; min-height: 100vh; max-height: 100vh;
}
 
#Wrapper
{
    width: 450px;
    height: 300px;
}
#Avatar
{
    float: left;
    width: 150px;
    min-height: 300px;
    background: url("../images/Avatar.png") left bottom no-repeat;
}
#Bubbles
{
    position: relative;
    float: right;
    width: 300px;
    min-height: 300px;
    background-color: #666666;
}
#Bubbles .bubble
{
    position: absolute;
    bottom: 0px;
    margin: 5px;
    padding: 5px;
    width: 280px;
 
    border-radius: 0.4em;
    background-color: #F2F2F2;
    box-shadow: #cccccc 2px 2px 0px;
}

Code HTML :

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

1
2
3
4
5
6
7
8
9
<div id="Content">
        <div id="Wrapper">
            <div id="Avatar"></div>
            <div id="Bubbles">
                <div class="bubble">Contenu du texte1</div>
                <div class="bubble">Contenu du texte2</div>
            </div>
        </div>
</div>

Malheureusement comme ça tous les DIV bubble se superpose étant donnée qu'ils ont tous le bottom:0;

Comment faire pour que chaque DIV bubble ce retrouve les un en dessous des autres ?

[Sergio_zero]

Superposé c'est pas pareil que les un sous les autres ?

[Invité]

Bonjour,

C'est ta position absolue de ton css "#Bubbles .bubble" qui les font ce superposer.

En effet, avec ton bottom=0 tu les positionne au même endroit. Il faut donc soit supprimer ta position absolue, soit la changer en relative par exemple, suivant ce que tu veut faire après.