28172 sujets

CSS et mise en forme, CSS3

[Résolu] Masquer span boutons

Bonsoir,

J'ai un petit soucis sur ma CSS J'ai créé plusieurs boutons dans ma page qui sont pour certains dans des class et d'autres dans des div. Je souhaite que le texte entre les span soit caché (car il est obligatoire d'avoir du texte sauf erreur de ma part sur ces liens et hyperliens)

Voilà des exemples de codes :
div:
<div id="cv"><a href="docs/CV Damien LEGENDRE 2011 v3.pdf"><span>Damien LEGENDRE infographiste</span></a><img src="img/mon cv.png" alt="curriculum vitae"/></a></div>

class:
<li class="facebook"><a href="https://www.facebook.com/Uncoindpixel" target="_blank"><span>Facebook Un coin d'pixel</span></a></li>


et en CSS :

div : 
}
#cv {
	display:block;
	position:absolute;
	margin-top:300px;
}
#cv:hover {
	-webkit-transform: rotate(-10deg);/*  rotation de -10 degrés */
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

#cv a span {
	position:absolute;
	top:-500px;
	width:1px;
	height:1px;
	overflow:hidden;


class: 
.facebook a {
	display: block;
	background:url(img/facebook.png) no-repeat;
	width: 90px;
	height:90px;
}
.facebook a:hover {
	background:url(img/facebookhover.png) no-repeat;
	cursor:pointer;
}
.facebook a span {
	position:absolute;
	top:-500px;
	width:1px;
	height:1px;
	overflow:hidden;
}


En ce qui concerne la class tout fonctionne mais pour la div ca bug pas mal (curseur qui clignote du pointeur à la fleche) et impossible cliquer le bouton. Par contre le hover fonctionne correctement et le texte entre les span est bien caché

Voyez vous une erreur dans mon code car la je seche Smiley decu
Modifié par UnCoindPixel (30 Jan 2012 - 17:40)
Bonjour,

tu n'as pas obligatoirement besoin de mettre du texte dans une balise <a>. Elle peut être vide (ce qui ne sera pas conseiller hormis l'utilisation d'ancres), ou contenir une balise <img> (ou n'importe qu'elle autre balise au display inline ou inline-block par défaut en xhtml, ou simplement n'importe qu'elle balise en html 5).

Alors, dans ton cas, le mieux serait sans doute ceci:


<div id="cv">
  <a href="docs/CV Damien LEGENDRE 2011 v3.pdf">
    <img src="img/mon_cv.png" alt="curriculum vitae de Damien Legendre, infographiste"/>
  </a>
</div>


Le contenu de l'attribut alt devant dans le cas présent plus pertinent et remplaçant avantageusement le texte et tous les hacks pour le faire disparaître.

L'avantage de cette technique en soit, est que si l'image n'apparait pas, un contenu alternatif sera présenté; ce qui ne sera pas le cas si l'attribut alt est inutile et que le texte de contenu est masqué.
Merci ca marche beaucoup mieux Smiley biggrin

Par contre j'ai le même problème mais cette fois sur des boutons qui contiennent des ancres! Comment procéder du coup?
Oui :

<div class="hautpage"><img src="img/hdp.png" alt="Damien LEGENDRE Infographiste"/><a href="#entete"><span>Damien LEGENDRE infographiste</span></a></div>



.hautpage {
	display:block;
	width:50px;
	-moz-opacity:0.5;
	opacity: 0.5;
	filter:alpha(opacity=50);
}
.hautpage:hover {
	-moz-opacity:1;
	opacity: 1;
	filter:alpha(opacity=100);
	cursor:pointer;
}
.hautpage a span {
	position:absolute;
	top:-500px;
	width:1px;
	height:1px;
	overflow:hidden;
}


Merci de ton aide en tout cas! Comme tu l'imagine, je débute c'est mon premier site web

Si tu veux voir concretement le site, je peux t'envoyer le sous domaine sous lequel je l'héberge par mail

++
Eh bien alors ce sera comme le premier cas... Il suffira de mettre la balise <img> entre les balises <a>, de décrire l'utilité du bouton dans l'attribut alt (ex: "Aller à mon curriculum vitae") et de ne pas y mettre de texte.

C'est bien ce que tu essais de faire ?
Je vais regarder ca tout à l'heure! Je crois que j'ai capté la logique (Ouai je suis un peu neuneu sur le coup je crois Smiley cligne )

Merci à toi Smiley cligne
Sujet clos
Aller à