Commentaires sur : Tuto CSS: Recréer le menu du site d’Apple

Par : jbj

jbj — Mon, 18 Aug 2008 17:39:58 +0000

Au mec qui à laissé un commentaire le 18/08/2008: Je l’ai effacé par mégarde (merci les spams!).
Pour modifier les libellés, tu dois éditer l’image, il ne suffit pas de modifier le code html.

Par : LuciferX

LuciferX — Mon, 04 Aug 2008 07:33:53 +0000

Intéressant ce tutoriel, le rendu est assez sympa !

Est-ce qu’il s’agit de la technique des portes coulissantes ?

Par : BlackKrystal

BlackKrystal — Thu, 31 Jul 2008 23:57:04 +0000

Waou… Ca tombe bien j’ai un site a refaire =)

Par : Greg-J

Greg-J — Sat, 26 Jul 2008 16:49:05 +0000

Très sympa ce tuto pour comprendre le positionnement des images en CSS

Par : jbj

jbj — Thu, 24 Jul 2008 05:34:18 +0000

Salut Valdun, en effet par défaut Wordpress vire tout semblant de code html, par sécurité semble-t’il. C’est assez gênant dans le cadre d’un blog comme le mien, il faudrait que je parte à la recherche d’un plugin qui empêcherait ce comportement..
Sinon, un grand merci pour tes remarques tes pertinentes, en effet on pourrais alléger le code à certains endroits! Ce code provient intégralement du site Apple, je ne l’ai pas retouché à part pour l’url de l’image de fond.

Par : Valdun

Valdun — Thu, 24 Jul 2008 01:29:49 +0000

Mwai bin décidément je ne peux même pas profiter de ta balise pre customisée pour afficher joliment le code.
Heureusement d’ailleurs, car ça pourrait faire mal si d’autres balises passaient

Pas très intuitif tout ça, à quand une ptite barre avec les smileys et les balises à notre disposition ?

Oh, n’attends pas mon accord si tu veux virer tous mes messages “à part” et accessoirement à mixer les deux qui se baladent, ça ne fait vraiment pas propre ^^
A bientôt dans un article

Par : Valdun

Valdun — Thu, 24 Jul 2008 01:19:48 +0000

En remaniant un peu tout ça il est en fait parfaitement possible d’alléger tout ce blabla en utilisant d’autres propriétés respectées par tous les navigateurs !
L’idée est de se servir du positionnement absolu pour gérer chaque bouton, à défaut de pouvoir le faire sans répétitions avec le positionnement du fond.

Première étape: remaniement du code html qui s’en trouve au passage allégé

Apple
Store
Mac
iPod + iTunes
iPhone
Downloads
Support

Deuxième étape : positionnement de chacun des liens
/* GLOBALHEADER */
#globalnav { position: absolute; width: 982px; height: 38px; padding: 0; overflow: hidden; }
#globalnav a { position: absolute; top: 0; width: 117px; padding-top: 152px; background-image: url(http://images.apple.com/global/nav/images/globalnavbg.gif); background-repeat: no-repeat; }

/* BUTTONS */
#gn-apple { background-position: 0 0; }
#gn-store { background-position: -117px 0; left: 117px; }
#gn-mac { background-position: -234px 0; left: 234px; }
#gn-ipoditunes { background-position: -351px 0; left: 351px; }
#gn-iphone { background-position: -468px 0; left: 468px; }
#gn-downloads { background-position: -585px 0; left: 585px; }
#gn-support { background-position: -702px 0; left: 702px; }

/* OVER STATES */ #globalnav a:hover { top: -38px; margin-bottom: 1px; }
/* -> Le margin-bottom corrige un bug avec IE7 qui n’actualise pas la position */
/* PRESSED STATES */ #globalnav a:active { top: -76px; }
/* ON STATES */
.home #gn-apple a:hover { cursor: default; }
.store #gn-store a, .mac #gn-mac a, .ipoditunes #gn-ipoditunes a, .iphone #gn-iphone a, .downloads #gn-downloads a, .support #gn-support a { top: -114px; }

A défaut d’être plus clair qu’un code utilisant les propriétés background-position-x/y, ça l’est davantage que celui présenté plus haut…
Bidouilleurs CSS, mes salutations

Par : Valdun

Valdun — Wed, 23 Jul 2008 23:31:12 +0000

[à tester sous IE... un des rares avantages que je lui attribue ^^]

(tiens, tout ce qui est placé entre les signes sup et inf est supprimé :))

Par : Valdun

Valdun — Wed, 23 Jul 2008 23:29:43 +0000

Et dire que si les propriétés background-position-x et background-position-y faisaient partie d’une norme CSS tout ce code répétitif pourrait être allégé
Cela diviserait le code par deux…

/* GLOBALHEADER */
#globalheader { width: 982px; height: 38px; margin: 18px auto; }
#globalnav { margin: 0; padding: 0; }
#globalnav li { display: inline; }
#globalnav li a { float: left; width: 117px; height: 0; padding-top: 38px; overflow: hidden; background-image: url(http://images.apple.com/global/nav/images/globalnavbg.gif); background-repeat: no-repeat; }

/* BUTTONS */
#gn-apple a { background-position-x: 0; }
#gn-store a { background-position-x: -117px; }
#gn-mac a { background-position-x: -234px; }
#gn-ipoditunes a { background-position-x: -351px; }
#gn-iphone a { background-position-x: -468px; }
#gn-downloads a { background-position-x: -585px; }
#gn-support a { background-position-x: -702px; }

/* OVER STATES */ #globalnav a:hover { background-position-y: -38px; }
/* PRESSED STATES */ #globalnav a:active { background-position-y: -76px; }
/* ON STATES */
.home #gn-apple a:hover { cursor: default; }
.store #gn-store a, .mac #gn-mac a, .ipoditunes #gn-ipoditunes a, .iphone #gn-iphone a, .downloads #gn-downloads a, .support #gn-support a { background-position-y: -114px; }

Par : jbj

jbj — Wed, 23 Jul 2008 21:05:12 +0000

Content de voir que vous y avez trouvé votre compte avec cet article