Wall posté le Jeudi 9 août 2007


Bug affichage IE a cause du bloc presentation, les marge ne sont plus respecter, et le bloc s'aligne dans sur la bordure du bloc centre


  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. <title>SFPP</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <style type="text/css">
  7. /* CSS issu des tutoriels css.alsacreations.com */
  8. body {
  9. font-family: Verdana, Arial, Helvetica, sans-serif;
  10. font-size: 0.8em;
  11. margin: 0;
  12. padding: 0;
  13. background-image: url("./images/bg2.png");
  14. }
  15. #header {
  16. height: 100px;
  17. background-color: #0185d8;
  18. background-image: url("./images/haut.png");
  19. background-repeat:repeat-x;
  20. background-position:top;
  21. padding-top:30px; 
  22. text-align:center;
  23. }
  24.  
  25.  
  26.  
  27. #conteneur {
  28. position: relative;
  29. width: 1000px;
  30. margin: 0 auto;
  31. background-image: url("./images/bg2.png");
  32. background-color:#5ab5ef;
  33. }
  34.  
  35. #centre {
  36. margin-top:0;
  37. margin-left: 140px;
  38. margin-right: 140px;
  39. height: 550px;
  40. padding:0.5em;
  41. background-color:#ffffff;
  42. background-image: url("./images/bg2.png");
  43. }
  44. html>body #centre{
  45. height: auto;
  46. min-height: 550px;
  47. }
  48.  
  49. #gauche {
  50. background-image: url("./images/degrade_bleu.png");
  51. background-repeat:repeat-x;
  52. background-position:top;
  53. position: absolute;
  54. left:0;
  55. width: 140px;
  56. }
  57.  
  58. #droite {
  59. background-image: url("./images/degrade_bleu.png");
  60. background-repeat:repeat-x;
  61. background-position:top;
  62. position: absolute;
  63. right:0;
  64. width: 140px;
  65. }
  66.  
  67. #pied {
  68. margin-top:30px;
  69. height: 60px;
  70. font-size:0.9em;
  71. padding-top:10px;
  72. background-color: #0185d8;
  73. background-image: url("./images/menutop.png");
  74. background-repeat:repeat-x;
  75. background-position:bottom;
  76. text-align:center;
  77. }
  78.  
  79.  
  80. .bloc_centre{
  81. background-color: #ffffff;
  82. border-style: dotted;
  83. padding:1em;
  84. border-top-width:0px;
  85. border-left-width:1px;
  86. border-right-width:1px;
  87. border-bottom-width:1px;
  88. }
  89.  
  90.  
  91.  
  92. .menugauche {
  93. list-style-type: none;
  94. margin:0;
  95. padding:0;
  96. }
  97. .menugauche li {
  98. margin-bottom: 5px;
  99. }
  100. .menugauche a {
  101. margin: 0 2px;
  102. color: #000000;
  103. text-decoration: underline;
  104. }
  105. .menugauche a:hover {
  106. text-decoration: none;
  107. }
  108.  
  109. .mymenu{
  110.    background-image: url("./../images/haut_menu_connexion.png");
  111.    background-repeat:repeat-x;
  112.    height:30px;
  113. }   
  114.  
  115. .menu_gauche {
  116.    float:left;
  117.    width:130px;
  118.    padding:5px;
  119.    list-style-type: none;
  120. }
  121.  
  122. .menu_gauche p {
  123.    font-size:11px;
  124.    line-height:20px;
  125.    color:#666;
  126. }
  127. .menu_gauche p a, .menu_gauche p a:link, .menu_gauche p a:visited {
  128.    color:#666;
  129.    text-decoration:underline;
  130. }
  131.  
  132. .menu_gauche p a:hover {
  133.    color:#333;
  134.    text-decoration:none;
  135.    background-color:#DDEE55;
  136. }
  137.  
  138. .menu_gauche ul {
  139.    margin:0;
  140.    padding:0;
  141. }
  142.  
  143. .menu_gauche li {
  144.    list-style:none;
  145.    border-top:1px solid #ccc;
  146.    margin:0;
  147.    padding:0;
  148.    font-size:11px;
  149.    color:#666;
  150.    background:#ffffff;
  151. }
  152.  
  153. .menu_gauche li a, .menu_gauche li a:link, .menu_gauche li a:visited {
  154.    display:block;
  155.    color:#666;
  156.    text-decoration:none;
  157.    padding:5px;
  158. }
  159.  
  160. .menu_gauche li a:hover {
  161.    display:block;
  162.    color:red;
  163.    background:#b3dcf6;
  164.    text-decoration:none;
  165. }
  166.  
  167. .menu_gauche_titre {
  168.    background-color: #0185d8;
  169.    background-image: url("./images/haut_menu_bleu.png");
  170.    background-repeat:repeat-x;
  171.    background-position:bottom;
  172.    text-align:center;
  173.    line-height: 2em;
  174. }   
  175.  
  176. .menu_titre_rouge{
  177.    background-color: #ff9999;
  178.    background-image: url("./images/haut_menu_bleu.png");
  179.    background-repeat:repeat-x;
  180.    background-position:bottom;
  181.    text-align:center;
  182.    line-height: 2em;
  183. }
  184.  
  185. .menudroit {
  186. list-style-type: none;
  187. margin: 0;
  188. padding:0;
  189. }
  190. .menudroit li {
  191. margin-bottom: 5px;
  192. }
  193. .menudroit a {
  194. margin: 0 2px;
  195. color: #000000;
  196. text-decoration: underline;
  197. }
  198. .menudroit a:hover {
  199. text-decoration: none;
  200. }
  201.  
  202. .menu_connexion_titre {
  203.    background-image: url("./images/haut_menu_rouge.png");
  204.    background-repeat:repeat-x;
  205.    height:30px;
  206.    line-height: 2em;
  207.    text-align:center;
  208. }   
  209.  
  210. p {margin: 0 0 10px 0;}
  211.  
  212.  
  213.  
  214.  
  215.  
  216. ul#menu_connexion {
  217. list-style-type: none;
  218. width: 100%; /* précision pour Opera */
  219. }
  220.  
  221. ul#menu_connexion li {
  222. float: left;
  223. margin-left:1em;
  224. }
  225.  
  226. form#form_login{
  227.    font: bold 0.9em arial, hevetica, sans-serif;
  228. }
  229.  
  230. input {
  231. border:1px solid black;
  232. font-family:"trebuchet ms",sans-serif;
  233. }
  234.  
  235. form#form_rech_rapide{
  236.    font: 0.9em arial, hevetica, sans-serif;
  237. }
  238.  
  239.  
  240. #presentation {
  241.    background-color: #e7e7e6;
  242.    border-color:#8d969b;
  243.    border-style: solid;
  244.    border-width: 1px;
  245.    padding:1em;
  246.    margin:0.5em;
  247. }
  248.  
  249. .image_presentation{
  250.    float:right;
  251.    margin:0;
  252.    padding:0.5em;
  253. }
  254.  
  255. .image_presentation img{
  256.    width:200px;
  257.    height:150px;
  258.    border-style: solid;
  259.    border-width: 1px;
  260. }
  261.  
  262. .presentation p{
  263.    padding:1em;
  264.    text-indent:20px
  265. }
  266.  
  267.  
  268. .spacer {
  269.    clear:both;
  270. }
  271.  
  272. .contact {
  273.    text-align:center;
  274.    background-color: #b3dcf6;
  275.    padding:1em;
  276. }
  277.  
  278. .sponsors {
  279.    background-color: #fff;
  280. }
  281.  
  282.  
  283.  
  284.  
  285.  
  286.  
  287.  
  288.  
  289.  
  290.  
  291. div#cadre {/* conteneur global et arrière-plan du titre du cadre */
  292. width: 130px;
  293. padding-top: 40px;
  294. margin:auto;
  295. background: url(./images/menus/haut.png) top left no-repeat;
  296. }
  297. div#bloccadre {/* arrière-plan bas et sur l'ensemble du cadre */
  298. background: url(./images/menus/bas.png) bottom left no-repeat;
  299. padding-bottom: 40px;
  300. }
  301. div#bloccadre p {
  302. background-color: #fff;
  303. margin: 0 30px 0 20px;
  304. }
  305.  
  306.  
  307.  
  308.  
  309.  
  310. #barre_haut {
  311.    margin:0;
  312.    padding-top:0.5em;
  313.    height:48px;
  314.    background-color:#ffffff;
  315.    background-image: url("./images/bg2.png");
  316. }
  317.  
  318. #barre_connexion2{
  319.    margin-left: 140px;
  320.    background: url(./images/hautgauche.png);
  321.    background-repeat: no-repeat;
  322. }
  323.  
  324.  
  325. #g {
  326.    margin-left:10px;
  327.    padding:10px;
  328.    background: url(./images/haut_menu_rouge.png);
  329.    background-repeat:repeat-x;
  330.    background-color: #c85e5e;
  331. }
  332.  
  333.  
  334.  
  335.  
  336.  
  337.  
  338.  
  339.  
  340.  
  341. #presentation2 {
  342.    background-color: #e7e7e6;
  343.    border-color:#8d969b;
  344.    border-style: solid;
  345.    border-width: 1px;
  346. }
  347.  
  348. .image_presentation2{
  349.    float:right;
  350.    width:200px;
  351.    height:150px;
  352. }
  353.  
  354. .text_presentation2{
  355.    background-color: #e7e7e6;
  356.  
  357. }
  358.  
  359. .image_presentation2 img{
  360.    width:200px;
  361.    height:150px;
  362.    border-style: solid;
  363.    border-width: 1px;
  364. }
  365.  
  366. .presentation2 p{
  367.    text-indent: 20px
  368. }
  369.  
  370.  
  371.  
  372. </style>
  373. </head>
  374.  
  375. <body>
  376.  
  377. <div id="conteneur">
  378.  
  379.     <div id="header"><img src="./images/ban1.jpg" alt="SFPP Corporation"/></div>
  380.  
  381.    
  382.    <div id="barre_haut">
  383.       <div id="barre_connexion2">
  384.          <div id="g">
  385.             <b>Connexion Client</b>
  386.             <img src="./icones/identity2.png" alt="Identifiant"/>Identifiant :
  387.             <input type="identifiant" name="identifiant" size=12 />
  388.             <img src="./icones/kgpg_key2.png" alt="Password"/>Password: <input type="password" name="password" size=12 />
  389.             <input type="submit" name="ok" value="ok" class="bouton"/>
  390.          </div>
  391.       </div>
  392.     </div>   
  393.    
  394.    
  395.     <div id="gauche">
  396.           <div class="menu_gauche">   
  397.              <div class="menu_gauche_titre">Home</div>
  398.             <ul>
  399.                <li><a href="">Accueil</a></li>
  400.                <li><a href="">Présentation</a></li>
  401.                <li><a href="">Nouveautés</a></li>
  402.             </ul>
  403.          </div>
  404.       
  405.          <div class="menu_gauche">   
  406.              <div class="menu_gauche_titre">Produits</div>
  407.             <ul>
  408.                <li><a href="">Intrusions</a></li>
  409.                <li><a href="">Videos</a></li>
  410.                <li><a href="">Contrôle d'accès</a></li>
  411.                <li><a href="">Incendie</a></li>      
  412.             </ul>
  413.          </div>
  414.          
  415.          <div class="menu_gauche">   
  416.              <div class="menu_gauche_titre">Documentations</div>
  417.             <ul>
  418.                <li><a href="">Legislations</a></li>
  419.                <li><a href="">Docs Techniques</a></li>
  420.             </ul>
  421.          </div>
  422.             
  423.          <div class="menu_gauche">   
  424.              <div class="menu_gauche_titre">Contact</div>
  425.             <ul>
  426.                <li><a href="">Nous joindre</a></li>
  427.                <li><a href="">Notre équipe</a></li>
  428.                <li><a href="">L'entreprise</a></li>
  429.             </ul>
  430.          </div>
  431.     </div>
  432.    
  433.     <div id="droite">
  434.           <div class="menu_gauche">   
  435.          
  436.              <div class="menu_titre_rouge">Nouveautés</div>
  437.             <ul>
  438.                <li><img src="./images/camera_ip_axis_2.gif" alt="Caméra IP Axis"/></li>
  439.                <li>Caméra IP Axis</li>
  440.             </ul>
  441.          </div>
  442.          
  443.          <div class="menu_gauche">   
  444.           <br /><br />
  445.              <div class="menu_titre_rouge">Produits</div>
  446.             
  447.             <ul>
  448.                <li>&nbsp;</li>
  449.                <li><b>Type</b> :      
  450.                   <select name="">
  451.                      <option>Videos</option>
  452.                      <option>Intrusions</option>         
  453.                   </select>
  454.                </li>
  455.                <li>&nbsp;</li>
  456.                <li><b>Produit</b> :
  457.                   <select name="">
  458.                      <option>Caméras</option>
  459.                      <option>...</option>         
  460.                   </select>
  461.                </li>
  462.                <li>&nbsp;</li>
  463.                <li>
  464.                   <input type="submit" name="lister" value="Lister" />
  465.                </li>
  466.             </ul>
  467.          </div>
  468.          
  469.          <div class="menu_gauche">   
  470.           <br /><br />
  471.          
  472.          <script type="text/javascript" src="http://www.service-gratuit-fr.com/horloges.php?id=93789&w=120&h=120"></script>
  473.          <noscript><a href="http://www.service-gratuit-fr.com" target="_blank">Horloge en Flash</a></noscript>
  474.          </div>
  475.    </div>
  476.    <div id="centre">
  477.       <div class="bloc_centre">
  478.          <div id="presentation">
  479.                <span class="image_presentation"><img src="./images/image_presentation.png" /></span>
  480.                <h3><img src="./images/logo_sfpp_petit2.png" width="70" height="20" /></h3>
  481.                <p>
  482.                   Petit texte de présentation du site web
  483.                   SFPP est une entreprise qui vends des alarmes, des caméras, pleins de machines electroniques qui font bip bip.
  484.                </p>
  485.                <div class="spacer"></div>
  486.          </div>   
  487.          <br />
  488.          <p>SFPP est une entreprise qui vends des alarmes, des caméras, pleins de machines electroniques qui font bip bip.</p>
  489.          <p>Les caméras film utilisent le principe de la photographie. Elles impressionnent typiquement 24 images par seconde, sur un film qu'il faut développer, et éventuellement tirer, avant de pouvoir l'utiliser dans un projecteur, afin de le visionner.</p>
  490.          <p>Ce procédé impose de les charger à l'abri de la lumière.</p>
  491.          <p>Par l'invention du 9,5 mm en 1922, et l'apparition de la caméra Pathé Baby en 1923, le cinéma amateur devient abordable avec des caméras très compactes, faciles à charger et d'utilisation familiale. </p>
  492.    
  493.          <h1>Votre Projet avec nos amis les chinois.</h1>
  494.    
  495.          <p>Caméra Super 8 de 1975Le 8 mm proposé en 1932 par Kodak, était encore plus réduit et permettait l'utilisation de matériels compacts et économiques au détriment de la qualité de l'image dûe à sa petite taille.
  496.          Les professionnels du cinéma utilisent encore presque toujours des caméras film alors que les amateurs sont passés à la vidéo. </p>
  497.          
  498.          <div class="contact">
  499.             <img src="./images/sfpp_mini_ban.png" /> (Siege Social)<br />
  500.             Espace Commercial de Fréjorgues Ouest
  501.             121 Rue Rolland Garros 34 135 Mauguio<br />
  502.             tel : (+033) 04-67-65-01-65 <br />
  503.             fax : (+033) 04-67-20-04-78 <br />
  504.             <a href="mailto:nom@provider.com">sfpp@sfpp.fr</a>
  505.             <div class="sponsors">
  506.                <img src="./images/sponsors/tecnoalarm.png" />
  507.                <img src="./images/sponsors/cpcam.jpg" />
  508.                <img src="./images/sponsors/chine.jpg" />
  509.             </div>
  510.          </div>
  511.       </div>
  512.    </div>
  513. <div id="pied">SFPP Corporation Directed by Patrick Faucon</div>
  514. </div>
  515. </body>
  516. </html> 

Remonter Remonter
L'éditeur javascript - CSS - Gentoo - Tutoriaux PHP - Tutoriels PHP - Breizh Blog