Partage

Limitation du lien lié a une division

Sujet résolu
13 juin 2018 à 14:37:13

Bonjour,

j'ai réalisé ceci :

Le lien est accroché a la division dont j'ai mis la couleur de fond grise.

Hors la ou il y a ma splendide flèche le lien est cliquable. J'aurais aimé empêcher cela est-ce possible ? Si oui comment faire ?

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
Staff 13 juin 2018 à 14:40:57

Bonjour,

il nous faut ton code, coloré à l'aide du bouton </> de la barre d'outils du forums.

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
13 juin 2018 à 14:50:56

            $id = $datas[$count][0];
            $titre = $datas[$count][1];
            $img_path = $datas[$count][3];
            $img_name = $datas[$count][2];
            $div = '<div id="block">';
            $img = '<img src="'.$img_path.'" alt="'.$img_name.'" id="w_img">';
            $title = '<p>'.$titre.'</p>';
            $link = '<a href="contenu.php?id='.$id.'">';

            echo $link;
            echo $div;
            echo $title;
            echo $img;
            echo '</div>';
            echo '</a>';

Voilà
Staff 13 juin 2018 à 14:54:12

Le html généré uniquement, s'il te plaît, là c'est illisible… (et je pense que tu gagnerais beaucoup à écrire autrement la génération, car décorréler des bouts de html comme ça c'est le meilleur moyen pour se perdre)

Et le CSS aussi.

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
13 juin 2018 à 14:56:35

Tu pourrais mettre ton code en HTML et pas en PHP...tu peux l'extraire depuis la console du navigateur

-
Edité par PaulTanné 13 juin 2018 à 14:57:42

13 juin 2018 à 15:02:35

<a href="contenu.php?id=1">
 <div id="block"><p>test 1</p>
  <img src="../imgs/widgets/nintendo-direct-e3-2018-pic-1.jpg" alt="nintendo-direct-e3-2018-pic-1.jpg" id="w_img">
 </div>
</a>

et

#block{
  position: relative;
  width: 400px;
  background-color: grey;
  text-align: center;
  font-size: 24pt;
}
#w_img{
  width: 300px;
}




Staff 13 juin 2018 à 15:08:19

Pourquoi donner une largeur à la div à l'intérieur du lien, et pas au lien lui-même ? C'est lui que tu dois styler, pas son contenu.

(et les points pour des tailles de police sur le net c'est pas pertinent, c'est fait pour de l'impression : utilise em, ou mieux, rem)

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
13 juin 2018 à 15:59:46

j'ai rajouté un id au lien et j'ai mis ça dans le css :

#contenu_link{
  width: 400px;
}


mais ça ne fonctionne toujours pas.

-
Edité par Dydaser 13 juin 2018 à 16:00:03

Staff 13 juin 2018 à 16:08:28

Déjà, évite les id, c'est beaucoup trop puissant en CSS et ça pourrait te jouer des tours (et tu auras peut-être un jour un deuxième lien comme ça).

Tu peux montrer ton code sur une page en ligne ou bien sur https://codepen.io/pen ?

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
Staff 21 juin 2018 à 11:09:01

Bonjour,

désolée du délai : ça faisait presque deux semaines que je n'avais plus le net à la maison, et ça marchait moyennement à mon boulot.

Alors : j'ai en effet oublié de préciser qu'il faudrait donner un display égal à "block" ou "inline-block" à tes liens pour qu'ils puissent avoir une largeur donnée. Corrige cela dans le codepen, et dis-moi si ça correspond à ton besoin.

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
21 juin 2018 à 11:54:24

PAR-FAIT ! Merci bcp bcp bcp
Staff 21 juin 2018 à 12:01:46

Bonne continuation :)
Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!

Limitation du lien lié a une division

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown