Discussion :

[nikicaillou]

Bonjour,

J'aimerais que ma boîte s'ajuste au contenu à l'intérieur de la boîte et non du browser. Dans mon css, je lui donne une grandeur left, top, width et height mais de cette façon elle reste fixe. Si je met des %, elle s'ajuste à la fenêtre du browser et non du contenu. Il y a-t-il une façon ?

Car mon contenu n'est pas toujours de la même longeur et j'aimerais que la boîte s'y ajuste.

merci.

[Xunil]

Tu n'as qu'à utiliser une balise inline au lieu d'une balise block.

[nikicaillou]

Ce que j'ai fais mais ça ne fonctionne pas. Le contour de ma boîte chevauche mon texte.

Dans mon css:
... code css...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
#boiteinfoinde {
	position:absolute;
	left:44px;
	top:335px;
	width:186px;
	height:314px;
	z-index:2;
	font-size:12px;
	border-color:#333;
	border-style:double;
	display:inline;
}

Dans mon fichier html:
...code html...

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
<div id="boiteinfoinde">
  <p id=titreville>Inde</p>
  <p>
      <span id="titreinfo">Capitale:</span> <span id="info"> New Delhi</span><br />
      <span id="titreinfo">Superficie:</span> <span id="info">3 287 590 km2</span><br />
      <span id="titreinfo">Population: </span><span id="info">1 095 351 995</span><br />
      <span id="titreinfo">Densit&eacute;:</span> <span id="info">324 habitants/km2</span><br />
      <span id="titreinfo">Esp&eacute;rance de vie:</span><span id="info"> 63 ans</span><br />
      <span id="titreinfo">Pop. urbaine:</span><span id="info"> 28 %</span><br />
      <span id="titreinfo">Alphab&eacute;tisation:</span><span id="info"> 56 %</span><br />
      <span id="titreinfo">Monnaie:</span><span id="info"> Ruppie (1$ = 41 rps)</span><br />
      <span id="titreinfo">Langues:</span><span id="info"> L&rsquo;anglais et 15 langues officielles, il existe environ 4000 dialectes non reconnus.</span><br />
      <span id="titreinfo">R&eacute;gime:</span><span id="info"> D&eacute;mocratie parlementaire</span><br />
      <span id="titreinfo">&Eacute;tat:</span><span id="info"> R&eacute;publique f&eacute;d&eacute;rale</span><br />
      <span id="titreinfo">Religions:</span><span id="info"> Hindous (82%), musulmans (12%), chr&eacute;tien (2,3%), sikhs (2%), bouddhistes (0,8%) et jains (0,4%)</span><br />
      <span id="titreinfo">Fuseau horaire:</span><span id="info"> UTC +5,30</span><br /></p>
</div>

J'ai la même boîte avec du texte dynamique, d'ou vient mon problème.

[MasterOfChakhaL]

Salut,

Tu utilises des id multiple dans ton html...
Un id signifie identifiant, donc par définition, ca doit être unique, c'est un peu le numéro de sécu de ton élément.

Si tu remplaces tes id par des class, alors sera correcte car un classe peut-être réutilisée

Dans le css, tu fais appel aux id de cette manière:

Code :

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

#mon_icentifiant { ... }

et aux classes de cette manière:

Code :

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

.ma_classe { ... }

[nikicaillou]

Merci j'ai fais le changement, je ne comprennais pas quand on devait utiliser un ou l'autre.

Par contre, mon problème est toujours présent. La boite reste fixe au coordonée que je lui ait donnée. Elle ne s'ajuste pas au contenu.

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
 
.titreville {
    font-size: 16px;
	font-family: Papyrus, Arial, Helvetica;
	color: #ccc;
	text-align:center;
	display:block;
}
.titreinfo {
	font-size: 12px;
	font-family: Papyrus, Arial, Helvetica;
	color: #999;
	text-align:left;
	display:inline;
}
.info {
	font-size: 12px;
	font-family: Papyrus, Arial, Helvetica;
	color: #ccc;
	display:inline;
} 
#boiteinfoinde {
	position:absolute;
	left:44px;
	top:335px;
	width:186px;
	height:100px;
	z-index:2;
	font-size:12px;
	border-color:#333;
	border-style:double;
	display:inline;
}

[MasterOfChakhaL]

re,

dans ta boiteinfo, tu utilises display:inline et position:absolute. Un élément positionné est géré comme un block, donc tes déclarations sont contradictoires ils me semble.

Si j'étais toi, j'enleverais le display:inline.
Toujours sur boiteinfo tu peux au choix utiliser min-width (non reconnu par IE6) soit tu indiques une largeur faible et tu ajoutes un overflow:visible

Je pense que ces solutions devraient marcher, à moins que je n'ai pas bien compris ton problème...

[Candygirl]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
#boiteinfoinde {
	position:absolute;
	left:44px;
	top:335px;
	width:186px;
	height:100px;
	z-index:2;
	font-size:12px;
	border-color:#333;
	border-style:double;
	display:inline;
}

Par défaut un élément que tu positionnes en absolu s'adaptera à la taille de son contenu. Si tu vires simplement ses dimensions tu devrais obtenir ce que tu souhaites, non? Ou alors éventuellement spécifier un max-width ?

Code :

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

1
2
3
4
5
6
7
8
9
10
#boiteinfoinde {
	position:absolute;
	left:44px;
	top:335px;
	z-index:2;
	max-width:186px; /* si souhaité */
	font-size:12px;
	border-color:#333;
	border-style:double;
}

[nikicaillou]

Merci beaucoup, le problème est réglé.