Tom's Guide > Forum > Programmation > [CSS] Différence d'alignement entre IE et FX

[CSS] Différence d'alignement entre IE et FX

Forum Programmation : [CSS] Différence d'alignement entre IE et FX

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
Sanyi   12-07-2008 à 10:28:11

Bonjour à tous,

Voilà, j'essaye d'adapter un template pour joomla et il se trouve que tout est ok sauf le final : l'affichage sous IE :pt1cable:

Un bloc est décalé alors que tout est ok sous FX!


Voici le code généré en HTML :

Code :
  1. <?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Joomla en local - Accueil</title>
  5. <meta name="description" content="Joomla - le portail dynamique de gestion de contenu" />
  6. <meta name="keywords" content="Joomla, joomla" />
  7. <meta name="Generator" content="Joomla! - Copyright (C) 2005 - 2007 Open Source Matters. All rights reserved." />
  8. <meta name="robots" content="index, follow" />
  9.     <link rel="shortcut icon" href="http://127.0.0.1/joomla/images/favicon.ico" />
  10.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  11. <link href="http://127.0.0.1/joomla/templates/rhuk_solarflare_ii/style.css" rel="stylesheet" type="text/css" />
  12. <script type="text/javascript" src="http://127.0.0.1/joomla/templates/rhuk_solarflare_ii/js/utils.js"></script>
  13. <script type="text/javascript" src="http://127.0.0.1/joomla/templates/rhuk_solarflare_ii/js/js_liveclock.js"></script>
  14. </head>
  15. <body>
  16. <div id="top-block">
  17.     <div id="site-title">
  18.     <a href="http://127.0.0.1/joomla">Mecaindex.fr</a>
  19.     </div>
  20.     <div id="site-slogan">
  21.     usinage, décolletage et confections métalliques
  22.     </div>
  23.     <div id="search-box">
  24.    
  25. <form action="index.php?option=com_search&amp;Itemid=5" method="get">
  26.     <div class="search-button">
  27.         <input name="searchword" id="mod_search_searchword" maxlength="20" alt="search" class="search-input" type="text" size="20" value="Rechercher..."  onblur="if(this.value=='') this.value='Rechercher...';" onfocus="if(this.value=='Rechercher...') this.value='';" />    </div>
  29.     <input type="hidden" name="option" value="com_search" />
  30.     <input type="hidden" name="Itemid" value="5" />   
  31. </form>    </div>
  32. </div>
  33.     <div id="top-divider"></div>
  34. <div id="top-nav-container">
  35.     <div id="top-nav-background">
  36.         <ul>
  37.         <li class="page_item"><a href="http://127.0.0.1/joomla" title="Home">Home</a></li>
  38.         <li><a href="index.php?do=contact" title="Contact">Contact</a></li>
  39.         <li><a href="members/" target='_blank' title="Zone Membres">Zone Membres</a></li>
  40.         <li><a href="atom.php" target='_blank' title="Flux ATOM">Flux ATOM</a></li>
  41.         <li><a href="index.php?do=basic" title="<{$lang.submit_site}>">SOUMETTRE UN SITE</a></li>
  42.         </ul>   
  43.     </div>
  44.     <div id="date-background">
  45.     <script>dT();</script>
  46.     </div>   
  47. </div>
  48. <div id="main-area">
  49.     <div id="sidebar">
  50.         <div class="nav-content">
  51.             <ul>
  52.                 <center>A voir aussi</center>
  53.             </ul>
  54.         </div>
  55.         <div class="nav-footer"></div>
  56.         <div class="nav-content">
  57.             <div class="nav-header">Navigation</div>
  58.                     </div>
  59.         <div class="nav-footer"></div>
  60.         <div class="nav-content">
  61.             <div class="nav-header">Outils</div>
  62.             <ul>
  63.             <li><a href="http://search.mecaindex.fr" title="Search.mecaindex">Search.mecaindex</a></li>
  64.             <li><a href="http://www.usinages.com" title="Usinages.com">Forum de l'usinage</a></li>
  65.             </ul>
  66.         </div>
  67.         <div class="nav-footer"></div>
  68.     </div>
  69.     <div id="main-content">
  70.         <div class="post-wrap">
  71.             <div class="post-content-wrap">
  72.                 <div class="post-title">
  73.                 <a href="http://127.0.0.1/joomla" title="Accueil"> Annuaire d'entreprises et fournisseurs en usinage </a>
  74.                 </div>
  75.                 <div>
  76.                             <div class="moduletable">
  77.                             <h3>
  78.                     CB Workflows                </h3>
  79.                         </div>
  80.                 <div class="moduletable">
  81.                             <h3>
  82.                     Derniers articles                </h3>
  83.                 <ul class="latestnews">
  84.     <li class="latestnews">
  85.         <a href="http://127.0.0.1/joomla/index.php?option=com_content&amp;task=view&amp;id=2&amp;Itemid=9" class="latestnews">
  86.             Newsflash 1</a>
  87.     </li>
  88.         <li class="latestnews">
  89.         <a href="http://127.0.0.1/joomla/index.php?option=com_content&amp;task=view&amp;id=3&amp;Itemid=9" class="latestnews">
  90.             Newsflash 2</a>
  91.     </li>
  92.         <li class="latestnews">
  93.         <a href="http://127.0.0.1/joomla/index.php?option=com_content&amp;task=view&amp;id=4&amp;Itemid=9" class="latestnews">
  94.             Newsflash 3</a>
  95.     </li>
  96.         <li class="latestnews">
  97.         <a href="http://127.0.0.1/joomla/index.php?option=com_content&amp;task=view&amp;id=6&amp;Itemid=2" class="latestnews">
  98.             Exemple Article 1</a>
  99.     </li>
  100.         <li class="latestnews">
  101.         <a href="http://127.0.0.1/joomla/index.php?option=com_content&amp;task=view&amp;id=9&amp;Itemid=2" class="latestnews">
  102.             Exemple Article 4</a>
  103.     </li>
  104.     </ul>        </div>
  105.                         </div>
  106.                 <div>
  107.                     <table class="blog" cellpadding="0" cellspacing="0"><tr><td valign="top"><div>                <table class="contentpaneopen">
  108.             <tr>
  109.                                 <td class="contentheading" width="100%">
  110.                     Bienvenue sur Joomla!                                    </td>
  111.                             </tr>
  112.             </table>
  113.            
  114.         <table class="contentpaneopen">
  115.                     <tr>
  116.                 <td width="70%" align="left" valign="top" colspan="2">
  117.                     <span class="small">
  118.                         Écrit par Webmaster                    </span>
  119.                     &nbsp;&nbsp;
  120.                 </td>
  121.             </tr>
  122.                         <tr>
  123.                 <td valign="top" colspan="2" class="createdate">
  124.                     12-06-2004                </td>
  125.             </tr>
  126.                     <tr>
  127.             <td valign="top" colspan="2">
  128.                 Si vous avez tout lu sur les Syst&egrave;mes de Gestion de Contenu (CMS en anglais), vous aurez probablement retenu au moins trois choses: les CMS sont ce qu'il y a de mieux pour faire du business, les CMS sont des outils vraiment tr&egrave;s compliqu&eacute;s, et enfin ils sont le plus souvent absolument hors de prix.<br /> <br /> <div class="mosimage"  style=" border-width: 1px; float: left; width: 120px;" align="center"><img src="http://127.0.0.1/joomla/images/stories/asterisk.png" width="70" height="67" hspace="6" alt="Joomla! Logo" title="Joomla! Logo" border="0" /><div class="mosimage_caption" style="text-align: center;" align="center">Exemple Caption</div></div>Joomla! est en train de changer la donne... Joomla! est diff&eacute;rent du mod&egrave;le habituel de logiciel web. Pour commencer, Joomla! est simple &agrave; prendre en main. Joomla! a &eacute;t&eacute; d&eacute;velopp&eacute; pour le plus grand nombre. Il est distribu&eacute; sous license GNU/GPL, facile &agrave; installer, facile &agrave; administrer et stable. Les utilisateurs et administrateurs Joomla! n'auront m&ecirc;me pas besoin de connaissances HTML pour mettre en oeuvre et g&eacute;rer ce CMS.</p>            </td>
  129.         </tr>
  130.                     <tr>
  131.                 <td colspan="2" align="left" class="modifydate">
  132.                     Dernière mise à jour&nbsp;: ( 12-06-2004 )
  133.                 </td>
  134.             </tr>
  135.                             <tr>
  136.                     <td align="left" colspan="2">
  137.                         <a href="http://127.0.0.1/joomla/index.php?option=com_content&amp;task=view&amp;id=1&amp;Itemid=1" class="readon">
  138.                             Lire la suite...</a>
  139.                     </td>
  140.                 </tr>
  141.                         </table>
  143.         <span class="article_seperator">&nbsp;</span>
  145.         </div></td></tr><tr><td valign="top"><table width="100%"  cellpadding="0" cellspacing="0"><tr><td valign="top" width="50%">            <table class="contentpaneopen">
  146.             <tr>
  147.                                 <td class="contentheading" width="100%">
  148.                     Newsflash 1                                    </td>
  149.                             </tr>
  150.             </table>
  151.            
  152.         <table class="contentpaneopen">
  153.                     <tr>
  154.                 <td width="70%" align="left" valign="top" colspan="2">
  155.                     <span class="small">
  156.                         Écrit par Administrator                    </span>
  157.                     &nbsp;&nbsp;
  158.                 </td>
  159.             </tr>
  160.                         <tr>
  161.                 <td valign="top" colspan="2" class="createdate">
  162.                     09-08-2004                </td>
  163.             </tr>
  164.                     <tr>
  165.             <td valign="top" colspan="2">
  166.                 Joomla! 1.0 - 'Faites l'exp&eacute;rience de la libert&eacute;'!. Il n'a jamais &eacute;t&eacute; aussi facile de cr&eacute;er soi-m&ecirc;me un site dynamique. G&eacute;rez tout le contenu de votre site depuis une interface d'administration.            </td>
  167.         </tr>
  168.                 </table>
  170.         <span class="article_seperator">&nbsp;</span>
  172.         </td><td valign="top" width="50%">            <table class="contentpaneopen">
  173.             <tr>
  174.                                 <td class="contentheading" width="100%">
  175.                     Newsflash 2                                    </td>
  176.                             </tr>
  177.             </table>
  178.            
  179.         <table class="contentpaneopen">
  180.                     <tr>
  181.                 <td width="70%" align="left" valign="top" colspan="2">
  182.                     <span class="small">
  183.                         Écrit par Administrator                    </span>
  184.                     &nbsp;&nbsp;
  185.                 </td>
  186.             </tr>
  187.                         <tr>
  188.                 <td valign="top" colspan="2" class="createdate">
  189.                     09-08-2004                </td>
  190.             </tr>
  191.                     <tr>
  192.             <td valign="top" colspan="2">
  193.                 Hier, tous les serveurs des Etats-Unis se sont mis en gr&egrave;ve en revendiquant le droit &agrave; plus de RAM et &agrave; de meilleurs processeurs. Un porte parole a d&eacute;clar&eacute; que ce besoin en RAM suppl&eacute;mentaire &eacute;tait cons&eacute;cutif &agrave; l'accroissement inconsid&eacute;r&eacute; de la vitesse des bus front-side. Il a &eacute;t&eacute; demand&eacute; aux bus r&eacute;sidants des carte m&egrave;res de lever le pied.            </td>
  194.         </tr>
  195.                 </table>
  197.         <span class="article_seperator">&nbsp;</span>
  199.         </td></tr></table></td></tr><tr><td valign="top"><div class="blog_more">            <div>
  200.                 <strong>
  201.                 Suite...                </strong>
  202.             </div>
  203.                     <ul>
  204.                     <li>
  205.                 <a class="blogsection" href="http://127.0.0.1/joomla/index.php?option=com_content&amp;task=view&amp;id=4&amp;Itemid=1">
  206.                     Newsflash 3</a>
  207.             </li>
  208.                     </ul>
  209.         </div></td></tr></table>                </div>
  210.                 <div>
  211.                             <div class="moduletable">
  212.                             <h3>
  213.                     Articles les plus lus                </h3>
  214.                 <ul class="mostread">
  215.     <li class="mostread">
  216.         <a href="http://127.0.0.1/joomla/index.php?option=com_content&amp;task=view&amp;id=11&amp;Itemid=9" class="mostread">
  217.             Exemple FAQ Item 2</a>
  218.     </li>
  219.           <li class="mostread">
  220.         <a href="http://127.0.0.1/joomla/index.php?option=com_content&amp;task=view&amp;id=10&amp;Itemid=9" class="mostread">
  221.             Exemple FAQ Item 1</a>
  222.     </li>
  223.           <li class="mostread">
  224.         <a href="http://127.0.0.1/joomla/index.php?option=com_content&amp;task=view&amp;id=9&amp;Itemid=2" class="mostread">
  225.             Exemple Article 4</a>
  226.     </li>
  227.           <li class="mostread">
  228.         <a href="http://127.0.0.1/joomla/index.php?option=com_content&amp;task=view&amp;id=6&amp;Itemid=2" class="mostread">
  229.             Exemple Article 1</a>
  230.     </li>
  231.           <li class="mostread">
  232.         <a href="http://127.0.0.1/joomla/index.php?option=com_content&amp;task=view&amp;id=7&amp;Itemid=2" class="mostread">
  233.             Exemple Article 2</a>
  234.     </li>
  235.     </ul>        </div>
  236.                         </div>
  238.                 <div class="post-info">
  239.                     Essai
  240.                 </div>
  241.             </div>
  242.         </div>
  243.         <div class="post-date">
  244.         <span class="date-month">
  245.         <br clear="all" /><br clear="all" />
  246.         <a href="rss.php"><img src="http://127.0.0.1/joomla/templates/rhuk_solarflare_ii/images/rssmlp.gif" alt="Flux RSS"></a>
  247.         </div>           
  248.     </div>
  249. <br clear="all" />
  250. </div>
  251. <br clear="all" />
  252. <div id="copyright">
  253.     <div id="sponsor-text">
  254.     Copyright &copy; 2008 - Tous droits réservés
  255.     </div>
  256.     <div id="copyright-text">
  257.     </div>
  258. </div>
  259. <br clear="all" />
  260. <br />       
  261. <script type="Text/Javascript">
  262.         if(document.links.length > 0)
  263.         {
  264.             for(var i=0; i < document.links.length; i++)
  265.             {
  266.                 if (document.links[i].className.indexOf("_blank" ) > -1)
  267.                 {
  268.                     document.links[i].target="_blank";
  269.                 }
  270.             }
  271.         }
  272.         </script>
  273. </body>
  274. </html>



Et voici le fichier style.css :

Code :
  1. font-size:12px;   
  2.     color:#777;       
  3.     background-color:#a7a7a7;
  4.     background-image:url("images/site-background.gif" );
  5.     background-repeat:repeat-x;
  6.     margin:0;
  7.     line-height:20px;   
  8. }
  10. img {
  11.     border:0;
  12.     }
  15.     p img {
  16.     float:left;
  17.     margin:0 10px 0 0;
  18.     padding-left: 6px;
  19.     padding-bottom: 2px;
  20. }
  21.     html {
  22.     scrollbar-face-color:#a7a7a7;
  23.     scrollbar-highlight-color:#a7a7a7;
  24.     scrollbar-3dlight-color:#a7a7a7;
  25.     scrollbar-darkshadow-color:#a7a7a7;
  26.     scrollbar-shadow-color:#a7a7a7;
  27.     scrollbar-arrow-color:#111111;
  28.     scrollbar-track-color:#a7a7a7;
  29. }
  31. .topsearch{
  32.     font-size:10px;
  33. }
  35. h1 { font: bold 1.31em "Arial", Sans-Serif; margin: 0; color: #a3ceff; }
  36. h3 { font: bold 1.5em "Arial", Sans-Serif; margin: 0; color: #ff6600; }
  37. h5 { font: bold 1.31em "Arial", Sans-Serif; margin: 0; color: #8FCF3C; }
  38. h6 { font: bold 1.31em "Arial", Sans-Serif; margin: 0; color: #8FCF3C; }
  41. .catego{
  42.     background: #ffffff;
  43.     width : 200px;
  44.     height: 6px;
  45.     padding: 3px 3px 3px 3px;
  46.     border: 1px dotted #CCCCFF;
  48. }
  51. table.sample {
  52.     width:100%;
  53. }
  55. table.sample th {
  56.    
  57. }
  58. table.sample td {
  59.     width:33%;
  60.     text-align:left;
  61.    
  62.     padding-top: 3px;
  63.     padding-bottom: 3px;
  64.     padding-left: 3px;
  65.     padding-right: 3px;
  66.     -moz-border-radius: 12px;
  67. }
  70. .champs {width: 150px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; border: 1px solid #ff6600; background-color: #000000; font-weight: bold; color: #c2c2c2; text-decoration:none}
  75. .catwdc{
  76.     color:#55A16C;
  77.     text-decoration:none;
  78.     font-size:13px;
  79. }
  81. .catwdc a{
  82.     color:#55A16C;
  83.     text-decoration:none;
  84.     font-size:13px;
  85. }
  87. .catwdc a:hover{
  88.     color:#8FCF3C;
  89.     text-decoration:none;
  90.     font-size:13px;
  91. }
  95. .details{
  96.     color:#8FCF3C;
  97.     text-decoration:none;
  98.     font-size:11px;
  99. }
  101. .details a{
  102.     color:#D16903;
  103.     text-decoration:none;
  104.     font-size:11px;
  105. }
  109. .details a:hover{
  110.     color:#D16903;
  111.     text-decoration:underline;
  112.     font-size:11px;
  113. }
  115. .rss {
  116.     color:#ff6600;
  117.     text-decoration:none;
  118.     font-size:11px;
  119. }
  123. .rss a{
  124.     color:#046380;
  125.     text-decoration:none;
  126.     font-size:11px;
  127. }
  130. .rss a:hover{
  131.     color:#4BB5C1;
  132.     text-decoration:none;
  133.     font-size:11px;
  134. }
  137. .annau{
  138.     color:#ffff00;
  139.     text-decoration:none;
  140.     font-size:28px;
  141. }
  144. .annau:hover{
  145.     color:#F1F1F1;
  146.     text-decoration:none;
  147.     font-size:28px;
  148. }
  150. .sitetable {
  151.     width: 100%;
  152.     border: 1px solid #c2c2c2;
  153.     vertical-align : top;
  154. }
  156. .sitetables {
  157.     width: 100%;
  158.     vertical-align : top;
  159. }
  161. .sitetd {
  162.     border: 1px solid #c2c2c2;
  163. }
  165. .votelargeur {width: 50px;}
  167. a.cat_display {
  168.     text-decoration: none;
  169.     font-weight: bold;
  170.     font-size: 13px;
  171.     color:#333333;
  172. }
  174. a.cat_display:hover {
  175.     text-decoration: none;
  176.     font-weight: bold;
  177.     font-size: 13px;
  178.     color:#CC0000;
  179.     }
  181. a.subcat_display {
  182.     text-decoration: none;
  183.     font-size: 10px;
  184.     border-bottom : 1px dotted #CCC;
  185. }
  188. .votetable {
  189.     background: #ffffff;
  190.     width : 50px;
  191.     height: 92px;
  192.     margin-right: 5px;
  194. }
  196. .vote span.note {
  197. font-size: 9px;
  198. height: 12px;
  199. display: block;
  201. }
  202. .vote span.nombre
  203. {
  204. font-size: 16px;
  205. display: block;
  206. }
  208. .vote a{
  209.     color: #399171;
  210.     font-size: 16px;
  211.     font-weight: bold;
  212. }
  214. .vote a:hover{
  215.     color: #399171;
  216.     font-size: 16px;
  217.     font-weight: bold;
  218. }
  222. /* Onglets fiche site */
  223. #containered {
  224.     font: bold 10px Verdana;
  225.     list-style-type: none;
  226.     text-align: left;
  227.     width: 540px;
  228. }
  230. #containered hr {
  231.     clear: both;
  232.     border: 1px solid #CCC;
  233.     margin-top: 10px;
  234.     width: 50%;
  235. }
  237. #containered ul#mest {   
  238.     font-weight: bold;
  239. }
  240. #containered ul#mest li {
  241.     font: bold 10px Verdana;
  242.     list-style-type: none;
  243.     text-align: left;
  244.     display: inline;
  245.     margin: 1px;
  246. }
  247. #containered ul#mest li a {
  248. text-decoration: none;
  250. }
  251. #containered ul#mest li a:hover {
  252. text-decoration: none;
  253. color: #333333;
  254. }
  255. #containered h1,
  257. #containered .content {
  258.     border: 1px solid #d5d5d5;
  259.     padding: 10px;
  260.     text-align: left;
  261. }
  263. #containered a.current {
  264.     padding: 5px 3px;
  265.     border: 1px solid #d5d5d5;
  266.     background-image: url(images/shadeactive.gif);
  267.     border-bottom-color: white;
  268.     background-color: white;
  269.     color: #333333;
  270.     font-size: 12px;
  271. }
  272. #containered a.ghost  {
  273.     padding: 5px 3px;
  274.     margin-right: 1px;
  275.     border: 1px solid #d5d5d5;
  276.     color: #333333;
  277.     font-size: 12px;
  278.     background: white url(images/shade.gif) top left repeat-x;
  279. }
  281. #containered a.current:hover {
  282.     padding: 5px 3px;
  283.     border: 1px solid #d5d5d5;
  284.     background-image: url(images/shadeactive.gif);
  285.     border-bottom-color: white;
  286.     background-color: white;
  287.     font-size: 12px;
  288.     color: #333333;
  289. }
  290. #containered a.ghost:hover  {
  291.     padding: 5px 3px;
  292.     margin-right: 1px;
  293.     border: 1px solid #d5d5d5;
  294.     color: #333333;
  295.     font-size: 12px;
  296. }
  298. #containered .on {
  299.     display: block;
  300.     text-align: left;
  301. }
  302. #containered .off {
  303.     display: none;
  304. }
  306. form {
  307.     padding:0;
  308.     margin:0;   
  309. }
  311. input, textarea {
  312.     background-color:#fff;
  313.     padding:5px;
  314.     border:1px solid #cdcdcd;   
  315.     margin:0;
  316. }
  319. h2 {
  320.     font-size:22px;
  321.     font-weight:normal;
  322.     color:#757575;
  323.     line-height:27px;
  324.     margin:0;
  325. }
  327. a:link, a:visited {
  328.     color:#757575;
  329.     text-decoration:none;
  330. }
  332. a:hover {
  333.     text-decoration:underline;
  334. }
  336. #top-block {
  337.     width:878px;
  338.     height:92px;
  339.     background-image:url("images/top-block.gif" );
  340.     background-repeat:no-repeat;   
  341.     margin:auto;
  342. }
  344. #site-title a{
  345.     float:left;
  346.     width:270px;
  347.     font-size:26px;
  348.     color:#fff;
  349.     padding:5px 0 0 54px;
  350.     line-height:92px;
  351. }
  353. #site-slogan {
  354.     float:left;
  355.     width:290px;
  356.     width:285px;
  357.     font-size:11px;   
  358.     color:#fff;
  359.     padding:5px 0 0 15px;
  360.     line-height:92px;
  361.     text-align:center;
  362. }
  364. #search-box {
  365.     float:right;
  366.     width:230px;
  367.     padding:0 20px 0 0;
  368.     line-height:92px;
  369.     text-align:right;
  370. }
  372. #search-input {
  373.     width:151px;
  374.     height:19px;
  375.     background-image:url("images/search-background.gif" );   
  376.     background-repeat:no-repeat;   
  377.     border:0;   
  378.     vertical-align:middle;
  379. }   
  381. #search-button {
  382.     width:41px;
  383.     height:29px;
  384.     background-image:url("images/find.gif" );   
  385.     background-repeat:no-repeat;   
  386.     border:0;
  387.     margin:0;
  388.     vertical-align:middle;   
  389. }
  391. #top-divider{
  392.     width:878px;
  393.     height:49px;
  394.     background-image:url("images/top-divider.gif" );
  395.     background-repeat:no-repeat;   
  396.     margin:auto;
  397. }
  399. #top-nav-container {
  400.     width:878px;
  401.     height:60px;
  402.     margin:auto;
  403. }
  405. #top-nav-background {
  406.     float:left;
  407.     width:686px;
  408.     height:40px;
  409.     background-image:url("images/top-nav-background.gif" );
  410.     background-repeat:no-repeat;   
  411.     padding:20px 0 0 15px;   
  412. }
  414. #top-nav-background a {
  415.     font-size:11px;
  416.     font-weight:bold;
  417.     color:#717171;
  418.     background-image:url("images/grey-arrows.gif" );
  419.     background-repeat:no-repeat;   
  420.     padding:0 0 0 20px;
  421.     margin:0 20px 0 0;
  422.     vertical-align:middle;
  423. }
  425. #top-nav-background ul {
  426.     list-style-image:none;
  427.     list-style-type:none;   
  428.     margin:0;
  429. }
  431. #top-nav-background li {
  432.     display:inline;
  433.     list-style-type:none;
  434. }
  436. #date-background {
  437.     float:right;
  438.     width:177px;
  439.     height:60px;
  440.     font-size:11px;
  441.     color:#fff;
  442.     font-weight:bold;
  443.     background-image:url("images/date-background.gif" );
  444.     background-repeat:no-repeat;   
  445.     text-align:center;
  446.     line-height:32px;
  447. }
  449. #main-area {
  450.     width:876px;
  451.     background-color:#fff;
  452.     background-image:url("images/main-gradient.gif" );
  453.     background-repeat:repeat-x;       
  454.     padding:0 1px 0 1px;
  455.     margin:auto;
  456. }
  458. #sidebar {
  459.     float:right;
  460.     width:196px;
  461.     margin:0 10px 0 0;
  462. }
  464. .nav-header {
  465.     width:186px;
  466.     height:33px;
  467.     font-weight:bold;   
  468.     color:#fff;
  469.     background-image:url("images/nav-header.gif" );
  470.     background-repeat:no-repeat;   
  471.     padding:0 10px 0 0;
  472.     margin:0 0 10px 0;
  473.     text-align:right;
  474.     line-height:33px;
  475. }
  477. .nav-header a {
  478.     color:#fff;
  479. }
  481. .nav-content {
  482.     width:186px;
  483.     font-size:11px;
  484.     background-color:#f0f0f0;
  485.     list-style:none;
  486. }
  488. .nav-content ul {
  489.     list-style:none;
  490.     padding:0 10px 0 10px;
  491.     margin:0;
  492. }
  494. .nav-content li {
  495.     background-image: url("images/green-arrows.gif" );
  496.     background-repeat:no-repeat;
  497.     border-bottom:1px dotted #858585;
  498.     padding:2px 0 2px 0;
  499.     margin:0;
  500. }
  502. .nav-content a {
  503.     margin:0 0 0 15px;
  504. }
  506. .nav-footer {
  507.     width:186px;
  508.     height:20px;
  509.     background-image:url("images/nav-footer.gif" );
  510.     background-repeat:no-repeat;       
  511.     margin:0 0 10px 0;
  512. }
  514. #main-content {
  515.     float:left;
  516.     width:610px;
  517.     background-image:url("images/main-content-background.gif" );
  518.     background-repeat:no-repeat;
  519.     padding:30px 20px 20px 30px;
  520.     margin:0 10px 0 0;
  521. }
  523. #data-header{
  524.     width:838px;
  525.     height:20px;
  526.     background-image:url("images/data-header.gif" );
  527.     background-repeat:no-repeat;       
  528.     margin:auto;   
  529. }
  531. #footer-content {
  532.     width:798px;
  533.     font-size:11px;
  534.     background-color:#444444;
  535.     padding:0 20px 0 20px;
  536.     margin:auto;
  537. }
  539. #footer-links {
  540.     float:left;
  541.     width:256px;
  542.     margin:0 15px 0 0;
  543. }
  545. #footer-pages {
  546.     float:left;
  547.     width:256px;
  548.     margin:0 15px 0 0;
  549. }
  551. #footer-posts {
  552.     float:left;
  553.     width:256px;
  554. }
  556. .footer-headers {
  557.     font-size:18px;
  558.     color:#fff;
  559. }
  561. #footer-content ul {
  562.     list-style:none;
  563.     padding:5px 10px 0 10px;
  564. }
  566. #footer-content li {
  567.     background-image: url("images/green-arrows.gif" );
  568.     background-repeat:no-repeat;
  569.     border-bottom:1px dotted #858585;
  570.     padding:2px 0 2px 0;
  571.     margin:0;
  572. }
  574. #footer-content a {
  575.     color:#ccc;
  576.     margin:0 0 0 15px;
  577. }
  579. #data-footer {
  580.     width:878px;
  581.     height:40px;
  582.     background-image:url("images/data-footer.gif" );
  583.     background-repeat:no-repeat;       
  584.     margin:auto;   
  585. }
  587. #copyright {
  588.     width:878px;
  589.     height:50px;
  590.     font-size:11px;
  591.     color:#fff;
  592.     background-image:url("images/copyright.gif" );
  593.     background-repeat:no-repeat;       
  594.     margin:10px auto 0 auto;
  595.     line-height:50px;
  596. }
  598. #sponsor-text {
  599.     float:left;
  600.     padding:0 0 0 20px;
  601. }
  603. #sponsor-text a {
  604.     color:#fff;
  605. }
  607. #copyright-text {
  608.     float:right;
  609.     padding:0 55px 0 0;
  610. }
  612. .post-wrap {
  613.     width:610px;
  614. }
  616. .post-content-wrap {
  617.     float:left;
  618.     width:516px;
  619. }
  621. .post-content-wrap a {
  622.     color:#333;
  623. }
  625. .post-date {
  626.     float:right;
  627.     width:65px;
  628.     height:93px;
  629.     background-repeat:no-repeat;   
  630.     padding:11px 0 0 0;
  631.     margin:0 0 0 20px;
  632.     text-align:center;
  633. }
  635. .post-title a {
  636.     font-size:22px;
  637.     color:#757575;
  638.     line-height:27px;
  639. }
  641. .date-month {
  642.     font-size:12px;
  643.     font-weight:bold;
  644.     color:#fff;   
  645. }
  647. .date-day {
  648.     display:block;
  649.     font-size:25px;
  650.     font-weight:bold;
  651.     color:#fff;   
  652. }
  654. .entry {
  655.     clear:both;
  656.     display:block;
  657. }
  659. .post-info {
  660.     float:left;
  661.     width:532px;
  662.     font-size:11px;
  663.     color:#b2b2b2;
  664.     background-color:#f4f4f4;
  665.     border:1px solid #dedede;
  666.     padding:5px;
  667.     margin:15px 0 25px 0;
  668. }
  670. .post-info a {
  671.     color:#b4b4b4;
  672. }
  674. .post-info-icon {
  675.     vertical-align:middle;
  676.     margin:0 15px 0 15px;
  677. }
  679. .pagination a {
  680.     display:block;
  681.     float:left;
  682.     width:101px;
  683.     height:31px;
  684.     font-size:11px;
  685.     font-weight:bold;
  686.     color:#fff;
  687.     background-image:url("images/button.gif" );
  688.     background-repeat:no-repeat;   
  689.     margin:0 2px 0 0;
  690.     text-align:center;
  691.     line-height:31px;
  692. }
  694. .comment-meta-data {
  695.     font-size:11px;
  696.     color:#006538;   
  697. }
  699. .comment-meta-data a {
  700.     color:#757575;
  701. }
  703. .comment-1 {
  704.     background-color:#f0f0f0;
  705.     padding:10px 15px 10px 15px;   
  706. }
  708. .comment-2 {
  709.     background-color:#fff;
  710.     padding:10px 15px 10px 15px;   
  711. }
  713. #comment-submit {
  714.     width:101px;
  715.     height:31px;
  716.     font-size:11px;
  717.     font-weight:bold;
  718.     color:#fff;
  719.     background-image:url("images/button.gif" );
  720.     background-repeat:no-repeat;   
  721.     border:0;
  722.     padding:0;
  723.     text-align:center;
  724.     line-height:31px;   
  725. }




Il s'agit tout simplement du template AccesGlobes pour Freebloges que j'aimerais utiliser avec joomla.

Un aperçu du template sur www.mecaindex.fr : toute la partie droite 'Annuaire d'entreprises et fournisseurs en usinage' est décalée sous le menu et à priori je ne vois pas pourquoi .

Il y a aussi un défaut d'allignement de la page qui est à gauche au lieu d'être centrée.

Une idée ? :)

Merci,

Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > [CSS] Différence d'alignement entre IE et FX
Aller à :

Il y a 273 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,599 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens