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>
  8. <body>
  9.   <div id="conteneur">
  10.   <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>
  11. <div id="contenu">Nouvelle page</div>
  12.     <div id="pied"><img src="images/structure/pied.gif" alt=""></div>
  13.  </div>
  14. </body>
  15. </html>


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

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