Logo cliquable sans bordures, impossible ?

Bonjour,

J'aimerais savoir si certain on recontré ce problème aussi : aucun de mes attributs image border: 0 ne fonctionne !
Quand je le met directement sur la balise image aucun problème, mais retour à la feuille de style rien à faire ni avec des id ni avec des classe, ça ne marcha pas
Modifié par Samuel Berg (16 Nov 2005 - 15:41)

Bonjour,

Avec un exemple on y verrais probablement plus clair .

Ok, je propose le lien pour la journée car j'en ai trop marre :
Liens supprimés

Vous pouvez observer le trait blanc en dessous du logo : il disparait quand je met l'attribut border: 0 dans la balise image mais par contre dans le CSS (entete img { border: 0; } ) rien ne fonctionne, il ne prend pas, y compris aussi pour ma balise img { border: 0 } (d'ailleurs spip est obliger de me rajouter des style dans la balise à cause de ça et ça m'énerve !

Le pire c'est que j'ai réussit une fois mais j'ai oublié et en touchant au logo tou t à replanté.
Modifié par Samuel Berg (16 Nov 2005 - 11:07)

Il ne s'agit pas d'un probleme de borders d'image ou de lien, mais plutot de positionnement de tes éléments.

essaye avec ca :

#entete {
	height: 74px;
	float:left;
	}
	#menu {
	background: #dde0ec;
	color: #000;
	width: 100%;
	margin-top:-3px;
	}

et tu peux enlever

#entete img {
	border: 0;
	margin: 0;
	}

Le rendu est différent sous IE et Moz, mais au moins tu n'as plus de décalage sous ton en-tête.
Modifié par yyoupla (15 Nov 2005 - 14:08)

ça c'est gentil, je test de suite

Linux : Firebird, ok | Konqueror, ok | Mozilla, ok | Ephiphany, ok
Windows : Explorer 5.0, ok | Explorer 6.0, ok | Netscape 7.2, ok
Macintosh : Safari, ok | Explorer 5.2 : aie ! ne fonctionne pas

Mince je ne peux pas implémenter cette solution, elle ne fonctionne pas sur Explorer Mac et pour un site commercial... c'est impossible de passer la dessus !
Modifié par Samuel Berg (16 Nov 2005 - 16:49)

Je constate que c'est un vrai problème d'ordre général :

il est impossible d'avoir dans un site en CSS un logo/bannière cliquable sans avoir une barre blanche en dessous.

Les solutions adoptés pour contourner ce problème ?

- Ceux qui passent par le background et mettent des h1 (ne marche pas sur Explorer 5 windows)
- Ceux qui font un fond de logo blanc (histoire de cacher la misère)
- Ceux qui ne font pas de logo cliquable du tout (la plupart des sites de démonstration css zen garden)
- Ceux qui mettent un menu en dessous en position absolute (ça s'envole complètement sur Explorer 5 Windows)
- Ceux qui mettent en dessous un menu blanc (toujours pour cacher la misère)
- Ceux qui abandonne définitivement leur validation Strict pour mettre un border="0" dans la balise img, transformant immédiatement le site en transitional
- Ceux qui mette un background de la même couleur que le menu du dessous pour le lien, l'inconvénient c'est que si on fait des survols style bouton, la longueur du haut est deux fois plus importante que celle du bas et en rollover, ça rend pas terrible de n'avoir qu'une partie du bouton illuminé...
- Ceux qui ne font pas de retour au sommaire en cliquant sur le logo, abandonnant leur validation WAI-AA
- Ceux qui cherchent et qui aimeraient trouver la solution comme moi parce qu'ils ne se satisfont d'aucune de ces possibilité .

Va t-on enfin trouver une solution simple et accessible fonctionnant sur tous les navigateurs en activité pour rendre un logo cliquable sans bordures ?

Le problème vient des peudos-classes. En effet pour qu'elles restent accessible on est obligé de leur donner une couleur de fond par défaut (#fff), je ne parle pas des remontrances du validateur CSS du W3C qui considère que transparent n'est pas une couleur (ha bon , on m'aurait menti ?) . Mais on ne va pas les enlever juste pour ça... Aucune solution de remplacement (id, classe etc...) n'a marché pour la balise href du lien du bandeau... c'est à devenir fou cette histoire !

La meilleure solution faute de mieux reste pour l'instant des pseudos-classes transparentes, quitte à subir la honte d'avoir 4 avertissements dans le validateur css du w3c
Modifié par Samuel Berg (16 Nov 2005 - 16:48)

Ceci m'ennuie aussi, je ne trouve pas de solution...peut etre une image en fons et une zone reactive...je ne vois que cela...

Bonjour,

Je vais peut etre dire une betise, mais cette "barre" blanche en dessus ne viens t'elle pas du fait que <img> est une balise "inline", extrait de la FAQ :

a écrit :

En HTML, les images sont considérées comme du texte, c'est à dire qu'une image se placera par défaut sur la ligne de base du texte, comme n'importe quelle lettre.

Lien vers la faq

Du coup, l'espace sous l'image est en faite destiné a laisser la place pour les lettres comme "p" "g" ect..

Il faut donc, comme expliquer dans la FAQ, passer l'image de "inline" a "block" via "display" dans la feuille de style.

Ca marche avec "float" car, si je ne me trompe pas, cette déclaration, appliquer a un élément de type "inline" le transforme en élément de type "block".

Pour i.e Mac, peut être qu'en combinant les 2 directement sur l'image, ou en transformant l'image en "block" et en appliquant le "float" sur le header qui le suit, cela fonctionnera.

En espérant avoir aider, et surtout j'espère ne pas avoir dit de grosse betises (sinon désolé).

moi, j'ai tout simplement mis border="0" dans la page html dans le tag concernant le logo

<a href="http://www.tonsite.com" border="0"><img src="http://www.tonsite.com/logo.gif" class="logo" alt="logo" border="0"></a>