28221 sujets

CSS et mise en forme, CSS3

Bonjour,

QQ1 saurait comment je peux forcer une largeur fixe sur un <a> (ainsi que sur un span ou sur tout contenu inline) sous Moz ?

Si je rajoute display:block il se comporte comme un block (logique Smiley smile ) c'est à dire que je peux forcer sa largeur (chouette) mais il me fait un retour chariot (zut)

Merci,

Ci-dessous mon code (le but du jeu c'est de faire en sorte que tous les <a> aient la même largeur et prennent l'aspect d'un bouton) et dans l'exemple ci-dessous il faudrait que les 2 boutons soient l'un à côté de l'autre (et pas l'un sous l'autre)


<html>
<style>
.CSS_BOUTN_NEW00
{
 font-family:Arial, Helvetica, Lucida, Sans;
 font-size:11px;
 color:#000;
 background-repeat:no-repeat;
 background-color:red; /* un peu de red pour voir la taille */
 text-decoration:none;
 padding-top:6px;
 padding-left:29px;
 width:105px;
 height:28px;
 /* display:block;  qu'est-ce que je mets ici ? */
}

.CSS_BOUTN_NEW00:hover
{
 color:#f00;
}


/*
.CSS_BOUTN_NEW00
{
 background-image:url("../IMG/normal/IMUG079.gif");
}

.CSS_BOUTN_NEW00:hover
{
 background-image:url("../IMG/selected/IMUG079.gif");
}

*/

</style>
<body>
<a href="www.google.com" class="CSS_BOUTN_NEW00">Google</a>
<a href="www.alsacreations.com" class="CSS_BOUTN_NEW00">Alsa</a>
</body>
</html>

Modifié le 07 Feb 2005 - 17:45
Déjà, tout de suite, (j'ai pas testé), il y a un problème. Ta page n'est pas valide. Une balise inline doit être dans une balise bloc, or tes <a></a> ne sont pas dans une balise bloc, elles sont dans le body. Par conséquent, les comportements peuvent être, comment dire, aléatoires ! Et puis, ça n'a rien à voir avec Mozilla. Rends déjà ta page valide Smiley cligne

@ tout bientôt, HoPHP
Désolé je n'ai rien compris à ce que tu voulais dire.
<a> c'est une balise non ?
elle n'entraine pas de retour chariot donc c'est une balise inline non (comme un span quoi)
Bonjour,

Oui, <a> est un élément en-ligne.
Mais pour comprendre un peu mieux les différences entre les deux types de blocs et leur utilisation, je t'invite à lire La structure des balises : bloc et en-ligne et notamment ce passage
a écrit :
Les balises en-ligne sont faites pour rester au sein du texte pour l'enrichir et lui apporter du sens. Il n'est pas prévu qu'elles puissent se positionner sur la page (même si cela est possible), ni de leur donner des dimensions (hauteur, largeur, profondeur) : exception faite des balises en-ligne "remplacées" (cf explications plus haut), leur taille va être déterminée par le texte ou l'élément qu'elles contiennent.

Par défaut, les balises en-ligne ont des marges internes et externes inexistantes (valeur nulle), contrairement aux balises bloc.


Tes balises <a> doivent donc se trouver dans un élément de type bloc (div, p, h1...)
Modifié le 07 Feb 2005 - 18:48
<p air_de_dire="je ne parle pas français?">C'est ce que je disais, non ? Smiley biggol </p>

@+, HoPHP
Modifié le 07 Feb 2005 - 19:31
La méthode que tu as utilisé me semble bonne (le display:block sur la balise A). Cependant, tu dis avoir un retour chariot, ce qui est tout à fait normal du point de vue du respect de la propriété block.
Pour faire sauter le retour chariot, il te suffit d'ajouter à ta balise A un float:left, qui te permettra alors de faire que ta balise A soit reglable en largeur, et qu'elle ne provoque pas de retour chariot.
Administrateur
St0uK a écrit :
La méthode que tu as utilisé me semble bonne (le display:block sur la balise A). Cependant, tu dis avoir un retour chariot, ce qui est tout à fait normal du point de vue du respect de la propriété block.
Pour faire sauter le retour chariot, il te suffit d'ajouter à ta balise A un float:left, qui te permettra alors de faire que ta balise A soit reglable en largeur, et qu'elle ne provoque pas de retour chariot.

C'est effectivement une solition comme une autre.
Mais dans ce cas, il sera inutile de rajouter display block puisque les flottants sont automatiquement considérés comme des blocs.
Le float ne règle pas le problème. Et je pressens qu'il n'y aura aucune solution (sauf peut-être à base de before et after)
(Je ne veux/peux pas modifier le html car je n'en ai pas le contrôle)

<a href="www.google.com" class="CSS_BOUTN_NEW00">Google</a>&nbsp;
<a href="www.alsacreations.com" class="CSS_BOUTN_NEW00">Alsa</a>

Résultat

 ______
[Google] ______
[______][ Alsa ]
        [______]


au lieu de


 ______   ______
[Google] [ Alsa ] 
[______] [______]



@HoPHP
a écrit :

Déjà, tout de suite, (j'ai pas testé), il y a un problème. Ta page n'est pas valide. Une balise inline doit être dans une balise bloc, or tes <a></a> ne sont pas dans une balise bloc, elles sont dans le body. Par conséquent, les comportements peuvent être, comment dire, aléatoires !

Reformulé ainsi "La width ne s'applique qu'aux éléments de type bloc et donc pas au <a> qui est de type inline. Place ton <a> dans un bloc", j'aurai compris plus vite Smiley smile


a écrit :
Et puis, ça n'a rien à voir avec Mozilla. Rends déjà ta page valide

Disons que cela a à voir avec IE alors Smiley smile parce que IE me rend ma page telle que je la voudrai.

rmq: édité pour ajouter le &nbsp; entre les 2 <a/>
Modifié le 08 Feb 2005 - 14:17
Hum, je ne sais pas ou tu en es, mais je te garantis que {float:left} appliqué à tes liens fonctionne parfaitement : boutons alignés et de largeur identique sous IE comme sur Mozilla.
brice a écrit :
je sais que ce que je vais dire ne sers pas à grand chose, mais le css3 et son box model volera à notre secours (un jour..), avec notament la propriété display: inline-block.
http://www.w3.org/TR/css3-box/


inline-block (CSS2.1, et non CSS3) est déjà implémenté dans Opera (correctement) et IE (de manière limitée).

C'est effectivement exactement l'outil qui conviendrait ici (dimensionnement de block mais positionnement en ligne)
Modifié le 08 Feb 2005 - 14:01
Bon ben en attendant que FF/MOZ implémente le CSS3 ce sera moche/inutilisable sur ces navigateurs...

Xavier a écrit :
Hum, je ne sais pas ou tu en es, mais je te garantis que {float:left} appliqué à tes liens fonctionne parfaitement : boutons alignés et de largeur identique sous IE comme sur Mozilla.


J'ai repris mon code. J'ai remplacé display:block par float:left et si le problème de taille est réglé, en revanche l'alignement ne fonctionne pas (si on rajoute un &nbsp; entre les 2 <a/>, on obtient l'effet que je décris plus haut)
v1nce a écrit :
Le float ne règle pas le problème. Et je pressens qu'il n'y aura aucune solution (sauf peut-être à base de before et after)
(Je ne veux/peux pas modifier le html car je n'en ai pas le contrôle)

(...)

Disons que cela a à voir avec IE alors Smiley smile parce que IE me rend ma page telle que je la voudrai.


ça a plus sûrement à voir avec le code complet de la page, car le flottant appliqué au code simplifié ci-dessus donne effectivement le résultat escompté dans Mozilla, IE, & Cie.
v1nce a écrit :
J'ai repris mon code. J'ai remplacé display:block par float:left et si le problème de taille est réglé, en revanche l'alignement ne fonctionne pas (si on rajoute un &nbsp; entre les 2 <a/>, on obtient l'effet que je décris plus haut)


Ah... Les gens qui donnent un exemple de code et qui se plaignent que ça ne marche pas avec un autre exemple, qui n'a rien à voir ! Smiley cligne

Effectivement, le &nbsp; n'étant pas lui-même flottant, les 3 contenus ne peuvent pas s'aligner.

A quoi te sert-il ? A créer un espace entre les boutons ? Inutile dans ce cas : utilise les propriétés de marges avec un margin-left: 1em; par exemple. Ou 10px, ou 1chouïa...
Modifié le 08 Feb 2005 - 14:28
En fait, IE ne le supporte que partiellement, et Opera qui le supporte mieux a un bug sur vertical-align dans ce cas...
Il y a encore du chemin à faire Smiley cligne
Laurent Denis a écrit :


A quoi te sert-il ?


A moi, il ne me sert à rien Smiley smile c'était juste un exemple. Je n'ai pas la main sur le code html généré par n développeurs et je m'attends à trouver à peu près n'importe quoi autour.

Par exemple
<a href="ficheutilisateur.asp?" class="CSS_USER">Denis</a> a dit "...." <br>
<a href="repondre.asp?id=1" class="CSS_REPLY">Répondre</a> à l'auteur. <a href="transfert.asp?" class="CSS_SENDTO">Transférer</a> à qq1

avec .CSS_USER, .CSS_REPLY et .CSS_SENDTO des "boutons" prédéfinis (largeur fixe avec des picto inspirés d'outlook)

a écrit :

A créer un espace entre les boutons ? Inutile dans ce cas : utilise les propriétés de marges avec un margin-left: 1em; par exemple. Ou 10px, ou 1chouïa...


Tu me rappelles l'unité pour le chouïa ? (margin-left:10ch) Smiley lol
Toutes mes excuses, v1nce. Là, le cas est effectivement à peu près désespéré Smiley eek

Hum... Zut, à tous les coups, il y a une image de fond pour les boutons ? Donc, un simple effet de padding ne fera pas l'affaire, puisqu'il faut une largeur constante pour tous les boutons...

Ah, peut-être : de simples boutons en image <img> dans les liens, à la place des liens textuels, ç'aurait été bien, ça ?
Laurent Denis a écrit :
Toutes mes excuses


Pourquoi donc ? T'y es pour rien Smiley smile

a écrit :
Là, le cas est effectivement à peu près désespéré Smiley eek


je crois aussi

a écrit :
Hum... Zut, à tous les coups, il y a une image de fond pour les boutons ? Donc, un simple effet de padding ne fera pas l'affaire, puisqu'il faut une largeur constante pour tous les boutons...


en fait pour la version actuelle des boutons c'est "supportable".
le bouton est un bouton rectangulaire : c'est une bordure, un fond, un picto (en no-repeat) à gauche du texte (avec un peu de padding)
donc si Moz ignore la largeur cela continue de ressembler à qqchose

mais ce qui nous intéressait c'était de remplacer cela par un bouton arrondi. Or pour faire les arrondis je ne vois pas trop quoi utiliser à part une image en background (*). Or là si on ne peut pas fixer la largeur ça ne ressemble plus à rien du tout.

(*) D'autant plus que le bouton contient en plus des dégradés.

a écrit :
Ah, peut-être : de simples boutons en image <img> dans les liens, à la place des liens textuels, ç'aurait été bien, ça ?


Oui le problème c'est juste qu'il faudrait réécrire les applications... Je pense que ce serait moyennement apprécié Smiley cligne

Si, j'ai le temps, je creuserai http://virtuelvis.com/gallery/css/rounded/. S'il arrive à ajouter des images aux 4 coins de son blockquote via une CSS, je devrai réussir à insérer mon lien dans un div (et donc à fixer la largeur)