[résolu][css] Trop De Pixels En Bas

[FiP_]

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>

[Quarky]

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 !

[FiP_]

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 !

[Quarky]

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 ?

[FiP_]

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 :)

[Quarky]

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 !

[FiP_]

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 ^^

[ano_635020520775173491]

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

[Quarky]

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 !

[FiP_]

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..)

[Yangzebul]

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.

[FiP_]

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.