28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Je suppose que beaucoup d'entre vous utilise déjà la balise fieldset.

Ben, moi aussi mais sous IE c'est vraiment pas terrible. La bordure supérieure ne se trouve pas en haut du champ mais à environ 50 % de sa hauteur.

J'ai essayé display:block mais visiblement, ça n'est pas la solution. Il y en a une ?
Modifié par olivier-m (10 Feb 2006 - 10:29)
Bonjour olivier-m et bienvenue sur Alsacréations,

Sans un exemple en ligne et/ou le code, çà ne va être simple de t'aide Smiley cligne .
Ok désolé, c'est évident.
Finalement je ne souhaite pas faire ça, ça compliquerait la page plus qu'autre chose.
Mais je veux bien résoudre le porblème quand même ! Smiley smile

L'exemple est ici :
http://www.etm-musique.com/contact.php3?id_auteur=3

Et le code correspondant de ma feuille de styles :
#texte {font-weight:normal; font-size:0.8em; font-family:Arial, Helvetica, sans-serif; color:#444343; margin:10px 0px 15px 0px;}
#texte fieldset {display:block; margin:10px 0px 0px 0px; padding:1em; border:1px solid #906;}
#texte legend {font-weight:bold; color:#906; background:transparent;}

Je n'ai pas le sentiment d'avoir changé quoi que ce soit et pourtant...

quelqu'un peut-il me confirmer que MAINTENANT ça s'affiche correctement sous IE ?!
Bonjour,

Avant de s'occuper des questions de rendu dans IE, il y a plusieurs autres problèmes nettement prioritaires à régler, dont :
- invalidité HTML
- utilisation des <label> incorrecte qui les rend inutiles (voir FAQ du forum)
- textes alternatifs des images

Smiley cligne
Oui, ben vu que le dernier site que j'ai fait respectait tout-à-fait ce genre de critère, au pied de la lettre, et qu'il est devenu invisible sur Google dans la semaine qui a suivi la mise en ligne de sa nouvelle version, j'ai pas vraiment envie d'optimiser mes sites dès le début.

Tous ces problèmes d'accessibilité et de normes, c'est super et je veux bien m'en préoccuper mais chaque chose en son temps. Là il est question d'un site évènementiel commandé sur le tard (je travaille là à titre bénévole) pour un évènement qui a lieu le 27 février alors ma priorité c'est que tout le monde le voit correctement.

Je veux bien qu'on me fasse ce genre de remarque mais je trouve un peu facile qu'on fasse du coup l'impasse sur mon problème.
olivier-m a écrit :
je veux bien m'en préoccuper mais chaque chose en son temps


Justement, ce que Laurent te dis, c'est que ce n'est pas encore le moment de te préoccuper des problèmes de rendu sous IE ! Tant que le code de tes pages n'est pas valide, ce n'est pas la peine d'espérer avoir un rendu cohérent sur les différents navigateurs.
olivier-m a écrit :
Oui, ben vu que le dernier site que j'ai fait respectait tout-à-fait ce genre de critère, au pied de la lettre, et qu'il est devenu invisible sur Google dans la semaine qui a suivi la mise en ligne de sa nouvelle version, j'ai pas vraiment envie d'optimiser mes sites dès le début.

çà n'a pas probablement aucun rapport.

a écrit :
Tous ces problèmes d'accessibilité et de normes, c'est super et je veux bien m'en préoccuper mais chaque chose en son temps. Là il est question d'un site évènementiel commandé sur le tard (je travaille là à titre bénévole) pour un évènement qui a lieu le 27 février alors ma priorité c'est que tout le monde le voit correctement.

Les normes et l'accessibilité et au delà la qualité de conception sont l'objet même des forums Alsacréations, donc il normal que nous insistions d'emblée sur ces questions. Smiley cligne

a écrit :
Je veux bien qu'on me fasse ce genre de remarque mais je trouve un peu facile qu'on fasse du coup l'impasse sur mon problème.

Personnelement je ne rencontre aucun problème avec ton formulaire sous IE.
Pour ton formulaire, comme l'indique Laurent dans la faq, ton utilisation des labels implicites cause des problèmes. Donc autant utiliser d'emblée les labels correctement, çà ne prend pas plus de temps.



<label for="email_message_auteur_3">Votre e-mail</label>
<input class="forml" id="email_message_auteur_3" name="email_message_auteur_3" value="" size="36" type="text" />
@ Sopo : franchement quand tu vois les erreurs de ma page... Aucun rapport avec le legend. (par exemple j'utilise les carctères <> comme séparateur de texte et forcément c'est considéré comme une balise incomplète)

@Igor : Ok, les normes je cherche moi aussi à les respecter même si je fais parfois des concessions parce que je ne suis pas encore assez calé en CSS. C'est juste qu'il y a des tas de sites invalides (notamment commerciaux) qui ne posent pas de problèmes à l'utilisateur moyen et pour le moment j'aimerais que ce soit au moins le cas sur ce site.

+ Merci pour l'utilisation des labels "implicite". Pour le moment je n'ai fait que simplifié le squelette de base de Spip et c'est vrai que ça me semblait bizarre.

Enfin ce qui est vraiment "curieux", c'est cette histoire de balise legend qui foire puis qui ne foire plus...

PS : je suis sûrement pas très doux mais je suis assez malade depuis hier. Je sais, c'est pas une excuse mais c'est au moins une explication... Smiley smile
Bonsoir,

olivier-m a écrit :


Je veux bien qu'on me fasse ce genre de remarque mais je trouve un peu facile qu'on fasse du coup l'impasse sur mon problème.


Ce n'est pas une question de "facilité" Smiley cligne

Après un peu plus de 4000 messages sur ce forum, pour l'essentiel consacrés à donner des solutions aux gens, je fais effectivement à présent l'impasse sur les questions concernant des sites dont l'auteur fait lui-même l'impasse sur la validation préalable à sa question (Cela exclue les situations spécifiques où il s'agit d'un choix maîtrisé et justifié, mais ce n'est pas le cas ici).
Modifié par Laurent Denis (05 Feb 2006 - 19:30)
olivier-m a écrit :
[.. ]

PS : je suis sûrement pas très doux mais je suis assez malade depuis hier. Je sais, c'est pas une excuse mais c'est au moins une explication... Smiley smile


Pareil pour moi et ma broncho-angino-crève Smiley smile

Pour ce qui est des squelettes de formulaires de spip, il convient de les adapter un peu pour les nettoyer et les rendre un peu plus accessibles. Ce que tu fait avec le formulaire de contact. Sur Spip-contrib Maïeul propose un jeu de squelettes de formulaires qui doivent règler le soucis avec les labels: Des squelettes de formulaires « accessibles ». Je n'ai pas testé mais ils doivent pour pouvoir servir de base.

Pour en revenir à legend, je n'ai pas de soucis particulier pour les formulaires de spip que j'adapte comme sur ces pages (pages non valides c'est mon chantier perso Smiley cligne ):
http://igor.ouvaton.org/article.php3?id_article=42
http://igor.ouvaton.org/rubrique.php3?id_rubrique=4
@Laurent Denis : je comprends, je suis aussi passé par là... Smiley smile

@Igor : Ouaip en fait pour les labels j'ai juste déplacé la balise fermante (je l'ai mise avant l'input) et j'ai appliqué aux labels un display:block dans ma CSS : ça donne exactement le même rendu qu'auparavant.

<hors-sujet>Là je sors un peu du sujet mais j'aimerais bien modifier le message qui s'affiche une fois qu'on a confirmé l'envoi du message : "Message envoyé" sans aucune mise en forme, ça craint. (et puis ajouter un lien "Retour" qui ramène à la page où on était avant le formulaire, ce serait pas un luxe non plus)
Alors si t'as un tuyau... Smiley smile </hors-sujet>
Je précise que le problème d'origine s'est résolu "tout seul", c'est-à-dire que je ne sais pas ce qui a marché...