28173 sujets

CSS et mise en forme, CSS3

Bonjour, je voudrai mettre un lien sur le logo dans l'en-tête de ma page pour un retour à l'index.
L'en-tête est constitué d'un image insérée via les css.
Je sais qu'il était possible de générer celà automatiquement avec Dreamweaver. Le logiciel crée un code de ce type:

<map name="Map"><area shape="circle" coords="56,51,39" href="#"></map>


56 et 51 correspondent au positionnement du cercle map et 39 correspond à son diamètre.

Mais ça ne fonctionne pas... Smiley decu Pourriez-vous m'aider?

Merci par avance.
Coucou,
a écrit :
je voudrai mettre un lien sur le logo dans l'en-tête de ma page pour un retour à l'index.
BALISAGE
<a href="adresse de la page index" title="">
   <img src="adresse de l'image du logo" alt="Revenir sur la page index" />
<a>


a écrit :
L'en-tête est constitué d'un image insérée via les css.
Dans ce cas, ça ferait appel à un lien vide si je comprend bien (ce qui est déconseillé) :

BALISAGE
<div id="xxx">
   <a class="zzz" href="adresse de la page index" title="Revenir sur la page index"></a>
</div>

CSS
a.zzz {
   background-image: url(adresse de l'image);
   width: yyypx;
   height: yyypx;
   }


Mais je ne vois pas le rapport avec le code imagemap qui ne sert à placer plusieurs zones réactives sur une même image.
Modifié par Smiley neko (20 Apr 2006 - 16:24)
Merci pour ta réponse Neko Smiley biggrin

Voici un lien vers ma page, en fait l'en-tête est constituée d'un div par le biais duquel est affichée le bandeau. Et c'ets donc précisément sur le logo que je coudrais placer un lien. Si je place un lien classique, il va s'appliquer à tout le bandeau.

Mes explications sont peut être un peu confuses... Smiley sweatdrop

http://chaylaimmobilier.com/site2.0/index.html

(A voir avec Firefox Smiley smile )
Modifié par Beno (20 Apr 2006 - 16:53)
Comme je suis paresseux et que je n'aurais pas envie de m'embêter avec les imagemap, je ferais ceci :

* le bandeau sans le logo
* un logo en .gif (ou .png - attention sous IE) transparent
* un bloc div pour placer le logo où il faut (sa position actuelle)

Ensuite, il suffirait de reprendre le balisage de mon premier exemple, ce qui donnerait :

<div id="xxx">
   <a href="adresse de la page index" title="">
      <img src="adresse de l'image du logo" alt="Revenir sur la page index" />
   <a>
</div>

Edit -- Au passage, je trouve le site très sympa et spécialement le menu dont l'esthétique est très agréable ! Smiley smile
Modifié par Smiley neko (20 Apr 2006 - 16:57)
Encore merci Neko, finalement j'ai appliqué le lien sur tout le bandeau en conservant la mise en page actuelle, je suis encore plus paresseux que toi Smiley ravi
Juste une sur-question : je pensais qu'inclure une div dans un a n'était pas valide ?

a étant une balise en ligne, et div une balise de type bloc.
Modifié par Nitram (20 Apr 2006 - 21:55)
neko a écrit :
Tout-à-fait !
Mais je ne comprends pas pourquoi tu poses cette question.

Parce que c'est la solution qu'a choisi Beno pour son entête.
Pinaise, c'est vrai, tu as raison Nitram Smiley confused Comment puis-je faire du coup.
Je pourrais peut être créer un paragraphe vide à l'intérieur du div et y appliquer le lien...
Salut

Une solution Simple

Le CSS




#entete {
	background-image: url(image);
        ....
        .... 
}

#entete a {
	display: block;
	width: 200px;  /
	height: 100px;
	text-decoration: none;
}


pour le HTML



<div id=entete>
<a href="/chat/index.php"> </a>
</div>
Administrateur
Une autre solution simple : commencer par faire une recherche dans les tutoriels Smiley cligne

PS : attention à éviter les liens <a> vides de contenu (inaccessibles aux non-voyants). Essayez au-moins de leur apporter une indication à l'aide de l'attribut "title"
Modifié par Raphael (21 Apr 2006 - 18:02)
Ca marche niquel, encore merci!


Ok Raphaël, je met un attribut "title" et j'avoue que je n'ai pas cherché auparavant Smiley rolleyes Smiley edit Modifié par Beno (21 Apr 2006 - 18:06)[/edit]