Créer une barre de recherche HTML de la longueur de la page ? Fermé

Question

Bonjour, 

D'abord je me présente: J'ai 15 ans et j'aime créer des sites webs.... Je suis autodidacte, j'apprend en regardant des modèles déjà fait, et la il y a quelque chose que je ne trouve pas ...

Alors , je vous dit mon probleme : quand je vais sur FaceBook, je constate que la page est centrée (jusque là, pas de problème) mais ce que j'aimerai pouvoir faire, c'est une barre de recherche similaire à ce réseau social, c'est-à-dire qui s'étend sur toute la longueur de la page, quelque soit l'écran.

Je vous explique plus clairement : sur ce site, il y a le logo en haut à gauche, et en dessous une barre de navigation qui s'étend sur tout votre écran. Ma question est simple : comment faire une barre similaire ? Y a-t-il un code spécifique, est-ce un jeu de CSS ?

En vous remerciant d'avance,

Cordialement

Configuration: Windows 7 / Chrome 23.0.1271.97

L0ci · Accepted Answer

Bonjour,

 Tu peux créer des marges droites et gauches relatives à la largeur de l'écran (en %) et mettre la largeur de ton textbox à 100%.

DrFreeze · Answer

@L0ci Je vais essayer cette technique, je te remercie :)

Bludwarf · Answer

Salut DrFreeze,

J'ai l'impression que cette barre de navigation (la barre bleue) est positionnée en fixed et calée sur les bords de l'écran. Un code CSS du genre doit être utilisé :


position: fixed;
margin: 0;
top: 0;
left: 0;
right: 0;
height: [la hauteur de la barre en pixels]px;


Fais attention par contre au positionnement CSS, c'est une des choses les plus galère quand on veut faire des sites web. Si tu veux un peu plus de détails je te conseille ce site très bien fait et très clair :

  - https://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html
  - https://www.alsacreations.com/tuto/lire/608-initiation-positionnement-css.html#sommaire

Après tu peux aussi utiliser les outils fourni par les navigateurs pour décortiquer le code source de manière plus simple. Genre sur Chrome quand tu appuies sur F12 puis la loupe.

Bon courage ;)

Robinss · Answer

Salut, il te suffis de faire quelques choses de ce genre : 

.NomDeTaClasse {
 width: 100%;
height: [TaHauteurSOuhaiter];
}

En gros utilises "width: 100%". 
Bonne continuation ;-)

DrFreeze · Answer

Je vous remercie de vos réponses, celle de Bludwarf m'as bcp aidé et celle de Robinss aussi ;) Merci à tous !

Je balance le lien dès que je l'ai fini !

Cordialement !

briglim · Answer

Il existe une autre manière qui se veut de mettre le contenu de ta barre dans une div container qui englobe toute la partie du code source de ta barre.
Et dans le code css il te suffit de mettre

Width:100%
Margin: 0 auto
Height: la auteur soit en pixel soit en pourcentage (les pixels sont recommander car tout le monée n'a pas le même écran )

Hestia44 · Answer

Bonjour, 

Je pense que c'est plutôt un IFRAM qui va falloir

Créer une barre de recherche HTML de la longueur de la page ?

7 réponses

Discussions similaires