28173 sujets

CSS et mise en forme, CSS3

Padding/Margin visible sous IE et invisible sous FF

Bonjour à tous et à toutes Smiley lol

Après une recherche infructueuse dans le moteur de recherche du forum sur les mots margin et padding, je créé ici mon premier post pour vous demander un peu d'aide Smiley murf

J'ai un souci avec un attribut margin ou padding (au choix).
Il est correctement affiché sous IE mais pas sous Firefox.

Voici ce que ça donne :

Firefox :
http://membres.lycos.fr/vault/images/FF.jpg


Internet Explorer :
http://membres.lycos.fr/vault/images/IE.jpg

Voici le source HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Boutons</title>
<link href="Bouton.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="BoutonRougeGauche"></div><div class="BoutonRougeCentre"><div class="TexteBouton">TEXTE DU BOUTON 1</div></div><div class="BoutonRougeDroite"></div><div class="Separateur"></div><div class="BoutonRougeGauche"></div><div class="BoutonRougeCentre"><div class="TexteBouton">TEXTE DU BOUTON 2</div></div><div class="BoutonRougeDroite"></div>
</body>
</html>



Et voici la feuille de style correspondante :

* {
   padding:0;
   margin:0;
}

body
	{
		background-color : #333333;
		color:white;
		margin:10px;
	}

div.TexteBouton
	{
		font-family: sans-serif;
		font-size: 12px;
		text-align: center;
		color: #ffffff;
		font-weight: bold;
		font-variant: small-caps;
		padding-top:6px;
	}

div.Separateur
	{
		float:left;
		padding-right:5px;
	}
	
div.BoutonRougeGauche
	{
		width:2px;
		height:30px;
		background-image: url(Bouton-Rouge-Gauche.jpg);
		background-repeat: no-repeat;
		float:left;
	}

div.BoutonRougeCentre
	{
		width: 150px;
		height: 30px;
		background-image: url(Bouton-Rouge-Centre.jpg);
		background-repeat: repeat-x;
		float:left;
	}

div.BoutonRougeDroite
	{
		width:2px;
		height: 30px;
		background-image: url(Bouton-Rouge-Droite.jpg);
		background-repeat: no-repeat;
		float:left;
	}


Le souci est là :

div.Separateur
	{
		float:left;
		padding-right:5px;
	}

Le padding (ou un margin, au choix) est ignoré par FF.

J'ai étudié les incompatibilité dues aux interprétations du modèle de boîte, etc. etc. en vain Smiley rolleyes

Je m'en remet donc à vous.
Merci par avance pour votre aide !
Smiley lol
Modifié par Talent-Keyhole (12 Jul 2006 - 17:06)
Houla houla…


Cher Talent-Keyhole,

J'espère que tu ne m'en voudras pas si je te dis que ce que tu fais là – la manière dont tu conçois ces éléments HTML –, c'est de la mise en page à base de tableaux transformée en mise en page à base de div. Pour chaque cellule de tableau, on a droit à une div.

Sauf que voilà, les CSS ne sont pas vraiment prévues pour fonctionner ainsi. De plus, il y a des moyens beaucoup plus simples de faire certaines choses.

Prend par exemple ta div.Separateur. Qu'est-ce que ce machin vient faire au milieu du code ? Un élément vide placé là uniquement pour des soucis de mise en page… voilà de la conception en table, mais avec des div à la place, ce qui nous fait une belle jamble.

Et si pour créer cet écart de quelques pixels, tu avais tout simplement placé une marge sur un de tes deux boutons ?

En parlant d'éléments HTML en trop, pour deux boutons j'ai compté en tout neuf éléments div. Quelque part, ça fait sept de trop. Smiley lol
Bien sûr, faire une mise en page très graphique peut demander quelques concessions à la sémantique, comme de placer un conteneur pour « doubler » un élément. Mais ce genre de concessions se font quand on n'a pas de choses plus simples et plus propres à faire.

Je ne te jette pas la pierre, je suppose que tu débutes dans les CSS.

Pour un menu de navigation, plutôt que d'utiliser des div simples (l'élément div est un conteneur neutre, sans signification particulière), on utilise souvent des listes non ordonnées ul (on cache ensuite en CSS les éléments de mise en forme par défaut que l'on ne souhaite pas utiliser).

Pour entourer du texte pour des raisons de mise en forme, le conteneur en-ligne neutre span est sans doute plus indiqué.

Voilà, je te laisse avec ces quelques éléments. Essaie de faire un truc sympa et un peu propre, mais si tu ne descends pas à deux éléments en tout et pour tout. Smiley cligne
Ha bon, ça se voit tant que ça que c'est ma toute première feuille de style ? Smiley lol

* sifflote innocemment *

En fait, mon bouton est en 3 morceaux de 30 pixels sur 2 pixels :

- L'extrêmité gauche
- Le centre (motif répété sur toute la longueur du bouton)
- L'extrêmité droite

Les extrémités servent juste à donner un effet d'ombre et de lumière nécessaire pour le rendu de l'aspect "bouton".

Donc pour moi, 3 morceaux = 3 balises (par bouton).
Je n'ai pas su comment m'y prendre pour réduire l'équation à 1 bouton=1 balise. Smiley rolleyes

Pour le séparateur, j'en ai eu besoin parce que j'avais essayé de mettre un margin ou un padding sur l'extrêmité droite mais que ça ne fonctionnait pas.

Maintenant, je ne sais pas trop comment je peux résoudre mon souci de compat FireFox et encore moins comment optimiser mon usine à gaz pour en faire un modèle de concision. Smiley confused
Talent-Keyhole a écrit :
Donc pour moi, 3 morceaux = 3 balises (par bouton).
Je n'ai pas su comment m'y prendre pour réduire l'équation à 1 bouton=1 balise. Smiley rolleyes

Déjà, si les boutons ont une largeur fixe le problème ne se pose pas (une seule image de fond et on n'en parle plus).
Si la largeur est variable, il y a moyen de réduire ça à deux éléments pour chaque bouton :
– Un élément conteneur, qui aura une image de fond avec une des bordures (gauche ou droite) et le fond répété. Il faut prévoir une image assez large (genre 500px si on veut de la marge), et bien compressé en PNG ça ne pèse presque rien.
– À l'intérieur du conteneur, un élément qui aura pour image de fond la bordure restante (gauche ou droite). Attention à ne pas mettre de couleur de fond, juste une image de fond, sinon on recouvre l'image du dessous.

C'est faisable, dans une liste non ordonnée ul, avec des li (conteneurs) contenant des liens a (à mettre en display: block pour qu'ils se comportent comme un bloc).

Mais c'est peut-être un poil complexe.

Pour référence, ce petit exemple qui reprend le même principe des deux images de fond, mais en vertical.

Talent-Keyhole a écrit :
Pour le séparateur, j'en ai eu besoin parce que j'avais essayé de mettre un margin ou un padding sur l'extrêmité droite mais que ça ne fonctionnait pas.

Tu as du te planter quelque part, parce que normalement ça fonctionne. Smiley cligne
Modifié par mpop (12 Jul 2006 - 23:18)
Merci à toi Ô Grand Maharajah du CSS Smiley ravi

Je planche sur la question et je publierai ma nouvelle mouture optimisée ici pour que tu me donnes ton avis éclairé. Smiley lol
Voilà la nouvelle mouture :

Le HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Boutons v2</title>
<link href="BoutonV2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="BoutonRouge">BOUTON 1</div><div class="BoutonRouge">BOUTON 2</div>
</body>
</html>


Le CSS :

*
	{
		padding:0;
		margin:0;
	}

body
	{
		background-color : #333333;
		color:white;
		margin:10px;
	}

div.BoutonRouge
	{
		width:150px;
		border-left: 1px #4f4f4f solid;
		border-right: 1px #000000 solid;
		border-top: 2px #FF0000 solid;
		border-bottom: 2px #FF0000 solid;
		font-family: sans-serif;
		font-size: 12px;
		text-align: center;
		color: #ffffff;
		font-weight: bold;
		font-variant: small-caps;
		float:left;
		background-image:url(Degrade-Bouton.jpg);
		background-repeat: repeat-x;
		margin-right:10px;
	}


Et le résultat :
[EDIT] Voilà la version réduite, selon les directives de Véro.
Comme je ne suis pas certain que le pixel en trop sera encore visible, je laisse l'url de l'image originale ici

upload/7577-Boutonv2.jpg

Et là, bug (sous FF et IE) :
Il manque 1 pixel dans la bordure de gauche et je ne sais absolument pas pourquoi.
En tout cas, ça fait moche. Smiley rolleyes

Une idée ? Smiley murf
Modifié par Talent-Keyhole (13 Jul 2006 - 13:39)
mmm, attends, je crois avoir vu un tutos la dessus mais je sais plus ou....je vais tenter de chercher.

EDIT>> je ne trouve plus .

Essaye de jouer sur les padding en attendant
Modifié par Oryo (13 Jul 2006 - 10:56)
Bonjour à tous,

Bigre, que ce bouton est gros pour un affichage optimal du topic en 800/600 !

Il existe une option "Générer un aperçu" afin de palier à ce problème.
Talent-Keyhole, peux-tu éditer ton post et recharger cette image en cliquant sur cette option.

Je t'en remercie par avance.
Smiley smile
Modifié par Vero (13 Jul 2006 - 12:04)
Mais si vraiment tous les boutons vont faire la même largeur, rien n'empêche d'utiliser une image comportant déjà les bordures, en dur dans l'image.
Ah oui en effet Smiley confus

Ce serait finalement le plus simple. Si quelqu'un désire agrandir le site, tout sera cassé, mais en général, peut de personne connaissent encore ce truc
Oryo a écrit :
Ca y est, j'ai trouvé le lien que je cherchais:

Ce lien te permettra d'y voir peut être un peu plus clair.


A noter: Opera a adopté depuis la version 9.0 un mode de rendu identique à celui des navigateurs Gecko.

En fait, tous les navigateurs se conformant au test Acid2 (donc également Safari) adoptent ce mode de rendu.
Oryo a écrit :
Ah oui en effet Smiley confus

Ce serait finalement le plus simple. Si quelqu'un désire agrandir le site, tout sera cassé, mais en général, peut de personne connaissent encore ce truc


- sic -

Ah, si les utilisateurs étaient sages, le Web serait merveilleux. Mais le but global de tout ce bouzin (XHTML, CSS, les normes, tout ça...) est plutôt de leur permettre de ne pas l'être, justement Smiley lol

Déjà, le danger menace : il leur arrive de plus en plus de savoir faire trop de choses. Sans compter qu'on leur fabrique de plus en plus de jolies barres d'outils qui exploitent ces maudits standards pour flaquer en l'air les mises en pages trop dictatoriales, sur un simple clic. Un vrai scandale !

(Et puis ces navigateurs qui vous font du "fit-to-width" en se permettant d'ignorer ou de modifier les tailles de caractères ou de blocs qu'on a pris la peine de fixer: même Microsoft commence à s'y mettre, mon bon monsieur : où va le monde !)

Et depuis belle lurette, plus simplement, il leur arrive d'avoir des choses qui se font sans qu'ils le sachent, et sans qu'ils y soient pour rien, quand ce sont encore de ces bons vieux utilisateurs passifs et gentils : juste parce que leur config par défaut ne correspond pas à celle de l'auteur.

Ils vous tuent le métier, ces gens-là, je vous le dis.

<!important> Smiley cligne </>
Modifié par Laurent Denis (14 Jul 2006 - 10:38)
Ouaip, en bref, je suis dans la mouise jusqu'au cou... Smiley murf

En tout cas, merci à tous pour vos contributions.

Finalement, je vais devoir conserver mon bouton sous forme de 3 images.
Et je prévois de leur donner une taille variable selon les besoin.

Je vais réfléchir à un compromis entre pureté du code et résultat graphique (et ce dernier primera car si je fais des boutons c'est pour qu'ils soient jolis, sinon je m'en passerais Smiley lol )
Talent-Keyhole a écrit :
Je vais réfléchir à un compromis entre pureté du code et résultat graphique (et ce dernier primera car si je fais des boutons c'est pour qu'ils soient jolis, sinon je m'en passerais Smiley lol )

Voici un exemple de code d'une pureté irréprochable :
<img src="bouton-truc.png" alt="Truc" />

Le seul problème, c'est pour les malvoyants qui ont besoin d'agrandir le texte pour le lire. Mais dès que l'on fait une mise en page avec un minimum de maîtrise graphique pour certains éléments, on se retrouve face à ce problème, surtout pour certains éléments comme les menus : soit le texte est dans l'image et ça ne bouge donc pas, soit le texte bouge et les intitulés des éléments se rentrent dedans jusquà en devenir illisible.

J'avoue ne pas avoir de réponse satisfaisante pour cette contrainte.

Mais le code tout simple que je donne ci-dessus permet au moins :
– le rendu graphique voulu ;
– accessiblité aux non-voyants et aux navigateurs non graphiques.

Les deux points noirs étant :
– problème en cas de modification du menu (traduction, modification des rubriques, etc.) ;
– problème d'agrandissage du texte.
Sujet clos
Aller à