Hello!
 
Je développe une appli web et ayant été préssée par le temps j'ai fait plein de choses à la va-vite et aujourd'hui je voudrais tout faire un peu plus proprement. Voici donc les quelques questions qui me viennent:
 
1 - Pour le moment la plupart des éléments (div et autres) sont de taille fixe. Or, c'est crade. Si on réduit la fenêtre ça s'affiche tout mal etc etc. Je compte donc passer le tout en pourcentage. Pour le moment, facile.
Malgré tout, j'ai un menu vertical à gauche das pages, et je voudrais que dans ce menu, le texte des différents item ne passe jamais à la ligne. Je souhaiterais donc savoir si c'est possible de baser la taille d'un élément sur la taille du texte qu'il contient? Et ensuite si c'est possible d'utiliser une variable pour donner la valeur du width.  
 
2 - Dans mes formulaires, j'utilise des <label> dont j'ai défini la largeur dans ma css. Cependant sous ie mes input et select se retrouvent bien alignés mais pas sous ff (il se fout de la taille des <label> ). Comment règler le pb?
 
Voili pour le moment. Désolée si mes questions paraissent stupides, mais j'ai vraiment du mal, c'est pas facile d'apprendre tout ça ;P

1) si tu ne donnes pas de largeur ton conteneur va s'adapter au contenu...
Pour l'histoire de la variable, je comprends pas (enfin si, je pense, mais on va faire comme si)...une variable qui sort d'où?
 
2) On peut voir le résultat pour comprendre plus facilement?

Tu peux régler la taille de tes lignes en "em", c'est une mesure qui dépend de la taille de la font (correspond à la propriété "font-size", 1em est égal à la font-size sélectionnée) ou en "ex" (hauteur du caractère "x". De cette manière, une modification de la taille du texte modifiera également la taille des cases de menu.
 
Accessoirement, tu peux également jouer avec la propriété "white-space" (white-space: nowrap) mais les liens risquent alors de sortir des cases.

Comment sont nesté tes éléments? les inputs et selects sont dans les <label> ou en dehors?
 

Elles sont très bien ces questions

Quelle rapidité de réponse =)
 
1/ Pour la variable: si je laisse le navigateur adapter la largeur du menu, comment je fais pour que la corps de ma page qui se trouve a la droite du menu prenne toute la place qu'il reste dans la fenêtre, ni plus ni moins? Bref, est il possible de calculer la taille du conteneur du corps à partir de celle du conteneur du menu?
 
2/ Mon appli n'étant déployée que localement, je peux faire une copie d'écran si ça te convient. Mais après manger =) Bo appétit d'ailleurs!!

Bon finalement je ne suis pas encore partie ='(
 
Donc, voila les screenshot:
Dans IE (c'est tout beau, c'est aligné):

 
Dans FF (beurk!   ):

 
Dans le code les inputs ets select sont en dehors du label, du style :

 
Masklinn merci pour l'explication sur em, je suis bien contente d'avoir enfin compris ce que signifiait cette unité =)
 
/me rêve d'avoir un prof es-css sous la main tous les jours au taff, qu'est ce que ca serait plus simple.
 
Bon sur ce, je vais me remplir la panse, elle fait trop de bruit, ca m'empeche de réflechir!!!

display: block sur tes labels?

tes labels sont en inline par défaut
un élément inline (enligne) ne peut être redimensionné (c'est la norme) mais IE fait pas comme tout le monde
donc du coup tu dois mettre tes label en display:block
et un float:left;  afin de les retrouver à gauche des inputs.
 
et normalement tu devrais y trouver ton compte

Sinon, tu peux mettre les labels en inline-block/-moz-inline-box...

skeye, c'est quoi inline-block/-moz-inline-box?
 
Car en mettant display:block; float:left; sur mes labels du coup les input/select ils se retrouve au dessus de leur label ='(
 
Faut-il que j'enveloppe les input/select dans un div/span sur lequel je mettrais float:left; aussi?
 
 
PS: l'un de vous ne voudrais pas me refiler son adresse msn/yahoo/... que je puisse le harceler de mes questions en direct? Non, pas de maso? erf... tant pis...

Essaye de mettre ça sur tes labels :
 display:-moz-inline-box;
 display:inline-block;
 
tu pourras leur donner une taille.

merci skeye
 
Il faut absolument mettre les 2 pour que ça marche? Est-ce que tu pourrais m'expliquer ce que ça fait exactement, histoire que je comprenne ce que je fais quand même?

 
Oui il faut mettre les 2...inline-block est la propriété officielle, mais elle n'est pas comprise (une fois n'est pas coutume) par mozilla...qui a le style propriétaire -moz-inline-box pour obtenir le même résultat.
 
Un peu plus d'infos là :
http://www.quirksmode.org/css/display.html#inlineblock

Merciiiiiiiiiii =)

Nouvelle question:
 
3/ Est ce qu'on peut choisir la taille de l'interligne? (j'erre de page en page à la recherche de la réponse mais je ne trouve pas, et je commence à en avoir marre alors je vous appelle encore à l'aide...)
(Si je mets dans ma page 1 seul <br> mes input/select sont tous collés, si j'en mets 2 ils sont trop espacés, ca prends trop de place.)

attributs margin/margin-top/margin-bottom.

Pour un interligne ce serait line-height

Merci encore =)

Kikou me revoilou! (grace a notre ami bilou) (pt1 ca rime en plus =) )
 
Bon donc, voici venir la question suivante car IE me fait du caca en barre (normal mais beurk).
 
4/ J'ai 3 div définis dans ma css dont voici qq extraits.

 
"navcol" est la colonne de gauche, "main" le cadre principal (à droite de navcol), et "formulaire" est inclus dans "main".
Sur une page ou dans le formulaire je n'ai en gros qu'une liste (select) de taille fixe, notre ami IE affiche bien tout correctement, c'est-à-dire que le div "formulaire" prend bien tout la largeur disponible de la fenetre.
Sur la page suivante (où le formulaire est rempli de tas de input, select, etc), ce zaouve de div "formulaire" limite sa taille à la taille du plus gros élément qu'il contient (à savoir une textarea).
Bref, je ne comprends pas pourquoi il fait ça, ce n'est absolument pas logique, pourriez-vous m'éclairer et m'aider à résoudre ce pb?
 
Question subsidiaire: est ce que le "position:absolute" de mon div "formulaire" sert à qqch? (je ne sais plus pkoi je l'ai mis )
 

Non, enlève le

bon, j'ai testé en enlevant, ben après c'est tout moche dans FF c'est que ça doit bien servir à qqch, donc je laisse. D'autant plus que ça ne change rien à mon pb d'affichage dans IE

Bon, j'ai toujours ce vilain pb de IE sauf que la c'est quand même plus grave puisque cet abruti réduit la largeur du div "formulaire" à la taille d'une select box soit à peine 50 px, ca qui rend la page illisible. J'ai bien essayé de mettre un min-width mais c'est limite s'il me répond pas "cause à mon cul, ma tête est malade!". Je ne sais vraiment pas comment m'en sortir, et mon client il va pas être content si je lui dis en arrivant "ça marche pas sous Ie, mais c'est normal c'est de la merde, zavez qu'à utiliser FF"...
Please help me!!!!

Pourquoi position:absolute? Tu lui donnes pas de largeur?

Ben non, je lui donnais pas de largeur.
Maintenant je lui donne une max et une min-width, c tout.

Si tu lui donnes pas de largeur il s'adapte au contenu, c'est normal...

Hier on m'a dit que si je donne pas de largeur il prend toute la place qu'il a... (ce que fait visiblement FF, et meme IE pour certaines pages).
Et puis vu qu'il a un min-width, pkoi il ne le respecte pas?
Pis j'ai encore un nouveau pb: Moi je bosse avec un écran en 1280*1024 mais je dois optimiser le bidule chose pour du 1024*768. Et en 1280 tout s'affiche nickel, mais en 1024, il me colle une scrollbar horizontale pour du vide à droite que ne devrait même pas être.
Plus ça va, moins je comprends, j'ai les neurones qui surchauffent et qui éclatent, c affreux...
 
 
Edit: Erf, oubliez le pb de la scrollbar, je crois que j'ai (enfin) trouvé!!!! Une dernière largeur fixe qui trainait et qui m'avait échappée... Zavez pas des yeux à vendre? les miens fonctionnent de plus en plus mal... à moins que ce ne soient les neurones...

IE ne reconnait pas min-width.
Pour le 1024, je te recommande l'extension web developper de firefox, qui te permet de redimensionner automatiquement le navigateur à la taille que tu veux pour voir le résultat...

Ouais on arrete pas de m'en parler de cette extension, mais je suis bete et bornée et je ne l'ai tjs pas installée ;P Faudrait que je le fasse!!!
Donc, c'est bien ce que je pensais donc le pb de la scrollbar en 1024 est reglé.  
Mais je ne comprends pas pkoi ce crétin de IE chie dans la colle. Le comble c'est qu'il m'affiche la page avec le div comme il faut (enfin presque): il prend toute la page (donc ca passe). Et dedans j'ai 2 listes dont les options de la seconde dépendent du choix effectué dans la première. J'ai donc utilisé une XMLHTTPRequest pour aller chercher en base les options de la 2eme liste suivant l'option sélectionnée dans la première. Jusque là, c'est très bien.  
Au chargement de la page, la première liste indique une option vide (donc pas de XMLHTTPRequest de faite) et la seconde liste est vide. Et l'affichage est bien (comme dit précédement). Et quand je sélectionne un élément dans la première liste, au retour de la requete, il me pourri ma page en réduisant le div "formulaire" à un simple bandeau vertical de la largeur de la première liste.
Je ne comprends pas pkoi il fait ça. Je me dis que ça doit être lié au code que le js affiche en retour de la request, pourtant c'est un simple boutr de jsp qui affiche un span avec la liste remplie... no comprende

ah...J'ai pu constater aussi qu'IE aimait pas vraiment qu'on lui fasse apparaitre/disparaitre des éléments après coup...ça devient complexe, ton truc...

Je n'ai jamais dit que c'était simple.
Et puis je ne fais rien apparaitre ni disparaitre, enfin pas vraiment.
Au départ dans la formulaire j'ai un <span id="truc"> avec dedans la seconde liste, vide. Le js qui effectue la requete se contente de remplacer le contenu de ce span (à savoir la liste vide) par la même liste, remplie. Donc je vois pas pkoi ca marche pas sous IE. J'en ai vraiment ras la casquette (pour rester polie) de ce navigateur de daube. J'arrete pas de m'arracher les cheveux à cause de ça, ça me fait perdre un temps fou, et le client il s'en fout.  
 
Bon, sinon, je n'ai pas d'autre solution que ça pour modifier dynamiquement le contenu de ma seconde liste. J'ai bien vu des exemple en js/php ou on ajoute les options une à une, mais je ne vois pas comment faire dans mon contexte js/jsp/struts. Et puis de toute façon même comme ça, je suis sure que ça ne lui plairait pas à l'autre allumé de IE.
Ouiiiiiiiiiiiiiiiiiiiiiiin!!!!

Tu posterais le code html/css obtenu, qu'on voie un peu ce que ça donne?

Je mets juste le passage en question parce que sinon c'est vraiment long je trouve ça illisible sur un forum, et puis il n'y a que ça qui change alors... 'fin si tu as besoin d'autre chose, demande =) (NB: j'ai remis en forme (paske le code généré est crade) et j'ai épuré les listes (trop longues))
Avant:

 
Après:

 
Le style css appliqué étant celui appliqué au div parent "formulaire":

(oui oui, c'est le même que tout à l'heure).
 
(Je ne vois pas trop ce que tu vas pouvoir tirer de cela, mais c'est toi le pro ^^)

Bon, j'en ai assez fait pour aujourd'hui, j'ai la tête qui va exploser. Je te remercie beaucoup de ton aide précieuse skeye. Bonne soirée!

Hé hop, j'ai encore un nouveau pb, sous FF cette fois.
Je travaille sur le header de ma page qui doit contenir sur la partie gauche, de taille variable, le titre et un fond queconque, et sur la partie droite, de taille fixe, le user connecté et qq broutilles.
 
J'ai défini 3 div dans ma CSS:  

 
Mon code HTML:

 
Mon problème est que Firefox m'affiche bien les div imbriqués correctement, mais le tout avec en haut un décalage d'une dizaine de px qui laisse une bande blanche... D'où est-ce que ça peut provenir? qu'est ce que j'ai mal fait? Comment corriger? Vais-je être obligée de faire un tableau pour obtenir le résultat escompté?

La marge sur le <h4> peut-être...

Il n'y a pas de marge sur le h4, mais j'ai tout de même testé en enlevant carrément la balise et ça ne change rien du tout.
Je crois que pour une fois, je vais laisser tomber les div et me rabattre sur un petit tableau, tant pis...

Nonononononon, faut pas abandonner aussi facilement 2 sec, on va trouver

T'aurais pas un lien vers la page ? Ce serait 100x plus simple

Ben non, c'est une appli locale, elle n'est déployée que sur ma machine, de toute manière je n'ai pas le droit de la déployer ailleurs.
(Et je n'abandonne pas facilement, mais bon, ça fait 2h que je suis dessus).
Pkoi ya que des billes en webdev dans ma boîte? ='(

C'est vraiment pas pratique une appli en locale, impossible par exemple de la passer au validateur des critères d'accessibilité ( http://webxact.watchfire.com/ )
 
 
Bon sinon pour ton blême, c'est pas le h4, mais le h1, donc rajoute :

Oui je sais bien que ça n'est pas pratique en local. En plus on utilise tout une archi de dev compliquée, jpe même pas emmener le bébé chez moi pour me faire aider par mon geek perso!  
Si c'est moi qui avait choisi, je n'aurais jamais utilisé struts, ses tiles à la con, des jsp et tout le tintouin... 'fin bref, maintenant je dois faire avec, et jpe rien vous donner pour que vous m'aidiez ='(
Bon, je teste pour le h1 =)