Problème barre de recherche

Moon1916

21 novembre 2023 à 11:35:50

Bonjour, je viens tout juste de commencer la programmation et je me trouve face à un souci. Je suis entrain de re créer une page YouTube pour m'entrainer un peu. Le souci est que je veux mettre ma barre de recherche en haut de la page mais elle se met sur le coté. Je vous ai mis ci-dessous mon code html et css ainsi que la page. Pouvez-vous m'aider sil vous plait?

<head>
    <title>Youtube.com Clone</title>
    <style>
      
      .thumbnail {
        width: 300px;
        display: block;
      }

      .search-bar {
        display: block;
      }

      .video-title {  
        width: 300px;
      }

      .video-preview {
        width: 300px;
        display: inline-block;
      }
    </style>
  </head>

<body>
    <input classe="search-bar" type="text" placeholder="search">
        
    <div class="video-preview">
      <img class="thumbnail" src="thumbnails/thumbnail-1.webp">
    

      <p class="video-title">
        Talking Tech <strong> and AI with </strong> Google CEO Sundar Pichai!
      </p>
      <p class="video-author">
        Marques Brownlee
      </p>
      <p class="video-stats">
        3.4M views &#183; 6 months ago
      </p>
    </div>

    <div class="video-preview">
      <img class="thumbnail" src="thumbnails/thumbnail-1.webp">
    

      <p class="video-title">
        Talking Tech <strong> and AI with </strong> Google CEO Sundar Pichai!
      </p>
      <p class="video-author">
        Marques Brownlee
      </p>
      <p class="video-stats">
        3.4M views &#183; 6 months ago
      </p>
    </div>
  </body>
  </html>

-
Edité par Moon1916 21 novembre 2023 à 12:14:44

Lamecarlate

21 novembre 2023 à 11:56:29

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton Code de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.

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

AbcAbc6

22 novembre 2023 à 12:18:44

Bonjour,

La balise <img> ne sort jamais sans sont attribut alt obligatoire. Il sert à indiquer une description de l'image en texte utile pour les moteur de recherche mais surtout pour les personnes qui n'affiche pas les images pour quelques raisons que ce soit.

Pour les éléments de formulaire, ce serait mieux si il était dans un formulaire balise <form>

Tu verras que en ajoutant un formulaire cela ce positionne comme tu le souhaites.

Pour un input de recherche il existe un type search voir https://developer.mozilla.org/fr/docs/Web/HTML/Element/input/search

Ne modifie le display que si c'est nécessaire.

PS : Évite les titres de sujet avec "problème", si tu postes on se doute que tu as un problème inutile de l'indiquer dans le titre cela n'apporte aucune information supplémentaire quant au contenu du sujet.

-
Edité par AbcAbc6 22 novembre 2023 à 12:22:41

Moon1916

25 novembre 2023 à 14:03:54

Merci beaucoup pour les précisions mais je n'arrive toujours pas a mettre ma barre de recherche en haut. Le fait est que je ne veux pas mettre de formulaire, je ne vois pas réellement l'utilité pour l'instant en tout cas pour ce projet. Je me disais qu'il y avait peut être une erreur au niveau de mon code mais j'ai beau le relire je ne vois pas l'erreur.

AbcAbc6

25 novembre 2023 à 14:32:41

Bonjour,

>> Le fait est que je ne veux pas mettre de formulaire,

Dans ce cas comment penses-tu transmettre l'information que l'utilisateur rentre dans l'input?? Pourquoi tu ne veux pas écrire la balise <form>?

PS : ajouter un bouton type submit serait également utile.

-
Edité par AbcAbc6 25 novembre 2023 à 14:34:59