Aide barre de recherche mauvaise endroit / dev débutant /

Victor_1298 Messages postés 7 Date d'inscription Statut Membre Dernière intervention -
Phebus - 13 août 2019 à 02:29

Bonjour, je viens de me lancer dans le développement et j'aurai besoin d'aide je n'arrive pas a déplacer la barre de recherche dans mon code pour qu'elle apparaisse en dessous de film, (barre de recherche trouver sur un forum ccm) si quelqu'un pourrait m'aider ce serait très sympa merci d'avance !

voici le code :

<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="css film.css">
<head>
	<p class="titrefilm">Les Films</p>
</head>
<body>
	<a class="menus" href="Les séries.html" title="n'en regarde pas trop non plus" target="_blank">Les séries</a>
	<br>
	<br>
	<a class="menus" href="accueil.html" title="pour toute les infos" target="_blank">l'accueil</a>
</body>
<br>
<br>
<br>
<html>
<head>

<meta charset="utf-8" />
<title>Films_liens</title>
<style>

body {

}

#search {
width:230px;
height:24px;
background:#F5F2F0;
box-shadow:1px 1px 2px rgba(0,0,0,.3) inset
}

#search .btn-left-loupe {
display:block;
background:url(http://www.littlemome.fr/template-loupe_png.png) no-repeat 0 0;
width:24px;
height:24px;
float:left;
margin:0
}

#search .btn-right-fleche {
display:block;
background:url(http://www.missionprovidence.com/french/images/60269144puce-fleche-png.png) no-repeat 0 0;
width:24px;
height:24px;
float:left;
margin:6px 0 0
}

#search input {
outline:0;
border:0
}

#search input[type=text] {
display:block;
font:300 12px HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
background:none;
text-shadow:0 1px white;
float:left;
height:24px;
width:160px;
line-height:25px;
color:#666;
margin:0
}
</style>
<script src="http://dabblet.com/code/prefixfree.min.js"></script>
<script>
if (parent === window) {
	document.addEventListener('DOMContentLoaded', function() {
		{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"}		
	});
}
</script>
</head>
<body><!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<form id="search" method="post">
	<div class="btn-left-loupe"></div>
	<input class="search_data" name="saisie" type="text" placeholder="Mots-Clefs..." required />
	<input class="btn-right-fleche" name="go" type="submit" value="" />
	<section>
	<aside>
		<h1 class="filmpargenre">Les films par genre</h1>
		<li><a href="Horreur.html" target="_blank" title="Les Meilleurs Films d'Horreurs.">Films d'horreurs.</a></li>
		<li><a href="Comédie.html" target="_blank" title="Les Meilleurs Comédie">Comédies</a></li>
		<li><a href="Romance.html" target="_blank" title="Les Meilleurs Films de Romance">Romance</a></li>
		<li><a href="Tragédie.html"target="_blank" title="Les Meilleurs Tragédie">Tragédie</a></li>
		<li><a href="Espionnage.html" target="_blank" title="Les Meilleurs Films d'Espionnage">Espionnage</a></li>

	</aside>
</section>
</form>
</body>
</html>
</body>
</html>

Configuration:

Windows / Chrome 76.0.3809.100

voici une image pour illustrer l'état actuelle ! :

Afficher la suite

A voir également:

Aide barre de recherche mauvaise endroit / dev débutant /
Massgrave dev - Accueil - Windows
Dev c++ - Télécharger - Langages
Recherche automatique des chaînes ne fonctionne pas - Guide
Dev home. - Télécharger - Développement
Remettre l'ecran a l'endroit - Guide

1 réponse

Réponse 1 / 1

Utilisateur anonyme

bonsoir,
et si tu mettait le film et apres tu met

<br>

sa pourrai regler ton probleme nan ?
a+

Victor_1298 Messages postés 7 Date d'inscription Statut Membre Dernière intervention 3

désolé je me suis mal exprimé sous le titre Les films au milieu .

Phebus

bon c'est pas du développement ça... c'est de l'intégration allez voir du côté de CSS: exemple de recherche 'positionnement en CSS'

Ceci est faux: <body><!DOCTYPE html>
Un doctype indique le "type" du document donc se met au début comme il y est. ça sert à rien de le remettre ensuite.
Et comme dit Lombreblance34 déjà si vous voulez que quelque chose apparaisse après ça serait bien de le placer après et non au début ;) ça paraît assez logique:

<form id="search" method="post">
<!-- c'est bien de faire un formulaire mais encore faut il le fermer //-->
<div class="btn-left-loupe"></div>
<input class="search_data" name="saisie" type="text" placeholder="Mots-Clefs..." required />
<!-- vu que l'input est placé devant(dans le flux du document) c'est plus compliqué de le placer ailleurs! //-->
<input class="btn-right-fleche" name="go" type="submit" value="" />
<section>
<aside>
<h1 class="filmpargenre">Les films par genre</h1>
<!-- si l'input doit apparaître après le titre c'est ici que ça se passe //-->

Pour centrer il y a tout un tas de méthodes avec CSS.

Vous avez surtout de grosses lacunes en HTML et en CSS. Concentrez vous là dessus avant de penser faire du développement , ce qui impliquera de la programmation, donc manipuler le DOM(HTML et CSS).

Le reste est une blague comme ce formulaire qui englobe tout sans aucun sens, la présence d'un a s ide qui est le seul élément de section et le fait que la section en elle même n'ai aucun titre...bref commencer par les fondamentaux ça vous évitera de faire trop du n'importe quoi ;)

https://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html

Discussions similaires

Barre verticale droite sur clavier

Recherche de pairs sur utorrent bloqué

Comment faire le signe = barré?

O barré horizontalement

Votre réponse

Discussions similaires