[HTML / CSS] problèmes avec SPAN vide

problèmes avec SPAN vide [HTML / CSS] - HTML/CSS - Programmation

Marsh Posté le 01-12-2003 à 10:24:31    

salut!
 
j'ai un ptit comportement non souhaité avec mozilla; en effet, j'essaye sur une ligne d'avoir trois "cases" (donc utilise des span pour pas que ca aille a la ligne et pour pas devoir spécifier des position:absolute; qui impliqueraient de tout gérer à la mano); ci-dessous un exmple:

Code :
  1. <html>
  2. <head>
  3. <style>
  4. .bloc1 {width:20px; height:20px; background-color:blue;}
  5. .bloc2 {width:20px; height:20px; background-color:white;}
  6. .bloc3 {background-color:red;}
  7. </style>
  8. </head>
  9. <body>
  10. <span class="bloc1"></span>
  11. <span class="bloc2"></span>
  12. <span class="bloc3">coucou</span>
  13. </body>
  14. </html>


 
ce code fait ce que je souhaite sous IE mais pas sur mozilla, où les éléments bloc1 et bloc2 ne s'affichent pas (et c bloc3 qui s'affiche) et que la seule façon que ça les affiche, c en mettant du contenu à l'intérieur; je ne sais pas si j'oublie quelque chose, mais ce que j'attendais c'est que, ayant spécifié la taille des blocs/classes css, qu'il les respecte !
 
Si quelqu'un a une idée de ce qui peut clocher là ? merci beaucoup car je trouve vraiment pas :/


Message édité par k666 le 01-12-2003 à 10:45:55
Reply

Marsh Posté le 01-12-2003 à 10:24:31   

Reply

Marsh Posté le 01-12-2003 à 10:37:48    

Les spans sont des balises inline : elle ne sont pas faites pour avoir des dimensions (width, height). Pour cela il faut utiliser des balises en bloc comme div.


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 01-12-2003 à 10:44:43    

et du coup il faut donc spécifier des positionnements absolus avec tous les problèmes que celà engendre ?

Reply

Marsh Posté le 01-12-2003 à 11:06:13    

Dans ce genre de cas c'est pas plus simple d'utiliser un tableau ? :D


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 01-12-2003 à 11:30:09    

j'ai demandé sur mozillazine et en effet c pas un bug, mais c mon ignorance!
un mec m'a donné la soluce, pour mes span, il suffit de rajouter:
 
display:block; float:left;

Reply

Marsh Posté le 01-12-2003 à 11:39:23    

si c'est pour le foutre en display block autant utiliser un div, vu qu'un span c'est juste un div qui est en display inline :o


Message édité par antp le 01-12-2003 à 11:39:39

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 01-12-2003 à 11:41:13    

et un espace insécable à l'intérieur?

Reply

Marsh Posté le 01-12-2003 à 13:02:04    

display:block; float:left; >>>
 
Inutile de mettre un display block car en le positionnant en flottant il devient automatiquement un bloc ;)
 
Mais comme le dit antp : passer une balise inline en bloc est complètement inutile puisqu'une autre balise remplit EXACTEMENT cette fonction : <div>


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 01-12-2003 à 13:02:48    

Urd-sama a écrit :

et un espace insécable à l'intérieur?


Et pourquoi pas des spacer.gif ?  :D  ...  :non:


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 01-12-2003 à 13:06:14    

SIBELIUS a écrit :


Et pourquoi pas des spacer.gif ?  :D  ...  :non:  


bon on est d'accord, c'est une solution de merde  :sol:

Reply

Marsh Posté le 01-12-2003 à 13:06:14   

Reply

Marsh Posté le 01-12-2003 à 14:25:05    

:d
 
j'ai enfin compris (ou appris) ce que c'était le inline et le block:jap:

Reply

Marsh Posté le 01-12-2003 à 14:51:11    

K666 > il suffisait de demander ;) http://www.alsacreations.com/articles/div/


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Sujets relatifs:

Leave a Replay

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