Sujet Précédent Sujet Suivant

"logo actif " dans une feuille de style

Fermé
peggysue - 15 sept. 2006 à 10:55
Gihef
Messages postés
5134
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
13 avril 2022
 - 15 sept. 2006 à 15:38
Bonjour à tous ,

Voici mon petit problème:
Les pages du site internet dont j'ai la charge , sont toutes reliées à un feuille de style CSS. Dans celle-ci j'utilise une image qui est le logo de l'association, elle se trouve dans l'entête.
voici le code que j'utlise:

#header #logo {
width: 223px;
float: left;
background: url('images/logo.gif') no-repeat #fff;
margin: 0 -3px;
height: 146px;
position: absolute;
z-index: 100;
}

je voudrais que cette image "logo" soit active, c'est à dire qu'il y est un lien dessus qui renvoie à l'index du site.
Mais voilà je n'y arrive pas. J'ai cherché sur différents forums mais je n'arrive pas à trouver de réponse à mon problème.Comment spécifier un lien dans le CSS ?
Merci à tous pour votre aide ! :)

3 réponses

Réponse 1 / 3
Gihef
Messages postés
5134
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
13 avril 2022
 2 767
15 sept. 2006 à 14:26
Bonjour,

Il me semble que ce n'est pas prévu.

Si je devais faire ça, j'utiliserais, dans le html, une image entièrement transparente que je positionnerais par dessus.
Une image avec les mêmes dimensions, au même emplacement et contenue dans une <a> pour le lien.

D'autres solutions ?
0
peggysue
15 sept. 2006 à 14:52
Merci Gihef je viens de tester ta solution:
j'ai ouvert mon fichier template et j'y ai ajouter ce code:

<a href="/index.html"><img src="/images/logo.gif" width="223" height"146" position "absolute" float="left" z-index="100" border="0"></a>

avec donc la position exacte de l'image contenue dans le CSS. J'ai mis la même image par dessus. Et cela fonctionne !
Par contre quel est l'attribut pour que l'image est une transparence 0 ? Car j'ai peur que sous certains navigateurs, les deux images ne se superposent pas parfaitement ....
enfin sinon merci beaucoup ! ;)

Forum très utile , bravo !
0
Réponse 2 / 3
Gihef
Messages postés
5134
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
13 avril 2022
 2 767
15 sept. 2006 à 15:01
Certain navigateur n'apprécie pas le png et ses transparences dégradées.
Mais, dans le cas présent, un gif fera l'affaire.
Une image entièrement de la même couleur, unie (blanc, noir…) et cette couleur définie comme transparente.

Pour la position, si les éléments concernés n'utilisent pas de “padding” ni de “border”, ça devrait passer.

Teste.

0
peggysue
15 sept. 2006 à 15:09
ok !
mais pourquoi dis tu une image unie ? la même par dessus ne peu pas faire l'affaire ?
pour la transparence d'une image je mets :
alpha ="0"

c'est bien ça ?

merci merci !
0
Réponse 3 / 3
Gihef
Messages postés
5134
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
13 avril 2022
 2 767
15 sept. 2006 à 15:38
Et bien, une image transparente ne risque pas de créer de décalage, de recouvrement imparfait.

Si tu choisis de replacer la même image sur celle définie dans la feuille de styles, il y a comme redondance. Ça fait doublon, c'est inutile. Autant supprimer celle présente dans “background: url()”.

Cette image sera une nouvelle image.
Ton éditeur graphique préféré te permetta certainement de la créer et les options gif de définir la transparence.

Je te l'accorde par avance, c'est un peu tarabiscoté.
0