Se connecter avec
S'enregistrer | Connectez-vous

espace entre 2 bloc div lorsque j'ai du texte

Dernière réponse : dans Programmation

Bonjour, lorsque que j'écrit du texte sur ma page web, il y a toujours une espace d'environ 10px qui se met entre mes 2 bloc "head2" et "head3". Voici mon code : 

  1. <body>
    

  2.         <div class="head1"></div>
    

  3. 		<div class="head2">
    

  4. 			<a href="http://www..."><img src="images/bla.jpg" class="boutonMenu" alt="bla" /></a>
    

  5. 			<a href="http://www..."><img src="images/bla.jpg" class="boutonMenu" alt="bla" /></a>
    

  6. 			<a href="http://www..."><img src="images/bla.jpg" class="boutonMenu" alt="bla" /></a>
    

  7. 			<a href="http://www..."><img src="images/bla.jpg" class="boutonMenu" alt="bla" /></a>
    

  8. 			<a href="http://www..."><img src="images/bla.jpg" class="boutonMenu" alt="bla" /></a>
    

  9. 		</div>
    

  10. 		<div class="head3">
    

  11. 			<div class="left">
    

  12. 				<div class="actualite1"></div>
    

  13. 				<div class="actualite2"></div>
    

  14. 				<div class="actualite2"></div>
    

  15. 				<div class="bottomtop"></div>
    

  16. 			</div>
    

  17. 			<div class="center">
    

  18. 			<p>[b]Text ici[/b]</p>
    

  19. 			</div>
    

  20.  
  21. 		</div>
    

  22.    </body>


Donc, quand je met du texte à l'endroit "Text ici" sur ma page jai un espace entre les 2 block et entre ceux-ci on voit mon background.

Voici mon css : 

  1. body {
    

  2. background-image: url('images/background.jpg');
    

  3. margin: 0;
    

  4. font-family: verdana, arial, sans-serif;
    

  5. font-size: 12px;
    

  6. }
    

  7.  
  8. .head1 {
    

  9. background: url('images/head1.jpg');
    

  10. width: 780px;
    

  11. height: 123px;
    

  12. margin: 0px auto;
    

  13. }
    

  14.  
  15. .head2 {
    

  16. background: url('images/head2.jpg');
    

  17. width: 780px;
    

  18. height: 34px;
    

  19. margin: 0px auto;
    

  20. }
    

  21.  
  22. .head3 {
    

  23. background: url('images/backgroundCenter.jpg');
    

  24. width: 780px;
    

  25. height: 550px;
    

  26. margin: 0px auto;
    

  27. }
    

  28.  
  29. .boutonMenu {
    

  30. float: left; 
    

  31. border: 0;
    

  32. }
    

  33.  
  34. .left {
    

  35. position: absolute;
    

  36. width: 266px;
    

  37. height: 519px;
    

  38. }
    

  39.  
  40. .actualite1 {
    

  41. background: url('images/actualite1.jpg');
    

  42. width: 266px;
    

  43. height: 163px;
    

  44. }
    

  45.  
  46. .actualite2 {
    

  47. background: url('images/actualite2.jpg');
    

  48. width: 266px;
    

  49. height: 163px;
    

  50. }
    

  51.  
  52. .bottomtop {
    

  53. background: url('images/bottomTop.jpg');
    

  54. width: 266px;
    

  55. height: 30px;
    

  56. }
    

  57.  
  58. .center {
    

  59. margin-left: 300px;
    

  60. }


Merci

Autres pages sur : espace bloc div texte

Lassé par la pub ? Créez un compte
Expert Programmation

La source de ton problème vient des balises de paragraphes de ton div "center". Rajoute à ton css une ligne pour spécifier que le bloc paragrpahe soit avoir une marge de 0 :
  1. .center p {
    

  2. margin: 0;
    

  3. }


Par ailleurs évite les noms litigieux pour tes blocs ; center, left et head par ex peuvent prêter à confusion pour l'interprétation de ton code par les navigateurs, car ils correspondent aussi à des commandes html...

Shino-Genin a dit :
Par ailleurs évite les noms litigieux pour tes blocs ; center, left et head par ex peuvent prêter à confusion pour l'interprétation de ton code par les navigateurs, car ils correspondent aussi à des commandes html...

Non, par les humains. Un navigateur ne se trompe pas entre "center" et ".center".
Lassé par la pub ? Créez un compte

Créer un nouveau sujet