Problème d'alignement CSS dans les balises

Problème d'alignement CSS dans les balises - HTML/CSS - Programmation

Marsh Posté le 19-06-2009 à 18:55:16    

Bonsoir, je crée actuellement un site web avec une mise en page CSS.
 
Sous IE7 tout fonctionne à merveille, depuis quelques jours IE8 me mets un décalage de l'image... (pareil pour Firefox 3).
 
Je ne sais pas comment résoudre ce problème...
 
Voici l'image et les codes correspondants...
 
http://contactartisia.free.fr/artisia.jpg
 
Fichier PHP :

Code :
  1. (...)
  2. <script type="text/javascript"></script>
  3. <style type="text/css" title="currentStyle" media="screen">
  4.  @import "style/style.css";
  5. </style>
  6.     <style type="text/css">body {
  7. }
  8. </style></head>
  9. <body id="css-zen-garden">
  10. <div id="container">
  11. <div id="intro">
  12.  <div id="pageHeader">
  13.                  <h1><span></span></h1>
  14.      <h2><span></span></h2>
  15.                              (...)
  16.  <div id="quickSummary">
  17.   <p class="p1"><span></span></p>
  18.   <p class="p2"><span></span></p>
  19.  </div>
  20.  <div id="preamble">
  21.      <p class="p3"><span>(...)</span></p>
  22.      <p class="p4">(...)</p>
  23.    <hr />
  24.  </div>
  25. </div>
  26. <div id="supportingText">
  27.   <div id="benefits">
  28.                   (...)
  29.                </div>
  30. </div>
  31. </body>
  32. </html>


 
Fichier CSS :

Code :
  1. (...)
  2. /*===================
  3.     body elements
  4. ===================*/
  5. #container {
  6. position:absolute;
  7. width:790px;
  8. left:50%;
  9. margin-left:-395px;
  10. }
  11. #pageHeader {
  12. background:url(banner.gif) no-repeat top center;
  13. width:278px;
  14. height:185px;
  15. }
  16. #pageHeader h1, #pageHeader h2 {
  17. display:none;
  18. }
  19. #quickSummary {
  20. background:url(bg_header.gif) repeat-y;
  21. height:20px;
  22. }
  23. #quickSummary p{
  24. display:none;
  25. }
  26. #preamble {
  27. width:600px;
  28. background:url(bg_repeater.gif) repeat-y;
  29. padding:25px 45px 0px 35px;
  30. voice-family: "\"}\"";
  31. voice-family:inherit;
  32. width:520px;
  33. }
  34. #preamble h3 {
  35. display:none;
  36. }
  37. #preamble h3 span {
  38. visibility:hidden;
  39. }
  40. #preamble p.p1 {
  41. padding-left:30px;
  42. padding-right:30px;
  43. line-height:1.2em;
  44. font-style:italic;
  45. font-size:12pt;
  46. font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif;
  47. font-weight: bold;
  48. }
  49. #preamble p.p2 {
  50. /* background:url(preamble.gif) no-repeat top center;  */
  51. /* padding-top:150px;  */
  52. padding-top:15px;
  53. }
  54. #preamble p.p3 {
  55. padding-left:30px;
  56. padding-right:30px;
  57. line-height:1.2em;
  58. font-style:italic;
  59. font-size:18pt;
  60. font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif;
  61. font-weight: bold;
  62. }
  63. #preamble p.p4 {
  64. padding-left:30px;
  65. padding-right:30px;
  66. line-height:1.2em;
  67. font-style:italic;
  68. font-size:14pt;
  69. font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif;
  70. font-weight: bold;
  71. }
  72. #supportingText{
  73. width:600px;
  74. background:url(bg_repeater.gif) repeat-y;
  75. }
  76. #supportingText h3 {
  77. text-align:center;
  78. padding:0;
  79. margin:0;
  80. background:no-repeat center;
  81. height:25px;
  82. }
  83. #supportingText h3 span {
  84. visibility:hidden;
  85. }
  86. #benefits {
  87. padding-left:35px;
  88. padding-right:45px;
  89. text-align: center;
  90. }
  91. #benefits h3 {
  92. /* background-image:url(benefits.gif);  */
  93. (...)


 
 
Merci...


Message édité par alx067 le 27-06-2009 à 08:38:37
Reply

Marsh Posté le 19-06-2009 à 18:55:16   

Reply

Marsh Posté le 19-06-2009 à 19:02:36    

J'oubliais...
 
Chose étrange, en passant par l'adresse de mon hébergeur (Free) et IE7, il n'y a pas de problème...
En passant par l'adresse de redirection (nom-domaine.fr) et IE7, il y a un décalage.
 
J'ai essayé un joignant la feuille de style CSS avec ce code:

Code :
  1. <link href="style/style.css" rel="stylesheet" type="text/css" media="all" />


 
Le problème reste identique...


Message édité par alx067 le 19-06-2009 à 19:02:53
Reply

Marsh Posté le 22-06-2009 à 23:22:13    

Up !

Reply

Marsh Posté le 23-06-2009 à 02:13:41    

Bonjour,

 

le problème ça pourrait être la redirection plutôt que ton site:

Code :
  1. <html><head>
  2. </head><frameset cols="*" border="0" framespacing="0" frameborder="no">
  3.   <frame src="http://###.free.fr" name="page" marginwidth="0" marginheight="0" scrolling="auto">
  4. </frameset>
  5. </html>


S'il y avait un frameset, est-ce que ça fonctionnerait mieux? J'utilise jamais les frames donc je laisse la conclusion à d'autres mais une frame en mode standard dans une page en mode quirks ça me laisse un mauvais pressentiment ...


Message édité par phosphoreloaded le 23-06-2009 à 02:14:44
Reply

Marsh Posté le 25-06-2009 à 20:31:22    

Bonsoir, j'ai réécris le code de A à Z est le problème est toujours le même.
 
Voici les codes

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" lang="fr">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title><?php include("coordonnees/nom_de_l_entreprise.txt" ); ?></title>
  7. <link href="style/restyle.css" rel="stylesheet" type="text/css" media="all" />
  8. </head>
  9. <body>
  11. <div id="contenant">
  13.   <div id="balise_gauche">
  14.     <img src="style/logo_inscrustation.gif" width="64" height="140" />
  15.     <img src="style/logo_reduit.gif" alt="<?php include("coordonnees/nom_de_l_entreprise.txt" ); ?>" width="150" height="140" />
  16.   </div>
  17.  
  18.   <div id="haut_de_page">
  19.   </div>
  20.  
  21.   <div id="titre">
  22.     <p class="p3"><?php include("coordonnees/nom_de_l_entreprise.txt" ); ?></p>
  23.     <p class="p4"><?php include("coordonnees/devise_de_l_entreprise.txt" ); ?></p>
  24.   </div>
  25.  
  26.   <div id="corps_de_texte">
  27.     <p>Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte.</p>
  28.   </div>
  29.  
  30. </div>
  32. </body>
  33. </html>


 

Code :
  1. @charset "utf-8";
  2. /* CSS Document */
  4. body {
  5. font: 10.5pt Palatino, Georgia, Times New Roman, serif;
  6. color:#554;
  7. font-weight:500;
  8. text-align:left;
  9. margin:0;
  10. padding:0;
  11. background-image: url(fond.png);
  12. background-repeat: no-repeat;
  13. background-color: #fd5121;
  14. }
  16. a:link, a:visited, a:active {
  17. font-style:italic;
  18. color:black;
  19. font-weight:300;
  20. text-decoration:none;
  21. }
  23. a:hover {
  24. font-style:italic;
  25. color:#B8860B;
  26. text-decoration:underline;
  27. }
  29. /* Body Element */
  31. #contenant {
  32. position:absolute;
  33. left:50%;
  34. width:800px;
  35. margin-left:-400px;
  36. }
  38. div#balise_gauche {
  39. background:url(etiquette.gif) no-repeat top center;
  40. width:278px;
  41. height:185px;
  42. }
  44. #balise_droite {
  45. position:absolute;
  46. width:235px;
  47. height:199px;
  48. }
  50. div#haut_de_page {
  51. background:url(haut_de_page.gif) repeat-y;
  52. height:20px;
  53. }
  55. div#titre {
  56. background:url(feuille.gif) repeat-y;
  57. padding:25px 45px 0px 35px;
  58. width:520px;
  59. }
  61. #titre p.p3 {
  62. padding-left:30px;
  63. padding-right:30px;
  64. line-height:1.2em;
  65. font-style:italic;
  66. font-size:18pt;
  67. font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif;
  68. font-weight: bold;
  69. text-align: center;
  70. }
  72. #titre p.p4 {
  73. padding-left:30px;
  74. padding-right:30px;
  75. line-height:1.2em;
  76. font-style:italic;
  77. font-size:14pt;
  78. font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif;
  79. font-weight: bold;
  80. text-align: center;
  81. }
  83. div#corps_de_texte {
  84. position:absolute;
  85. background:url(feuille.gif) repeat-y;
  86. padding-left:35px;
  87. padding-right:245px;
  88. text-align: center;
  89. width:520px;
  90. }


 
http://contactartisia.free.fr/artisia2.jpg
 
Toujours ce décalage...


Message édité par alx067 le 25-06-2009 à 20:33:34
Reply

Marsh Posté le 25-06-2009 à 21:02:25    

Ok problème résolu : Il fallait rajouter le ligne de code margin-top:0px;
 

Code :
  1. @charset "utf-8";
  2. /* CSS Document */
  4. body {
  5. font: 10.5pt Palatino, Georgia, Times New Roman, serif;
  6. color:#554;
  7. font-weight:500;
  8. text-align:left;
  9. margin:0;
  10. padding:0;
  11. background-image: url(fond.png);
  12. background-repeat: no-repeat;
  13. background-color: #fd5121;
  14. }
  16. a:link, a:visited, a:active {
  17. font-style:italic;
  18. color:black;
  19. font-weight:300;
  20. text-decoration:none;
  21. }
  23. a:hover {
  24. font-style:italic;
  25. color:#B8860B;
  26. text-decoration:underline;
  27. }
  29. /* Body Element */
  31. #contenant {
  32. position:absolute;
  33. left:50%;
  34. width:800px;
  35. margin-left:-400px;
  36. }
  38. div#balise_gauche {
  39. background:url(etiquette.gif) no-repeat top center;
  40. width:278px;
  41. height:185px;
  42. }
  44. #balise_droite {
  45. position:absolute;
  46. width:235px;
  47. height:199px;
  48. }
  50. div#haut_de_page {
  51. background:url(haut_de_page.gif) repeat-y;
  52. height:20px;
  53. }
  55. div#titre {
  56. background:url(feuille.gif) repeat-y;
  57. padding:25px 45px 0px 35px;
  58. width:520px;
  59. }
  61. #titre p.p3 {
  62. padding-left:30px;
  63. padding-right:30px;
  64. line-height:1.2em;
  65. font-style:italic;
  66. font-size:18pt;
  67. font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif;
  68. font-weight: bold;
  69. text-align: center;
  70. }
  72. #titre p.p4 {
  73. padding-left:30px;
  74. padding-right:30px;
  75. line-height:1.2em;
  76. font-style:italic;
  77. font-size:14pt;
  78. font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif;
  79. font-weight: bold;
  80. text-align: center;
  81. }
  83. div#corps_de_texte {
  84. margin-top:0px;
  85. position:absolute;
  86. background:url(feuille.gif) repeat-y;
  87. padding-left:35px;
  88. padding-right:245px;
  89. padding-top:20px;
  90. text-align: center;
  91. width:520px;
  92. }
  94. div#bas_de_page {
  95. position:relative;
  96. background:url(feuille.gif) repeat-y;
  97. padding-left:35px;
  98. padding-right:245px;
  99. text-align: center;
  100. width:520px;
  101. }


Message édité par alx067 le 25-06-2009 à 21:03:31
Reply

Marsh Posté le 25-06-2009 à 21:16:06    

Il existe toujours une marge sous FF3...
 
 :cry:


Message édité par alx067 le 25-06-2009 à 23:40:45
Reply

Marsh Posté le 26-06-2009 à 10:55:48    

Tu n'as pas donné l'URL ... même si on peut la trouver facilement.
 
Vire ce <hr /> qui a une marge. Si tu veux faire un trait, utilise border-top ou bottom ou bien un background positionné en bas ou en haut selon l'élément auquel tu l'appliques

Reply

Marsh Posté le 26-06-2009 à 11:21:51    

le <hr /> n'y est pour rien, j'ai tenté de le virer dans aucun effet (la marge est encore plus grande (toujours sous FF3)...)
Adresse web : http://modelephp.free.fr/

Message cité 1 fois
Message édité par alx067 le 26-06-2009 à 11:25:12
Reply

Marsh Posté le 26-06-2009 à 11:46:08    

c'est le margin par défaut de #titre p.p4
tu dois donc mettre margin-bottom:0
 
Et du dois surtout remplacer ce p par un titre (hx)

Reply

Marsh Posté le 26-06-2009 à 11:46:08   

Reply

Marsh Posté le 26-06-2009 à 12:24:51    

Merci ! C'est le margin-bottom:0; dans le titre qui posé problème...
 
Par contre j'ai pas compris l'histoire du hx ???
 
Même sur le http://www.siteduzero.com j'avais pas trouvé...
 
Merci David Borring :bounce:


Message édité par alx067 le 26-06-2009 à 12:27:10
Reply

Marsh Posté le 26-06-2009 à 12:48:37    

le x est là pour remplacer un chiffre de 1 à 6
artista devait être un h1 et C'est un peu l'âme du monde un h2

Reply

Marsh Posté le 27-06-2009 à 08:33:00    

lol J'ai compris pour le hx.
 
En revanche j'ai ajouté le menu qui me pose à nouveau décalage sous IE8, j'ai à nouveau un décalage...
 

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" lang="fr">
  3. <head>
  4. <?php include("textes_et_mise_en_page/meta.txt" ); ?>
  5. <!-- Inspiré de CSS Garden (http://www.csszengarden.com/tr/francais) -->
  6. <title><?php include("coordonnees/nom_de_l_entreprise.txt" ); ?> - Accueil</title>
  7. <link href="style/restyle.css" rel="stylesheet" type="text/css" media="all" />
  8. </head>
  9. <body>
  11. <div id="contenant">
  13.   <div id="balise_gauche">
  14.     <img src="style/logo_inscrustation.gif" width="64" height="140" />
  15.     <img src="style/logo_reduit.gif" alt="<?php include("coordonnees/nom_de_l_entreprise.txt" ); ?>" width="150" height="140" />
  16.   </div>
  17.  
  18.   <div id="haut_de_page">
  19.   </div>
  20.  
  21.   <div id="menu">
  22.     <div id="menu_haut"></div>
  23.    
  24.     <div id="menu_centre" class="menu">
  25.     <p><a href="index.php" target="_self" title="Retour en page principale">Accueil</a></p>
  26.     <p>&nbsp;</p>
  27.     <p><a href="nouveautes.php" target="_self" title="Voir les nouveaut&eacute;s">Nouveaut&eacute;s</a></p>
  28.     <p>&nbsp;</p>
  29.     <p><a href="catalogue/album/index.html" target="_blank" title="Visionner tous les produits">Catalogue</a></p>
  30.     <p>&nbsp;</p>
  31.     <p><a href="identification.php" target="_self" title="S'identifier">Identification</a></p>
  32.     <p><a href="modification.php" target="_self" title="Modifier ses coordonn&eacute;es">Modification</a></p>
  33.     <p><a href="creation.php" target="_self" title="Cr&eacute;er votre compte">Nouveau un compte</a></p>
  34.     <p><a href="mot_de_passe_oublie.php" target="_self" title="Modifier ses coordonn&eacute;es">Mot de passe oubli&eacute;</a></p>
  35.     <p>&nbsp;</p>
  36.     <p><a href="#" target="_self" title="">Passer une commande</a></p>
  37.     <p><a href="#" target="_self" title="">Enregistrer un panier</a></p>
  38.     <p><a href="#" target="_self" title="">Visualiser mes paniers</a></p>
  39.     <p><a href="#" target="_self" title="">Suivi de commande</a></p>
  40.     <p>&nbsp;</p>
  41.     <p><a href="#" target="_self" title="">Contactez-nous</a></p>
  42.     <p><a href="#" target="_self" title="">Voyager en Inde</a></p>
  43.     <p>&nbsp;</p>
  44.     </div>
  45.    
  46.     <div id="menu_bas"></div>
  47.   </div>
  48.  
  49.   <div id="titre">
  50.     <p class="p3"><?php include("coordonnees/nom_de_l_entreprise.txt" ); ?></p>
  51.     <p class="p4"><?php include("coordonnees/devise_de_l_entreprise.txt" ); ?></p>
  52.     <br />
  53.     <hr />
  54.   </div>
  55.  
  56.   <div id="corps_de_texte">
  57.     <p>Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte.</p>
  58.   </div>
  59.  
  60. </div>
  62. </body>
  63. </html>


 

Code :
  1. /* CSS Document */
  3. body {
  4. font: 10.5pt Palatino, Georgia, Times New Roman, serif;
  5. color:#554;
  6. font-weight:500;
  7. text-align:left;
  8. margin:0;
  9. padding:0;
  10. background-image: url(fond.png);
  11. background-repeat: no-repeat;
  12. background-color: #fd5121;
  13. }
  15. a:link, a:visited, a:active {
  16. font-style:italic;
  17. color:black;
  18. font-weight:300;
  19. text-decoration:none;
  20. }
  22. a:hover {
  23. font-style:italic;
  24. color:#B8860B;
  25. text-decoration:underline;
  26. }
  28. /* Body Element */
  30. #contenant {
  31. position:absolute;
  32. left:50%;
  33. width:800px;
  34. margin-left:-400px;
  35. }
  37. div#balise_gauche {
  38. background:url(etiquette.gif) no-repeat top center;
  39. width:278px;
  40. height:185px;
  41. }
  43. #balise_droite {
  44. position:absolute;
  45. width:235px;
  46. height:199px;
  47. }
  49. div#haut_de_page {
  50. background:url(haut_de_page.gif) repeat-y;
  51. height:20px;
  52. margin-bottom:0px;
  53. }
  55. div#titre {
  56. background:url(feuille.gif) repeat-y;
  57. padding:20px 45px 0px 35px;
  58. width:520px;
  59. height:130px;
  60. }
  62. #titre p.p3 {
  63. padding-left:30px;
  64. padding-right:30px;
  65. line-height:1.2em;
  66. font-style:italic;
  67. font-size:18pt;
  68. font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif;
  69. font-weight: bold;
  70. text-align: center;
  71. }
  73. #titre p.p4 {
  74. padding-left:30px;
  75. padding-right:30px;
  76. line-height:1.2em;
  77. font-style:italic;
  78. font-size:14pt;
  79. font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif;
  80. font-weight: bold;
  81. text-align: center;
  82.     margin-bottom:0;
  84. }
  86. div#corps_de_texte {
  87. margin-top:0px;
  88. position:absolute;
  89. background:url(feuille.gif) repeat-y;
  90. padding-left:35px;
  91. padding-right:245px;
  92. padding-top:5px;
  93. padding-bottom:30px;
  94. text-align: center;
  95. width:520px;
  96. min-height:500px;
  97. }
  99. div#bas_de_page {
  100. position:relative;
  101. background:url(feuille.gif) repeat-y;
  102. padding-left:35px;
  103. padding-right:245px;
  104. text-align: center;
  105. width:520px;
  106. }
  108. div#menu {
  109. position:absolute;
  110. margin-top:0px;
  111. right:0;
  112. padding-left:5px;
  113. padding-right:5px;
  114. text-align: center;
  115. width:180px;
  116. }
  118. div#menu_haut {
  119. position:relative;
  120. background:url(menu_haut.gif) no-repeat;
  121. width:180px;
  122. height:47px;
  123. }
  125. div#menu_centre {
  126. position:relative;
  127. background:url(menu_centre.gif) repeat-y;
  128. margin-bottom:0px;
  129. padding-top:15px;
  130. padding-bottom:15px;
  131. padding-left:0px;
  132. padding-right:5px;
  133. text-align: center;
  134. width:180px;
  135. line-height:0em;
  136. height:340px;
  137. }
  139. div#menu_bas {
  140. position:relative;
  141. background:url(menu_bas.gif) no-repeat;
  142. margin-top:0px;
  143. line-height:0em;
  144. width:180px;
  145. height:50px;
  146. }
  148. .menu {
  149. font: 8pt Palatino, Georgia, Times New Roman, serif;
  150. color:#554;
  151. text-align:center;
  152. }


 
Toujours à la même adresse : http://modelephp.free.fr/reindex.php
 
J'ai également un décalage au niveau des hyperliens du menu et ils ne sont plus "cliquables" aprés un certain nombre de lignes...
D'ailleurs le design est comme souhaité sous FF3
 
Au cas ou...

Message cité 1 fois
Message édité par alx067 le 27-06-2009 à 08:38:04
Reply

Marsh Posté le 27-06-2009 à 12:14:40    

alx067 a écrit :

le <hr /> n'y est pour rien, j'ai tenté de le virer dans aucun effet (la marge est encore plus grande (toujours sous FF3)...)
Adresse web : http://modelephp.free.fr/


Sur art*.fr c'est bien le <hr /> :o
 

alx067 a écrit :

J'ai également un décalage au niveau des hyperliens du menu et ils ne sont plus "cliquables" aprés un certain nombre de lignes...


Et comme par hasard un bloc positionné en absolu commence pile là où les liens commencent à ne plus être cliquables :)
 
http://hfr-rehost.net/img29.imageshack.us/img29/3734/liensmenuposabsolute.jpg

Reply

Marsh Posté le 29-06-2009 à 13:25:10    

Il reste encore un petit détail.
 
Il reste un décalage dans le titre de la page, l'affichage est différent sous IE8 et sous FF3. J'espérais trouver une solution en cherchant mais sans succès...
 
Et le titre des images ne s'affichent pas sous FF3. ???
 
http://contactartisia.free.fr/artisia3.jpg
 
Je laisse le code :

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" lang="fr">
  3. <head>
  4. <?php include("textes_et_mise_en_page/meta.txt" ); ?>
  5. <!-- Inspiré de CSS Garden (http://www.csszengarden.com/tr/francais) -->
  6. <title><?php include("coordonnees/nom_de_l_entreprise.txt" ); ?> - Accueil</title>
  7. <link href="style/style.css" rel="stylesheet" type="text/css" media="all" />
  8. <link rel="Shortcut Icon" type="image/x-icon" href="artisia.ico" />
  9. </head>
  10. <body>
  12. <div id="contenant">
  14.   <div id="balise_gauche">
  15.     <img src="style/logo_inscrustation.gif" width="60" height="140" />
  16.     <img src="style/logo_reduit.jpg" alt="<?php include("coordonnees/nom_de_l_entreprise.txt" ); ?>" width="150" height="140" />
  17.   </div>
  18.  
  19.   <div id="balise_droite">
  20.     <?php include("textes_et_mise_en_page/balise_droite.txt" ); ?>
  21.   </div>
  22.  
  23.   <div id="haut_de_page"></div>
  24.  
  25.   <div id="menu">
  26.  
  27.     <div id="menu_haut"></div>
  28.    
  29.     <div id="menu_centre" class="menu">
  30.     <p><?php include("textes_et_mise_en_page/menu.txt" ); ?></p>
  31.     </div>
  32.    
  33.     <div id="menu_bas"></div>
  34.    
  35.   </div>
  36.  
  37.   <div id="titre">
  38.     <p class="p3"><?php include("coordonnees/nom_de_l_entreprise.txt" ); ?></p>
  39.     <p class="p4"><?php include("coordonnees/devise_de_l_entreprise.txt" ); ?></p>
  40.   </div>
  41.  
  42.   <div id="corps_de_texte">
  43.     <h3>Bienvenue !</h3>
  44.     <p>&nbsp;</p>
  45. </div>
  46.  
  47.   <div id="bas_de_page">
  48.     <p><?php include("textes_et_mise_en_page/bas_de_page.txt" ); ?></p>
  49.   </div>
  50.  
  51.   <div id="bas_de_feuille"></div>
  52.  
  53. </div>
  55. </body>
  56. </html>


 

Code :
  1. /* CSS Document */
  3. body {
  4. font: 10.5pt Palatino, Georgia, Times New Roman, serif;
  5. color:#554;
  6. background-image: url(fond.jpg);
  7. background-repeat: no-repeat;
  8. background-color: #fd5121;
  9. }
  11. a:link, a:visited, a:active {
  12. font-style:italic;
  13. color:black;
  14. font-weight:300;
  15. text-decoration:none;
  16. }
  18. a:hover {
  19. font-style:italic;
  20. color:#B8860B;
  21. text-decoration:underline;
  22. }
  24. /* Body Element */
  26. #contenant {
  27. position:absolute;
  28. left:50%;
  29. width:800px;
  30. margin-left:-400px;
  31. top:0px;
  32. }
  34. div#balise_gauche {
  35. background:url(etiquette.gif) no-repeat;
  36. width:278px;
  37. height:185px;
  38. margin:0px;
  39. }
  41. #balise_droite {
  42. position:absolute;
  43. width:235px;
  44. height:199px;
  45. right:0px;
  46. top:0px;
  47. }
  49. div#haut_de_page {
  50. position:relative;
  51. background:url(page_haut.gif) no-repeat;
  52. height:19px;
  53. width:600px;
  54. margin:0px;
  55. }
  57. div#titre {
  58. background:url(page_titre.gif) repeat-y;
  59. width:534px;
  60. height:88px;
  61. margin:0px;
  62. padding-left:28px;
  63. padding-right:20px;
  64. padding-top:10px;
  65. padding-bottom:10px;
  66. text-align: center;
  67. }
  69. #titre p.p3 {
  70. padding-left:30px;
  71. padding-right:30px;
  72. padding-top:5px;
  73. padding-bottom:5px;
  74.     line-height:10px;
  75. font-style:italic;
  76. font-size:18pt;
  77. font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif;
  78. font-weight: bold;
  79. text-align: center;
  80. }
  82. #titre p.p4 {
  83. padding-left:30px;
  84. padding-right:30px;
  85. padding-top:5px;
  86. padding-bottom:5px;
  87.     line-height:10px;
  88. font-style:italic;
  89. font-size:14pt;
  90. font-family: Monotype Corsiva, Palatino, Georgia, Times New Roman, serif;
  91. font-weight: bold;
  92. text-align: center;
  93. }
  95. div#corps_de_texte {
  96. position:relative;
  97. margin:0px;
  98. background:url(page_centre.gif) repeat-y;
  99. padding-left:28px;
  100. padding-right:20px;
  101. padding-top:30px;
  102. padding-bottom:10px;
  103. text-align: center;
  104. width:534px;
  105. min-height:752px;
  106. }
  108. div#bas_de_page {
  109. position:relative;
  110. margin:0px;
  111. background:url(page_titre.gif) repeat-y;
  112. padding-left:28px;
  113. padding-right:20px;
  114. padding-top:5px;
  115. padding-bottom:5px;
  116. text-align: center;
  117. width:534px;
  118. height:62px;
  119. font-size:10px;
  120. }
  122. div#bas_de_feuille {
  123. position:relative;
  124. margin:0px;
  125. background:url(page_bas.gif) no-repeat;
  126. text-align: center;
  127. width:600px;
  128. height:23px;
  129. }
  131. div#menu {
  132. position:absolute;
  133. margin-top:50px;
  134. right:0;
  135. padding-left:5px;
  136. padding-right:5px;
  137. text-align: center;
  138. width:180px;
  139. }
  141. div#menu_haut {
  142. position:relative;
  143. background:url(menu_haut.gif) no-repeat;
  144. width:180px;
  145. height:47px;
  146. }
  148. div#menu_centre {
  149. position:relative;
  150. background:url(menu_centre.gif) repeat-y;
  151. padding-top:5px;
  152. padding-bottom:5px;
  153. padding-left:0px;
  154. padding-right:5px;
  155. text-align: center;
  156. width:180px;
  157. line-height:1em;
  158. height:260px;
  159. }
  161. div#menu_bas {
  162. position:relative;
  163. background:url(menu_bas.gif) no-repeat;
  164. margin-top:0px;
  165. width:180px;
  166. height:50px;
  167. }
  169. .menu {
  170. font: 8pt Palatino, Georgia, Times New Roman, serif;
  171. color:#554;
  172. text-align:center;
  173. }


 
Toujours la même page http://modelephp.free.fr/
 
J'ai regardé sur ce site http://browsershots.org/ est la majorité des navigateurs affiche le site.
:sarcastic:


Message édité par alx067 le 29-06-2009 à 13:51:05
Reply

Marsh Posté le 29-06-2009 à 18:39:19    

Firefox a bien raison de ne pas afficher le alt car l'image est présente
Toi, tu veux employer un title
http://www.webmasterworld.com/acce [...] 252877.htm

Reply

Marsh Posté le 29-06-2009 à 21:10:40    

Reply

Sujets relatifs:

Leave a Replay

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