Discussion :

[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 :

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
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 :

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

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 :

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

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 :

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
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]

Bonjour,

Je remarque que ta class

Code :

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

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.

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 :

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

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 :

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

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 :

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

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 :

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

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

à affiner bien sûr

[dominos]

pourquoi ne pas utiliser une structure du type

Code html :

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

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 :

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

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

à affiner bien sûr

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

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
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

[dominos]

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

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
<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>