Float et input personnalisé

**CsJoe** · 27/05/2009, 16h32

Bonjour,

J'essaye de créer un champ input personnalisé dont voici le code :

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
.customInput {
	display: inline;
}
 
.customInput .left {
	float: left;
	background: url(ileft.png) top left no-repeat;
	height: 23px;
	width: 6px;
}
 
.customInput .right {
	float: left;
	background: url(iright.png) top right no-repeat;
	height: 23px;
	width: 6px;
}
 
.customInput input {
	display: block;
	float: left;
	background: url(icenter.png) top left repeat-x;
	border: none;
	height: 23px;
	font-size: 12px;
	color: #FFFFFF;
	padding-top: 3px;
}

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
	Nom :
	<div class="customInput">
		<div class="left">&nbsp;</div>
		<input type="text" name="name" value="azerty" size="5" />
		<div class="right">&nbsp;</div>
	</div>
 
	<div class="customInput">
		<div class="left">&nbsp;</div>
		<input type="text" name="name" value="azerty" size="5" />
		<div class="right">&nbsp;</div>
	</div>

Mon problème est que le div principal ne se comporte pas comme un élément inline. En l'occurence il se place en-dessous de "Nom :" au lieu d'être à côté. Si j'en mets deux de suite ils sont l'un à côté de l'autre.
J'imagine que cela a un rapport avec les float, mais si j'ai bien compris un élément ne flotte que dans son conteneur normalement?

**Erwan31** · 27/05/2009, 16h57

Bonjour,
le balisage suivant serait un peu plus pertinent:

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
label {float:left} 
.customInput .left {
	float: left;
	background: url(ileft.png) top left no-repeat;
	height: 23px;
	width: 6px;
}
 
.customInput .right {
	float: left;
	background: url(iright.png) top right no-repeat;
	height: 23px;
	width: 6px;
}
 
.customInput input {
	float: left;
	height: 23px;
	background: url(icenter.png) top left repeat-x;
	font-size: 12px;
	color: #FFF;
	padding-top: 3px;
}
</style>
</head>
<body>
	<div class="customInput">
		<label for="nom">Nom :</label>
		<span class="left">&nbsp;</span>
			<input type="text" name="name" value="azerty" size="5" id="nom" />
		<span class="right">&nbsp;</span>
		<span class="left">&nbsp;</span>
			<input type="text" name="name" value="azerty" size="5" />
		<span class="right">&nbsp;</span>
	</div>
</body>

Chaque champ input doit être associé à un label (pour le focus sur le champ au click sur le label et pour des raisons d'accessibilité) avec le couple for/id
Les div peuvent être remplacés par des span (sans aucune conséquence).
Le label est en float:left donc les boîte de block qui suivent s'affichent à sa droite.
Une boîte de block (un élement de niveau block ou un élément (non block) flottant ou pourvu d'un display:block) génère un retour chariot avant et après.
Pourquoi mettre des   dans les block?

**CsJoe** · 28/05/2009, 13h42

Merci Erwan31.

Float et input personnalisé

CSS

Discussions similaires

Partager

Partager