Bonjour tout le monde, je fais appel à votre aide car je ne parviens pas à rendre uniquement mon image cliquable, l'idée de la page en question c'est que certaines parties du fond d'ecran du site soit cliquable. Voulant rendre ça un minimum propre, j'ai decoupé une partie avec gimp et j'ai voulu la replacer exactement au même endroit, en stipulant bien que le lien se trouvait sur cette image.

Or je m'aperois qu'il n'y a pas que l'image qui est cliquable mais la moitié du fond d'écran, et je ne parviens pas à placer cette image à sa place car elle se remet à sa position de base à chaque fois.

J'espère m'être bien exprimer et si il y a besoin de clarifier je suis là, merci d'avance.

<!DOCTYPE html>
<html>
            <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <style type="text/css">a:link{text-decoration:none}</style>
       
        <title>Bienvenue à Auckland!</title>
      
           
            </head>
       

    <body class="fdcîle">
       
                   

                <div class="defileparent">
                    <div class="defile"> <p class="texteparent" data-text= "Où suis-je ?..."> Où suis-je ?...</p> </div>
                </div>

                        <div class="calquelien">               
                            <a href="Projetpage7.html"><img src="holidays2calque.png"/></a>
                        </div>

                                   
   

    </body>
   
   

   
   
   
   
</html>

et le css de la classe en question (deux fichiers distincts) :

 .calquelien
{
    margin-left: -1%;
    margin-top: -27,5%;
 }

-
Edité par MathisClermont 18 mars 2018 à 20:01:09

Emphytos

17 mars 2018 à 13:20:12

Sans code c'est difficile de t'aider :/

Poste ton code html & css

MathisClermont

17 mars 2018 à 13:25:36

Ahah j'oubliais :'), voici le code html :

<!DOCTYPE html>
<html>
            <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <style type="text/css">a:link{text-decoration:none}</style>

        <title>Bienvenue à Auckland!</title>


            </head>


    <body class="fdcîle">



                <div class="defileparent">
                    <div class="defile"> <p class="texteparent" data-text= "Où suis-je ?..."> Où suis-je ?...</p> </div>
                </div>

                        <div class="calquelien">
                            <a href="Projetpage7.html"><img src="holidays2calque.png"/></a>
                        </div>




    </body>







</html>

et le css de la classe en question (deux fichiers distincts) : .calquelien
{
    margin-left: -1%;
    margin-top: -27,5%;
}

-
Edité par MathisClermont 17 mars 2018 à 13:27:27

purpaly

17 mars 2018 à 16:08:20

Salut,

Si tu veux positionner ta div exactement là où tu veux, il faut utiliser position:absolute, et plûtot que les margin, c'est les propriétés left et top qu'il faut changer :

.calquelien { 
   position:absolute; 
   left: -1%; 
   top: -27,5%;
}

Essaye de voir si ça règle le problème de placement. Sinon, plus d'infos dans le cours : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/le-positionnement-en-css#/id/r-1606401.

-
Edité par purpaly 17 mars 2018 à 16:09:22

Une question bien formulée, c'est 50% de la réponse.

Benzouye

17 mars 2018 à 17:19:37

Merci d'utiliser les balises de code

Bonjour,

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 celà, il faut utiliser le bouton . Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: c;">Votre code ici</pre>.

Merci de modifier votre message en conséquence via le bouton "Modifier" situé sur son coin supérieur droit, sans quoi le sujet sera fermé.

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

MathisClermont

18 mars 2018 à 20:01:32

Merci beaucoup purpaly j'essaie de suite ! Je suis désolé je n'ai pas l'habitude d'utiliser les forums, mon post a bien été modifié.

Update, ton code fonctionne bien merci ! Maintenant il manque plus qu'à savoir pourquoi la zone cliquable (le lien) se retrouve sur tout le background et non uniquement sur l'image souhaitée

-
Edité par MathisClermont 18 mars 2018 à 20:24:24

etiennedony

18 mars 2018 à 20:39:09

Ton code CSS margin-top: -27 , 5%; n'est pas valide car il comporte une virgule à la place d'un point. Tu dois écrire : -27.5%.

Peut-être que cela résoudra ton problème ?!

purpaly

18 mars 2018 à 21:16:04

MathisClermont a écrit:

Maintenant il manque plus qu'à savoir pourquoi la zone cliquable (le lien) se retrouve sur tout le background et non uniquement sur l'image souhaitée.

Je pense que ta div .calquelien prend le maximum de place dont elle dispose puisque sa hauteur et sa largeur ne sont pas fixées. Donc automatiquement, le lien, à l'intérieur, s'adapte à la taille de son parent.

Tu peux essayer de fixer une largeur et une hauteur à la div en fonction de la taille de l'image :

.calquelien{
   width: [largeurDeLimage]px;
   height: [hauteurDeLimage]px;
}

Remplace la largeur et la hauteur de l'image par leurs valeurs réelles, sans les crochets bien sûr.

Une question bien formulée, c'est 50% de la réponse.

MathisClermont

25 mars 2018 à 0:54:02

Merci beaucoup de votre aide mais ça ne fonctionne pas... Je vais continuer sur cette lancée car à par cette histoire de place qu'occupe la div,je ne vois pas d'où pourrait venir le souci, encore merci !

Forums des Zéros

Image cliquable servant de lien

Merci d'utiliser les balises de code

Image cliquable servant de lien

Merci d'utiliser les balises de code

Supprimer

Modérer

Signaler le message aux modérateurs