IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Liens & Images


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17
    Par défaut Liens & Images
    Bonjour à tous!

    Je fais encore une fois appel à vous car votre aide me fût précieuse à plusieurs reprises.

    Un de mes nouveaux problèmes vient des liens et des images.

    En effet, j'aimerais que des icônes servent servent de lien vers d'autres sites (ici l'image twitter) et aussi qu'une d'entre elle serve de lien pour ouvrir un pdf présent sur mon serveur.

    Seulement, que ce soit pour les autres sites ou le pdf, à chaque fois l'image sélectionnée s'entoure d'une bordure bleue (cliquable), ainsi que deux autres images pourtant pas sélectionnées (barre1 et barre2)!

    Je voudrais donc savoir quelle méthode utiliser pour que l'image entière serve de lien sans avoir la bordure, et comment empêcher les deux autres images de devenir elles aussi lien.

    Voici mon HTML :

    Code : 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
     
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
     
    <head>
    <link rel="shortcut icon" href="favicon.png"
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="Keywords" CONTENT="thomas, rudel, cv"> 
    <title>Présentation</title>
    <link rel="stylesheet" href="design.css" type="text/css" />
    </head>
     
    <body >
     
    <div class="linkedin"> 
    <img src="linkedin.png" height="40" width="40"/>
    </div>
     
    <div class="viadeo"> 
    <img src="viadeo.png" height="45" width="45"/>
    </div>
     
    <div class="twitter"> 
    <img src="twitter.png" height="45" width="45" <a href="index.htm"/>
    </div>
     
    <div class="pdf"> 
    <img src="pdf.png" height="50" width="50"/>
    </div>
     
    <div class="barre1">
    <img src="barre.jpg" height="1" width="937" />
    </div>
     
    <div class="barre2">
    <img src="barre.jpg" height="300" width="1" />
    </div>
     
    <div class="menu">
    <div id="pre"><a href="index.htm" class="lien">Thomas Rudel | Allons à l'essentiel.</a></div>
    <span class="for" ><a href="formatio.htm" class="lien">Formation /</a></span>
    <span class="exp" ><a href="exp.htm" class="lien">Expérience professionnelle /</a></span>
    <span class="inf" ><a href="informat.htm" class="lien">Informations complémentaires /</a></span>
    <span class="pou"><a href="pourquoi.htm" class="lien">Pourquoi moi ?</a></span>
    </div>
     
    <div class="texte">
    <p>Voici pour l'instant mon <a href="RUDEL Thomas CV.pdf">C.V</a> au format PDF, le reste viendra dans peu de temps...</p>
    </div>
     
    </body>
    Les images qui s'incrustent sont barre1 et barre2.

    Le CSS :

    Code : 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
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    body{
    margin: 70px 100px 100px 100px;
    background-image : url(fond.jpg);
    background-repeat: repeat-x;
    background-color: white;
    }
     
    .lien{
    color:black;
    text-decoration:none;
    }
     
    A:hover.lien {
    color:red;
    }
     
    #pre {
    position:relative;
    top: 5px;
    left: 0px;
    font-family: "Arial", "Tahoma", "Trebuchet MS";
    font-size: 40px;
     
    }
     
    .for {
    position:relative;
    top: 73px;
    left: 0px;
    font-family: "Arial", "Tahoma", "Trebuchet MS";
    font-size: 24px;
    }
     
    .exp {
    position:relative;
    top: 73px;
    left: 0px;
    font-family: "Arial", "Tahoma", "Trebuchet MS";
    font-size: 24px;
    }
     
    .inf {
    position:relative;
    top: 73px;
    left: 0px;
    font-family: "Arial", "Tahoma", "Trebuchet MS";
    font-size: 24px;
    }
     
    .pou {
    position:relative;
    top: 73px;
    left: 0px;
    font-family: "Arial", "Tahoma", "Trebuchet MS";
    font-size: 24px;
    }
     
    .menu{
    width:1000px;
    }
     
    .texte{
    width:900px;
    position:relative;
    top: 100px;
    left: 30px;
    font-family: "Tahoma", "Arial", "Trebuchet MS";
    font-size: 16px;
    text-align:justify;
    }
     
    .barre1{
    position: absolute;
    top: 200px;
    left: 100px;
    }
     
    .barre2{
    position: absolute;
    top: 215px;
    left:100px;
    }
     
    .pdf{
    position: absolute;
    top: 70px;
    left: 1050px;
     
    }
     
    .twitter{
    position: absolute;
    top: 75px;
    left: 750px;
    }
     
    .viadeo{
    position: absolute;
    top: 75px;
    left: 825px;
    }
     
    .linkedin{
    position: absolute;
    top: 76px;
    left: 905px;
     
    }
    Merci d'avance!

  2. #2
    Membre Expert
    Avatar de Eric2a
    Homme Profil pro
    Technicien
    Inscrit en
    Septembre 2005
    Messages
    1 225
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Technicien

    Informations forums :
    Inscription : Septembre 2005
    Messages : 1 225
    Par défaut
    Salut,

    L'idéal est de supprimer la bordure par défaut pour toutes les images.


  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17
    Par défaut
    Non, ça ne marche toujours pas...

    Voilà ce que j'obtiens quand je veux mettre un lien à l'image twitter

    http://img211.imageshack.us/i/sanstitrexasz.png/

  4. #4
    Membre Expert
    Avatar de Eric2a
    Homme Profil pro
    Technicien
    Inscrit en
    Septembre 2005
    Messages
    1 225
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Technicien

    Informations forums :
    Inscription : Septembre 2005
    Messages : 1 225
    Par défaut
    J'avais pas regardé le code HTML...

    Remplace
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <img src="twitter.png" height="45" width="45" <a href="index.htm"/>
    par
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <a href="index.htm"><img src="twitter.png" height="45" width="45" /></a>

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17
    Par défaut
    Merci, c'est mieux, mais bon, je ne peux que cliquer sur le bordure invisible de l'image, pourtant j'ai ajouté dans le css le code

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    img {border:none;}

  6. #6
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Heu... c'est mes yeux ou il n'y a pas de lien sur tes images ?
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Pb lien avec image et texte dans un li
    Par lalouve dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 09/03/2006, 01h33
  2. Lien vers image a la place d'un objet ole?
    Par dominique44 dans le forum Access
    Réponses: 4
    Dernier message: 20/10/2005, 19h41
  3. [html] Lien d'image écarter
    Par Silvia12 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 11
    Dernier message: 24/08/2005, 12h14
  4. formulaire/lien/bouton image envoyer
    Par charlotte10 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 8
    Dernier message: 19/08/2005, 16h46

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo