28172 sujets

CSS et mise en forme, CSS3

CSS Input type text et longueur automatique.

Bonjour,

j'essaye de créer une barre de recherche en css / xhtml.

Cette barre comporte trois éléments :

une image sur la gauche,
un champ de recherche au milieu,
un bouton sur la droite.

Je voudrais que les espaces (margin-left/right) entre image/champ et champ/bouton soit fixe et que la taille du champ de recherche prenne toute la place qu'il y a entre l'image et le bouton. Ainsi la taille du champ de recherche variera lorsqu'on redimensionnera la fenêtre.

Est-ce possible ?

Merci de votre aide Smiley smile
Salut,

Commence par créer un grand div que tu peux appeler barre_recherche.

Dans ce div, tu crées 3 autres divs, que tu appelles image, champ et bouton par exemple.

Ensuite, dans ton fichier html tu fais :

<div id="barre_recherche">
<div id="image></div>
<div id="champ></div>
<div id="bouton"></div>
</div>

Ainsi, tu auras les 3 divs contenus dans ta grande div. Pour les positionner comme tu as dit, faut que tu fasses des tests. Tu donnes une taille width et height aux divs, puis tu les places avec margin-top et margin-left.

Si ça te pose encore problème n'hésite pas à redemander Smiley smile
Salut,

@Ines > à quoi servent tous ces éléments DIV ? Smiley smile
D'autant plus que l'image étant décorative elle ne devrait pas se trouver dans le code html mais dans le css... et d'ailleurs cela ne répond pas à la question qui est de pouvoir redimensionner la taille du navigateur.

@Nad1 > à l'heure actuelle je ne vois pas d'autre solution (robuste) que d'utiliser un tableau. Cela purrait donner par exemple (mon image fait 15px * 15px) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
form {
	background: #FFFF99;
	border: 1px solid black;
}
#td_input {
	background: transparent url(include/images/loupe.gif) 10px center no-repeat;
	width: 98%;
	margin: 0 auto;
	padding: 10px 0pt 10px 40px; 
}
#recherche {
	display: block;
	width: 99%;
	margin: 0;
	padding: 0;
}
#td_submit {
	margin: 0;
	padding: 0 10px;
}

</style>
</head>
<body>
<div>
<form action="index.php" method="post">
<table width="100%">
	<tr>
		<td id="td_input"><input type="text" name="recherche" id="recherche" /></td>
		<td id="td_submit"><input type="submit" value="OK" /></td>
	</tr>
</table>
</form>
</div>
</body>
</html>
Oui j'avais envisagé la solution des tableaux comme dernière solution mais je ne suis pas fan des tableaux Smiley decu

Pour ce qui est des "div", j'ai testé, et je n'arrive pas au résultat voulu Smiley decu . Dans un premier temps j'ai fait 3 "div" positionner comme il le faut avec float:left/right.

Le problème est que lorsque dans la "div" du centre je met un "input" et que je lui spécifie de prendre comme largeur "100%", il prend 100% de la taille de la "div" relative (ce qui parait normal) et donc recouvre les parties gauche et droite. En essayant de tricher en mettant un "overflow:hidden" il ne recouvre plus que la partie de droite.

Donc comme tu le dis je pense que l'utilisation des tableaux est la seule solution.Je vais donc partir sur ça à moins que quelqu'un à une autre idée ?

Merci.
Heyoan, c'était pour éviter d'utiliser un tableau. Mais si ça marche comme tu le dis, y'a plus de soucis Smiley lol
Sujet clos
Aller à