[HTML, CSS] Calcul de la largeur minimale

Calcul de la largeur minimale [HTML, CSS] - HTML/CSS - Programmation

Marsh Posté le 22-01-2003 à 09:46:03    

Je ne suis pas très futé.
 
J'ai une image de 320px de large. Je lui rajoute le style :

border: 1px solid black;


 
Je la mets dans un div avec :

padding: 5px;


 
J'ajoute une bordure à mon div :

border: 1px solid black;


 
La question que je me pose, c'est quelle est la valeur minimale de width pour mon div ?
 
Le calcul que je fais, c'est 5 + 1 + 320 + 1 + 5 = 332px
IE semble s'y prendre autrement, et visuellement, on dirait plutôt 322px. C'est quoi la bonne valeur ?


Message édité par Cherrytree le 22-01-2003 à 11:22:34

---------------
Le site de ma maman
Reply

Marsh Posté le 22-01-2003 à 09:46:03   

Reply

Marsh Posté le 22-01-2003 à 09:47:40    

Cherrytree a écrit :

Je ne suis pas très futé.
 


 
quoted ;)

Reply

Marsh Posté le 22-01-2003 à 10:16:41    

Reply

Marsh Posté le 22-01-2003 à 10:49:27    

il faut utiliser un boxhack pour que ie ait un div correct.
en gros :
 
#mondiv {
declaration du div pour IE
declaration qui arrete la lecture du css pour IE
declaration du div WC3 compliant
}
 
fais une recherche  ;)

Reply

Marsh Posté le 22-01-2003 à 11:24:07    

Ouais ben, je viens de lire et je trouve que ça puxor des loutres ce hack. Tout comme les navigateurs puxorent. Ras le cul, je préfère changer de design pour plus sobre que faire du code comme ça.


---------------
Le site de ma maman
Reply

Marsh Posté le 22-01-2003 à 11:25:55    

Cherrytree a écrit :

je préfère changer de design pour plus sobre que faire du code comme ça.


 :jap:

Reply

Marsh Posté le 26-01-2003 à 14:39:17    

Cherrytree a écrit :

Je ne suis pas très futé.
 
J'ai une image de 320px de large. Je lui rajoute le style :

border: 1px solid black;



Donc sa largeur totale est de : 320 + 2 = 322px;

Cherrytree a écrit :

Je la mets dans un div avec :

padding: 5px;


 
J'ajoute une bordure à mon div :

border: 1px solid black;


 
La question que je me pose, c'est quelle est la valeur minimale de width pour mon div ?
 
Le calcul que je fais, c'est 5 + 1 + 320 + 1 + 5 = 332px
IE semble s'y prendre autrement, et visuellement, on dirait plutôt 322px. C'est quoi la bonne valeur ?


Chose étonnante cette fois, c'est IE qui fait le bon calcul (tu utilises IE 6 avec un DOCTYPE Strict ?).
La largeur de ton DIV doit être de 322px. C'est ce à quoi s'attendent IE 6 et Mozilla. Par contre IE 5.x attendront une largeur de 332px.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 26-01-2003 à 17:08:23    

gm_superstar a écrit :


Donc sa largeur totale est de : 320 + 2 = 322px;
 
Chose étonnante cette fois, c'est IE qui fait le bon calcul (tu utilises IE 6 avec un DOCTYPE Strict ?).
La largeur de ton DIV doit être de 322px. C'est ce à quoi s'attendent IE 6 et Mozilla. Par contre IE 5.x attendront une largeur de 332px.

Ah ! ! ! ça c'est super intéressant ! Dans ce cas, mon design n'est pas complètement foutu. Euh, j'ai une question, grand maître (c'est gm) : le padding c'est pas dans la box que je dois le compter ? Il me semblait que si !


---------------
Le site de ma maman
Reply

Marsh Posté le 26-01-2003 à 17:09:06    

Au fait, c'est IE 6, avec du XHTML 1.1, donc oui, c'est du strict.


---------------
Le site de ma maman
Reply

Marsh Posté le 26-01-2003 à 17:23:38    

Cherrytree a écrit :

Ah ! ! ! ça c'est super intéressant ! Dans ce cas, mon design n'est pas complètement foutu. Euh, j'ai une question, grand maître (c'est gm) : le padding c'est pas dans la box que je dois le compter ? Il me semblait que si !


Non. Si j'écris :
 
#maBoite {
  width: 100px;
  padding: 5px;
  border: 2px solid black;
}
 
Les 100 pixels représentent la largeur à l'intérieur de la boîte réservée à ce que tu veux mettre dans ta boîte. Les 2 fois 5 pixels de padding n'entrent pas dans ces 100px de même que la bordure. C'est donc 100 pixels d'utilisable. En revanche, la largeur totale extérieure fera 114 pixels
 
Quant à eux, IE 5.x et IE 6 (en mode "non-standard" ) retirent à ces 100 pixels le padding et la bordure, soit plus que 86 pixels d'utilisables. La largeur totale extérieure fera, elle, bien 100 pixels.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 26-01-2003 à 17:23:38   

Reply

Marsh Posté le 26-01-2003 à 17:58:07    

Donc en fait, width, c'est uniquement la partie utilisable ! C'est pour ça que je comptais mal. Tout s'éclaire. Merci beaucoup. Soudain, j'ai foi dans le XHTML ! Il faut que j'aille témoigner de mon émerveillement sur le standard qu'est XHTML 1.1 ! Le topic des standards de codage est parfait pour cela.


---------------
Le site de ma maman
Reply

Marsh Posté le 26-01-2003 à 18:07:03    

Mais si tu veux que je ton site passe bien avec IE 5.x il faut utiliser le hack :/


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 26-01-2003 à 18:08:57    

gm_superstar a écrit :

Mais si tu veux que je ton site passe bien avec IE 5.x il faut utiliser le hack :/

Rien à foutre, ou presque. Je code en XHTML 1.1, pas de hack, pas de compromis ! Si c'est pas parfait sur IE 5, c'est pas grave. A terme, ce que j'écris sera correct partout. C'est ça qui compte.


---------------
Le site de ma maman
Reply

Marsh Posté le 26-01-2003 à 18:15:13    

Oui OK, mais avant même les normes il y a un précepte d'Internet qu'il faut garder à l'esprit : « que le site soit lisible quelque soit le moyen qu'on utilise pour le consulter »
Bref, rejeter, les utilisateurs d'IE 5 sous prétexte que tu fais du code conforme, n'est pas une bonne idée.
 
Bon maintenant si ton site est "lisible" (et pas "parfait" ) sous IE 5.x y'a plus de problème ;)


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 26-01-2003 à 19:25:29    

C'est précisément le cas : l'utilisateur IE5 se dira : celui-là, il est pas très bon graphiste.


---------------
Le site de ma maman
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed