problème d'affichage

problème d'affichage - HTML/CSS - Programmation

Marsh Posté le 26-08-2009 à 22:27:39    

Bonjour,
 
Je ne sais pas pourquoi mais j'ai une barre blanche en-dessous de mon pied de page et le bloc blanc avec du texte dépasse à droite
 
 
[img]http://nsa08.casimages.com/img/2009/08/26/mini_090826102751330874.jpg[/img]
 
code:

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4.  <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
  5.  <title>Nouvelle</title>
  6.  <link href="css.css" rel="stylesheet" media="screen">
  7. </head>
  9. <body>
  10.   <div id="conteneur">
  11.   <div id="bandeau"><p class="ban_accueil"><a href="default.php"><img src="images/menu/accueil_t.png" border="0" alt="Bureau"></img></a> </p></div>
  13. <div id="contenu">Nouvelle page</div>
  15.     <div id="pied"><img src="images/structure/pied.gif" alt=""></div>
  16.  </div>
  17. </body>
  18. </html>


 
CSS:

Code :
  1. *{
  2. margin : 0;
  3. padding : 0;
  4. }
  6. #conteneur{
  7. position: relative;
  8. width: 740px;
  9. background-color : white;
  10. color : black;
  11. border : 10px solid #d4b77c ridge;
  12. margin-left: auto;
  13. margin-right: auto;
  14. min-height: 100%;
  15. <!--[if IE]>
  16. <style type="text/css">div#corps{height: 100%;}</style>
  17. <![endif]-->
  18. }
  20. #bandeau{
  21. background: url(images/structure/ban.jpg) no-repeat;
  22. width: 740px;
  23. margin: auto;
  24. }
  26. .ban_accueil{
  27.     color: #FFFFFF;
  28.     text-align: right;
  29.     margin-right: 15px;
  30.     padding-top: 80px;
  31. }
  33. #contenu{
  34. float: left;
  35. padding-top : 10px;
  36. padding-bottom : 10px;
  37. border-bottom: 1px solid #808080;
  38. border-left: 1px solid #808080;
  39. border-right: 1px solid #808080;
  40. width: 740px;
  41. min-height: 100%;
  42. <!--[if IE]>
  43. <style type="text/css">div#corps{height: 100%;}</style>
  44. <![endif]-->
  45. }
  47. .ban_txt {
  48.   color: #FFFFFF;
  49.   text-align: center;
  50.   padding-top: 95px;
  51. color : #ffffff;
  52. font-size : 24px;
  53. font-family : Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular, serif;
  54. }
  56. #pied{
  57. clear: both;
  58. position: relative;
  59. bottom: auto;
  60. }

Reply

Marsh Posté le 26-08-2009 à 22:27:39   

Reply

Marsh Posté le 27-08-2009 à 02:26:51    

depuis quand a-t-on le droit de mettre ça dans une feuille de style ?

Code :
  1. <!--[if IE]>
  2. <style type="text/css">div#corps{height: 100%;}</style>
  3. <![endif]-->

 
 
enlève moi ces trucs horrible de la feuille de style.
tu dois déclarer une feuille propre à IE et mettre les bouts de CSS nécessaire à IE
mais franchement tu n'as pas et le commentaire conditionnel c'est dans le code HTML qu'on le retrouve, lors de l'appel à la CSS spécifique à IE
 
Là n'est pas ton pb principal,  
ton problème vient du fait que l'image laisse une petite marge de 4px sous elle, cela provient du fait que l'image est en display:inline.
 
Rajoute un display:block sur cette image et ça sera réglé.
 
par ailleurs je te propose une correction de ta CSS atroce afin que tu ne fasse pas de conneries à l'avenir sur cette CSS :  
 

Code :
  1. *{
  2. margin : 0;
  3. padding : 0;
  4. }
  5. #conteneur{
  6. position: relative;
  7. width: 740px;
  8. background-color : white;
  9. color : black;
  10. border : 10px solid #d4b77c;
  11. margin: 0 auto;
  12. }
  13. #bandeau{
  14. background: url(images/structure/ban.jpg) no-repeat;
  15. margin: auto;
  16. }
  17. .ban_accueil{
  18.     color: #FFFFFF;
  19.     text-align: right;
  20.     margin-right: 15px;
  21.     padding-top: 80px;
  22. }
  23. #contenu{
  24. overflow:hidden; zoom:1;
  25. padding : 10px 0;
  26. border: 1px solid #808080;
  27. border-top: none;
  28. }
  29. .ban_txt {
  30. color: #fff;
  31. text-align: center;
  32. padding-top: 95px;
  33. color : #fff;
  34. font-size : 24px;
  35. font-family : Verdana, Arial, Helvetica;
  36. }
  37. #pied img{
  38. display:block;
  39. }


---------------
Blablaté par Harko
Reply

Marsh Posté le 27-08-2009 à 03:42:18    

ça fonctionne,  
Merci de ton aide!
 

Reply

Marsh Posté le 27-08-2009 à 08:33:55    

tu peux p-ê virer ton </img> aussi ?


---------------
NewsletTux - outil de mailing list en PHP MySQL
Reply

Marsh Posté le 27-08-2009 à 13:15:01    

celui du pied de page ?

Reply

Sujets relatifs:

Leave a Replay

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