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

Fermé

Victor_1298 Messages postés 7 Date d'inscription lundi 12 août 2019 Statut Membre Dernière intervention 2 mai 2020 - 12 août 2019 à 22:25
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 ! :

A voir également:

Aide barre de recherche mauvaise endroit / dev débutant /
Telecharger dev c++ - Télécharger - Langages
Massgrave dev - Accueil - Windows
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
12 août 2019 à 22:34

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 lundi 12 août 2019 Statut Membre Dernière intervention 2 mai 2020 3
12 août 2019 à 23:26

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

Phebus
13 août 2019 à 02:29

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