Posté(e) le 9 août 200618 a Coucou! J'aime bien le css, mais là je dois m'avouer vaincu... jettez un coup d'oeil ici: http://parfonium.free.fr/ Dans la barre de gauche, il y a deux groupes de "boutons": xhtml, css, et php, puis stop sms et geomachin. Mon souci, c'est que, dans ces deux petits blocs, l'espace entre le dernier bouton et la bordure est plus grand que l'espace entre le premier et le haut du cadre... (5px en haut, mais 7px en bas...): le css de cette partie là: /* Boutons ("powered by", "licenced by", etc...) ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯*/ div#sidebar div.boutons { position: relative; top: 20px; width: 80px; padding: 5px; margin: 0 auto; border: solid 1px #ccc; } div.boutons a img { padding: 0px; margin: 0px; border: none; /* opacity: 0.5; */ } div.boutons a:hover img { /* opacity: 1; */ } (le css complet: http://parfonium.free.fr/_themes/current/global.css ) et le Xhtml du coin: <!-- Sidebar //--> <div id="sidebar"> <!-- Menu //--> <ul id="menu"> {loop : menu} <li{ifset : actif} id="active"{/ifset}><a href="{#lien_href#}">{#lien_nom#}</a></li> {/loop} </ul> <hr /> <!-- Boutons //--> <div class="boutons"> <a href=".."><img src=".." /></a><br /> <a href=".."><img src=".." /></a><br /> <a href=".."><img src=".." /></a> </div> <hr /><br /><br /> <div class="boutons"> <a href=".."><img src=".." /></a><br /> <a href=".."><img src=".." /></a> </div> <hr /> </div> Modifié le 14 août 200618 a par FiP_
Posté(e) le 10 août 200618 a Bon comennçons par le principal : les images ! Si tu les prends à part et que tu regardes attentivement (en zoomant) le haut et le bas, tu verras qu'il y a une différence En fait le bas de l'image comprends un petit dégradé en dessous du cadre (comme la droite d'ailleurs). Ceci "déséquilibre" donc notre perception du bouton car notre oeil est plus attiré par le cadre que le haut du cadre + le dégradé .... Donc je penses que le décalage vient de là ! Mais ce que je comprends pas, c'est qu'on devrait avoir le problème à droite également . En tous les cas, j'ai réussi à obtenir un affichage correct : il m'a suffit de compléter le padding des boutons pour différencier la valeur du bottom. C'est peut être pas tip-top mais ca marche ! div#sidebar div.boutons { position: relative; top: 20px; width: 80px; padding: 5px 5px 3px 5px; margin: 0 auto; border: solid 1px #ccc; } PS : un code très propre et bien commenté : Bravo !
Posté(e) le 11 août 200618 a Auteur Si tu les prends à part et que tu regardes attentivement (en zoomant) le haut et le bas, tu verras qu'il y a une différence En fait le bas de l'image comprends un petit dégradé en dessous du cadre (comme la droite d'ailleurs). Ceci "déséquilibre" donc notre perception du bouton car notre oeil est plus attiré par le cadre que le haut du cadre + le dégradé .... Donc je penses que le décalage vient de là ! Mais ce que je comprends pas, c'est qu'on devrait avoir le problème à droite également . Je n'ai rien compris. En tous les cas, j'ai réussi à obtenir un affichage correct Il fallait y penser! Ca marche merci PS : un code très propre et bien commenté : Bravo !
Posté(e) le 11 août 200618 a Ben je sais pas trop comment t'expliquer plus clairement pour l'histoire du dégradé ... pas grave ! Alors c'est résolu ? Tu restes sur ma proposition ?
Posté(e) le 11 août 200618 a Auteur Et bien on dirait que tu présente une illusion d'optique, en disant que l'oeil est attiré... ^^ alors que le décalage est bien réél! Sur l'image que j'ai attaché, les petits traits mauves ont été rajoutés, pour mesurer les tailles.. ils n'apparaissent pas sur le site, et prouvent qu'il y a(vait) bien un décalage.. Je veux bien mettre le truc en résolu, mais j'aimerai comprendre :)
Posté(e) le 11 août 200618 a Rassures toi, pour les traits mauves j'avais compris ..... Par contre moi non plus j'ai pas bien capté le pourquoi du comment en fait car selon mon hypothèse, ce serait le dégradé qui devrait créer le décalage mais il n'y en a pas à droite ni entre les boutons ... Donc je sais pas d'ou venait cette augmentation du bottom. Au passage, si ta classe "boutons" n'est utilisée que sur des div, tu peux supprimer le "div" présent à chaque fois devant la classe dans le CSS .... Et c'est valable pour tes classes et id !
Posté(e) le 11 août 200618 a Auteur Par contre moi non plus j'ai pas bien capté le pourquoi du comment en fait car selon mon hypothèse, ce serait le dégradé qui devrait créer le décalage mais il n'y en a pas à droite ni entre les boutons ... Le probléme vient peut être d'ailleurs dans le css, une définition précedente qui s'appliquerait ici, en plus des margin et padding.. bref Au passage, si ta classe "boutons" n'est utilisée que sur des div, tu peux supprimer le "div" présent à chaque fois devant la classe dans le CSS ....Et c'est valable pour tes classes et id ! Je sais, je sais.. mais j'ai pris l'habitude de les rajouter, sait on jamais.. Je rajouterai peut être un "titre" à ces blocs de boutons, que j'appellerai span.boutons ^^
Posté(e) le 11 août 200618 a Bonjour, je pense que c'est un problème de taille de font : il rajoute des pixels en dessous pour les p, g, j ... J'ai rajouté font-size: 0em; dans mon css, et la partie supplémentaire en bas a disparue. En espérant que cela solutionne ton problème. SiMoN
Posté(e) le 12 août 200618 a Tiens je viens de remarquer un détail important : il n'y a pas de texte alternatif sur les images. Ca coute rien ... mais ca peut énormément aider certains visiteurs !
Posté(e) le 14 août 200618 a Auteur je pense que c'est un problème de taille de font : il rajoute des pixels en dessous pour les p, g, j ... J'ai rajouté font-size: 0em; dans mon css, et la partie supplémentaire en bas a disparue. INteressant! En effet, si je replace le padding tel qu'il était, et que je rajoute font-size: 0; , je n'ai plus les 7 pixels en bas.. mais seulement 6 (soit encore un de trop). Il y a peut être un autre problème... en tout cas merci pour cette astuce Tiens je viens de remarquer un détail important : il n'y a pas de texte alternatif sur les images. Ca coute rien ... mais ca peut énormément aider certains visiteurs ! Pas de texte alternatif? Je ne met pas de texte alternatif, moi?? Si si.. je ne les ai pas mis dans mon example pour simplifier le code ^^ mais à priori, sur le site en ligne, il y a tout: des alt, des title, des height et width (pas pour toutes les images, ces deux derniers, mais bon..)
Posté(e) le 14 août 200618 a Total HS : {loop : menu} <li{ifset : actif} id="active"{/ifset}><a href="{#lien_href#}">{#lien_nom#}</a></li> {/loop} Qu'est-ce que c'est que ce langage ? C'est la première fois que je vois ça... Sinon petit détail: "font-size: 0em;" > pas besoin d'unité avec 0, "font-size: 0;" suffit.
Posté(e) le 14 août 200618 a Auteur Qu'est-ce que c'est que ce langage ? C'est la première fois que je vois ça... Et bien c'est à dire que.. j'ai commencé à faire mon site.. puis j'ai voulu separer la partie présentation du code, alors j'ai fait un petit template.. et j'ai codé un moteur de template... Oui je sais j'aurais pu prendre un truc existant.. mais j'aime bien faire les choses moi même :) "font-size: 0em;" > pas besoin d'unité avec 0, "font-size: 0;" suffit. Oui je sais.
Archivé
Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.