28172 sujets

CSS et mise en forme, CSS3

Bouton img+css

Bonjour,
On m'a récemment déconseillé d'utiliser des balises span(vides)+css avec des sprites pour mes boutons,
J'ai donc cherché un peu, et trouvé, toujours avec des sprites le code qui suit.
Le quel vous parait le plus correcte ? et surtout pourquoi ! =)

IMG+CSS
<h1 class="button"><img src="contact.png" alt="contact"/>Featured</h1>
<h1 class="button"><img src="portfolio.png" alt="contact"/>Featured</h1>
button{overflow:hidden;position:relative;height:50px;width:200px;}
button img{position:relative;}

button.contact img{top:-100px;}
button.contact img:hover{top:-200px;}

button.portfolio img{top:-100px;}
button.portfolio img:hover{top:-200px;}


OU


SPAN+CSS(background)
<span id=contact></span>
#contact{background:url(img/site/contact.png);background-position:0 0;}
#contact:hover{background-position:0 50px;}

Modifié par lithiumsound (22 Jun 2012 - 22:35)
Les deux me semblent faux et passablement ridicules car un H1 avec une classe "button" déjà ça fait peur. Et deux H1 qui visiblement décrivent des contenus différents mais dont le contenu texte est (dans les deux cas) "contact Featured" ça monte facilement à 8 sur l'échelle du WTF.

C'est censé représenter quel contenu ce code tout bizarre?

(Je précise tout de même que le SPAN sans le moindre contenu textuel c'est une connerie sans nom et qu'on se gardera bien de faire ça. Ça monte moins haut sur l'échelle du WTF mais on est à 10 sur l'échelle du code inaccessible, donc on évite. Smiley smile )
Modifié par fvsch (25 Jun 2012 - 13:06)
Hello.
fvsch a écrit :
(...) mais on est à 10 sur l'échelle du code inaccessible, donc on évite. Smiley smile )
C'est malheureusement la solution utilisée par beaucoup de gros projets (de tête jQueryUI et jQueryMobile). Plutôt que d'utiliser un bon vieux <button> qui est chiant à styler (Firefox et ses 3px de padding par exemple), hop du <span> + ARIA + des sprites.
Donc ça serait quoi le [b]mieux ?[/i]

Pour ces 2 codes (que je n'utilise pas au passage =D), je me suis inspiré de générateurs de boutons, donc j'imagine que ça doit pas voler très haut niveau optimisation...

Un conseil/exemple ?
lithiumsound a écrit :
Donc ça serait quoi le mieux ?

Aucun des deux codes proposés.
Le premier est le moins pire mais sauf erreur de ma part il est loin d'être bon.

Quant à savoir quel code serait réellement adapté à ce que tu veux faire, ben ça dépend de ce que tu veux faire. Smiley smile
Ce ne sont pas vraiment des "boutons" au sens propre hein,
j'aurais peut être dû préciser ça avant...

Ce sont presque des "liens" :\
En gros quand on clic sur une des divs CTB, PFB ou DZB, ça deroule la page grace a un fichier JS


voici le code :
<!DOCTYPE html>

<html>
	<head>
		<meta http-equiv=Content-Type content="text/html; charset=utf-8"/>
		<title>Deezine.fr</title>
		<meta http-equiv=Cache-Control content="Public"/>
		<meta http-equiv=Cache-Control content="max-age=31536000"/>
		<meta name=description content="Thibault Calabrese - graphiste et webdesigner"/>
		<meta name=robots content="all" />
		<meta name=keywords content="Deezine, design, designer, graphisme, graphiste, webdesign, webdesigner, web, freelance, indépendant, site, internet, HTML, CSS, JS, Javascript, charte graphique, identité visuelle"/>
		<link rel="stylesheet" type="text/css" href="style.css" media="all">
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script src="js/animation.js"></script>
	</head>

	<body>
		<div id=HR>
		</div>
		<div id=CTB>
			<img src="img/cth.png" width="32" height="32" alt="logo onglet contact">
			<h1 class="cth">Contact</h1>
		</div>
		<div id=CT>
		
		
		<div id=PFB>
			<img src="img/pfh.png" width="32" height="32" alt="logo onglet portfolio">
			<h1 class="pfh">Portfolio</h1>
		</div>
		<div id=PF>
		</div>
		
		<div id=DZB>
			<img src="img/dzh.png" width="32" height="32" alt="logo onglet deezine">
			<h1 class="dzh">Deezine</h1>
		</div>
		<div id=DZ>
		</div>
		
		<div id=BT>
		</div>
	</body>

</html>



+ le css

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
:focus{outline:0;}
a:active{outline:none;}
body{line-height:1;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
html{margin:0;padding:0;}
img{border:0;}

@font-face {
font-family: 'webfont';
src: url('font/kgcallmemaybe-skinnywebfont.eot');
src: url('font/kgcallmemaybe-skinnywebfont.eot?#iefix') format('embedded-opentype'),
url('font/kgcallmemaybe-skinnywebfont.woff') format('woff'),
url('font/kgcallmemaybe-skinnywebfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

html{font-family:webfont, trebuchet, verdana, arial;font-size:30px;}
body{background:#9cc2b2;}
h1{font-size:48px;display:inline;}

/*HEADER background*/
#HR{background:url(img/hr.png); height:125px; width:100%;}

/*BUTTONS images*/
#CTB img{padding:25px 0 0 120px;}
#PFB img{padding:25px 0 0 100px;}
#DZB img{padding:25px 0 0 110px;}

/*BUTTONS & CENTER*/
#CTB,#PFB,#DZB,#BT,#CT,#PF,#DZ{margin:0 auto 0 auto;width:970px;}
#CTB,#PFB,#DZB,#BT{background:url(img/buttons.png);height:60px;}

/*BUTTONS background*/
#CTB{background-position:0 5px;padding:5px 0 0 0;color:#bcb6a6;}
#CTB:hover{background-position:0 0px;padding:0 0 5px 0;color:#f3eddc;}
#PFB{background-position:0 -65px;padding:5px 0 0 0;color:#faf18e;}
#PFB:hover{background-position:0 -70px;padding:0 0 5px 0;color:#ffffc0;}
#DZB{background-position:0 -140px;color:#ffd082;cursor:default;}

.cth,.pfh{
cursor:pointer;
}

/*CENTER*/
#CT{height:200px;background:url(img/ct.png);display:none;}
#PF{height:180px;background:url(img/pf.png);display:none;}
#DZ{height:320px;background:url(img/dz.png);}

/*BOTTOM*/
#BT{height:65px;background:url(img/buttons.png)no-repeat;background-position:0 -200px;margin-bottom:240px;}

Modifié par lithiumsound (25 Jun 2012 - 19:18)
Alors déjà tu peux simplifier le code pour tes icônes. Tu avais:
<div>
  <img src="..." width="32" height="32" alt="logo onglet contact">
  <h1 class="cth">Contact</h1>
</div>

Et tu peux mettre un texte alternatif vide car l'information "logo onglet machin" ne sert strictement à rien, et on peut considérer ton icône comme une simple illustration du titre qu'elle précède, illustration qu'il n'est pas nécessaire de transcrire en texte. Donc:
<div>
  <img src="..." width="32" height="32" alt="">
  <h1 class="cth">Contact</h1>
</div>

(Ça ou mettre l'image en background CSS, c'est kif-kif.)

Donc pour répondre à la question de départ, dans ce cas précis c'est solution 1 mais avec un attribut @alt vide. Ou bien solution 2 en veillant à ce que le code HTML soit un peu plus complet et cohérent que dans l'exemple que tu donnais où il y avait juste un SPAN vide. Smiley smile
Modifié par fvsch (25 Jun 2012 - 19:25)
Donc ce code est correcte, pas de fautes graves ?

Dans ce cas la, est-ce qu'on pourrait pas carrément supprimer le alt="" ?


La page en question :
Deezine.fr
Modifié par lithiumsound (25 Jun 2012 - 19:28)
lithiumsound a écrit :
est-ce qu'on pourrait pas carrément supprimer le alt=&quot;&quot; ?

Non, l'attribut est obligatoire et la valeur vide indique qu'il ne faut pas chercher à restituer l'image dans une lecture texte seul.
Sujet clos
Aller à