position d'une image pour fermer un lien

L’auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour à tous, J’ai un petit souci (je précise, je débute) : j’ai en bas à gauche d’un site que j’essaie de faire un chat("tchat") (cf capture) https://postimg.cc/tZfWWZ1Z J’aimerais placer un "bouton rouge" en haut à droite. Ce serait un lien, pour que si le visiteur n’a pas javascript, il puisse quand même fermer cette fenêtre par php (en gros, si je clique dessus je renvoie la même page avec une variable à "fermé" et il n’apparait que le bouton rouge, tout en bas à gauche). L’image de chat encadrée est aussi un lien qui envoie sur le "tchat".

Pour l’instant, j’ai fait un truc qui marche pas du tout :

<a href="exoChat.php" class="chat bordure">
<a id="chatButton">
</a>
</a>
a {
    display: block;
    text-decoration: none;
}
.chat {
    position: fixed;
    bottom: 0;
    left: 0;
    background-image: url('../images/chat.png');
    background-size: contain;
    width: 250px;
    height: 250px;
    margin: 2%;
}
#chatButton {
    background-image: url('../images/closer.png');
    background-size: contain;
    position: top right;
    width: 30px;
    height: 30px;
}

Merci pour vos conseils :)

Édité par WaitWaitW

+0 -0
Auteur du sujet

je sais pas si je comprends bien ta solution, mais si je la comprends ça ne résout pas mon problème (enfin ça résout le problème de la personne qui n’a pas JS en fait c’est vrai…). Mais du coup une personne qui a JS, qui l’ouvre et qui a envie de la fermer, il faut du coup avoir le bouton rouge en haut à gauche, qui ne fasse pas partie du lien global qui envoie sur le chat. Du coup il faudra toujours ce foutu bouton rouge :s

+0 -0

Cette réponse a aidé l’auteur du sujet

tu ne peux pas mettre un a dans un a… ca n’a aucun sens.

<div class="chat bordure">
    <a href="chat.php" id="miaou"></a>
    <a id="chatButton" href="annuler">&#x274C;</a>
</div>
.chat {
    position: fixed;
    bottom: 0;
    left: 0;
    background:#fac;
    width: 250px;
    height: 250px;
    margin: 2%;
}
a#miaou{
    width:240px;
    height:240px;
    margin:5px;
    background:white;
    display: block;
}
#chatButton {
    position:absolute;
    top: 10px;
    right: 10px;
}
a{
    text-decoration:none;
}

fonctionne très bien. je te laisse méditer (tu peux enlever le margin sur a#miaou, c’esst juste pour montrer le centrage)

+0 -0
Auteur du sujet

C’est bon en fait j’ai réussi :) Je sais pas si c’est très "bonne pratique" par contre :

<?php if($_SESSION['chat'] == 'off') { ?>
<a href="chatIco.php" class="chatButton" id="chatButtonOff"></a>
<?php } else { ?>
<a href="exoChat.php" class="chat bordure"></a>
<a href="chatDown.php" class="chatButton" id="chatButtonSmall"></a>
<?php } ?>

du coup avec $_SESSION['chat'] je modifie les liens et leur id, puis le CSS modifie leur position. Du coup que js marche ou pas j’ai le petit carré qui peut s’ouvrir/se fermer :)

[edit : doublé sur mon propre thread par Leeroy Jenkins ;( merci de ton aide :) edit2 : merci 2 fois d’ailleurs Leeroy Jenkins, pour le CSS j’avais tout mis en fixed mais avec ta solution c’est bien plus propre :) ]

Édité par WaitWaitW

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte