IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Html/Css Search button dynamique


Sujet :

CSS

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    septembre 2022
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : France, Deux Sèvres (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : septembre 2022
    Messages : 2
    Points : 1
    Points
    1
    Par défaut Html/Css Search button dynamique
    Bonjour,

    Je suis tous nouveau dans le monde du dev et de la création de sites internet. J'ai commencé à m'y intéressé il y a quelques mois et j'ai écris mes premières lignes de code il y a deux semaines, donc oui je suis un noob haha. Bref du coup pour apprendre je fais une formation payante en ligne, mais l'avancé dans est la formation est régulé pour que tous ceux de ma "classes" avancent à peu près au même rythme. Étant donné que ça m’intéresse beaucoup trop, ce rythme ne me convient pas. J'ai donc commencé à codé un petit projet web de mon côté, petit qui deviendra gros quand j'aurai plus de compétences j'espère. Cependant, je suis déjà bloqué sur certains points et je ne trouve la solution nul part.

    Mes problèmes sont les suivants :



    voici un lien qui vous mènera à un petit enregistrement de mon site à l'état actuel avec les problèmes à résoudre.

    sur la vidéo on peut voir que j'ai mis une icone "search" et que quand la souris passe dessus mon souhait était qu'à ce moment là seulement on voit la bar, mais la bar on la voit déjà un peut quand la souris n'est pas dessus et en plus l'icone est un peu décalé vers le haut.

    second problème , mon logo à gauche. Il est inclut dans la navbar mais du coup avec l'opacité à 0.8 il est moins clair j'aimerai le dissocié de ce que je demande à la navbar tous en le laissant dedans et qu'il soit à gauche, est-ce possible ? ( c'est un logo provisoire)

    enfin , quand je rajoute la commande backdrop-filter: blur; dans mon header , rien ne change, je ne comprend pas pourquoi, j'aimerai si possible rajouter un tout petit voile de flou sur l'image de fond.

    voici mes lignes de codes ( il est possible que ce soit du grand n'importe quoi , que vous trouvez ça mal organisé ou que j'ai mis des commandes qui ne servent à rien , mais comme j'ai dis je suis vraiment novice. Tous conseils pour m'améliorer seront les bienvenus. Notamment pour améliorer la lisibilité et la syntaxe de mon code.) :

    Nom : Screenshot 2022-09-22 17.03.02.png
Affichages : 70
Taille : 105,4 Ko


    Nom : Screenshot 2022-09-22 17.03.39.png
Affichages : 71
Taille : 75,1 Ko


    Nom : Screenshot 2022-09-22 17.04.01.png
Affichages : 66
Taille : 68,7 Ko


    Nom : Screenshot 2022-09-22 17.04.53.png
Affichages : 77
Taille : 47,5 Ko

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 253
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 253
    Points : 14 172
    Points
    14 172
    Par défaut
    pour qu'on puisse tester votre code, il vaut mieux que vous mettez votre code dans le message au lieu d'une image.
    vous pouvez faire un copier-coller et utiliser le bouton "#". ou alors vous pouvez aussi mettre les fichiers en pièce jointe du message.

  3. #3
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    septembre 2022
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 20
    Localisation : France, Deux Sèvres (Poitou Charente)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : septembre 2022
    Messages : 2
    Points : 1
    Points
    1
    Par défaut
    à d'accord , désolé voici les codes
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Blog</title>
        <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="first.css">
        <script src="https://kit.fontawesome.com/cb7fc62094.js" crossorigin="anonymous"></script>
    </head>
    <body>
        <!--Barre de Navigation-->
        <nav class="navbar">
            <div class="gauche">
                <a class="logoButton" href="#">
                    <img src="img/pngegg.png" height="40" alt="Logo">
                </a>
            </div>
            <div class="center">
                <ul class="navlinks">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Community</a></li>
                    <li>
                        <div class="box">
                            <input class="searchInput" type="text" name="" placeholder="search" >
                            <button class="searchButton" href="#">
                                <i class="fa-solid fa-magnifying-glass">
     
                                </i>
                            </button>
                        </div>
                    </li>
                    <li><a href="#">Media</a></li>
                    <li><a href="#">About Us</a></li>
                </ul>
            </div>
            <div class="Right">
                <ul>
                    <li><a href="#">Sign Up</a></li>
                    <li><a class="UserButton" href="#">
                        <i class="fa-regular fa-user"></i>
                    </a></li>
                </ul>
            </div>
        </nav>
     
     
        <header></header>
     
    </body>
    </html>
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    *{
        padding: 0;
        margin: 0;
        text-decoration: none;
        list-style: none;
    }
     
    body{
        font-family: 'Comfortaa', cursive;
    }
     
    header{
        height: 100vh;
        width: 100vw;
        background-image: url(img/wallhaven-x8ye3z_1920x1080.png);
        background-size: cover;
    }
     
    /*Début de la Navbar*/
    .navbar{
        padding: 7px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        align-items: center;
        background-color: #181818;
        opacity: 0.8;
        position: absolute;
    }
    .navbar a{
        color: rgba(184, 184, 186, 1.0);
    }
    .center .navlinks {
        display: flex;
    }    
    .center .navlinks li{
        margin: 0 7px;
    }
    .Right ul{
        display: flex;
    }
    .Right ul li{
        margin: 0 7px;
    }
     
    /* Fin de la Navbar */
     
    /* Début searchbox */
     
    .box {
        transform: translate(-50,50%);
        background: #b8b8ba;
        border-radius: 20px;
        height: 20px;
        padding: 0px;
    }
    .box:hover > .searchInput {
        width: 240px;
        padding: 0 8px;
    }
    .box:hover > .searchButton {
      background: white;
      color : #181818;
    }
    .searchButton {
        color: #b8b8ba;
        float: right;
        width: 0px;
        height: 0px;
        border-radius: 50%;
        background: #181818;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.4s;
    }
    .searchInput {
        border:none;
        background: none;
        outline:none;
        float:left;
        padding: 0;
        color: #181818;
        font-size: 16px;
        transition: 0.4s;
        line-height: 0px;
        width: 0px;
     
    }

  4. #4
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 253
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 253
    Points : 14 172
    Points
    14 172
    Par défaut
    pour l'icone de la loupe, vous pouvez ajouter une marge en haut comme cela :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    .searchButton
    {
    	  margin-top : 0.8em;
    }
    pour le fond de l'entête, il vaut mieux ne pas utiliser "blur" mais mettre une couleur transparente avec background-color: rgba(0, 0, 0, 0.5);.

    et pour l'image de fond, je pense qu'elle ne va pas rester quand vous allez ajouter du contenu dans vos pages. il vaut mieux mettre une couleur unie dans le fond pour ne pas perturber la lecture du contenu.
    backdrop-filter ne fonctionne pas à cet endroit parce qu'il s'applique à une balise qui serait par dessus le fond :
    https://developer.mozilla.org/fr/doc...ackdrop-filter

    regardez aussi dans la console de développement de votre navigateur, il y a des propriétés css qui sont marquées comme invalides.

Discussions similaires

  1. [HTML+CSS] Problème de menu "dynamique"
    Par Invité dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 06/04/2005, 12h48
  2. [css]+[html] css et l'attribut id
    Par Quintoff dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 21/12/2004, 16h34
  3. [eclipse 3.0.1]plugins pour dvlp web HTML / CSS / PHP
    Par partyboy dans le forum Eclipse Java
    Réponses: 1
    Dernier message: 26/10/2004, 11h46

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo