Discussion :

[vinil]

Bonjour, je voudrais savoir comment est'il possible d'avoir une image en fond dans une div et de faire en sorte que celle-ci se modifie en fonction de la taille du texte a l’intérieur comme ceci :



j'ai essayer avec les pourcentage mais rien a faire je pense que je n'est pas la bonne méthode voici mon code css :

Code :

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

1
2
3
4
5
background-image: url(../logo/images_conversation/bulle-robo.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 45px;
    width: 182px;

[vttman]

Tester
=>

Code :

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

1
2
3
4
 
max-width : 100%;
height: auto;
display: block;

Pour ma part souvent (par mauvaise habitude sur des sites perso)
je mets

Code :

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

1
2
3
 
width : NaN;
height: NaN;

[vinil]

j'ai tester le code :

Code :

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

1
2
3
4
5
6
7
8
background-image: url(../logo/images_conversation/bulle-robo.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 45px;
    /* width: 182px; */
    max-width: 100%;
    height: auto;
    display: block;

et voici le resultat :

[vttman]

Il faudrait avoir le html du pavé correspondant
car là il y a image + du texte

Une remarque : on peut aussi créer cette bulle en css, faire une recherche sur goo*gle
avec "bulle css codepen" par exemple (Simple CSS Speech Bubbles),
ça pourrait simplifier je pense ...

[vinil]

J'ai bien regarder sur le site mais aucun ne correspond ou alors je doit refaire sans la photo en dessous comme pour IOS mais j'aimerai comprendre, voici mon 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
<div id="container">
		<div id="conversation" name="conversation">
 
		 <div id="roboconv">
 
		 <img width='40px' style='float: left; border-radius: 10px;' src='logo/robotcompta.png' />
			<div id='robot'>
				 <p style='font-size:14px; margin-left: 20px;'>
				Bonjour,aaaaaaaaaaaaaaaaaaaa
				</p>
			</div>
 
			</div>
		</div>
 
    <div id="containerform">
<form name="envoieform" method="POST">
	<input type="text" maxlength="150" placeholder="Entrer un message..." value="" name="msg" id="msg">
	<input type="image" src="logo/images_conversation/bouton-envoyer.png" value="envoyer"  onclick="envoie(); return false; ">
</form>
	</div>
 
	</div>

j'ai rajouter "aaaaaaaa" pour montrez que cela dépasse bien de mon cadre :



et voici le code css :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#container{
	float: left;
	width: 60%;
 
}
#conversation{
        overflow-y:scroll;
        display:block; 
		height: 300px;
		width: 100%;
		margin: auto;
        padding: 5px;
 
}
#conversation:hover{
        overflow-y:scroll;
        display:block; 
		height: 300px;
		width: 100%;
		margin: auto;
		padding: 5px;
 
}
#robot{
    background-image: url(../logo/images_conversation/bulle-robo.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 45px;
    width: 182px;
 
}
#roboconv{
    display: inline;
}

[NoSmoking]

Bonjour,
je ne vois pas dans ton cas comment tu veux adapter une image de background à une texte qui appartient à ma page.

Je modifierais mon approche est créerais non « info bulle » via le CSS du conteneur.

Code html :

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

1
2
3
<p class="info-bulle">
    Bonjour,aaaaaaaaaaaaaaaaaaaa
</p>

avec le CSS suivant, c'est un exemple

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
.info-bulle {
    display: inline-block;
    background: lightgreen;
    position: relative;
    line-height: 2em;
    padding: .25em;
}
.info-bulle::before {
    content: " ";
    width: 0;
    height: 0;
    left: -10px;
    border-top: 5px solid transparent;
    border-right: 10px solid lightgreen;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: 5px;
}

[NoSmoking]

Pour ma part souvent (par mauvaise habitude sur des sites perso)
je mets ....

tes valeurs étant incorrectes elles ne sont pas prise en compte ce qui présente donc aucun intérêt.

[vttman]

tes valeurs étant incorrectes elles ne sont pas prise en compte ce qui présente donc aucun intérêt.

Précision sur cette mauvaise habitude ... mais pas contestation Monsieur l'Agent
Ce valeurs "NotANumber" qui ne devraient pas être prises en compte impacte néanmoins comme je le désire, le rendu de mon site ...
sous Joomla que j'utilise pour le site en question. Le SGC en rencontrant ces NaN adapte / génère automatiquement
le bon css et fais en sorte que cela se passe bien ...

Quand je parlais de mauvaise habitude ... aujourd'hui c'est décidé je cesse !