Aller au contenu

  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

aide pour code html

The.Scorpio

Par The.Scorpio
dans Programmation

 Partager

Messages recommandés

The.Scorpio Member

The.Scorpio

Posté(e)
Posté(e)

Bonjour

 

Je souhaiterais avoir de l'aide

 

donc voila je voudrais mettre sur ma page une image avec un lien

a gauche

a droite

donc j'emploie le code si dessous

 

<div style="float:left;"><a href="lien du site/" TARGET="_blank" ><img src="images 1.gif" width="129" height="99" align="left"></a></div>

<div style="float:right;"><a href="lien du site/" TARGET="_blank" ><img src="images 2.gif" width="129" height="99" align="left"></a></div>

 

ma question est

 

comment mettre une troisième au centre ???

 

merci d'avance de bien vouloir m'aider

Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Bonjour The.Scorpio,

 

Ce n'est pas forcément une bonne idée d'employer des blocs <div> pour placer tes images droite et gauche. Tu pouvais te contenter de blocs <span>, qui sont inline, c'est-à-dire qu'ils ne provoquent pas de rupture (“saut à la ligne”).

 

Ainsi, avec une image calée à gauche et une autre calée à droite, il te reste un espace central dans lequel tu peux insérer ce que tu veux, par exemple une image.

 

Il est par ailleurs déconseillé de mettre des clauses de style dans la description du contenu (séparation contenu / mise en forme), et il vaut mieux isoler les clauses de présentation dans la feuille de style (ce n'est pas plus compliqué et ça clarifie tout).

 

Ce qui nous donnera finalement le code suivant, en définissant d'abord les deux blocs latéraux, avant le contenu de la partie centrale du bloc <div> général, dont le contenu sera centré grâce à la class “centrer”.

 

<html>
<head>
<title>Ma page</title>
<!----------------- feuille de style ----------------->
<style type="text/css">
.centrer {text-align:center;}
.gauche  {float:left;}
.droite  {float:right;}
.image   {border:0; width:129px; height:99px;}
</style>
</head>
<body>
<div class="centrer">
<!----------------- bloc de gauche ----------------->
<span class="gauche">
<a href="lien du site/"  target="_blank"><img class="image" src="image1.gif"></a>
</span>
<!----------------- bloc de droite ----------------->
<span class="droite">
<a href="lien du site/" target="_blank"><img class="image" src="image2.gif"></a>
</span>
<!----------------- partie centrale  ----------------->
<a href="lien du site/" target="_blank"><img class="image" src="image3.gif"></a>
</div>
</body>
</html>

Note que, si tu souhaites ne pas voir le cadre bleu autour de tes images servant de liens actifs, il te suffit d'ajouter dans la feuille de style une classe “image” imposant une bordure nulle. Si par ailleurs toutes tes images ont les mêmes dimensions, déplace-les dans la classe “image” … :P

 

Enfin, je ne vois pas l'utilité de l'attribut target pour les liens actifs, d'autant plus que cet attribut est obsolète en XHTML.

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...