Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1157 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  CSS: pb de float

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

CSS: pb de float

n°1173312
a e r o n
Posté le 09-08-2005 à 15:38:05  profilanswer
 

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. }
  6. #home img {
  7. position: relative;
  8. top: 5px;
  9. }
  11. #home1, #home2, #home3 {
  12. display: block;
  13. border: 1px dotted #999;
  14. padding: 0;
  15. width: 270px;
  16. }
  18. #home1 {
  19. float: left;
  20. margin-right: 15px;
  21. }
  23. #home3 {
  24. margin-top: 16px;
  25. }
  27. #home h4 {
  28. margin: 0;
  29. padding: 0;
  30. width: 270px;
  31. height: 60px;
  32. }
  34. #home h4 span {
  35. display: none;
  36. }
  38. #home p {
  39. margin: 0;
  40. padding: 5px;
  41. text-align: justify;
  42. }


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

mood
Publicité
Posté le 09-08-2005 à 15:38:05  profilanswer
 

n°1173714
afbilou
pouet your life
Posté le 10-08-2005 à 10:04:19  profilanswer
 

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">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  5. <head>
  6. <title>Sit</title>
  7. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  9. <style type="text/css">
  10.  * {
  11.   margin:   0;
  12.   padding:  0;
  13.  }
  14.  body {
  15.   margin:   0 auto;
  16.   padding:  1px;
  17.   width:   414px;
  18.   border:   1px solid black;
  19.  }
  20.  div {
  21.   width:   200px;
  22.   height:   200px;
  23.   border:   1px solid black;
  24.   background-color: green;
  25.   margin-top:  10px;
  26.  }
  27.  #home1 {
  28.   float:   left;
  29.   height:   350px;
  30.  }
  31.  #home2 {
  32.   float:   right;
  33.  }
  34.  #home3 {
  35.   float:   right;
  36.   clear:   right;
  37.  }
  38.  hr {
  39.   visibility:  hidden;
  40.   width:   0;
  41.   height:   0;
  42.   border:   none;
  43.   clear:   both;
  44.  }
  45. </style>
  46. </head>
  48. <body>
  50. <h1>Site</h1>
  52. <div id="home1"></div>
  53. <div id="home2"></div>
  54. <div id="home3"></div>
  56. <hr />
  58. </body>
  60. </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).

n°1173920
a e r o n
Posté le 10-08-2005 à 14:57:02  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  CSS: pb de float

 

Sujets relatifs
Positionner une image CSSPositionnement CSS
CSS inactifCSS centrer trois div sur une ligne
Problème de positionnement CSS[CSS] Astuce <div class="clr"> sur le float
[CSS] Problème avec boite en floatBug incorrigible sur IE6 (float - css - 2 ou 3 colonnes)
CSS/Float problèmeavec MSIE[CSS] Problème de placement de div avec float
Plus de sujets relatifs à : CSS: pb de float

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.069 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR