Tutoriel: menus rollover, images irrégulières, rollovers à distance...

Tutoriel: menus rollover, images irrégulières, rollovers à distance... - HTML/CSS - Programmation

Marsh Posté le 20-02-2005 à 20:48:48    

Vala, j'ai créé il y a une paire de jours un petit tutoriel dont je me dit qu'il pourrait être utile sur HFR:
 
Quelqu'un trouvait joli le menu de Manga-nemesis (menu sauvegardé ici si ils le modifient, code non retouché simplement réindenté, et tout ce qui ne fait pas partie du menu a été retiré) et demandait comment faire la même chose (les têtes qui s'illuminent tout ça). Quand je suis arrivé, les réponses (4 ou 5) étaient "Avec du javascript"... ouh là, encore un menu plein de JS tout pourri?
Confirmation à la visualisation de la page: JS et tables à l'horizon, code source du menu? 14.5ko [:benou_miam] + 126ko d'images  [:benou_miam]  [:benou_miam]  
 
J'ai donc décidé de montrer (et déclaré) qu'on pouvait faire la même chose sans une goutte de JS, avec simplement (x)html et CSS, compatible avec tous les browsers modernes, et en augmentant la vitesse de réaction en bonus (testez avec le menu original, si on passe rapidement la souris de gauche à droite certains boutons n'ont pas le temps de s'allumer, de plus on a un petit bug de clignottement sous Firefox).
 
Comme il me semble que certains fréquenteurs de hardware.fr pourraient en avoir l'utilité, je vous poste, donc, le dit tutoriel.
 
 
Edit: Attention, avant de répondre ou de commenter ayez l'obligeance de lire tout le thread et surtout la solution alternative d'OlivierPatry. Bien que non expliquée, elle est beaucoup plus claire et plus "propre" au niveau CSS (et probablement plus légère et plus courte.. en un mot, mieux ;) )
 
 
--------------------------------------------
Tutoriel: comment créer un menu comme celui de manga-nemesis (images rollover+superposition toussa)
 
 
Prérequis:
1- Connaissance correcte du HTML/XHTML
2- Connaissance minimale des CSS (ce que c'est, comment ça s'utilise)
3- Aucune connaissance du Javascript n'est nécessaire
4- Un éditeur de texte, Notepad suffit largement, un éditeur un peu plus puissant (avec coloration syntaxique) comme SciTE ou JEdit peut être utile
 
 
I/ Le HTML.
On va commencer par construire une structure de page logique, qui veut dire quelque chose, qui soit lisible
Le menu lui même est inscrit dans une en-tête de page (un header), nous allons donc créer une structure de base comportant cette en-tête:

<?xml version="1.0" encoding="UTF-8"?>
<!-- On indique qu'on a écrit la page en UTF-8, ceci se règle dans votre éditeur de texte -->
<!-- La première ligne devant être l'encodage quand celui-ci est présent (UTF-8 ou ISO-8859-1 habituellement), on met les commentaires en dessous -->
<!-- Puis on indique que le document est conforme à la norme xhtml 1.0 du W3C
    Plus d'informations à ce sujet sur cette page: http://www.w3.org/TR/xhtml1/ -->
<!DOCTYPE html  
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Enfin, on commence notre document à proprement parler -->
<html>
    <head>
        <title>Tutoriel de joli menu</title>
    </head>
    <body>
        <div id="header">
        </div>
    </body>
</html>


Voilà, une structure de base avec la localisation "logique" de l'en-tête.
On veut maintenant ajouter un menu.
Syntaxiquement, un menu peut être considéré comme une liste de liens, nous allons donc créer une liste contenant des liens (vides, mais ça n'a aucune importance)

<div id="header">
    <ul>
        <li><a href="#" title="Page de news">News</a></li>
        <li><a href="#" title="Nos projets">Projets</a></li>
        <li><a href="#" title="Notre équipe">La team</a></li>
        <li><a href="#" title="Visiter le forum">Forum</a></li>
        <li><a href="#" title="Nous laisser un message">Livre d'or</a></li>
        <li><a href="#" title="Autres pages intéressantes">Liens</a></li>
    </ul>
</div>


On voit ici un certain nombre d'éléments:
<ul></ul> qui permet de délimiter une "liste non ordonnée"
<li></li> qui permet de délimiter un élément de liste
l'élément title des balises "a", qui permet de donner une "aide" supplémentaire, son contenu apparaît habituellement sous la forme d'un petit popup d'aide (tooltip) dans les navigateurs graphiques.
 
Si vous ne voulez pas le faire vous mêmes, voici le résultat
 
D'aucuns diront que c'est moche... peut être, mais au moins ça fonctionne et c'est clair [:mmmfff]
 
II/ Papy, elle est moche ta photo
 
Ta gueule jeune con [:mmmfff]
 
Bon, nous allons maintenant nous atteler à la tâche difficile de rendre ce menu joli.
Pour cela, nous allons utiliser les CSS (Cascading Style Sheed, Feuilles de Style en Cascade).
 
Créons donc un fichier "style.css" dans le répertoire de notre fichier HTML, puis lions les deux en ajoutant

<link rel="stylesheet" type="text/css" href="style.css" title="Style manga-nemesis" />


au sein de notre fichier html, à l'intérieur de la zone délimitée par <head> et </head>, comme ça
 
Nous allons ensuite nous munir de nos images. C'est relativement tendu dans la mesure ou les images de départ ont été ignoblement charcutées par de vils barbares, mais j'ai quand même réussi à reconstituer à peu près le bouzin.
On obtient ceci, qui en JPEG qualité 60, nous donne 83ko (trop, beaucoup trop, mais bon le matériel de départ est ainsi, et même légèrement plus lourd avec 90ko en 23 fichiers).
Et vous pouvez trouver les boutons "survolés" ici, avec un total de 22ko (JPEG qualité 80, j'ai pas trop optimisé et la q60 était trop faible à cause de la complexité & des couleurs).
 
Les images survolées font toutes 92px de haut (avec respectivement 139, 60, 83, 88, 108 et 108 pixels de large).
Par rapport à l'image de font d'écran, le menu commence au point (133, 247).
 
Dans la mesure où il n'y a pas deux éléments de liste identiques, nous devons les identifier de manière précise (ne serait-ce que pour associer à chacun une image 'de survol' ), nous allons donc utiliser les "id"s, qui permettent d'identifier un élément unique (un ID ne doit jamais se trouver deux fois dans une page donnée).
Notre liste de liens devient alors

<div id="header">
    <ul>
        <li id="news"><a href="#" title="Page de news">News</a></li>
        <li id="projets"><a href="#" title="Nos projets">Projets</a></li>
        <li id="team"><a href="#" title="Notre équipe">La team</a></li>
        <li id="forum"><a href="#" title="Visiter le forum">Forum</a></li>
        <li id="livre"><a href="#" title="Nous laisser un message">Livre d'or</a></li>
        <li id="liens"><a href="#" title="Autres pages intéressantes">Liens</a></li>
    </ul>
</div>


Vous allez me dire "mais pourquoi donner un ID aux éléments de listes et pas aux liens?"
Réponse: nous allons devoir les manipuler, et manipuler un élément donné permet de manipuler tous ses héritiers (c'est à dire les éléments contenus à l'intérieur), nous allons voir ça dans un instant, c'est l'un des principes d'héritage et ça permet de faire des codes HTML simples.
 
III/ Papy, je veux pas être méchant mais elle est toujours aussi moche ta photo...
 
http://rulzofpunk.free.fr/smileys/batte_fou.gif
 
Bien, maintenant que nous avons notre fichier HTML et nos images, il nous reste à lier le tout.
 
Si vous l'avez fermé, rouvrez le fichier "style.css" que vous avez créé il y a 2mn.
 
La première chose, c'est de nettoyer le comportement par défaut des navigateurs, et on va en profiter pour mettre notre image de départ en font de l'en-tête

/* On enleve les marges et les remplissages par defaut du document et du corps de texte */
html, body {
    margin: 0;
    padding: 0;
}
 
/* on utilise #machin pour acceder à l'element d'ID "machin" */
#header {
    /* On met en place notre fond en le cadrant dans le coin en haut à gauche et sans répétition */
    background: url(background.jpg) top left no-repeat;
    /* Et on en profite pour donner une taille à notre entete */
    width: 785px;
    height: 350px;
}


L'intérêt à ce niveau là n'est pas énorme mais bon, on peut voir ici le résultat le la manoeuvre.
 
Il nous faut maintenant formater notre menu.
Pour cela, nous allons commencer par positionner notre liste de manière absolue (c'est à dire qu'on positionne l'élément précisément par rapport à son parent, sans tenir compte des autres éléments existants ou du flux normal de la page).

/* On accede a l'element "ul" descendant de l'element d'id "header" */
#header ul {
    /* Positionnement absolut */
    position: absolute;
    /* Vous vous souvenez des valeurs de tout a l'heure? */
    left: 133px;
    top: 247px;
    /* Au passage, on va enlever tout l'affichage par défaut des listes */
    margin: 0;
    padding: 0;
    list-style: none;
}
 
/* Et on nettoie le comportement des elements de liste */
#header ul li {
    margin: 0;
}


 
Bon, le menu semble être placé à peu près au bon endroit, il nous faut maintenant... placer nos boutons.
 
Tout d'abord, les afficher en tant que bloc pour pouvoir leur donner une taille

#header ul li a {
    /* Affichage en tant que blocs */
    display: block;
}


 
Mais, comme les éléments de liste, les blocs forcent le passage à la ligne.
 
Pas de problème, nous allons tricher: nous allons "flotter" tous les éléments vers la gauche, ce qui fait que l'élément suivant viendra se placer gentiment à leur droite.

#header ul li a {
    /* Affichage en tant que blocs */
    display: block;
    /* Flottons flottons */
    float: left;
}


et pour IE qui nous les brise, il faut flotter les éléments de listes...
mais Opera ne supporte pas. Qu'à cela ne tienne, nous allons encore tricher !

#header ul li {
    float: left;
    margin: 0;
}
/* IE ne comprend pas l'instruction ci-dessous à cause du selecteur ">" */
#header ul>il {
    float: none;
}


 
Il est inutile de flotter le dernière élément, on va donc lui demander de se comporter normalement juste au cas ou:

#liens a {
    float: none;
}


 
On obtient alors ceci.
C'est pas terrible, mais on progresse (nb: bug pascompris d'Opera sur cette étape).
 
Nous allons maintenant régler les tailles des boutons du menu:

#header ul li a {
    /* Affichage en tant que blocs */
    display: block;
    /* Flottons flottons */
    float: left;
    /* La hauteur est commune à tous les boutons ! */
    height: 92px;
}
 
#liens a {
    float: none;
    /* On rentre non la largeur de l'image mais celle du bouton: les boutons se superposent partiellement */
    width: 82px;
}
#livre a {
    width: 86px;
}
#forum a {
    width: 74px;
}
#team a {
    width: 62px;
}
#projets a {
    width: 45px;
}
#news a {
    width: 139px;
}


 
Et comme vous pouvez le voir ici, non seulement on a des liens positionnés mais en plus on obtient une "zone" cliquable complète sur toute la surface du bouton!
Simplement grâce aux CSS !
 
Nous allons maintenant gérer le survol à la souris.
Ce survol se gère grâce à la pseudo classe "hover".
On peut théoriquement l'utiliser sur n'importe quel élément (d'après la norme), mais pour des raisons que personne n'a encore été capable de comprendre Microsoft a jugé bon de le restreindre au seul élément "a" dans MSIE, souvenez-vous en sous peine d'avoir des surprises.

/* Mettons en place les images survolees */
/* on appelle "element:hover" pour lui attribuer une regle de survol */
#liens a:hover {
    background-image: url(hover_6.jpg);
}
#livre a:hover {
    background-image: url(hover_5.jpg);
}
#forum a:hover {
    background-image: url(hover_4.jpg);
}
#team a:hover {
    background-image: url(hover_3.jpg);
}
#projets a:hover {
    background-image: url(hover_2.jpg);
}
#news a:hover {
    background-image: url(hover_1.jpg);
}


 
Si vous regardez ce que donne votre page, vous vous rendrez compte... qu'elle bugge horriblement (non, pas d'image). En effet, le fond d'un élément se place par défaut au coin supérieur gauche, hors ici on a un décalage!
Nous allons donc placer le fond par rapport au coin supérieur droit des liens:

#header ul li a {
    /* Affichage en tant que blocs */
    display: block;
    /* Flottons flottons */
    float: left;
    /* La hauteur est commune à tous les boutons ! */
    height: 92px;
    /* Modifions la référence de placement des fonds */
    background-position: top right;
}


Les positions sont parfaites mais... les images ne s'affichent que partiellement !
En effet, un fond ne peut s'afficher que sous son élément, pas en dehors ...
 
Nous allons donc devoir ruser (attention, ce qui va suivre peut paraître complexe, en fait après quelques temps ça vient naturellement).
Tout d'abord, redéfinir les tailles des éléments pour qu'elles correspondent aux tailles des images

#liens a {
    float: none;
    width: 108px;
}
#livre a {
    width: 108px;
}
#forum a {
    width: 88px;
}
#team a {
    width: 83px;
}
#projets a {
    width: 60px;
}
#news a {
    width: 139px;
}


Les images vont donc se retrouver beaucoup plus larges que précédement, et vont tout décaler par rapport au fond.
Nous allons donc les décaler en donnant une marge négative à droite à l'image située avant elles (elles vont se placer par dessus l'image précédente) égale à la surface de superposition avec l'image les précédant

#liens a {
    float: none;
    width: 108px;
}
#livre a {
    margin-right: -26px;
    width: 108px;
}
#forum a {
    margin-right: -22px;
    width: 88px;
}
#team a {
    margin-right: -14px;
    width: 83px;
}
#projets a {
    margin-right: -21px;
    width: 60px;
}
#news a {
    margin-right: -15px;
    width: 139px;
}


L'ordre de superposition est inversé par rapport au menu originel, mais je doute que ce soit très gênant
 
Comme d'habitude (ça nous change), MSIE lourde son monde en refusant de fonctionner normalement.
Résultat, la partie "superposée" refuse de s'afficher chez lui.
 
Vous allez donc être introduit par ce fait dans le monde des "IE Hacks":
IE ne se conforme pas à la norme sur pas mal de points, ce qui ne serait pas gênant si il ne faisait que ne pas gérer les propriétés au lieu de les interpréter "à sa sauce" (vous pouvez voir ici un certain nombre de bugs CSS d'IE). Pour lui faire adopter un rendu correct, on est donc parfois obligé d'utiliser des "hacks", c'est à dire des techniques bizarres, peu compatibles avec la norme CSS, afin de lui refiler à lui uniquement des valeurs à la con permettant un rendu visuellement correct car prenant en compte ses "spécificités".
 
Le hack ici est simple: le problème vient du modèle de boite d'IE, qui considère qu'une boite (un bloc) va jusqu'à l'intérieur de sa marge.
Résultat, si une marge est négative IE ne prolonge le bloc que jusqu'à la bordure ramenée à l'intérieure de la marge !
(ce qui est censé constituer "l'extérieur" de la marge et qui a été replié à l'intérieur).
 
Solution: supprimer toute forme de marge au moment du :hover en ajoutant ceci en fin de CSS:

/* La racine d'une page est "html", mais les IEs ajoutent un élément racine inconnu
Un navigateur compatible ignorera donc tout simplement ce qui suit, dans la mesure ou le * correspondrait a un element "html" et qu'on ne trouve pas d'element html au sein d'un autre element html.*/
* html #header a:hover {
    /* Quand on passe la souris sur le lien, on retire les marges de celui-ci.
    Les autres liens se decalent, mais dans la mesure ou ils ne sont pas affiches "graphiquement" la chose reste "invisible"...*/
    /* Oui, c'est crade et j'ai honte, mais bon :/ */
    margin-right: 0px;
}


 
Le résultat, vous pouvez le voir au niveau de la 6e étape
 
Notre 7e étape consiste à planquer le texte des liens, que nous traînons depuis la première.
 
Malheureusement, nous ne pouvons le faire sans retoucher légèrement le fichier HTML: le texte de chaque lien va être placé dans une balise <span>.
C'est pas fantastique sémantiquement parlant (on a déjà 3 couches autour de notre texte :( ), mais essentiel pour terminer la mise en place du FIR.
Le FIR (Fahrner Image Replacement), c'est ce que nous sommes en train d'utiliser pour remplacer du texte avec des images (au niveau des liens).
Pour plus d'information sur le remplacement par des images, voir cet article de Stopdesign.
 
Résultat:

<div id="header">
    <ul>
        <li id="news"><a href="#" title="Page de news"><span>News</span></a></li>
        <li id="projets"><a href="#" title="Nos projets"><span>Projets</span></a></li>
        <li id="team"><a href="#" title="Notre équipe"><span>La team</span></a></li>
        <li id="forum"><a href="#" title="Visiter le forum"><span>Forum</span></a></li>
        <li id="livre"><a href="#" title="Nous laisser un message"><span>Livre d'or</span></a></li>
        <li id="liens"><a href="#" title="Autres pages intéressantes"><span>Liens</span></a></li>
    </ul>
</div>


 
Puis dans notre CSS, nous effaçons le texte:

/* On reprend tout l'heritage au niveau du header */
#header ul li a span {
    /* Et on demande au span de ne pas s'afficher */
    display: none;
}


Tenez, c'est tellement magique que ça conclut une étape: whoaaa [:atsuko]
 
Bon, c'est pas mal, on a un joli menu qui fonctionne dans tous les navigateurs, mais il manque quelque chose !
Le texte qui s'affiche à droite du menu sur la version originelle...
 
Premier problème: où trouver ce texte?
Réponse: le lien qu'on vient d'effacer fera très bien l'affaire :D
 
Deuxième problème: comment positionner le texte?
Réponse: positionnement absolu !
 
La "boite" d'affichage de texte commence au point (633,306) et fait 152px sur 32px.
Ne pas oublier qu'on positionne le <span> par rapport au <ul>, donc une paire de soustractions pour arriver à la valeur de la position de notre bloc:
(500, 59)

#header ul a:hover span {
    /* Affichage en tant que bloc */
    display: block;
    /* positionnement absolut */
    position: absolute;
    /* Position et taille */
    left: 500px;
    top: 59px;
    width: 152px;
    height: 32px;


On essaie ensuite de centrer le texte horizontalement (facile) et verticalement.
Pour le centrage vertical, on va définir la taille de la ligne comme faisant la hauteur de notre bloc, et aligner le texte sur le milieu de celle ci:


    /* Centrage horizontal du texte */
    text-align: center;
    /* Redefinition de la taille de la ligne */
    line-height: 32px;
    /* Positionnement du texte par rapport a la ligne */
    vertical-align: middle;
}


 
Ne nous restent plus qu'à mettre en place la couleur et à retirer le soulignement des liens en modifiant le code CSS existant pour eux:

#header ul li a {
    /* Affichage en tant que blocs */
    display: block;
    /* Flottons flottons */
    float: left;
    /* La hauteur est commune à tous les boutons ! */
    height: 92px;
    /* Modifions la référence de placement des fonds */
    background-position: top right;
    /* et on finit en modifiant l'affichage des liens */
    color: #A8B4F3;
    text-decoration: none;
}


 
Et voilà, c'est terminé, un super menu sans la moindre ligne de JS en 5ko commentaires compris (sans compter les 105ko d'images nécessaires  :whistle:  ).
À comparer aux 14.5ko (et 126ko d'images) de l'original ;)
 
Note 1: on pourrait sûrement optimiser ce machin, et l'améliorer encore en adaptant le design à la source et non l'inverse, mais c'est déjà pas mal, et je serais probablement pas capable de faire mieux de toute façon
Note 2: Le positionnement absolu de partout pose de gros problèmes en cas de redimentionnements (ou de résolutions "imprévues" ), il est recommandé de faire des designs "fluides" capable de s'adapter à l'espace d'affichage disponible plutôt que de forcer une résolution.
 
Vala vala, si vous avez des questions n'hésitez pas j'essaierais d'y répondre du mieux de mes capacités
 
PS: le tout premier example bugge en distant sous IE (blabla erreur XML toussa), pas en local, et c'est pas très grave vu la complexité de la page :D (j'ai l'impression qu'il n'aime pas les commentaires entre l'entête XML et le doctype)


Message édité par masklinn le 21-02-2005 à 09:16:15

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-02-2005 à 20:48:48   

Reply

Marsh Posté le 20-02-2005 à 21:05:07    

Joli [:perchut2]
 
 

Citation :

II/ Papy, elle est moche ta photo
 
Ta gueule jeune con [:mmmfff]

[:cyberpat92]


Message édité par tet2neu le 20-02-2005 à 21:08:49
Reply

Marsh Posté le 20-02-2005 à 21:38:56    

Super tutoriel je trouves. :) J'ai appris des trucs que je conaissait pas.
Petite question pour l'étape 7 : ne serait il pas possible de faire pareil sans les span en mettant  

Code :
  1. #header ul li a {
  2.     /* Et on demande au span de ne pas s'afficher */
  3.     display: none;
  4. }


au lieu du

Code :
  1. #header ul li a span {
  2.     /* Et on demande au span de ne pas s'afficher */
  3.     display: none;
  4. }


 
Sinon, avec firefox 1.0, je vois aucune diférence entre l'étape 7 et la 8. :( Je sais pas si c'est normal.

Reply

Marsh Posté le 20-02-2005 à 21:45:28    

omega2 a écrit :

Super tutoriel je trouves. :) J'ai appris des trucs que je conaissait pas.
Petite question pour l'étape 7 : ne serait il pas possible de faire pareil sans les span en mettant  

Code :
  1. #header ul li a {
  2.     /* Et on demande au span de ne pas s'afficher */
  3.     display: none;
  4. }


au lieu du

Code :
  1. #header ul li a span {
  2.     /* Et on demande au span de ne pas s'afficher */
  3.     display: none;
  4. }



Le lien est une zone réactive au dessus des images, si on l'affiche pas ya plus de zone réactive donc plus de hover donc plus de menu [:itm]  
 
(tu peux tester avec Firefox + extension Web Developper)

Citation :

Sinon, avec firefox 1.0, je vois aucune diférence entre l'étape 7 et la 8. :( Je sais pas si c'est normal.


Regarde le coin en bas à droite quand tu passes la souris sur les boutons [:itm]


Message édité par masklinn le 20-02-2005 à 21:47:31

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-02-2005 à 22:18:29    

Hooo, j'avais pas vu le coin à droite. :)
Cool. :)
C'est vrai, j'oubliais que pour IE le hover n'existe que sur les liens. Halala, toujours incapable de faire tout comme tout le monde celui là.

Reply

Marsh Posté le 20-02-2005 à 22:37:43    

omega2 a écrit :

C'est vrai, j'oubliais que pour IE le hover n'existe que sur les liens. Halala, toujours incapable de faire tout comme tout le monde celui là.


 [:gratgrat]  
il dit qu'il voit pas le rapport


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-02-2005 à 22:42:32    

Hello, j'ai survolé le tutoriel, et j'ai quelques remarques (tapez-moi dessus si je dis des conneries, on a l'habitude ici) :
 
* dans ton exemple, tu as besoin d'autant d'images que de boutons (soit 6), ce qui - de plus - crée un temps de latence pendant le chargement de chaque image.
Pourquoi ne pas utiliser la fameuse méthode des portes coulissantes pour n'avoir qu'une seule image et sans preload nécessaire ?
- http://www.pompage.net/pompe/portescoulissantes2/
- tuto : http://www.elmoustikoblog.net/tutoriels/css/roll_over/
- démo : http://www.alsacreations.com/artic [...] belius.htm
 
* En fait, si j'ai bien compris, l'affichage / masquage du texte est la technique utilisée par Eric Meyer ici : http://www.meyerweb.com/eric/css/edge/popups/demo.html ?
En voici un tuto en français : http://www.alsacreations.com/articles/affiche/
 
* la technique du display : none pour masquer des éléments est à éviter, tout simplement parce que certains lecteurs d'écrans et synthétiseurs vocaux l'interprêtent aussi alors qu'ils ne devraient pas !
Explications très intéressantes ici : http://blog-and-blues.org/weblog/2 [...] e-en-image
 
 
En tout cas, l'idée d'avoir réuni ces deux tutos est très intéressante et le résultat très sympathique.


Message édité par sibelius le 20-02-2005 à 22:51:56

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 20-02-2005 à 22:43:58    

il dit que si on vire le seul élément ou il y a un hover, on peut plus utiliser le hover.
Il dit que IE ne conait le hover que pour les liens.
Je dis que si on met le hover au niveau inférieur, on s'en sort mais qu'alors ceuxd qu'on IE sont dans la merde.
Bref, c'est con à dire mais ma question mettait IE out.

Reply

Marsh Posté le 20-02-2005 à 23:26:55    

SIBELIUS a écrit :

Hello, j'ai survolé le tutoriel, et j'ai quelques remarques (tapez-moi dessus si je dis des conneries, on a l'habitude ici) :


J'ais pas l'impression que t'en dises à première vue, je vais te dire ça en regardant plus avant dans ton machin ;)

Citation :

* dans ton exemple, tu as besoin d'autant d'images que de boutons (soit 6), ce qui - de plus - crée un temps de latence pendant le chargement de chaque image.
Pourquoi ne pas utiliser la fameuse méthode des portes coulissantes pour n'avoir qu'une seule image et sans preload nécessaire ?
- http://www.pompage.net/pompe/portescoulissantes2/
- tuto : http://www.elmoustikoblog.net/tutoriels/css/roll_over/
- démo : http://www.alsacreations.com/artic [...] belius.htm


Simple: je suis un feignant, donc j'ai récupéré les images d'origine, j'ai collé les 3 morceaux de chaque image, et ça m'a lourdé de bosser plus que ça donc je me suis arreté là [:neowen]  
Dans les faits tu as parfaitement raison, une image unique est largement plus adaptée.
 
Même si la manière dont la page est construite réduit notablement son intérêt: l'avantage du background coulissant, c'est qu'à l'affichage de l' "image" (de la partie d'image en fait) "au repos", l'image "hover" est chargée.
Ici, il n'y a pas d'image "au repos", l'état au repos étant un non-affichage (on laisse s'afficher l'élément parent), on obtiendrait donc quand même une latence au chargement de la première image "hoverée", et celui-ci serait 5 fois plus long que les chargements individuels actuels (pas 6, parce que ça compresserait probablement mieux)

Citation :

* En fait, si j'ai bien compris, l'affichage / masquage du texte est la technique utilisée par Eric Meyer ici : http://www.meyerweb.com/eric/css/edge/popups/demo.html ?
En voici un tuto en français : http://www.alsacreations.com/articles/affiche/


Oui :) (enfin une dérivée, mais le principe est bel et bien celui là)

Citation :

* la technique du display : none pour masquer des éléments est à éviter, tout simplement parce que certains lecteurs d'écrans et synthétiseurs vocaux l'interprêtent aussi alors qu'ils ne devraient pas !
Explications très intéressantes ici : http://blog-and-blues.org/weblog/2 [...] e-en-image


Ici tu m'apprend un truc :jap:  
Je connaissais la technique de jouer sur l'overflow pour cacher les éléments (tada) mais je ne savais pas que certains navigateurs vocaux/lecteurs d'écrans prendaient en compte les display:none et autre visibility:hidden (les cons les cons les cons :pfff: )
(ce qui m'emmerde, parce que ça devient la dèche pour mettre en place les CSS popups...)
(quoique, on peut ajouter/enlever le overflow:hidden au moment du hover, ça doit pouvoir tourner [:cupra] )
 
Après une courte recherche, ça ne donne plus du FIR, c'est une variante du Rundle's text-indent (inventé justement à cause du problème des readers, d'après ce que je lis)
(en plus je suis con, j'avais jamais vu que ce problème était décrit à la fin de l'article de stopdesign que j'ai linké [:nik166] )

Citation :

En tout cas, l'idée d'avoir réuni ces deux tutos est très intéressante et le résultat très sympathique.


C'était pas exactement le principe de base, mais ça a effectivement mené à ça [:zebra33]
En ajoutant quand même la notion de "condition réelle" et non plus de démo théorique (à coup de logos [:khamal] )
(j'ai bien fait de le poster ici en tout cas, ça donne des trucs intéressants [:khamal] peut être un jour une v2 prenant en compte tes apports... et les autres si d'autres postent des trucs intéressants [:youpi] )

omega2 a écrit :

il dit que si on vire le seul élément ou il y a un hover, on peut plus utiliser le hover.
Il dit que IE ne conait le hover que pour les liens.
Je dis que si on met le hover au niveau inférieur, on s'en sort mais qu'alors ceuxd qu'on IE sont dans la merde.
Bref, c'est con à dire mais ma question mettait IE out.


À la base ça reste un menu hein
avec des liens
je vois pas l'intérêt de planquer les liens pour te faire plaisir dans ta haine d'IE [:spamafote]


Message édité par masklinn le 20-02-2005 à 23:29:47

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-02-2005 à 23:31:25    

Hop, avant d'aller au pieu (je lirai tes liens et ta prose demain), juste un dernier point à propos de ça :
 
"et pour IE qui nous les brise, il faut flotter les éléments de listes...
mais Opera ne supporte pas. Qu'à cela ne tienne, nous allons encore tricher ! "
 
>> En fait, ce n'est pas la peine : opera supporte très bien le float sur les <li>... à condition de donner une taille (largeur) au conteneur (<ul> ici) ;)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 20-02-2005 à 23:31:25   

Reply

Marsh Posté le 20-02-2005 à 23:36:46    

Le temps de lire ton tutoriel jsuqu'en bas, j'avais oublié qu'on avait mis le hover sur les liens et qu'on pouvait pas les mettre ailleur à cause d'IE.
Et c'est vrai que si on affiche pas les liens, on va avoir du mal à cliquer dessus. Ma question était vraiment bête ma fois.

Reply

Marsh Posté le 20-02-2005 à 23:39:17    

SIBELIUS a écrit :

>> En fait, ce n'est pas la peine : opera supporte très bien le float sur les <li>... à condition de donner une taille (largeur) au conteneur (<ul> ici) ;)


Je parlais de la conjonction de float sur <a> et <li> [:spamafote]  
 
Enfinbon je retiens l'objection pour des tests futurs [:cupra]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 20-02-2005 à 23:51:57    

:jap:
 
Bravo en tous cas pour l'initiative :) Encore une fois, pourquoi s'embêter avec cinquante-douze javascripts si on peut faire la même chose en beaucoup plus léger et accessible :)

Reply

Marsh Posté le 21-02-2005 à 01:10:39    

Le tuto est interessant, je deplore neanmoins l'utilisation de "CSS Hacks". J'ai l'impression que l'on remplace un mal par un autre.
 
A la limite je prefererais utiliser un JS bien construit plutot qu'une serie de hacks CSS, quite a avoir un menu un peu moins "tape a l'oeil" si le JS est desactive.
 
Enfin voila, c'est mon avis personnel, mais cela n'enleve pas le caractere interessant et instructif de ce tuto.

Reply

Marsh Posté le 21-02-2005 à 07:44:56    

Salut à tous, premier message sur ce forum ;)
 
Si vous permettez j'ai une solution un poil plus élégante à proposer, l'utilisation de hack n'est ici pas nécessaire, nous avons ainsi un code un peu plus chouette au final ;)
 
Quelques remarques d'ordre général sur le code de Masklinn ;)
Le prologue XML est à évité, en effet il est inutile et problématique (et surtout pas adapté) lorsque l'on fait du xHTML servi en tant que text/html et non comme application/xhtml+xml ;)
Donc vu qu'il est assez problématique pour IE en général et qu'il n'a de toute façon rien à faire ici, autant le supprimer :D
 
Pour le roll over, comme le soulignais Sibelius, une image unique serait plus efficace, et la séparation du header en 2 zones aussi.
 
J'ai choisi de dissocier le menu du header, je met donc l'état normal et l'état survolé sur la même image, un temps de chargement plus important au départ, mais c'est bien plus agréable que d'attendre que la seconde image soit chargée au roll over ;)
 
Au final, j'ai 114ko en tout, 58 et 54 ko pour les images. Il reste une bonne marge de maneouvre pour l'otpimisation je pense, mais de toute façon pour une charte graphique évoluée, un poid en image plus important est nécessaire, les CSS ne règlent pas tous les problèmes ;)
 
En tout cas, bon taf tout de même de Masklinn et très bonne initiative, voilà un bel exemple ! Avec quelques petits détails un poil dommage peut être :s
 
http://www.elmoustikoblog.net/bordel/mangas_nemesis/

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  3. <head>
  4.  <title>Menu en roll Over &laquo;&nbsp;complexe&nbsp;&raquo; via CSS - Mangas Nemesis</title>
  6.  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
  7.  <meta http-equiv="Content-Style-Type" content="text/css" />
  8.  <meta http-equiv="Content-Language" content="fr" />
  10.  <style type="text/css" media="screen" title="Style par défaut">
  11.  @import url(style.css) ;
  12.  </style>
  13. </head>
  15. <body>
  16. <h1 id="header"><span>Mangas Nemesis</span></h1>
  18. <ul id="menu">
  19.  <li id="news"><a href="index.html" title="Page de news"><span>News</span></a></li>
  20.  <li id="projets"><a href="index.html" title="Nos projets"><span>Projets</span></a></li>
  21.  <li id="team"><a href="index.html" title="Notre équipe"><span>La team</span></a></li>
  22.  <li id="forum"><a href="index.html" title="Visiter le forum"><span>Forum</span></a></li>
  23.  <li id="livre"><a href="index.html" title="Nous laisser un message"><span>Livre d'or</span></a></li>
  24.  <li id="liens"><a href="index.html" title="Autres pages intéressantes"><span>Liens</span></a></li>
  25. </ul>
  26. </body>
  27. </html>


 

Code :
  1. * { margin: 0 ; padding: 0 ; }
  3. h1#header
  4. {
  5. width: 785px ;
  6. height: 247px ;
  7. background: url(design/header.jpg) no-repeat ;
  8. }
  10. h1#header span
  11. {
  12. display: none ;
  13. }
  15. ul#menu
  16. {
  17. width: 785px ;
  18. /* on fixe la largeur pour régler la différente interprétation des éléments flottant sous Opera */
  19. height: 103px ;
  20. list-style-type: none ;
  21. background: url(design/vignettes.jpg) no-repeat ;
  22. }
  24. ul#menu li
  25. {
  26. float: left ;
  27. }
  29. ul#menu li a
  30. {
  31. display: block ;
  32. height: 92px ;
  33. position: relative ;
  34. color: #A8B4F3 ;
  35. text-decoration: none ;
  36. }
  38. li#news a { width: 139px ; margin-left: 133px ; }
  39. li#projets a { width: 60px ; margin-left: -15px ; }
  40. li#team a { width: 83px ; margin-left: -21px ; }
  41. li#forum a { width: 88px ; margin-left: -14px ; }
  42. li#livre a { width: 108px ; margin-left: -22px ; }
  43. li#liens a { width: 108px ; margin-left: -26px ; }
  45. li#news a:hover { background: url(design/vignettes.jpg) 0 -103px ; z-index: 1 ; }
  46. li#projets a:hover { background: url(design/vignettes.jpg) -139px -103px ; z-index: 1 ; }
  47. li#team a:hover { background: url(design/vignettes.jpg) -199px -103px ; z-index: 1 ; }
  48. li#forum a:hover { background: url(design/vignettes.jpg) -282px -103px ; z-index: 1 ; }
  49. li#livre a:hover { background: url(design/vignettes.jpg) -370px -103px ; z-index: 1 ; }
  50. li#liens a:hover { background: url(design/vignettes.jpg) -478px -103px ; z-index: 1 ; }
  52. ul#menu li a span
  53. {
  54. display: none ;
  55. }
  57. ul#menu li a:hover span
  58. {
  59. display: block ;
  60. width: 150px ;
  61. position: absolute ;
  62. top: 65px ;
  63. }
  65. li#news a:hover span { left: 500px ; }
  66. li#projets a:hover span { left: 376px ; }
  67. li#team a:hover span { left: 337px ; }
  68. li#forum a:hover span { left: 269px ; }
  69. li#livre a:hover span { left: 203px ; }
  70. li#liens a:hover span { left: 120px ; }


 
Je n'ai pas mis d'explications, celles de Masklinn et l'évidence des propriétés CSS devraient largement suffir ;)
 
Sinon, cessons de diaboliser le JS à tout va !! certe il etait inutile ici, mais JS ne fait pas que de mauvaises choses, JS n'est pas forcément inaccessible, il faut juste l'utiliser à bon escient ;)
 
Sinon pour les display: none; je les ai laissé, mais en effet ce n'est pas ce qu'il y a de mieux.
Pense aussi à utiliser le balisage adapté pour le titre, h1 est plus adapté et mettre le texte dedans aussi ! quitte à le cacher ensuite. Ici display: none ; peut suffir, en effet, le titre est repris dans le <title>, le lecteur d'écran le lira de toute façon :D
 
Nota : j'ai réalisé tout ceci avec SciTE qui en effet est très efficace ;)

Reply

Marsh Posté le 21-02-2005 à 08:41:05    

Ca fait plaisir de lire un topic de ce genre :D.
 
Apres avoir survolé un peu vos différentes solutions, je les trouve les 2 magnifiques mais j'ai l'impression que le debat CSS hacks VS JS est un peu ... superflue ...  
Les CSS hacks apparaissent lorsqu'on veut remplacer des elements purement visuels n'apportants absolument rien au contenu par du CSS au lieu que du JS voire du flash.
C'est bien entendu extremement joli graphiquement, mais est-ce necessaire? Pour moi un site web est une page qui m'apporte des informations. Je considere le net comme une enorme bibliotheque possèdant des livres sur a peu pres tout .. certains mieux ecris que d'autres..  
Est-ce que le fait qu'en tournant les pages d'un livres il n'y ai pas de spots de couleurs, neo defilants, images qui changement selon ou on regarde & co nous empeche de bien lire? Je ne crois pas, je crois d'ailleur que ca nous aide a mieux nous concentrer sur le contenu.
 
Donc en ce qui me concerne, je trouve qu'une mise en page semblable (du point de vue graphique, pas du point de vue du code source) a celle de ce forum (sur fond blanc, decor reduit au minimum) est largement suffitante et ne necessite pas de magouilles :)
 
[Edit : ] Quoiqu'il en soit, merci pour ce tuto, que je prendrais la peine de mieux lire des que je serais chez moi. Il a l'air tres bien fait, et surtout peu porter a rassembler plein d'idées (comme ca commence a etre le cas) sur d'autres methodes meilleures ou tout simplement différentes.
 
Comme dit au debut : C'est le genre de topic qu'il serait bien de voir plus souvent  :jap:  :jap:  :jap:


Message édité par esox_ch le 21-02-2005 à 08:43:33

---------------
Si la vérité est découverte par quelqu'un d'autre,elle perd toujours un peu d'attrait
Reply

Marsh Posté le 21-02-2005 à 08:49:41    

OlivierPatry a écrit :


Code :
  1. ...



 [:thierry3]  
Très très bon [:thierry3]  

Citation :

Sinon, cessons de diaboliser le JS à tout va !! certe il etait inutile ici, mais JS ne fait pas que de mauvaises choses, JS n'est pas forcément inaccessible, il faut juste l'utiliser à bon escient ;)


Le but ici était de montrer qu'il était inadapté à la création de ce genre de menus, même relativement complexes, et que les CSS étaient mieux adaptés et plus effiaces ;)
 
En dehors de ça, je suis d'accord, le JS a son utilité et est très pratique.
Simplement, c'est le JS "bien utilisé" ;)

Citation :

Pense aussi à utiliser le balisage adapté pour le titre, h1 est plus adapté et mettre le texte dedans aussi ! quitte à le cacher ensuite. Ici display: none ; peut suffir, en effet, le titre est repris dans le <title>, le lecteur d'écran le lira de toute façon :D


 [:mmmfff]  
(Edit pour préciser quand même: je suis bien d'accord, mais le but était de faire un menu, pas la page, donc j'ai pas trop pensé au titre de page [:cupra] )

Citation :

Nota : j'ai réalisé tout ceci avec SciTE qui en effet est très efficace ;)


 [:crosscrusher]

esox_ch a écrit :

Les CSS hacks apparaissent lorsqu'on veut remplacer des elements purement visuels n'apportants absolument rien au contenu par du CSS au lieu que du JS voire du flash.


Non :o
Les CSS Hacks apparaissent quand IE montre des bugs d'interprétation de CSS trop grands pour qu'on les passe sous silence (voir le lien que j'ai filé, certains bugs ont lieu quand on fait de la simple mise en forme, genre le bug des 3px [:spamafote] )


Message édité par masklinn le 21-02-2005 à 08:56:01

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 21-02-2005 à 08:53:32    

Superbe topic, j'ai retenu plein de possibilités et ça change de voir un tuto aussi complet dans cette cat, merci.
 
 :jap:


---------------
planuldep | Association pêche à la Sempé
Reply

Marsh Posté le 21-02-2005 à 09:05:11    

[:benou_jap]
je lis quand j'ai 10 minutes de dispo !
 
edit : pour la peine, t'es déban d'image :o


Message édité par benou le 21-02-2005 à 09:06:09
Reply

Marsh Posté le 21-02-2005 à 09:07:21    

benou a écrit :


edit : pour la peine, t'es déban d'image :o


[:atsuko] [:cupra]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 21-02-2005 à 09:42:53    

Tiens, elmoustiko qui arrive sur le forum :hello:


Message édité par FlorentG le 21-02-2005 à 09:43:10
Reply

Marsh Posté le 21-02-2005 à 13:19:45    

Masklinn a écrit :

[:thierry3]  
Non :o
Les CSS Hacks apparaissent quand IE montre des bugs d'interprétation de CSS trop grands pour qu'on les passe sous silence (voir le lien que j'ai filé, certains bugs ont lieu quand on fait de la simple mise en forme, genre le bug des 3px [:spamafote] )


 
Pour ce bug specifique ... on pourrait discutter .. meme si personnellement je vois pas en quoi le fait qu'une cellule soit déplacer de 3px va changer quelque chose au contenu .. Ca va changer biensur si t'a une jolie interface toute bien cadrée avec des images de fond, dans le header & co ... Ce que je considere comme assez superflue.. Mais bon passons.
 
Je n'essaie pas du tout de justifier le fait que IE se comporte d'une maniere totalement pitoyable, tout le monde ici sait que je suis pour un respect total des normes w3 (oui je sais .. je suis suisse .. j'applique les regles :p), mais je suis surtout pour le fait qu'un site doit etre d'apres moi un moyen d'information, et non pas une oeuvre d'art. J'en suis arrivé la en utilisant un modem dialup + P133 + 32 Mo de ram de chez ma grand-mère => Impossible de visualiser un site normal a cause des images. Je sais qu'on a passé l'an 2000 et que donc ceux qui ont encore ce genre de becanne devraient peut-etre songer a changer de becanne mais je trouve que c'est quand meme n'importe quoi. C'etait tout juste pas si je devais me lire la source HTML pour arriver a trouver les liens avant que les 500ko d'images/fichers JS divers + Flash soient affichés alors que j'avais strictement rien demandé.
 
Je trouve que si qqn veut faire un site artistiquement elaboré (comme celui qui est proposé ici), il faut en tout cas proposer par defaut une version 'light' en texte uniquement, et apres laisser à l'utilisateur le droit de vouloir ou non telecharger des images qui n'apportent rien au contenu.
 
C'est une position assez radicale je l'avoue, mais 2 semaine de surf sur un dinosaure ça laisse des sequelles


---------------
Si la vérité est découverte par quelqu'un d'autre,elle perd toujours un peu d'attrait
Reply

Marsh Posté le 21-02-2005 à 13:38:39    

esox_ch a écrit :

[.....]
C'est une position assez radicale je l'avoue, mais 2 semaine de surf sur un dinosaure ça laisse des sequelles


 
Pas si radicale que ça ;) Je suis d'accord avec toi. La priorité dans une page web, c'est avant tout l'information. Si en désactivant les CSS, les images et le JS il manque de l'information, alors il y a problème. C'est la définition de l'accessibilité en fait : on devrait pouvoir accéder à l'information juste avec la page HTML, et rien d'autre.  
 
Aussi au niveau des bug d'IE, il est effectivement déconseillé de faire une interface au pixel près. Faut toujours comptabiliser une marge d'erreur. Moi je me fixe 5-10 pixels en général, variable suivant les marges et les paddings.

Reply

Marsh Posté le 21-02-2005 à 14:48:36    

esox_ch a écrit :

Pour ce bug specifique ... on pourrait discutter .. meme si personnellement je vois pas en quoi le fait qu'une cellule soit déplacer de 3px va changer quelque chose au contenu ..


Si ce n'était que ça il n'y aurait aucun problème, mais le bug des 3px n'est pas aussi simple et pratique que ça
Et on trouve d'autres bugs gênant qui ne requièrent pas des tentatives de mise en page ultra avancées

Citation :

je suis surtout pour le fait qu'un site doit etre d'apres moi un moyen d'information


Et je suis bien d'accord avec toi

Citation :

J'en suis arrivé la en utilisant un modem dialup + P133 + 32 Mo de ram de chez ma grand-mère => Impossible de visualiser un site normal a cause des images. Je sais qu'on a passé l'an 2000 et que donc ceux qui ont encore ce genre de becanne devraient peut-etre songer a changer de becanne mais je trouve que c'est quand meme n'importe quoi.


Moi aussi, faut penser aux belges en dépassement de quota [:cupra]  
Tu noteras d'ailleurs que j'ai dit à plusieurs reprises ce que je pensais d'une interface comme celle sur laquelle j'ai basé le tutoriel [:aloy]  
(c'est très beau, mais trop lourd)

Citation :

Je trouve que si qqn veut faire un site artistiquement elaboré (comme celui qui est proposé ici), il faut en tout cas proposer par defaut une version 'light' en texte uniquement, et apres laisser à l'utilisateur le droit de vouloir ou non telecharger des images qui n'apportent rien au contenu.


Ce qui serait aisément faisable si l'on implémentait des CSS Switchers (ce qu'IE n'a pas), qu'ils permettaient aux styles alternatifs de persister d'une page à l'autre (ce que Firefox n'a pas) et qu'ils étaient aisément accessible depuis l'interface d'un simple clic par défaut (ce que ni Opera ni Firefox n'ont, dans les deux cas il faut passer par un menu... Firefox l'a eu et j'ai lourdement regretté que ça ait disparu)

Citation :

C'est une position assez radicale je l'avoue, mais 2 semaine de surf sur un dinosaure ça laisse des sequelles


Comme florent, c'est pas si radical que ça et ça se comprend très bien [:spamafote]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 21-02-2005 à 15:12:17    

Citation :

Tu noteras d'ailleurs que j'ai dit à plusieurs reprises ce que je pensais d'une interface comme celle sur laquelle j'ai basé le tutoriel


 
Tout a fait, ce n'est nullement contre toi que je dis ça. je le redis : Ton "tuto" est le genre de topic que j'aimerais voir apparaitre plus souvent parceque toujours interessant :D
 

Citation :


Ce qui serait aisément faisable si l'on implémentait des CSS Switchers (ce qu'IE n'a pas), qu'ils permettaient aux styles alternatifs de persister d'une page à l'autre (ce que Firefox n'a pas) et qu'ils étaient aisément accessible depuis l'interface d'un simple clic par défaut (ce que ni Opera ni Firefox n'ont, dans les deux cas il faut passer par un menu... Firefox l'a eu et j'ai lourdement regretté que ça ait disparu)


 
C'est en effet malheureux, et donc pour l'heure je pense qu'on n'a pas trop le choix, faut faire un "switch" en PHP (ou limite faire 2 versions html), loadant un CSS par defaut et un autre si la personne veut absolument + de coté artistiques. Un des sites donnés sur alsacreation comme exemple de combien un site peu etre cameleon est la preuve que c'est totalement fesable


---------------
Si la vérité est découverte par quelqu'un d'autre,elle perd toujours un peu d'attrait
Reply

Marsh Posté le 21-02-2005 à 15:13:21    

Pour les CSS Switchers, on trouve des extensions pour FF qui rendent le CSS choisi persistant, je crois bien :)

Reply

Marsh Posté le 21-02-2005 à 15:15:28    

FlorentG a écrit :

Pour les CSS Switchers, on trouve des extensions pour FF qui rendent le CSS choisi persistant, je crois bien :)


 
Meme si c'est le cas, on peut pas supposer que le visiteur l'aie. .. deja pas grand monde a FF .. si en plus on doit limiter a ceux avec des ext installés ... Faut faire  un site qui s'en passe tout en continuant a gueuler sur les concepteurs de FF pour qu'ils arretent de vouloir ressembler a IE et qu'ils visitent plus souvent le site de w3 :p


---------------
Si la vérité est découverte par quelqu'un d'autre,elle perd toujours un peu d'attrait
Reply

Marsh Posté le 21-02-2005 à 15:17:51    

C'est possible de définir, dans une page html, les CSS listé par un "CSS switcher"?

Reply

Marsh Posté le 21-02-2005 à 15:19:05    

Plusieurs <link>, avec l'attribut title différent

Reply

Marsh Posté le 21-02-2005 à 15:22:20    

omega2 a écrit :

C'est possible de définir, dans une page html, les CSS listé par un "CSS switcher"?


Une dropdownbox en PHP pour la persistance, ou un switcher JS pour du non persistant


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 21-02-2005 à 15:23:19    

ok, merci de l'astuce. :)
Vais bientôt être un pro du CSS :sol: ... dans 10 ans. :lol:
En tout cas, c'est classe les CSS, j'apprends quasiment tous les jours de nouveaux trucs.

Reply

Marsh Posté le 21-02-2005 à 15:23:41    

FlorentG a écrit :

Plusieurs <link>, avec l'attribut title différent


ne pas oublier rel="alternate stylesheet", sinon il importe tout [:aloy]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 21-02-2005 à 15:27:37    

Oups oui [:petrus75]

Reply

Marsh Posté le 21-02-2005 à 17:05:34    

Pour les switcher, en effet, ça peut être une utilisation sympatoch de l'idée, le mieux étant bien sûr de laisser le navigateur faire boulot à coup de <link rel="alternate stylesheet" /> mais vu le piètre support de la méthode, une solution à base de JS (en voilà une belle utilisation du JS tiens, avec cookie pour avoir la persistance, on s'en fout que tout le monde n'ai pas JS et Cookie, c'est de l'ordre du gadget et de la fonctionnalité bonus), ou de PHP peut être envisageable.
Nota : l'extension stylesheet chooser plus permet la persistance des styles et le retour du bouton en bas à droite du navigateur http://extensions.geckozone.org/StylesheetChooserPlus )
 
Je vous ai maché le travail pour ce qui est de PHP
http://www.elmoustikoblog.net/tuto [...] _switcher/
Pour la version JS, je voulais la faire, mais la flemme ...
 
J'avais fait un début de quelque chose, mais je sais plus si c'est très propre et très bien :s
http://www.elmoustikoblog.net/bordel/projet_html/
(rouge => vert grâce au JS, on change simplement l'id du body et on affiche le style en fonction de l'id du body.
C'est plutôt crado en fait ^^ Mais il serait facile de changer l'url de la feuille de style grâce au JS, ou d'utiliser les <link rel="alternate stylesheet" /> etc...
 
En tout cas, il est clair qu'ici c'est assez chargé au niveau du poids des images, mais le menu était interessant à mettre en oeuvre pour faire une petite démonstration.
Il y a juste une petite bidouille, la marge négative et le z-index (pour IE), mais bon, points de hacks, le code est alors bien plus sûr pour l'avenir ;)
Les hacks, moins on en vois, mieux on se porte, et il est très souvent possible de s'en passer :D


Message édité par OlivierPatry le 21-02-2005 à 17:07:40
Reply

Marsh Posté le 21-02-2005 à 17:08:33    

Pour la version JS, je serais d'avis de la planquer si JS n'est pas activé. Ca fait toujours bizarre quand t'as désactivé JS et que pleins de trucs ne fonctionnent pas. Autant les insérer dans un script, et donc les planquer pour ceux qui ne le supporte pas :)

Reply

Marsh Posté le 21-02-2005 à 21:50:42    

FlorentG a écrit :

Pour la version JS, je serais d'avis de la planquer si JS n'est pas activé. Ca fait toujours bizarre quand t'as désactivé JS et que pleins de trucs ne fonctionnent pas. Autant les insérer dans un script, et donc les planquer pour ceux qui ne le supporte pas :)


 
En effet, c'est ce qui est prévu dans ma tête :D
Génération du contenu via JS pour les fonctionnalités utilisable uniquement par JS
http://www.elmoustikoblog.net/arti [...] avascript/
:)

Reply

Marsh Posté le 21-02-2005 à 21:52:12    

Ah ben voilà, parfait :) C'est ce que je fais toujours ;)

Reply

Marsh Posté le 25-02-2005 à 20:45:00    

Beau boulot Mask  :) ,
 
On comprends mieux pourquoi tu nous aggro RZ now   :lol:

Reply

Marsh Posté le 28-02-2005 à 04:33:19    

excusez ma neewbitude (et le remontage de post, mais fallait que je trouve le moment pour le lire :D) mais j'ai pas compris comment Olivier réglait le problème d'IE hacks à vrai dire

Reply

Marsh Posté le 28-02-2005 à 18:17:33    

Il ne les gère pas parce que son CSS est suffisament bien fait ( [:thierry3] ) pour ne pas avoir de problème avec les bugs d'interprétation d'IE (contrairement au mien).
 
En clair, il n'est à aucun moment dans un cas où il a besoin d'un IE hack, donc pas de hack [:cupra]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed