Input de type text prennent tout le largeur dispo.

Sujet résolu

20 septembre 2018 à 15:42:44

Bonjour à toutes la communauté,

je suis entrain de réaliser le bandeau d'un site web et je souhaiterais que l'input du champ de recherche prenne toute la largeur disponible, sans écraser mon logo, si mon pictogramme de loupe qui lance la recherche.

Ci dessous mon code HTML simplifié :

<html>
	<head>
		<link href="style.css" type="text/css" rel="stylesheet" media="all">
	</head>
	<body>
		<header>
			<div class="mainHeader-GridWrapper">

				<div class="mainHeader-Logo-Wrapper">
					<a href="#" class="mainHeader-Logo"></a>
				</div>

				<div class="webHeader-Recherche-Wrapper">
					<input class="webHeader-Recherche_Champ" type="text" value="Recherche.. " />
					<input class="webHeader-Recherche_Loupe" type="image" src="./Test_images/Menu_Recherche.png" alt="Rechercher" />
				</div>

			</div>
		</header>
	</body>
</html>

Ci-dessous mon code CSS simplifié :

.mainHeader-GridWrapper
{
	width: 100%;

}

.mainHeader-GridWrapper, .webHeader-Recherche-Wrapper, .mainHeader-Logo-Wrapper
{
	height: 50px;
}

.mainHeader-Logo-Wrapper
{
	float: left;
}

.mainHeader-Logo
{
	content: url('Test_images/Test_Logo_Web.png');
	height: 25px;
	margin: 12.5px 10px 12.5px 0px;
}

.webHeader-Recherche_Loupe
{
	height: 25px;
	margin-top: 5px;
}

Ci-dessous mon résultat actuel :

Merci d'avance pour votre aide,

Bonne journée,

Lorsqu'on s'occupe d'informatique il faut faire comme les canards. Paraître calme en surface et pédaler comme un forcené en dessous.

Ivaalo

20 septembre 2018 à 16:03:25

Hello !

Essaye de lui mettre un display: block (ou inline-block), car tu ne peux pas modifier la largeur des éléments inline.

Le secret du SEO. Merci !

Vincent11alz

20 septembre 2018 à 16:59:47

Bonjour Ivaalo,

J'ai essayé le display: blocl et inline-block de la manière suivante, sans succès :

.webHeader-Recherche-Wrapper, .webHeader-Recherche_Champ{
	display: inline-block;
}

Dans le cas du block : la largeur ne change pas, mais la loupe passe sous le champ de texte

Dans le cas du inline-block : aucun changement.

Lorsqu'on s'occupe d'informatique il faut faire comme les canards. Paraître calme en surface et pédaler comme un forcené en dessous.

Frogweb

20 septembre 2018 à 17:09:05

Salut,

si la loupe passe en dessous c'est que ça fonctionne.
Mais du coup elle passe en dessous parce que ton input prend toute la place dispo et pousse la loupe.

Pour le inline-block il faut lui mettre un width, sinon il n'aura que la largeur suffisante pour afficher le texte.

PS les demi pixels ça n'existe pas, donc 12.5px ne veut rien dire.
Tu as confondu avec le pinard à 12.5° ?

-
Edité par Frogweb 20 septembre 2018 à 17:10:16

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Vincent11alz

20 septembre 2018 à 18:25:05

Salut et merci Frogweb de ta réponse,

Ça ne fonctionne pas dans le sens où l'Input ne prends pas toute la largeur disponible entre les deux images, tel que ci-dessous:

Une idée pour réaliser mes rêves ? :lol:

Ps : Je ne savais pas pour les 1/2px, mais en même temps c'est logique.. C'était pour centrer verticalement tous les idem du bandeau, à la base (hauteur du header à 50px, les éléments à 25px et du coup 25/2px pour les margin. à corriger du coup, merci du conseil) :euh:

-
Edité par Vincent11alz 20 septembre 2018 à 20:10:51

Lorsqu'on s'occupe d'informatique il faut faire comme les canards. Paraître calme en surface et pédaler comme un forcené en dessous.

Lamecarlate

21 septembre 2018 à 16:59:53

Bonjour,

flexbox est ton ami pour la vie : https://philipwalton.github.io/solved-by-flexbox/demos/input-add-ons/

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Vincent11alz

23 septembre 2018 à 1:49:25

Un milliard de merci Lamecarlate !

Effectivement avec cette solution (ULTRA simple en plus !) ça va énormément me simplifier la vie !

Edit : Sujet résolu

-
Edité par Vincent11alz 23 septembre 2018 à 1:50:09

Lorsqu'on s'occupe d'informatique il faut faire comme les canards. Paraître calme en surface et pédaler comme un forcené en dessous.

Lamecarlate

23 septembre 2018 à 6:54:01

Bonne continuation !

Pas d'aide concernant le code par MP, le forum est là pour ça :)