[Résolu] Positionnement et visibility

Bonjour,

Je réalise un header avec une image en background représentant le logo du site. Voulant le rendre cliquable pour faire un lien sur la page d'accueil, j'ai fais un lien en HTML.

Or je ne veux pas que ce lien soit visible donc en visibility: hidden; pour qu'il soit tout de même présent. Et ça marche d'ailleurs.
Sauf que j'ai positionné mon lien avant de le rendre invisible avec position: relative; et top: -30px; pour l'avoir à la bonne place. Ca fonctionne aussi très bien.

Mais après avoir tout régler j'applique visibility: hidden; et là le positionnement n'a plus aucun effet et mon lien redescend 30px plus bas.
Y a-t-il une raison à cela? Existe t-il une solution ou faut-il que je m'y prenne autrement?
Modifié par cssmaster (23 Nov 2011 - 12:20)

Hello.

Tu aurais une page en ligne, ou encore mieux peux tu faire un jsFiddle pour qu'on voit ton code et le souci qui se présente?

Je t'avoue que j'ai beau eu lire ton post 3 fois, je n'ai pas compris ce que tu racontais .

jFiddle je ne connais pas en revanche je fais passer le bout de code.

Pas facile à expliquer ce problème mais j'espère qu'avec le code ça ira mieux.
HTML :

<hgroup>
<h1 id="site-title"><a href="http://localhost/monsite/" title="Mon site" rel="home"><span>Mon site</span></a></h1>
<h2 id="site-description"><span>Le sujet du site</span></h2>
</hgroup>

CSS :

hgroup {
	float: left;
	width: 235px;
	height: 33px;
	background:url('images/logo_titre.png') no-repeat top left;
}
hgroup span {
	/*visibility: hidden;*/
}
hgroup a span {
	position: relative;
	top: -30px;
	width: 235px;
	height: 33px;
	border:5px solid red;
	font-size: 29px;
}

Quand je décommente visibility: hidden; le lien n'est plus à la bonne place.

Au lieu de faire un bricolage en CSS et dans la mesure où un logo est une image porteuse de contenu, vire tout ce CSS, et remplace ton HTML par :

<h1><a href="http://localhost/monsite/" rel="home"><img src="/cheminVersTonLogo.truc" alt="Mon site - Le sujet de mon site></a></h1>

Modifié par Florian_R (23 Nov 2011 - 12:13)

Oui ça marche ça aussi en effet merci.
Sinon j'avais trouvé aussi opacity: 0; en lieu et place de visibility: hidden; qui marche.
J'étais entrain de rédiger cette solution quand j'ai vu que tu répondais en même temps.

Au moins voilà 2 solutions pour le prix d'une.

cssmaster a écrit :
Sinon j'avais trouvé aussi opacity: 0; en lieu et place de visibility: hidden; qui marche.

Ça reste du bricolage. L'image DOIT être présente dans le code HTML.
Modifié par Florian_R (23 Nov 2011 - 12:26)