CSS: pb de float

CSS: pb de float - HTML/CSS - Programmation

Marsh Posté le 09-08-2005 à 15:38:05    

salut
j'ai un petit problème de css. j'aimerais bien faire ça:
http://funkysport.free.fr/aeron/layout.jpg
 
et ça marche bien avec IE, mais pas du tout avec firefox. je suppose donc que c'est mon css qui est pas bon, mais j'arrive pas à m'en sortir. d'habitude en tatonnant un peu ça passe...
 
le code html:
 

Code :
  1. <div id="home">
  2.    <h3>Pourquoi passer par nous?</h3>
  3.    <div id="home1">
  4.     <h4><span>Des taux de crédit bas</span></h4>
  5.     <p>Vous avez la certitude d'obtenir <span class="gros">les taux de crédit parmi les plus bas</span> ! Nous démarchons pour vous toutes les grandes banques françaises afin de négocier le meilleur taux en fonction de votre situation.</p>
  6.     <p><span class="gros">Vous pouvez économiser jusqu'à 40%</span>* sur le coût de votre assurance de prêt grâce à notre partenariat avec <strong>Nextcap Finance</strong>.</p>
  7.     <p><span class="petit">* Pour un prêt de 75000€ sur 15 ans, une différence de taux d'assurance annuel de 0,2% par rapport à l'assurance de la banque représente 2300€ d'économies. <br />Produit de la gamme de nos compagnies partenaires</span></p>
  8.    </div>
  9.    <div id="home2">
  10.    <h4><span>Des services</span></h4>
  11.     <p>Grâce à notre équipe de conseillers, <span class="gros">vous gagnez du temps</span> (nous faisons les démarches de recherche à votre place) <span class="gros">et de l'argent</span> (nous vous conseillons pour monter au mieux votre projet de financement).</p>
  12.    </div>
  13.    <div id="home3">
  14.     <h4><span>150€ de frais de dossier</span></h4>
  15.     <p>Les frais de dossier ne sont que de <span class="gros">150€</span> et <strong>se substituent aux frais de dossier des banques</strong>. De plus, vous ne payez rien tant que le prêt n'est pas définitivement signé : <span class="gros">rien ne vous oblige à accepter nos propositions de prêt</span>.</p>
  16.    </div>
  17.   </div>


 
et un extrait du css :
 

Code :
  1. #home h3 {
  2. font-size: 1.4em;
  3. border-bottom: 1px dotted #999;
  4. }
  5. #home img {
  6. position: relative;
  7. top: 5px;
  8. }
  9. #home1, #home2, #home3 {
  10. display: block;
  11. border: 1px dotted #999;
  12. padding: 0;
  13. width: 270px;
  14. }
  15. #home1 {
  16. float: left;
  17. margin-right: 15px;
  18. }
  19. #home3 {
  20. margin-top: 16px;
  21. }
  22. #home h4 {
  23. margin: 0;
  24. padding: 0;
  25. width: 270px;
  26. height: 60px;
  27. }
  28. #home h4 span {
  29. display: none;
  30. }
  31. #home p {
  32. margin: 0;
  33. padding: 5px;
  34. text-align: justify;
  35. }


 
si quelqu'un a une idée, merci :)

Reply

Marsh Posté le 09-08-2005 à 15:38:05   

Reply

Marsh Posté le 10-08-2005 à 10:04:19    

Une solution possible parmis d'autres :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  3. <head>
  4. <title>Sit</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  6. <style type="text/css">
  7.  * {
  8.   margin:   0;
  9.   padding:  0;
  10.  }
  11.  body {
  12.   margin:   0 auto;
  13.   padding:  1px;
  14.   width:   414px;
  15.   border:   1px solid black;
  16.  }
  17.  div {
  18.   width:   200px;
  19.   height:   200px;
  20.   border:   1px solid black;
  21.   background-color: green;
  22.   margin-top:  10px;
  23.  }
  24.  #home1 {
  25.   float:   left;
  26.   height:   350px;
  27.  }
  28.  #home2 {
  29.   float:   right;
  30.  }
  31.  #home3 {
  32.   float:   right;
  33.   clear:   right;
  34.  }
  35.  hr {
  36.   visibility:  hidden;
  37.   width:   0;
  38.   height:   0;
  39.   border:   none;
  40.   clear:   both;
  41.  }
  42. </style>
  43. </head>
  44. <body>
  45. <h1>Site</h1>
  46. <div id="home1"></div>
  47. <div id="home2"></div>
  48. <div id="home3"></div>
  49. <hr />
  50. </body>
  51. </html>


le <hr> de la fin est la pour pousser le body en dessous des <div> en float. Ce n'est pas tres beau mais c'est IE qui impose cette technique (CSS2 permettant de faire plus elegant).

Reply

Marsh Posté le 10-08-2005 à 14:57:02    

oh merci beaucoup :jap:
ça marche niquel en effet avec le <hr /> :)
encore merci

Reply

Sujets relatifs:

Leave a Replay

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