Sujet Précédent Sujet Suivant

Aide Html,css,javascript

Fermé
Nenatik - 25 oct. 2019 à 19:06
 Nenatik - 26 oct. 2019 à 13:41
Bonjour, Je suis entrain de coder un petit site histoire d'apprendre l'html,css,javascript

j'ai un probleme je voudrais mettre un script javascript qui afficher/cache un div en cliquant sur un bouton qui est une image, pour le bouton j'ai reussi mais pour afficher/cache un div en cliquant sur ce bouton je n'arrive pas

code html : 
<html>
    <head>
        <script>

        </script>
        <title>Twitch</title>
        <meta charset="utf-8"/> 
        <link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet"> 
        <link rel="stylesheet" type="text/css" href="Css/SlideShow.css"/> 
        <link rel="stylesheet" type="text/css" href="Css/Header.css"/> 
        <link rel="icon" type="image/icon" href="Favicon/favicon-32x32.png"/>
    </head>
    <body>
        <div class="headercolor">
                <input type="image" id="image" src="Image/Bouton.png" class="placementbouton" onclick="Afficher/Cacher" id="Bouton"/> 
                <div class="colorbackground">
                    <h1 class="placementtexttwitch"> Twitch </h1>
                    <div class="tiret">        
                    </div>
                </div>
            <div class="menu" id="MenuCA">
            </div>
        </div>
    </body>
</html>


code css : 

@font-face {
    font-family: 'Karla', 
    sans-serif;
    src: url ('Font/Karla-Regular.ttf') 
    font-weight: 400;
}

.placementbouton {
    position: absolute; top: 14px;
    position: absolute; left: 40px;
}

.menu {
    height: 1080px;
    width: 300px;
    background: whitesmoke;

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

.colorbackground {
    width: 100%;
    height: 100%;
    background-color: rgb(219, 219, 219);
    display: block;
}

.headercolor {
   width: 100%; 
   height: 70px;
   background-color: white;
   display: block;
}

.tiret {
    width: 2px;
    height: 20px;
    background-color: rgb(126, 126, 126);
    display: block;
    position: absolute; left: 1700px;
    position: absolute; top: 25px;
}

.headertextcolor {
    color: black;
}

a:hover {
    color: rgb(21, 53, 158);
    transition: all 1s ease 0.1s;
}

.placementtexttwitch {
    position: absolute; top: 15px;
    position: absolute; left: 1750px;
}

}


Je tien a rappeler que je suis debutant donc si je fais certaine chose debile dans mon code dites le moi !

Merci d'avance !
A voir également:

2 réponses

Réponse 1 / 2
lugdanum Messages postés 108 Date d'inscription vendredi 13 mai 2005 Statut Membre Dernière intervention 14 novembre 2021 40
25 oct. 2019 à 20:31
Hello

base toi sur cet exemple qui est exactement ce que tu veux faire (suffit juste de l'adapter...) :
https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp

D'ailleurs je te conseille ce site, c'est une mine d'or.

Sinon :
https://sutterlity.gitbooks.io/apprendre-jquery/content/les_effets/cacher__afficher.html
https://jsfiddle.net/iamuttamkumarroy/u6d876oL/

Sinon juste comme ça vite fait :
onclick="Afficher/Cacher" Evite ce genre de syntaxe, plutôt onclick="Afficher_Cacher"
ton image a 2 ID, id="image" et id="Bouton"
Pour une meilleure lecture de ton code, si ton div ne contient "rien" ferme la balise sur la même ligne. 
<div class="tiret">        
 </div>

<div class="tiret"></div>


CSS : 

.placementbouton {
    position: absolute; top: 14px;
    position: absolute; left: 40px;
}

-> 2 fois position: absolute;
-> Dans le reste du code aussi plus bas

Je sais pas si tu as mis tout ton code mais par exemple tu as un *{ qui se balade tout seul (pas fermé...)

Voili voiloù, bon courage et n'hésite pas si tu veux un exemple concret...



_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Ma réponse t'a un peu aidé ? Si oui, un petit merci... Merci.
0
Nenatik
26 oct. 2019 à 13:41
Merci beaucoup de ton aide je vais essayer
0
Réponse 2 / 2
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
25 oct. 2019 à 20:33
Bonjour,

Tu dis ne pas y arriver.... mais je ne vois aucun code javascript.
Forcément, ça ne risque pas de marcher sans code.....
Commence par nous montrer ce que tu as essayer de coder et nous verrons pour te le corriger.

Histoire de te mettre sur la piste
https://developer.mozilla.org/fr/docs/Web/api/Document/getElementById
https://www.w3schools.com/js/js_if_else.asp
https://www.w3schools.com/jsref/prop_style_display.asp


0
Nenatik
26 oct. 2019 à 13:41
j'en ai fait mais je l'ai enlever car il etait faux
0

Discussions similaires

&nbsp ; Quelle Fonction ?
-Jeff- -
sl4ck -

14 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses