Html/Css Search button dynamique

**JeevonsCS** · 22/09/2022, 17h28

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 : 194
Taille : 105,4 Ko

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

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

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

**mathieu** · 22/09/2022, 20h00

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.

**JeevonsCS** · 23/09/2022, 03h32

à 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;
 
}

**mathieu** · 23/09/2022, 08h47

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.

Html/Css Search button dynamique

CSS

Vue hybride

Discussions similaires

Partager

Partager