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

Messages postés
4
Date d'inscription
lundi 12 août 2019
Statut
Membre
Dernière intervention
12 août 2019
- - Dernière réponse :  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 

1 réponse

Messages postés
105
Date d'inscription
mercredi 15 mai 2019
Statut
Membre
Dernière intervention
15 août 2019
20
0
Merci
bonsoir,
et si tu mettait le film et apres tu met
<br>
sa pourrai regler ton probleme nan ?
a+
Victor_1298
Messages postés
4
Date d'inscription
lundi 12 août 2019
Statut
Membre
Dernière intervention
12 août 2019
2 -
désolé je me suis mal exprimé sous le titre Les films au milieu .
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
Commenter la réponse de LombreBlanche34