mar 28 21:09:40 - Menus Horizontaux - mar 28 21:09:44 OK mar 28 21:10:16 façon simple et rapide de mettre un menu à l'horizontal en gardant l'architecture d'une liste mar 28 21:10:46 premièrement nettoyer le style de la liste par défaut mar 28 21:10:53 1: retirer les puces mar 28 21:10:56 li {float:left} mar 28 21:11:09 2: initialiser les margin / padding mar 28 21:11:12 BBoux, faux mar 28 21:11:16 mdr mar 28 21:11:17 (et paff) mar 28 21:11:22 ^^ mar 28 21:11:32 j'ai dit : "simple et rapide" mar 28 21:11:47 l'avantage de cette méthode .. mar 28 21:11:53 ok je te laisse continuer mar 28 21:11:56 aucun besoin de balise autre qu'une liste mar 28 21:12:02 uun code simpliste mar 28 21:12:11 "passe partout" mar 28 21:12:15 PliP les gens mar 28 21:12:21 bonsoir TychoBrahe mar 28 21:12:26 t'es en retard .. au coin mar 28 21:12:32 tu me fera 100 lignes de ... mar 28 21:12:35 *bleep* mar 28 21:12:37 Salut TychoBrahe, mar 28 21:12:38 :p mar 28 21:12:41 :o mar 28 21:12:46 moi qui ai codé toute l'aprem mar 28 21:12:47 (hihihi) mar 28 21:13:01 donc on commence le "nettoyage" mar 28 21:14:28 - refresh visuel et css mar 28 21:14:44 là il faut intervenir au niveau 'ul' et 'li' mar 28 21:14:46 je vais manger mar 28 21:15:08 bon ap' BBoux mar 28 21:15:08 le 'a' étant un élément de type inline il n'y a aucun margin/padding mar 28 21:15:11 merci mar 28 21:15:17 ok mar 28 21:15:25 bon app' BBoux mar 28 21:15:29 merci mar 28 21:15:33 mes hommages à Madame mar 28 21:15:35 :p mar 28 21:15:55 bon à présent que la liste est nettoyé mar 28 21:16:08 on passe la lite en mode 'horizontal' mar 28 21:16:22 pour ce on utilise la class DISPLAY mar 28 21:16:36 ul / li ayant un comportement de type block mar 28 21:16:44 nous allons les passer en inline mar 28 21:16:51 * TychoBrahe a toujours utilisé uniquement le display: inline mar 28 21:16:54 les * ( erreur) mar 28 21:17:03 on passe 'li' en inline mar 28 21:17:08 explication : mar 28 21:17:12
    mar 28 21:17:16
  • mar 28 21:17:18
mar 28 21:17:32 créé 2 "boites" mar 28 21:17:43 la première composée de
    mar 28 21:17:58 la seconde étant dans 'ul' composée de
  • mar 28 21:18:17 on conserver le comportement de 'ul' en tant que block mar 28 21:18:57 quand dans un code html 2 blocks se suivent, en visuel le suivant se trouve sous le précédent mar 28 21:19:38 en spécifiant un affichage (display) de type 'inline', on force donc les 'li' à avoir le même comportement qu'une balise genre mar 28 21:19:50 de ce fait les 'li' se suivent au lieu de s'empiler mar 28 21:19:55 application: mar 28 21:20:53 - refresh visuel et css mar 28 21:21:23 maintenant on a donc son menu à l'horizontal mar 28 21:21:48 ok mar 28 21:21:50 pour une meilleure lisibilité on va augmenter le margin des 'li' mar 28 21:21:59 pourquoi margin et pas padding ? mar 28 21:22:09 [ à vous ] : mar 28 21:22:11 parce que padding c'est la marcge interne mar 28 21:22:12 il y a des inconvénient à ça aussi mar 28 21:22:24 TychoBrahe, eu ... trop simple :p mar 28 21:22:33 la raison est autre mar 28 21:23:13 ya un rapport avec la fusion des marges ? mar 28 21:23:41 non mar 28 21:23:47 simplement : mar 28 21:24:03 si on utilise des marges internes (padding) mar 28 21:24:23 la liaison entre les menus sera "pas pratique" mar 28 21:24:36 *risques* de sélectionne rle mauvais menu mar 28 21:25:02 on utilise les marges externes (margin) pour une question de confort mar 28 21:25:22 en fait .. créer un "blanc" inopérant entre les menus mar 28 21:25:35 une sorte de "zone de repos" mar 28 21:25:57 qui permet à l'utilisateur de bien différencier le passage d'un lien à un autre mar 28 21:26:25 (comportement par défaut des navigateurs sur les liens ( cursor:pointer ) ) mar 28 21:26:52 la zone clicable est le a pas le li, si tu met une marge au li (interne ou externe), le a va être réduit non ? mar 28 21:27:14 non mar 28 21:27:25 le a étant en "dur" (texte) mar 28 21:27:36 son "empattement" est fixe mar 28 21:28:01 - refresh visuel et css mar 28 21:28:11 j'ai ajouté un : margin:0 0.4em; mar 28 21:28:39 pas de marge en haut et en bas (ça servirait à rien puisque qu'a présent on est en mode inline ;) ) mar 28 21:28:51 et une marge droite/gauche de 0.4em; mar 28 21:29:17 voilà une première étape - mar 28 21:30:04 maintenant les effets boutons mar 28 21:30:12 alors là .. très simple :) mar 28 21:30:23 on reprend la base précédente mar 28 21:30:59 - refresh visuel + css mar 28 21:31:11 et à présent on modifie la balise a mar 28 21:31:19 première étape : mar 28 21:31:35 1: retrait du style apr défaut d'un lien, soit : mar 28 21:31:44 - text-decoration:none; mar 28 21:31:59 - color:black; mar 28 21:32:54 on reprend la base précédente mar 28 21:32:56 zut mar 28 21:33:00 - refresh visuel + css mar 28 21:33:22 à présent on va mettre un fond et une bordure à la balise 'a' mar 28 21:34:35 - refresh visuel + css mar 28 21:34:51 là on peut voir que ça ressemble à "rien" mar 28 21:35:00 genre menu à la frontpage ©®™ mar 28 21:35:26 re mar 28 21:35:26 on va agrémenter un peut ça mar 28 21:35:46 1: ajouter des marges internes (padding) à droite/gauche de la balise 'a' mar 28 21:35:56 2: changer la couleur de l'écriture mar 28 21:36:43 voilà .. c'est déjà plus "clair" mar 28 21:36:47 - refresh visuel + css mar 28 21:37:49 a présent l'effet "bouton" mar 28 21:37:58 on utilise la pseudo class :hover (classique) mar 28 21:38:15 et on modifie simplement la bordure mar 28 21:38:37 j'ai tout compris ^^ mar 28 21:39:06 voilà on a notre effet bouton mar 28 21:39:06 presque tout mar 28 21:39:09 :) mar 28 21:39:12 - refresh visuel + css mar 28 21:39:23 "presque" ? mar 28 21:39:36 le color:black; mar 28 21:39:42 j'ai pas suivit mar 28 21:39:56 si c'est bon mar 28 21:39:57 TychoBrahe, tu peux voir là (de par les couleurs) que 'a' ne subit pas le margin de 'li' mar 28 21:40:05 chez moi si mar 28 21:40:10 gné ? mar 28 21:40:18 du moins j'ai pas fait d'effet bouton machin tout ça mar 28 21:40:31 eu .. mar 28 21:40:38 a sur TON menu ?! mar 28 21:40:44 bref, l'écartement entre les a est toujours bon quelque soit la marge mar 28 21:40:59 le seul truc qui change c'est l'usage qui est fait de cet écart mar 28 21:41:08 dans un cas c'est du vide, dans l'autre c'est le li mar 28 21:41:41 mm mar 28 21:42:07 bon on va continuer :) mar 28 21:42:35 là on utilise au maximum le comportement par défaut des éléments html mar 28 21:42:41 maintenant .. problème :) mar 28 21:42:50 comment avoir un bouton à taille fixe mar 28 21:43:01 de façon à avoir un effet visuel "régulier" mar 28 21:43:14 sachant que 'li' et 'a' sont en 'inline' mar 28 21:43:29 on ne peut donc pas affecter de largeur ou hauteur (width/height) mar 28 21:43:51 c'est là qu'on ne va plus utiliser display:inline; mar 28 21:44:20 bah oui ^^ mar 28 21:44:23 si l'on souhaite avoir un "bouton" à taille fixe .. il nous faut donc appliquer un effet de type "block" aux balsies 'a' mar 28 21:44:33 problème ... les blocks s'empilent mar 28 21:44:55 donc même si on spécifie un dispaly:inline sur les 'li' mar 28 21:45:08 on va se retrouver avec un "truc bizarre" mar 28 21:45:12 mise en application : mar 28 21:46:19 - refresh visuel + css mar 28 21:46:26 là vous pouvez voir que ... mar 28 21:46:38 >l'est où le menu *horizontal* < mar 28 21:46:39 :) mar 28 21:47:03 display:block; sur 'a' remet en question le display:inline; sur 'li' mar 28 21:47:15 on se retrouve donc avec un "bug" mar 28 21:47:34 qui n'en est pas un ... mar 28 21:47:50 puisque l'on ne peut mettre un block dans un inline mar 28 21:47:56 (sémantiquement parlant) mar 28 21:48:13 il faut donc changer le comportement des 'li' mar 28 21:49:03 - refresh visuel + css mar 28 21:49:22 là j'ai modifié/ajouté float:left; sur les 'li' mar 28 21:49:36 on retrouve notre menu horizontal mar 28 21:49:44 un nouveau problème se rencontre ... mar 28 21:50:07 le

    de la section suivante se retrouve à la suite de 'menu 4' mar 28 21:50:11 oui mar 28 21:50:19 normal vue qu'on a "cassé le flux html" mar 28 21:50:26 il faut donc le rétablir mar 28 21:50:31 oui tu vas mettre une marge non ? mar 28 21:50:36 euh non mar 28 21:50:39 clear mar 28 21:51:58 oui mar 28 21:52:00 un trait horizontal invisible avec un clear:both; mar 28 21:52:02 non ? mar 28 21:52:05 plusieurs façon de faire mar 28 21:52:14 l'astuce de la dernière fois mar 28 21:52:26 1ère façon ... on affecte une class à la prochaine balise html qui suit dans le code mar 28 21:52:30 ou un clear sur l'éléement suivant mar 28 21:52:34 là en l'occurence il s'agit de h3 mar 28 21:52:44 la class étant : .clear{} mar 28 21:53:10 problème : on perd le comportement normal du flux hml mar 28 21:53:21 le

    se retrouve collé sosu le menu mar 28 21:53:34 il faut jouer sur les margin ... mar 28 21:53:37 (pas top) mar 28 21:54:04 2 nd façon on ajoute une balise de type block "vide" afin de rétablir le flux mar 28 21:54:14 un
    mar 28 21:54:48 - refresh viseul + css mar 28 21:55:01 là on retrouve le comportement normal mar 28 21:55:21 3 ème façon on utilise une balise de "séparation" (
    ) mar 28 21:55:34 en lui affectant la class .clear mar 28 21:55:42 et en le rendant "invisible" mar 28 21:55:51 visibility:hidden; mar 28 21:56:04 c'est mieux ça non ? mar 28 21:56:07 cette technique est la plus rapide / simple mar 28 21:56:09 mais ... mar 28 21:56:19 elle peut représenter un bug ... mar 28 21:56:38 pour l'on devrait voir une barre de coupure entre un menu et la suite du site ? mar 28 21:57:04 là on se retrouve typiquement dans un cas de figure où le
    est déconseillé mar 28 21:57:39 McPeter : rapport a ce que je disais tout a l'heure --> http://paste.ubuntu-nl.org/61413/ (tu remarquera que je susi ici resté dans le cas le plsu simple, il n'y a aucun effet spécial) mar 28 21:57:43 car 1: pas d'utilité / 2: comportement spécial des
    en fonction des navigateurs assez complexe à gérer mar 28 21:58:28 a ok TychoBrahe mar 28 21:58:34 mais j'y reviens :) mar 28 21:58:42 vais t'expliquer la différence selon moi :) mar 28 21:59:02 ^^ mar 28 21:59:22 donc dans notre cas là .. nous utliserons plutôt
    mar 28 21:59:27 car : mar 28 21:59:42 1: ne prend pas de "place" au visuel mar 28 21:59:48 2: modifiable facilement mar 28 21:59:55 3: sémantique mar 28 22:00:10 (le div ne se voyant pas en mode texte) mar 28 22:00:31 ensuite .. application d'une largeur fixe à nos boutons mar 28 22:00:57 cas opera,ff,ie7,konqueror VS ie4-6 mar 28 22:01:23 sous w3c .. une dimension globale d'un élément égale margin+padding+width mar 28 22:01:43 sous ie4-6 dimension globale = margin+width mar 28 22:01:45 oui mar 28 22:02:01 (se qui pour ma part est plus logique :| ) mar 28 22:02:06 mon seul reproche au w3c mar 28 22:02:36 nous allons donc dans un premier temps "ignorer" ie4-6 mar 28 22:04:44 HIGHLIGHT racoon97 (n=racoon97@213.188.187.235) #ubuntu-fr-geeks :+moule, mollusques, McPeter, morue mar 28 22:04:55 - refresh viseul + css mar 28 22:05:06 et ton bones McPeter mar 28 22:05:13 on a à présent nos menu en dimension fixe mar 28 22:05:21 BBoux, mes deux femmes dorment mar 28 22:05:22 lol mar 28 22:05:28 lol mar 28 22:05:30 elles se sont écroulé sur le canapé du salon mar 28 22:05:32 mouhahaha mar 28 22:05:58 bon .. mar 28 22:06:05 on revient sur la question de TychoBrahe mar 28 22:06:13 TychoBrahe, y're here ? mar 28 22:06:18 bien sûr mar 28 22:06:22 :) mar 28 22:06:43 alors pourquoi je valorise le margin plutôt que le padding mar 28 22:06:56 déjà une chose : oui tu as raison que ça ne change pas le viseul mar 28 22:07:11 par contre ... ça peut "t'enlever" des options mar 28 22:07:17 je m'expliques mar 28 22:07:20 la "zone de clique" ne change aps non plus mar 28 22:07:44 en utilisant "margin" .. 'li' subit directement les états de ses enfants mar 28 22:07:50 en l'occurence là le 'a' mar 28 22:08:08 donc 'li' englobe "au plus près" le 'a' mar 28 22:08:18 ça permet d'autre fonctionnalité de style mar 28 22:08:42 exemple ajout d'un coin arrondi style onglet en background-image dans le 'li' mar 28 22:09:06 en mettant un padding sur 'li' ... ça devient plus difficile à gérer par la suite mar 28 22:09:09 tu me suis ? mar 28 22:09:36 TychoBrahe, ? mar 28 22:09:57 je vosi je vois mar 28 22:10:04 un exemple de fond mar 28 22:10:13 tu as un coin arrondit de 5/5px mar 28 22:10:20 tu le met ) droite mar 28 22:10:27 [ bouton ) mar 28 22:10:34 symbolisation hein :) mar 28 22:10:49 j'aime bien tes dessins ^^ mar 28 22:10:55 tu vas avoir besoin d'une marge interne en px mar 28 22:11:04 pour garder une cohérence mar 28 22:11:13 padding-right:5px; mar 28 22:11:24 moi aussi BBoux mar 28 22:11:58 si maintenant t ute fiche de cet espacement .. un simple margin:0; règle le problème mar 28 22:12:06 c'est incrémentiel en quelque sorte mar 28 22:12:10 tu vois ? mar 28 22:12:18 biensûr mar 28 22:12:18 on part de l'extérieur des éléments mar 28 22:12:20 mdr!! mar 28 22:12:24 vers l'intérieur mar 28 22:12:27 "au plus près" mar 28 22:12:38 j'ai pas suivit ce truc moi mar 28 22:12:46 mais je m'en occupe pas mar 28 22:12:53 ainsi on conserver une marge de manoeuvre mar 28 22:12:59 pour le moment ça sert à rien que je m'embrouille la tête mar 28 22:13:05 :) mar 28 22:13:10 BBoux, non mais c'est intéressant ce qu'il a soulevé mar 28 22:13:19 oui j'en doute pas mar 28 22:13:41 je t'ai convaincu TychoBrahe ? :p mar 28 22:13:53 je crois que TychoBrahe plane mar 28 22:13:58 McPeter : j'avais bien rpécisé que ej restait dans el contexte simple hein ;) mar 28 22:14:06 TychoBrahe, oui .. justement mar 28 22:14:10 MaTTuX_ : non, je switch entre les serveurs irc mar 28 22:14:13 margin est "plus simple" mar 28 22:14:21 ça permet de "garder le complexe" mar 28 22:14:42 margin tu pousses les éléments mar 28 22:14:44 c'est aussi plus logique mar 28 22:14:50 padding tu modifie leur largeur mar 28 22:14:53 ah oki TychoBrahe sympa pour le prof, il va te donné des punition mar 28 22:14:54 tu garde l'englobage mar 28 22:14:57 tu vosi la "nuance" ? mar 28 22:15:04 voilà TychoBrahe :) mar 28 22:15:15 TychoBrahe, c'est un deuxième McPeter mar 28 22:15:21 lol mar 28 22:15:30 il va devoir faire donner des cours mar 28 22:15:30 z'êtes mal barré alors ᴖ_ᴖ mar 28 22:15:33 à BBoux mar 28 22:15:40 * MaTTuX_ fuit mar 28 22:15:41 :) mar 28 22:15:44 :p mar 28 22:15:45 sinon McPeter, tu fait des cours sur les priorités en css ? ça me pose rvaiment des soucis ces trucs là mar 28 22:15:54 * MaTTuX_ finit le premier big tasty, lui en reste 1 mar 28 22:15:59 eu .. pas finit :p mar 28 22:16:09 mainteanant sur nos boutons fixe là .. mar 28 22:16:15 on a zappé ie4-6 mar 28 22:16:16 (en effet, ma question n'est pas au meilleur moment désolé) mar 28 22:16:16 MaTTuX_, c'est pas bon pour ce que tu as mar 28 22:16:19 mais on y revient mar 28 22:16:20 a demain ++ mar 28 22:16:25 a demain co mar 28 22:16:27 oups mar 28 22:16:31 lol mar 28 22:16:32 rapide :p mar 28 22:16:40 donc dans notre contexte là mar 28 22:16:45 McPeter: sur l effet bouton fixe mar 28 22:16:47 salut cob mar 28 22:17:00 on a : 'a' == width:8em mar 28 22:17:01 excuse j etais pas la : tout joue avec une double image ? mar 28 22:17:13 mdr! non mar 28 22:17:16 MaTTuX_, mar 28 22:17:17 mais en >réalité< mar 28 22:17:29 width == 8em + (2 x 0.4em) mar 28 22:17:39 et oui .. ne pas oublier que le padding compte mar 28 22:17:54 ouai me casse les couille ce padding mar 28 22:17:56 donc on aura sur opera, ie7,ff,konqueror mar 28 22:18:01 un 8.8em mar 28 22:18:06 en largeur globale mar 28 22:18:09 padding je sais pas a quoi sa sert :( mar 28 22:18:14 et sur ie4-6 : 8em mar 28 22:18:24 MaTTuX_, : mar 28 22:18:34 margin == marge externe à un élément mar 28 22:18:43 * BBoux a trouvé plus nul que lui mar 28 22:18:44 padding = marge interne à un élément mar 28 22:18:51 mdr mar 28 22:19:05 oki McPeter merci mar 28 22:19:08 ça se voit particulièrement dansle cas d'un cadre sur l'élément mar 28 22:19:14 donc .. mar 28 22:19:15 BBoux: j ai jamais dit que j etais plus fort que toi :D mar 28 22:19:24 sur nos bouton on le voit mar 28 22:19:26 pour mettre d'accord tous les navigateurs nommé ci dessus mar 28 22:19:35 on vas spécifier une règle d'importance mar 28 22:19:46 qui n'est pas comprise par ie4-6 mar 28 22:19:47 MaTTuX_, je te taquine hein ;) mar 28 22:19:49 et qui est valide mar 28 22:19:52 BBoux: je sais mar 28 22:19:53 :D mar 28 22:20:02 plutôt que d'utiliser les hack pourrit style _width:... mar 28 22:20:18 donc là : mar 28 22:20:23 padding:0 0.4em; mar 28 22:20:40 width:7.4em !important; mar 28 22:20:52 eu .. mar 28 22:20:57 j'ai compris c'est à l'arache en faite mar 28 22:20:58 s/7.4/7.2 mar 28 22:20:59 lol mar 28 22:21:13 7.2 + (2 x 0.4 ) == 8 mar 28 22:21:17 donc : mar 28 22:21:23 width:7.4em !important; width:8em; mar 28 22:21:57 le '!important' spécifie aux navigateurs w3c compliant qu'ils ne doivent pas tenir compte de la class suivante mar 28 22:22:00 et tu dois faire ça sur toute les largeurs indiqué mar 28 22:22:11 ie4-6 lira les deux valeur mar 28 22:22:17 et prendra la dernière en compte mar 28 22:22:21 non mar 28 22:22:26 juste sur celle utile mar 28 22:22:38 si ton élément n'a ny margin, ni padding mar 28 22:22:45 oui biensur mar 28 22:22:48 tu n'as pas besoind e spécifier une règle d'importance mar 28 22:22:49 je suis pas si nul mar 28 22:23:04 je connais le modèle de boite mar 28 22:23:18 - refresh visuel + css mar 28 22:23:20 voilà mar 28 22:23:28 nos boutons fixe sont finalisés mar 28 22:23:45 :) mar 28 22:23:51 à présent un effet barre de menu mar 28 22:23:55 très simple mar 28 22:24:06 on reprends la base de 'Simple' mar 28 22:25:01 c'est quoi un effet barre de menu ? mar 28 22:25:12 ça va viendre :) mar 28 22:25:24 genre la barre de FF mar 28 22:25:42 on applique un style à 'ul' mar 28 22:25:44 ah oki mar 28 22:25:45 couleur de fond mar 28 22:26:01 'li' et 'a' en héritant ... aucun besoind e modification à ce niveau mar 28 22:27:26 - refresh visuel + css mar 28 22:27:37 là idem .. on va modifier la couleur du texte mar 28 22:28:38 ensuite n initialise le style des liens mar 28 22:29:06 maintenant notre effet mar 28 22:29:42 (à ce titre poru les utilisateur de linux je vous conseille "Agave" et ceux de windows "Hexacolor") mar 28 22:30:00 deux très bon petit logiciel très pratique poru gérer ses couleurs :) mar 28 22:30:34 moi j utilise gimp mar 28 22:30:35 :D mar 28 22:30:39 idem mar 28 22:30:41 et je note le numero sur un cahier mar 28 22:30:43 (spice de fou) mar 28 22:31:01 McPeter: pkoi mar 28 22:31:06 ca revien pareil non mar 28 22:31:16 au lieux de rpendre les couleurs dans les palettes, parfois je fait des schémas de mon design, des simulations mar 28 22:31:16 lancer une scierie pour tailler un crayon mar 28 22:31:28 voilà ce que vosu faites mar 28 22:31:29 j'utilise divers effets de rtansparence, modes de calques etc mar 28 22:31:55 TychoBrahe, je parle de "couleurs" mar 28 22:32:05 justement mar 28 22:32:13 justement mar 28 22:32:13 c'est pour récupérer la couleur du bidule mar 28 22:32:18 pareil mar 28 22:32:19 :D mar 28 22:32:29 TychoBrahe, ton effet de transparence c'ets pas monopixels mar 28 22:32:40 allez prédire ce que va te donner une aplat de bleu avec une transparence de 80% en mode screen faut el faire :D mar 28 22:32:42 tu n'as pas besoind e gimp pour ça mar 28 22:32:49 les deux softs cité ci-dessus mar 28 22:32:57 te permettent de jouer sur le gradient mar 28 22:33:11 gné ?? mar 28 22:33:12 si je l est dans mes depots je prends mar 28 22:33:14 sinon mar 28 22:33:20 ben je chercherai mar 28 22:33:21 :D mar 28 22:33:23 allez prédire ce que va te donner une aplat de bleu avec une transparence de 80% en mode screen faut el faire :D <++ oO? mar 28 22:33:36 ba, les modes de calques mar 28 22:33:40 ... mar 28 22:33:45 mais ça ne'st plus "une couleur" mar 28 22:33:45 l'inscustation si tu préfère mar 28 22:33:54 TychoBrahe: il parle pas de la memechose mar 28 22:33:56 le rendu final en est une mar 28 22:34:11 oO mar 28 22:34:27 je comprend rine à votre dialogue lol mar 28 22:34:27 McPeter: ton truc m install plein de gtk mar 28 22:34:29 :( mar 28 22:34:44 TychoBrahe, quand tu appliques un effet de transparence mar 28 22:35:02 moi j'utilise TheGimp et Agave mar 28 22:35:09 tu vas pas me dire que tu récupères une couleur unit systématiquement ... mar 28 22:35:12 ThegIMP POUR DES CHOSE PLUS SOFISTIQUÉ mar 28 22:35:13 McPeter: l est bien ton Agave mar 28 22:35:14 j aime bien mar 28 22:35:18 MaTTuX_, :) mar 28 22:35:20 oups pardon pour les maj mar 28 22:35:26 ça te permet de faire des "ensemble" en plus mar 28 22:35:48 bon bref mar 28 22:35:50 des ensembles ? mar 28 22:36:02 sur 20 px / 20 px ... mar 28 22:36:07 depuiq que McPeter m'a conseillé Agave je respire mar 28 22:36:17 tu vas pas forcement avoir 400 pixels identiques mar 28 22:36:32 tu peux avoir un blanc un bleu mar 28 22:36:34 etc ... mar 28 22:37:16 si après les réglages fait au niveau de gimp sont fait pour avoir uen couleur unique ... mar 28 22:37:18 McPeter: ben oui mar 28 22:37:21 gimp devient inutile mar 28 22:37:34 pusiqu'en fait vosu jouez sur le gradient de la couelur mar 28 22:37:44 donc agave ou hexacolor le font très bien mar 28 22:37:48 bref mar 28 22:37:56 lancer une scierie pour tailler un crayon mar 28 22:38:06 :p mar 28 22:38:31 là par exmeple avec agave c'est très pratique pour notre menu mar 28 22:38:59 séléction de la couelur #99ccff mar 28 22:39:12 passage en mode MonoChromatique mar 28 22:39:19 on obtient 3 couleurs mar 28 22:39:38 celle du centre étant notre fond de barre de menu :) mar 28 22:39:51 on peut donc utiliser la couleur de droite comme fond au survol :) mar 28 22:39:58 et la couleur de gauche comme cadrage mar 28 22:40:06 application : mar 28 22:41:23 questiopn avant mar 28 22:41:44 dans agave tu peux pas choisir une couleur a partir du code ? mar 28 22:41:53 si mar 28 22:42:05 ben si mar 28 22:42:10 clique sur la couleur mar 28 22:42:27 à côté de monochromatique mar 28 22:42:49 ben fallait la connaitre la couleur mar 28 22:42:53 vu la taille de la palette mar 28 22:43:05 dans agave tu peux pas choisir une couleur a partir du code ? mar 28 22:43:07 moi je demandé si y avait pas une case pour rentré le code mar 28 22:43:16 bah si lol mar 28 22:43:27 ou ? mar 28 22:43:45 dans nom de la couleur mar 28 22:43:52 et valide mar 28 22:44:02 j ai pas nom de couleur mar 28 22:44:08 ? mar 28 22:44:21 ta question mar 28 22:44:24 moi je demandé si y avait pas une case pour rentré le code mar 28 22:44:46 ben tu as le code #99ccff je voudrai le rentré dans agave pour que sa me donne la couleur mar 28 22:44:52 et pas commencé a cherché :D mar 28 22:45:04 oui et bien tu le tape dans mar 28 22:45:08 nom de la couleur mar 28 22:45:10 et valide mar 28 22:45:15 il te sort la couleur mar 28 22:45:18 j ai pas ca mar 28 22:45:20 et ses dérivé mar 28 22:45:28 clique sur le petit carré de couleur mar 28 22:45:36 j ai rien dit mar 28 22:45:39 lol mar 28 22:45:40 'tain chui con defois mar 28 22:45:43 honte a moi mar 28 22:45:52 non moi aussi j'ai cherché mar 28 22:45:56 la première fois mar 28 22:46:08 lol mar 28 22:46:18 c'est pas tres intuitif pour ça mar 28 22:46:27 - refresh visuel + css mar 28 22:46:27 pour ca gimp s est mieux mar 28 22:46:28 xD mar 28 22:46:31 rofl mar 28 22:46:32 oki McPeter mar 28 22:46:34 euh non mar 28 22:46:36 mais si c'est intuitif mar 28 22:46:37 McPeter: s etait un troll mar 28 22:46:41 plus compliqué mar 28 22:46:48 pour moi le carré c'est un outils mar 28 22:47:05 je dis pas intuitif McPeter mar 28 22:47:16 parce que on est deja 2 personnes à avoir cherché mar 28 22:47:19 bon là vous voyez le comportement au survol mar 28 22:47:22 problème : mar 28 22:47:30 et je pense que on est pas différent des autres être humain :) mar 28 22:47:33 le survol ajoute une bordure mar 28 22:47:35 oui mar 28 22:47:46 oui mar 28 22:47:47 et donc créé un effet de dé&calage pas forcement jolie ou confortable mar 28 22:47:59 pour annuler ce dernier mar 28 22:48:14 il suffit de faire un "faux" cadre au 'a' au repos mar 28 22:48:18 c'est à dire .. mar 28 22:48:34 un cadre de la même dimension avec une couleur identique au fond mar 28 22:48:43 euh pourquoi il y a un cadre au faite ? mar 28 22:48:44 hôoo mar 28 22:49:02 *fait mar 28 22:49:17 c'est de la bidouille ^^ mar 28 22:49:30 et voilà mar 28 22:49:36 - refresh visuel + css mar 28 22:50:06 BBoux, fais un survol de tes boutons "précédent/suivant" dans FF mar 28 22:50:08 et regarde mar 28 22:50:44 bon ... faut que j'aille coucher ma puce :) mar 28 22:50:49 je re .. mar 28 22:50:49 oki mar 28 22:50:53 *pause* mar 28 22:50:54 oki McPeter mar 28 22:50:57 ouaisssss mar 28 22:51:04 tu vas pouvoir chanter mar 28 22:51:05 * MaTTuX_ jette une boulette de papier sur trucMuche mar 28 22:51:12 profitez pour regarder ce qui est fait et voir si y'a des qeustions mar 28 22:51:19 * MaTTuX_ jette une boulette de papier sur BBoux mar 28 22:51:20 partit 1 - fin */ mar 28 22:51:30 * MaTTuX_ jette une boulette de papier sur le-bemawi mar 28 22:51:32 \o/ mar 28 22:51:34 * BBoux balance au prof mar 28 22:51:40 ptdr mar 28 22:51:42 * MaTTuX_ tape BBoux mar 28 22:51:53 * BBoux appel le 0800... mar 28 22:51:54 * MaTTuX_ dit s est pas moi mais trucMuche mar 28 22:51:58 mais enfin :/ mar 28 22:52:08 le-bemawi: s est la pause mar 28 22:52:12 sorry mar 28 22:52:13 xD mar 28 22:52:19 le-bemawi, ne se repose jazmais mar 28 22:52:20 pas une rasion de m'embeter :/ mar 28 22:52:22 jamais mar 28 22:52:30 j'ajaxerise moi mar 28 22:52:46 * MaTTuX_ retourne le-bemawi et mets des boule de gommes sur les reins mar 28 22:52:48 * MaTTuX_ vise mar 28 22:52:49 il a déteint sur McPeter mar 28 22:52:51 * MaTTuX_ tire sur BBoux mar 28 22:53:14 gnégnégné mar 28 22:53:19 :/ mar 28 22:53:23 * le-bemawi s'appelle maintenant oui-oui mar 28 22:53:26 vala mar 28 22:53:28 :/ mar 28 22:53:33 * MaTTuX_ vise mar 28 22:53:38 * MaTTuX_ tire sur trucMuche mar 28 22:53:55 * MaTTuX_ releve oui-oui et fait bouclier avec mar 28 22:55:28 * MaTTuX_ avance sur la ligne de front mar 28 22:55:53 * BBoux merci de kicker MaTTuX_ mar 28 22:56:00 ^^ mar 28 22:56:08 * MaTTuX_ = Poillu mar 28 22:56:22 * MaTTuX_ fait une tranché avec comme pelle BBoux mar 28 22:56:49 * BBoux enterre MaTTuX_ sur la plage mar 28 22:57:04 * MaTTuX_ attends les amerlock le sauvé mar 28 22:59:05 TOUS AU PIQUÉ !!!!! mar 28 22:59:16 mais c'est quoi c'bordel !!?? mar 28 22:59:20 j'appelle le prof mar 28 22:59:27 rhoooo mar 28 22:59:33 une heure de colle mar 28 22:59:41 Oo balance trucMuche mar 28 22:59:43 :) mar 28 22:59:44 * trucMuche fuit mar 28 22:59:44 * McPeter fuit mar 28 22:59:45 pour trucMuche, le pauvre mar 28 22:59:56 alors que s est pas lui mar 28 22:59:58 :D mar 28 23:00:04 re :p mar 28 23:00:12 pire qu'une bande d'écoliers ! mar 28 23:00:13 lol mar 28 23:00:31 c'est MaTTuX_ le trouble fait mar 28 23:00:33 * McPeter pique la tuture de oui-oui mar 28 23:00:47 BBoux, délateur !! mar 28 23:00:47 faut le bannir à jamais mar 28 23:00:51 mdr!! mar 28 23:01:05 pas biend e raporter ! mar 28 23:01:07 Potiron McPeter o/ t'as oublié ton vélo ??? mar 28 23:01:12 ? ... de combiend e degré ? mar 28 23:01:18 * McPeter tue trucMuche mar 28 23:01:26 a l'assasin !!!! mar 28 23:01:33 ??? mar 28 23:01:41 rofl mar 28 23:01:43 trucMuche boot ? mar 28 23:01:47 les mêmes fautes mar 28 23:01:47 BBoux: je te le pardonnerai jamais mar 28 23:01:53 trucMuche est McPeter mar 28 23:01:54 fait gaffe trucMuche McPeter est sadique mar 28 23:01:56 trucMuche: = McPeter enfant mar 28 23:02:01 vais t'en colelr un bot moi mar 28 23:02:05 spice de oui-oui mar 28 23:02:20 trucMuche: j'en ai un sur mon salon ubuntu mar 28 23:02:22 oui-oui: trucMuche fait les meme faute de frappe que McPeter mar 28 23:02:24 sensei linux mar 28 23:02:40 tu tapes :ubuntu mcpeter il renvois sur ubuntu*fr.org :p mar 28 23:03:01 lol mar 28 23:03:09 bon alors ? mar 28 23:03:16 ajax time mar 28 23:03:18 :p mar 28 23:03:20 je suppose qu'il n'y a aucune question ? :p mar 28 23:04:14 euh si mar 28 23:05:01 c'est quand l'heure de colle ? mar 28 23:05:12 * BBoux fuit à l'autre bout du monde mar 28 23:05:16 :) mar 28 23:05:18 rhooo mar 28 23:05:30 non mais sérieux :p mar 28 23:05:41 c'est bon pour la première partie ? mar 28 23:06:09 non sais bon la première partie mar 28 23:06:18 oula *c'est mar 28 23:06:29 ᴖ_ᴖ mar 28 23:07:02 bon mar 28 23:07:07 - Menus Verticaux mar 28 23:07:14 -> Simple mar 28 23:07:15 finti mar 28 23:07:18 finit mar 28 23:07:18 :p mar 28 23:07:25 lol mar 28 23:07:30 ben oui .. comment faire plus simple ᴖ_ᴖ mar 28 23:07:36 hihihi mar 28 23:07:44 * _Maximee s'appelle maintenant Maximee mar 28 23:08:02 a si .. mar 28 23:08:06 enlever les puces mar 28 23:08:19 et raccourcir le texte mar 28 23:08:38 retirer le soulignement mar 28 23:08:55 nan nan mar 28 23:08:57 "simple" mar 28 23:09:02 et il te reste rien mar 28 23:09:03 comme la partit 1 mar 28 23:09:13 ^^ je plaisante mar 28 23:09:16 :) mar 28 23:09:23 - effet bouton mar 28 23:09:45 on reprends les base du simple vertical + effet bouton horizontal mar 28 23:09:47 McPeter, tu es tres contentieux à ce que je vois mar 28 23:09:48 -s mar 28 23:10:00 "contentieux" ? oO mar 28 23:10:09 mince mdr!! mar 28 23:10:33 consciencieux mar 28 23:10:36 lol mar 28 23:10:51 rofl mar 28 23:11:01 - refresh visuel +css mar 28 23:11:13 tu as voulu représenté le menu horizontal exactement comme le vertical mar 28 23:12:00 faut voir aussi que dansle contexte d'un menu .. les puces servent pas forcement :) mar 28 23:12:31 là vous pouvez voir qu'il n'y a rien de bien sorcier pour l'effet bouton mar 28 23:12:52 sauf qu'une petite marge (externe) entre les bouton serait plus "jolie" mar 28 23:13:24 pour éviter un dédoublement des marges .. on applique une marge externe basse à 'li' mar 28 23:14:11 soit : margin-bottom:0.18em; mar 28 23:14:31 - refresh visuel + css mar 28 23:15:12 rien de complexe ? mar 28 23:15:28 non ça va mar 28 23:15:34 non mar 28 23:15:55 bon ..effet *application* mar 28 23:16:14 comme les menus déroulant en quelque sorte mar 28 23:19:28 oui :) mar 28 23:19:35 * MaTTuX_ sa m interresse ca mar 28 23:19:36 :D mar 28 23:19:39 moi aussi mar 28 23:19:40 comme tout le reste mar 28 23:19:53 c'est le must des menus je trouve mar 28 23:19:58 clair mar 28 23:20:04 surtout si sont bien fait mar 28 23:20:21 voilà déjà la base mar 28 23:21:28 là on se retrouve dans un cas de figure où 'ul' est un block .. donc occupe toute la largeur disponible de l'élément parent (ici : body) mar 28 23:21:35 donc on va appliquer une largeur mar 28 23:21:46 oui mar 28 23:21:49 ok mar 28 23:21:50 et de se fait il faut penser à ie4-6 mar 28 23:22:04 problème ... mar 28 23:22:18 comment savoir à l'avance la taille exacte de ses textes de menus :p mar 28 23:22:35 bah oui mar 28 23:22:37 2 cas de figure mar 28 23:22:38 je sais pas mar 28 23:22:44 je donne ma langue au chat mar 28 23:22:49 pareil mar 28 23:22:50 on se base sur la plus grande taille de texte existante mar 28 23:23:00 2ème cas de figure mar 28 23:23:13 on applique un float:left au menu mar 28 23:23:28 ainsi celui-ci s'adaptera à son contenu mar 28 23:23:35 et "poussera" le reste du site mar 28 23:23:41 oki mar 28 23:23:52 cas de figure à "une colone" mar 28 23:23:54 cas de figure à "une colonne" mar 28 23:24:07 à gauche mar 28 23:24:22 le reste du site n'a pas besoind e clear:both :) mar 28 23:24:35 il suffit d'appliquer un float:none; à l'élément suivant mar 28 23:24:50 (je l'ajoute -> #content ) mar 28 23:27:13 'tain mon fils fais des conneries :@ mar 28 23:27:14 grrrrrrrr mar 28 23:27:58 - refresh visuel + css + sources html mar 28 23:29:07 ok mar 28 23:29:35 vous voyez ce qu'i lse passe ? mar 28 23:29:51 oui mais pourquoi le float:none mar 28 23:30:09 oui le cadre autour mar 28 23:30:21 bne tu n'as pas besoin de spécifier une largeur à #content mar 28 23:30:36 #content occupe l'espace disponible après menu mar 28 23:30:42 au niveau des

    mar 28 23:30:46 oui mar 28 23:30:54 mais sans le float:none ça change quoi mar 28 23:30:58 ? mar 28 23:31:06 ben si tu mets float:left par exemple mar 28 23:31:10 (je le fait) mar 28 23:31:13 -t+s mar 28 23:31:27 regardes mar 28 23:31:44 non mais si tu met pas de float mar 28 23:32:06 c'est idem mar 28 23:32:21 ou pareil mar 28 23:32:24 sa rien changé mar 28 23:32:32 simplement pour spécifier la class mar 28 23:32:47 float:none == none == rie :) mar 28 23:32:48 n mar 28 23:32:54 ok mar 28 23:33:17 ben logique mar 28 23:33:21 mais pkoi ce cadre alors mar 28 23:33:26 enfin cette bordure mar 28 23:33:45 normal mar 28 23:33:52 visualiser mar 28 23:34:18 la bordure est dans le flux normale de la page non ? mar 28 23:34:34 oui mar 28 23:34:45 donc c'est le premier élément de la page mar 28 23:34:50 puis le

    mar 28 23:35:05 a non mar 28 23:35:07 ᴖ_ᴖ mar 28 23:35:15 menu mar 28 23:35:17 content mar 28 23:35:19 p mar 28 23:35:48 oui mar 28 23:36:03 j'ai pas rachargé la page mar 28 23:36:09 actualisé mar 28 23:36:14 ben BBoux mar 28 23:36:17 faut refresh mar 28 23:36:18 :D mar 28 23:36:32 maintenant regardez si je modifie le menu mar 28 23:36:56 le texte se deplace avec mar 28 23:36:58 faites un refresh visuel mar 28 23:37:09 oui mar 28 23:37:14 vous voyez le texte est toujours "pouss" mar 28 23:37:19 "poussé" mar 28 23:37:26 bon faut bien que je comprennent ça mar 28 23:37:26 exact mar 28 23:37:28 s est bien ca mar 28 23:37:37 parce que j'ai du mal mar 28 23:37:43 c'est ça qui me pose problème mar 28 23:37:48 regardez mar 28 23:37:49 quand je veux le metre en place mar 28 23:37:55 j'ai "visualisé" le 'p' mar 28 23:38:03 /* debug */ mar 28 23:38:10 oui vu mar 28 23:38:11 border:1px solid red; mar 28 23:38:15 oui mar 28 23:38:20 avec ce modèle mar 28 23:38:35 ja n'ai pas besoind e spécifier de marge interne ou externe mar 28 23:38:42 le texte sera toujours poussé mar 28 23:39:06 et si le menu change .. mar 28 23:39:08 ça pousse :) mar 28 23:39:29 j'ai pas compris mar 28 23:39:43 margin-left:5em; mar 28 23:39:44 moi si mar 28 23:39:48 BBoux, y'a pu mar 28 23:39:50 pourquoi 5em mar 28 23:39:59 pour que vosu visualisez mar 28 23:40:09 ok c'est bon mar 28 23:40:21 cas de figure d'un site dynamique mar 28 23:40:31 où la taille des textes peut changer mar 28 23:40:32 question mar 28 23:40:33 exemple : mar 28 23:40:39 site multi langue mar 28 23:40:41 reponse mar 28 23:40:48 McPeter: s est poiur moi ca :D mar 28 23:40:49 tu vas pas faire un style apr langue mar 28 23:41:08 mainteannt .. "problème" mar 28 23:41:16 le texte est collécollé mar 28 23:41:19 pas beau mar 28 23:41:22 comment faire ? mar 28 23:41:30 mettre une marge à 'p' ? mar 28 23:41:42 voila ma question mar 28 23:41:50 héhéhéh mar 28 23:41:54 comment faire pour décaler le paragraphe mar 28 23:41:56 à ton avis :p mar 28 23:42:05 vue les héritages mar 28 23:42:13 power word mar 28 23:42:15 ᴖ_ᴖ mar 28 23:42:25 attend je cherche mar 28 23:42:29 qu'est ce qui fait que le texte est comme ça ? mar 28 23:42:59 allez répond mar 28 23:43:11 en répondnat tu as al réponse à la première question quasiment mar 28 23:43:19 :) mar 28 23:43:27 bah la largeur du menu mar 28 23:43:31 han mar 28 23:43:33 :\ mar 28 23:43:36 mais nan mar 28 23:43:41 on a pas de "largeur" au menu mar 28 23:43:58 le float mar 28 23:44:04 le texte est comme ça PARCE QUE ... le menu POUSSSSEEEE mar 28 23:44:09 POUSSSSEEEEEEEEEEEEEEEEEEEEEEEE mar 28 23:44:14 donc ?! mar 28 23:44:19 on pousse mar 28 23:44:19 si le menu pousse mar 28 23:44:22 * MaTTuX_ fuit mar 28 23:44:26 comment "pousser" plus ?! mar 28 23:44:27 :) mar 28 23:44:34 alllezzz !!! mar 28 23:44:38 tu DOIS toruver ! mar 28 23:44:40 trouver mar 28 23:44:42 avec margin left mar 28 23:44:48 * McPeter slaps MaTTuX_ mar 28 23:44:53 :( mar 28 23:44:57 spice de gaucher va ! mar 28 23:45:06 fautr agrandir le menu ^^ mar 28 23:45:07 c est vrai en plus mar 28 23:45:12 suis gauché mar 28 23:45:17 * McPeter slaps (encore plus fort) BBoux mar 28 23:45:24 agrandir :| mar 28 23:45:28 rhaaa mar 28 23:45:34 vosu avez la réponse à vous deux .. mar 28 23:45:36 grrrr mar 28 23:45:40 je sais pas tu met une marge entre les deux mar 28 23:45:46 ah ??!! mar 28 23:45:49 mais où ? mar 28 23:45:51 comemnt ? mar 28 23:45:52 je compredn pas ça mar 28 23:45:56 justement mar 28 23:46:07 * MaTTuX_ patoge dans la mare a oui-oui mar 28 23:46:12 je comprend porquoi le paragraphe entour le menu mar 28 23:46:21 mais apres je bloque mar 28 23:46:33 MARGIN-RIGHT sur menu !!! mar 28 23:46:35 rhoooo mar 28 23:46:42 ben je l ai dit mar 28 23:46:47 oO mar 28 23:46:51 * MaTTuX_ se fait petit mar 28 23:46:55 suis trompé mar 28 23:46:56 avec margin left <--- mar 28 23:46:59 j ai dit margin left mar 28 23:47:00 SPICE DE GAUCHER !! mar 28 23:47:06 vosu avez la réponse à vous deux .. mar 28 23:47:08 oui mais je pensé a droite mar 28 23:47:09 grrr mar 28 23:47:16 grrrr mar 28 23:47:22 - refresh visuel + css mar 28 23:47:25 bande de larves :p mar 28 23:47:58 McPeter: meme pas encore larve suis un cocoon mar 28 23:48:25 c'est la problème que j'ai sur ma page mar 28 23:48:40 j'ai fait ça mais ça marche pas bizzard mar 28 23:48:51 je comprend plus rien mar 28 23:48:56 ça a l'air simple mar 28 23:49:06 mais quand je veux le faire ça marche pas :( mar 28 23:49:16 faites un refresh :) mar 28 23:49:20 il y a toujours un facteur qui fait que ça foire mar 28 23:49:58 niquel mais j ai toujours la bordure de la couleur du menu mar 28 23:50:11 gné ? mar 28 23:50:13 normal MaTTuX_ mar 28 23:50:31 #content{ mar 28 23:50:31 border:1px solid #6587a8; mar 28 23:50:38 :D mar 28 23:50:43 * MaTTuX_ fuit mar 28 23:50:48 j ai rien dit mar 28 23:51:24 McPeter, je me permlet de te montrer mon problème mar 28 23:51:34 !paste mar 28 23:51:35 ça va avec le cas actuel mar 28 23:52:08 http://dev.blinckers-groups.com/BBoux/libre_action/accueil.html mar 28 23:52:34 regarde le block de droite mar 28 23:53:02 quand tu zoom il se place en dessous mar 28 23:53:25 NORMAL mar 28 23:53:30 je sais pas comment l'empecher mar 28 23:53:43 qaund je vire le padding et le border c'est nickel mar 28 23:53:50 en faite il sont en trop mar 28 23:54:01 mais moi je les veux mar 28 23:54:03 ^^ mar 28 23:54:14 je sais que tu m'as deja expliqué McPeter mar 28 23:54:21 l'histoire des 100% mar 28 23:54:32 bon wait mar 28 23:54:36 on finit mar 28 23:54:39 avec le cours :p mar 28 23:54:44 +1px pour les bordures + padding .. mar 28 23:54:45 o mar 28 23:54:47 ok mar 28 23:55:41 faites un refresh du visuel là mar 28 23:55:48 et survolez le menu mar 28 23:56:11 on est dans un cas où on a besoin d'avoir un survol "complet" mar 28 23:56:19 McPeter: mar 28 23:56:20 regardez al différence du background mar 28 23:56:24 ok mar 28 23:56:48 pkoi le hover du menu 1 a pas la meme distance que le hover du menu du bas mar 28 23:56:51 moi j aime pas ca mar 28 23:56:54 en fait il faut transformer le comportement inline de 'a' en block mar 28 23:57:15 MaTTuX_, ... :| mar 28 23:57:19 suis entrain de l'expliquer mar 28 23:57:23 grumff mar 28 23:57:33 disait juste monavis :) mar 28 23:57:38 pardon d interrompre mar 28 23:57:38 lol mar 28 23:57:38 * McPeter slaps MaTTuX_ mar 28 23:57:54 MaTTuX_, va plus vite que la musique mar 28 23:57:58 il faut donc appliquer un display:block, sur 'a' mar 28 23:58:10 pour que 'a' est un comportement de boite mar 28 23:58:22 c'ets à dire occupe tout l'espace en largeur de l'élément parent mar 28 23:58:52 HIGHLIGHT seza (n=alban@ANantes-258-1-89-136.w90-49.abo.wanadoo.fr) #php-fr :+Salut win, Kev, TK{code}, McPeter, MaTTuX_ mar 28 23:59:05 - refresh visuel + css mar 28 23:59:12 et faites un test de survol mar 28 23:59:31 oui la j aime mar 28 23:59:35 a bon ? mar 28 23:59:44 tu trouves ça jolie le sautillement ? mar 28 23:59:59 * MaTTuX_ s'appelle maintenant eleve mar 29 00:00:10 Maximee, ? mar 29 00:00:12 ef mar 29 00:00:13 mirde mar 29 00:00:15 non le sautillement j aime pas mar 29 00:00:17 change nick mar 29 00:00:22 * McPeter tape sur eleve mar 29 00:00:23 McPeter: \o/ mar 29 00:00:32 * eleve tape sur prof mar 29 00:00:39 :( mar 29 00:00:43 mais heuyuu mar 29 00:00:50 AU COIN o/ mar 29 00:01:03 * eleve file au coin avec le bonnet 95 D mar 29 00:01:04 alors ?! mar 29 00:01:09 comment faire poru le virer ? :) mar 29 00:01:20 je sia spas du tout :( mar 29 00:01:32 :| mar 29 00:01:40 je l'ai expliqué sur la barre de menu :( mar 29 00:01:46 (z'ont vachement suivit) mar 29 00:01:49 (sniff) mar 29 00:01:55 j etais pas la a cette periode mar 29 00:01:56 BBoux: mar 29 00:02:05 oui mar 29 00:02:17 alors ? mar 29 00:02:20 comment faire ? mar 29 00:02:24 BBoux: help mar 29 00:02:35 faut les écarter mar 29 00:03:00 HIGHLIGHT eleve (n=JeSAISpa@200.72.65.141) #php-fr :-j arrive je fini le cours avec McPeter sinon il va me tapé mar 29 00:03:21 magin-bottom mar 29 00:03:24 non ? mar 29 00:03:33 :| mar 29 00:03:35 grmlgmrmlgmrlmglmrl mar 29 00:03:37 HIGHLIGHT eleve (n=JeSAISpa@200.72.65.141) #php-fr :-McPeter: je vais faire quoi en colle mar 29 00:03:41 lol mar 29 00:03:42 pourquoi ça fait ce sautillement ? mar 29 00:04:10 HIGHLIGHT eleve (n=JeSAISpa@200.72.65.141) #php-fr :-McPeter: suis d accord alors mar 29 00:04:16 BBoux, eleve mar 29 00:04:32 il faut d'abord réfléchir 'pourquoi' y'a un problème mar 29 00:04:38 HIGHLIGHT prof (n=alban@ANantes-258-1-89-136.w90-49.abo.wanadoo.fr) #php-fr :-bon bien ja te laisse avec McPeter alors mar 29 00:04:39 avant de chercher à 'résoudre' mar 29 00:04:59 alors pourquoi ça fait ce sautillement ? mar 29 00:05:01 oui attend je regarde le code mar 29 00:05:11 a cause du hover mar 29 00:05:22 les menu sont trop proche l un de lautre mar 29 00:05:53 mais nan :'( mar 29 00:05:55 oui mar 29 00:06:04 à cause du border des hover mar 29 00:06:10 non mar 29 00:06:11 BBoux, \o/ mar 29 00:06:17 border !! mar 29 00:06:19 ben s est de ca que je parlais mar 29 00:06:26 eleve, eu mar 29 00:06:30 ben non :| mar 29 00:06:38 a cause du hover mar 29 00:06:38 les menu sont trop proche l un de lautre mar 29 00:06:40 rien à voir mar 29 00:06:42 ah cause des 2px mar 29 00:06:48 BBoux, \o/ mar 29 00:06:52 donc ?! mar 29 00:07:03 on avait vue quoi sur la barre de menu ? mar 29 00:07:14 le prblème est identique là mar 29 00:08:21 je sais plus mais je pense qu'il faut rajouter les 2 px au padding de a mar 29 00:08:30 pressque mar 29 00:08:36 allez ... mar 29 00:08:45 il faut ajouter la même bordure mar 29 00:08:49 avec la couleur de fond mar 29 00:08:55 de la mme couleur mar 29 00:08:57 de fond mar 29 00:09:06 oui voila mar 29 00:09:56 - refresh visuel + css mar 29 00:10:57 alors ? mar 29 00:10:58 ok mais il n'y a pas une autre solution mar 29 00:11:06 si .. mar 29 00:11:09 je l'ai sur le bout de la langue mar 29 00:11:21 on peut jouer sur le padding ou le margin mar 29 00:11:30 ajout en 'normal' mar 29 00:11:34 oui sur le padding mar 29 00:11:36 c est quoi la modif dans le css mar 29 00:11:37 retrait sur le hover mar 29 00:11:38 pour ca mar 29 00:11:53 * eleve s'appelle maintenant MaTTuX_ mar 29 00:11:56 MaTTuX_, mar 29 00:11:57 /* pour le survol */ mar 29 00:12:01 ce'st écrit :p mar 29 00:12:06 humm ... mar 29 00:12:16 * MaTTuX_ refresh une 4ieme fois mar 29 00:12:57 * MaTTuX_ '**** de cache mar 29 00:13:03 (lol) mar 29 00:13:30 ça embrouille moins de faire un retrait sur le hover je trouve mar 29 00:13:46 ok je fais de l'autre manière mar 29 00:13:50 du moins c'est moins bidouille non mar 29 00:14:06 c'est moi qui parle de bidouille lol mar 29 00:14:20 alors que je fais que ça des bidouille qui marche même pas mar 29 00:14:29 :) mar 29 00:15:08 BBoux, MaTTuX_ mar 29 00:15:12 refresh CSS mar 29 00:16:08 * MaTTuX_ a refresh mar 29 00:16:15 * MaTTuX_ a de la merde a la place des yeux mar 29 00:16:20 ptdr mar 29 00:16:28 /* 1px pour les bordures au survol */ mar 29 00:16:28 padding:1px 1em; mar 29 00:16:42 -- mar 29 00:16:42 /* retrait du 1px pour les bordures */ mar 29 00:16:42 padding:0 1em; mar 29 00:17:02 ah oui vu mar 29 00:17:10 c'est mieux comme ça mar 29 00:17:11 mais s est laquelle la meilleur mar 29 00:17:20 moi je prefere mar 29 00:17:22 les deux se valent .. tout dépend du contexte mar 29 00:17:28 il n'y a pas de meilleur je pense mar 29 00:17:37 ex : si tu as besoin d 'un padding spécifique sur 'a' mar 29 00:17:40 mais moi je comprend mieux comme ça mar 29 00:17:45 le 1px là t'es mal poru le placer mar 29 00:17:51 du moins je le mettrais plus facilement en place mar 29 00:18:05 BBoux, c'est pas spécialement "logique" mar 29 00:18:15 * BBoux est ps logique mar 29 00:18:17 cas 1 : mar 29 00:18:17 pas mar 29 00:18:21 lol mar 29 00:18:27 tu ajoute une bordure et tu changes la couleur mar 29 00:18:29 cas 2: mar 29 00:18:33 tu ajoute une marge mar 29 00:18:37 pusi tu l'enlèves mar 29 00:18:42 puis tu ajoutes une bordure mar 29 00:18:44 :\ mar 29 00:19:05 tu vois ? :p mar 29 00:19:08 oui mar 29 00:19:32 bon .. :) mar 29 00:19:39 petit prblème dans tout ça :p mar 29 00:19:42 ie4-6 mar 29 00:19:44 :) mar 29 00:19:58 le menu total fait le double en hauter :p mar 29 00:20:07 ce'st con hein ? :p mar 29 00:20:29 ouais mar 29 00:20:41 solution : mar 29 00:20:41 de toute facon ie ( /me dit rien ) mar 29 00:20:43 ah oui c'est vrai mar 29 00:20:49 fait chier ce IE mar 29 00:20:52 mettre une hauteur à 'a' mar 29 00:21:30 ( /me dit rien ) lol mar 29 00:22:14 sauf que .. mar 29 00:22:23 si on met une hauteur à 'a' mar 29 00:22:25 j'ai rien compris là McPeter mar 29 00:22:35 pourquoi une auteur à a mar 29 00:22:37 BBoux, tu as un visuel sosu ie6 ? mar 29 00:22:42 non mar 29 00:22:48 j'ai pas ie mar 29 00:22:56 ben regardez mar 29 00:22:59 sou s FF : mar 29 00:23:03 [ menu ] mar 29 00:23:03 ok mar 29 00:23:03 [ menu ] mar 29 00:23:05 [ menu ] mar 29 00:23:05 [ menu ] mar 29 00:23:08 ok.... mar 29 00:23:11 sous ie4-6 mar 29 00:23:13 [ menu ] mar 29 00:23:15 mar 29 00:23:16 [ menu ] mar 29 00:23:17 mar 29 00:23:19 [ menu ] mar 29 00:23:20 mar 29 00:23:21 [ menu ] mar 29 00:23:31 tip top quoi :p mar 29 00:23:56 :D mar 29 00:24:00 \o/ bravo chef mar 29 00:24:23 ? mar 29 00:24:43 mais pourquoi mar 29 00:24:45 1.2em mar 29 00:24:56 [20:25:43] tip top quoi :p mar 29 00:25:00 [20:26:12] \o/ bravo chef mar 29 00:25:06 c'est la hauteur visible actuellement mar 29 00:25:38 comment tu l'as trouvé mar 29 00:25:42 la hauteur ? mar 29 00:25:44 ça rectifie le tir sous IE4-6 ... sauf que le comportement 'boite' reprend ses pleins droits mar 29 00:25:55 cad occupe tout l'espace de body mar 29 00:26:01 ben BBoux :| mar 29 00:26:11 font-size : 0.85em mar 29 00:26:23 eu mar 29 00:26:24 85% mar 29 00:26:28 enfin ce'st pareil mar 29 00:27:19 si j'avais mit 1em en hauteur mar 29 00:27:30 ça équivaudrait à 100% de 0.85em ... mar 29 00:27:37 je t'avis expliqué ça :) mar 29 00:27:57 oui mar 29 00:27:58 donc là comme on a plus que la "simple heuteur" de caractère (c.f.: border) mar 29 00:28:06 1em + 0.2em mar 29 00:28:15 "cote mal taillé" mar 29 00:29:09 ok pour le 1em mar 29 00:29:16 mais les 0.2em oO mar 29 00:29:53 pour les 2px mar 29 00:33:03 en fait sou ie4-6 mar 29 00:33:14 la solution réside dans l'application d'une bordure à 'li' mar 29 00:35:14 et voilà mar 29 00:35:34 même visuel sous ie4-6 que el reste :) mar 29 00:40:24 bon ben voilà :) mar 29 00:40:27 cours finit :) mar 29 00:40:39 McPeter: enfaite s est simple quand on connait les termes mar 29 00:40:48 ben oui ᴖ_ᴖ