3 div sur le même ligne [Résolu]

[dominos]

Bonjour,



L'illustration ci-dessus représente un type Edit composé de 3 <div>. Dans la partie centrale se trouve un type edit, on défini la taille du edit à l'aide de la méthode size. Ces trois morceaux permettre d'obtenir un composant un peu plus design.

Voila le code des 3 morceaux:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
div.inpL {
	background: url("../../images/inpL.png");
	background-repeat: no-repeat;
	height: 28px;
	width: 9px;
	float: left;
}
 
div.inpM {
	background: url("../../images/inpM.png");
	background-repeat: repeat-x;
	height: 28px;
	float: left;
}
 
div.inpR {
	background: url("../../images/inpR.png");
	background-repeat: no-repeat;
	height: 28px;
	width: 9px;
	float: left;
}

Code :

1
2
3
   <div class="inpL"></div>
   <div class="inpM"><input type="text" class="inp" size="20"></div>
   <div class="inpR"></div>

Le soucis qui se poste, c'est que si j'aligne plusieurs Édits redessinés sur une même ligne et que la taille de la page ne soit pas fixe, tout se décale, comme le montre l'illustration ci-dessous, il faudrait que les 3 morceaux restent au même endroit ou que se soit l'ensemble qui fasse un retour chariot.



J'ai essayé de placer l'ensemble dans une div, mais ça n'a rien changé ou peut être que je n'ai pas su faire.

Merci d'avance pour vos conseils.

[Msieurduss]

Le fait de les placer dans une DIV fonctionnera si tu lui donnes une taille. Il faut que cette taille soit suffisante pour accueillir les trois, bien entendu (sinon le conteneur flottant le plus à droite passera en-dessous).

Tu dis "que la taille de la page ne soit pas fixe", tu ne veux pas donner une taille à cette page ? Même en % ? Pourquoi ?

En fait, il faudrait voir ce qu'il y a autour pour t'aider, je pense

[copin]

Bonjour,

Je remarque que ta class

Code :

1
2
3
4
5
6
7
 
div.inpM {
	background: url("../../images/inpM.png");
	background-repeat: repeat-x;
	height: 28px;
	float: left;
}

N'a pas de largeur de spécifier. Elle prends donc par défaut toute la largeur restant de ton écran à la droite de div.inpL. Je pense que si tu essaies de mettre une valeur en % comme le dis Msieurduss ca devrait fonctionner. Place cette valeur dans la class inpM sans créer de Div conteneur.

Sinon la solution de créer une div qui englobe les trois est une autre solution comme proposé par Msieurduss

Tcho

[dominos]

Merci pour vos réponses,

Je pense que si tu essaies de mettre une valeur en % comme le dis Msieurduss ca devrait fonctionner.

Ce n'est pas l'objectif puisque c'est gérer par la méthode size. De plus rien n'empèche aux 3 morceaux de se décaler même avec un width défini sur la classe inpM. Le seul moyen et qui ne me convient pas, est de placer l'ensemble dans une <div> et de définir une largeur fixe. Moi ce que je voudrai c'est que la largeur de cette div ne puisse pas aller en dessous de la largeur total des 3, quelque soit le size défini, et que l'ensemble reste un bloc quelque soit la largeur de la page.

Voici l'ensemble du code (Simplifié) :

<div class="inpContent">
<div class="inpL"></div>
<div class="inpM"><input type="text" class="inpText" size="10"></div>
<div class="inpR"></div>
</div>

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
div.inpContent {
    float: left;
}
 
div.inpL {
	background: url("../../images/inpL.png");
	background-repeat: no-repeat;
	height: 28px;
	width: 9px;
	float: left;
}
 
div.inpM {
	background: url("../../images/inpM.png");
	background-repeat: repeat-x;
	height: 28px;
	float: left;
}
 
div.inpR {
	background: url("../../images/inpR.png");
	background-repeat: no-repeat;
	height: 28px;
	width: 9px;
	float: left;
}
 
input.inpText {
	height: 14px;
	top: 6px;
	position: relative;
	border: 0px solid transparent;
	background-color: transparent;
	font-family: arial;
	font-size: 14px;
	color: #333;
}

[Candygirl]

Envoyé par copin

Bonjour,

Je remarque que ta class

Code :

N'a pas de largeur de spécifier. Elle prends donc par défaut toute la largeur restant de ton écran à la droite de div.inpL.

Ce que tu décris est le comportement par défaut d'un type bloc. La propriété float modifie ce comportement et la largeur du parent s'adapte alors en fonction de ses enfants.

@dominos

Tu devrais jouer avec des inclusions de div plutôt que de les faire flotter à côté. Qqch du genre:

Code html :

1
2
3
4
5
   <div class="inpL">
      <div class="inpR">
         <div class="inpM"><input type="text" class="inp" size="20"></div>
      </div>
   </div>

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
div.inpL {
	background: url("../../images/inpR.png") no-repeat left center;
        float:left;
}
div.inpR {
	background: url("../../images/inpL.png") no-repeat right center;
        padding:0 9px;
}
 
div.inpM {
	background: url("../../images/inpM.png") repeat-x center;
	height: 28px;
}

[NoSmoking]

pourquoi ne pas utiliser une structure du type

Code html :

1
2
3
4
5
<div class="inpContent">
  <img src="../../images/inpL.png" alt="$">
  <input type="text" class="inpText" size="21">
  <img src="../../images/inpR.png" alt="$">
</div>

avec

Code css :

1
2
3
4
div.inpContent {
  white-space : nowrap;
  float:left;
}

à affiner bien sûr

[dominos]

Merci Candygirl, c'est exactement ce que je cherche à faire, mais après essai ça ne fonctionne pas sous IE

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
<style>
div.inpL {
	float:left;
	border: 1px solid red;
}
div.inpR {
	padding:0 9px;
	border: 1px solid blue;
}
 
div.inpM {
	height: 28px;
	border: 1px solid green;
}
</style>
 
<div class="inpL">
<div class="inpR">
<div class="inpM"><input type="text" class="inp" size="30"></div>
</div>
</div>
 
<div class="inpL">
<div class="inpR">
<div class="inpM"><input type="text" class="inp" size="20"></div>
</div>
</div>
 
<div class="inpL">
<div class="inpR">
<div class="inpM"><input type="text" class="inp" size="60"></div>
</div>
</div>

[dominos]

Envoyé par NoSmoking

pourquoi ne pas utiliser une structure du type

Code html :

avec

Code css :

à affiner bien sûr

Oui ça fonctionne aussi, mais le input text apparait en bas avec un décalage

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
<style>
img.inpL{
width: 9px;
}
img.inpR{
width: 9px;
}
div.inpContent {
  white-space : nowrap;
  float:left;
   border:1px solid red;
   background: url("images/inpM.png") repeat-x;
   height:28px;
   margin:0px;
}
input.inpText {
	height: 14px;
	border: 1px solid red;
	background-color: transparent;
	font-family: arial;
	font-size: 14px;
}
</style>
 
 
<div class="inpContent">
  <img src="images/inpL.png" class="inpL">
  <input type="text" class="inpText" size="10">
  <img src="images/inpR.png"  class="inpR">
</div>
 
<div class="inpContent">
  <img src="images/inpL.png" class="inpL">
  <input type="text" class="inpText" size="30">
  <img src="images/inpR.png"  class="inpR">
</div>
 
<div class="inpContent">
  <img src="images/inpL.png" class="inpL">
  <input type="text" class="inpText" size="20">
  <img src="images/inpR.png"  class="inpR">
</div>

Merci

[NoSmoking]

mets un vertical-align: middle à tes images pour voir...

[dominos]

ça va mieux mais y'a toujours le décalage du l'input

merci

[NoSmoking]

un margin : 0; et un padding :0; ne font rien ?

Il faut aussi que la hauteur des IMG soit en concordance avec la hauteur de l'IMPUT.

[dominos]

non ça ne change rien les images son découpées au pixel près, j'ai pointillé les 2images sur les cotés, l'image du centre n'a qu'1 pixel de largeur et stretch.

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
 
<style>
img.inpL{
width: 9px;
vertical-align: middle;
}
img.inpR{
width: 9px;
vertical-align: middle;
}
div.inpContent {
  white-space : nowrap;
  float:left;
   background: url("images/inpM.png") repeat-x;
   height:28px;
   margin : 0; padding :0;
}
input.inpText {
	height: 14px;
	border: 1px solid red;
	background-color: transparent;
	font-family: arial;
	font-size: 14px;
	 position: relative;
   vertical-align: middle;
 
}
</style>
 
 
<div class="inpContent">
  <img src="images/inpL.png" class="inpL">
  <input type="text" class="inpText" size="10">
  <img src="images/inpR.png"  class="inpR">
</div>
 
<div class="inpContent">
  <img src="images/inpL.png" class="inpL">
  <input type="text" class="inpText" size="30">
  <img src="images/inpR.png"  class="inpR">
</div>
 
<div class="inpContent">
  <img src="images/inpL.png" class="inpL">
  <input type="text" class="inpText" size="20">
  <img src="images/inpR.png"  class="inpR">
</div>

[dominos]

C'est bon ça fonctionne niquel ! Il faut tout mettre que la même ligne.

<div class="inpContent">
<img src="images/inpL.png" class="inpL"><input type="text" class="inpText" size="10"><img src="images/inpR.png" class="inpR">
</div>

Merci de ton aide précieuse, bon weekend.