CSS - les blocs float:left acceptent mal les padding et margin

CSS - les blocs float:left acceptent mal les padding et margin - HTML/CSS - Programmation

Marsh Posté le 19-01-2006 à 12:41:49    

Bonjour à tous  :)  
 
Cela fait preque deux jours que je suis sur cette page qui m'a posé énormemment de problemes. Je ne suis pas un expert en CSS mais je veux aussi être aux normes. J'ai fait le maximum, maintenant j'ai besoin d'un coup de main ou d'une ligne directive  ;)  
 
sur cette page : xxxxxxxxxxxxxxxxxxxxxxxx
 
1- Sous Firefox il y a un souci de padding(?) à droite des blocs rouges de titre, alors qu'ils devraient être alignés avec l'image d'en dessous.  
pourtant la taille (width) équivaut à la somme de 320px pour le texte et de 150px pour l'image, cad 470px.......  
 
2- autre souci les padding (encore) à l'intérieur du bloc texte.  
Si j'ajoute un padding-left par ex, l'image descend et fait comme si elle n'avait pas de float:left!!  
 
3- même chose pour le bloc de texte du bas (rose) qui n'accepte pas les paddings car deux blocs en float:left
j'en ai fait deux. celui du dessus, se monte très bien sous Firefox mais avec  IE il y boulette!
 
Que faire?  
j'ai beau jouer avec les padding/margin, pas de résultat.  
merci de votre coup de main  :)  
 
Cevi


Message édité par miltonis le 08-02-2006 à 15:55:24
Reply

Marsh Posté le 19-01-2006 à 12:41:49   

Reply

Marsh Posté le 19-01-2006 à 13:12:48    

euh.
j'oubliais le CSS concerné :

Code :
  1. .width_titles {
  2. width: 520px;
  3. voice-family: "\"}\"";
  4. voice-family:inherit;
  5. width: 470px;
  7. }
  8. h2#title01_star {
  9. clear: both;
  10. background-color: #CC3300;
  11. color: #FF9999;
  12. font-family: Verdana, Arial, Helvetica, sans-serif;
  13. font-size: 10px;
  14. font-weight: bold;
  15. text-align: left;
  16. padding: 2px 0 0 5px;
  17. margin: 0;
  18. }
  19. h1#title_star {
  20. background-color: #CC3300;
  21. color: #FFFFFF;
  22. font-family: Verdana, Arial, Helvetica, sans-serif;
  23. font-size: 10px;
  24. font-weight: bold;
  25. text-align: left;             
  26. padding: 0 0 3px 5px;
  27. margin: 0;
  28. }
  29. div#star {
  30. background-image: url('Pics/fond_content.gif');
  31. width: 470px;
  32. height: 122px;
  33. padding: 0 0 0 0;
  34. margin: 0;
  35. }
  36. div#text_star {
  37. float: left;
  38. background-image: url('Pics/fond_content.gif');
  39. /*padding: 0 4px 0 6px;*/
  40. margin: 0;
  41. text-align: justify;
  42. width: 320px;
  43. height: 122px;
  44. }
  45. div#image_star {
  46. float: left;
  47. width: 150px;
  48. height: 122px;
  49. margin: 0;
  50. }

Reply

Sujets relatifs:

Leave a Replay

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