Comment positionner un logo cliquable ?

Bonjour,
Je patauge un peu au niveau de l'alignement des blocs.
Je voudrais insérer un logo (dans un bloc indépendant de la bannière) en haut à gauche de mon site. Sur la même ligne on trouvera la fameuse bannière (dans le header).

Sachant que je souhaite rendre cliquable mon logo, comment dois-je m'y prendre ?

1. Faut-il insérer l'image du logo dans le html puis utiliser la propriété float:left; afin de faire coulisser le bloc de la bannière qui se positionnera à droite de mon logo (car bloc logo et bloc bannière auront une hauteur identique).
2. Faut-il plutôt découper ma bannière et mon logo en deux entités distinctes (la somme de la largeur étant égale à la largeur de mon design). Puis positionner mon logo pile poil à l'endroit voulu en utilisant la propriété position:fixed; (voire absolute, je sais pas) ?

Bref, qui peut m'expliquer quelle est la solution la plus habituelle et la meilleure ? Et au besoin s'il en existe une autre.

Merci d'avance.

jpv56

Bonjour,

jpv56 a écrit :
Bref, qui peut m'expliquer quelle est la solution la plus habituelle et la meilleure ? Et au besoin s'il en existe une autre.

Les deux solutions sont bonnes (tant que l'image cliquable se trouve dans le code HTML avec un attribut alt correctement rempli, il n'y a pas de mauvaise solution).

Personnellement j'irais vers la première, qui permet d'avoir une plus grande fluidité (par exemple si tu veux modifier la bannière en fond sans toucher au logo).

Il est également possible que toute la bannière soit cliquable et donc une seule et même image.

Bonjour,

Une troisième solution envisageable : ne pas effectuer de découpe particulière et utiliser une carte cliquable côté client, grâce à l'élément map.

<div id="header">
  <h1><img src="chemin-vers-le-logo-qui-fait-aussi-banniere.png" alt="L'alternative textuelle qui va bien" usemap="#logo-cliquable" /></h1>
  <map id="logo-cliquable" name="logo-cliquable">
    <area href="URL" alt="L'alternative textuelle qui va bien pour la zone cliquable" shape="rect" coords="0,0,60,60" />
  </map>
</div>

jpv56 a écrit :
Et au besoin s'il en existe une autre.

display: inline-block; si tes liens n'ont pas la même hauteur : tu pourras utiliser la propriété vertical-align dessus (attention à bien coller les deux liens dans ton code HTML sinon tu auras ~3-4px d'espace entre les deux et le second passerait à la ligne sans que tu comprennes pourquoi)

Si tu découpes 2 images de même hauteur (la zone cliquable sera plus grande que prévue ma tant pis) ET que les deux peuvent sémantiquement aller dans le même élément de type bloc (un titre ou un <p> mais pas l'un dans un <h1> et l'autre dans un <p>), tu ne touches à rien, tu colles </a><a ... pour éviter le whitespace et voilà, tout simple.

Bonsoir,
Je vous remercie pour vos réponses et différentes solutions.
Je vais de ce pas expérimenter tout ça !
Bonne soirée.