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
Un bloc est décalé alors que tout est ok sous FX!
Voici le code généré en HTML :
<?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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Joomla en local - Accueil</title>
<meta name="description" content="Joomla - le portail dynamique de gestion de contenu" />
<meta name="keywords" content="Joomla, joomla" />
<meta name="Generator" content="Joomla! - Copyright (C) 2005 - 2007 Open Source Matters. All rights reserved." />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="http://127.0.0.1/joomla/images/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="http://127.0.0.1/joomla/templates/rhuk_solarflare_ii/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://127.0.0.1/joomla/templates/rhuk_solarflare_ii/js/utils.js"></script>
<script type="text/javascript" src="http://127.0.0.1/joomla/templates/rhuk_solarflare_ii/js/js_liveclock.js"></script>
</head>
<body>
<div id="top-block">
<div id="site-title">
<a href="http://127.0.0.1/joomla">Mecaindex.fr</a>
</div>
<div id="site-slogan">
usinage, décolletage et confections métalliques
</div>
<div id="search-box">
<form action="index.php?option=com_search&Itemid=5" method="get">
<div class="search-button">
<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>
<input type="hidden" name="option" value="com_search" />
<input type="hidden" name="Itemid" value="5" />
</form> </div>
</div>
<div id="top-divider"></div>
<div id="top-nav-container">
<div id="top-nav-background">
<ul>
<li class="page_item"><a href="http://127.0.0.1/joomla" title="Home">Home</a></li>
<li><a href="index.php?do=contact" title="Contact">Contact</a></li>
<li><a href="members/" target='_blank' title="Zone Membres">Zone Membres</a></li>
<li><a href="atom.php" target='_blank' title="Flux ATOM">Flux ATOM</a></li>
<li><a href="index.php?do=basic" title="<{$lang.submit_site}>">SOUMETTRE UN SITE</a></li>
</ul>
</div>
<div id="date-background">
<script>dT();</script>
</div>
</div>
<div id="main-area">
<div id="sidebar">
<div class="nav-content">
<ul>
<center>A voir aussi</center>
</ul>
</div>
<div class="nav-footer"></div>
<div class="nav-content">
<div class="nav-header">Navigation</div>
</div>
<div class="nav-footer"></div>
<div class="nav-content">
<div class="nav-header">Outils</div>
<ul>
<li><a href="http://search.mecaindex.fr" title="Search.mecaindex">Search.mecaindex</a></li>
<li><a href="https://www.usinages.com/ " title="Usinages.com">Forum de l'usinage</a></li>
</ul>
</div>
<div class="nav-footer"></div>
</div>
<div id="main-content">
<div class="post-wrap">
<div class="post-content-wrap">
<div class="post-title">
<a href="http://127.0.0.1/joomla" title="Accueil"> Annuaire d'entreprises et fournisseurs en usinage </a>
</div>
<div>
<div class="moduletable">
<h3>
CB Workflows </h3>
</div>
<div class="moduletable">
<h3>
Derniers articles </h3>
<ul class="latestnews">
<li class="latestnews">
<a href="http://127.0.0.1/joomla/index.php?option=com_content&task=view&id=2&Itemid=9" class="latestnews">
Newsflash 1</a>
</li>
<li class="latestnews">
<a href="http://127.0.0.1/joomla/index.php?option=com_content&task=view&id=3&Itemid=9" class="latestnews">
Newsflash 2</a>
</li>
<li class="latestnews">
<a href="http://127.0.0.1/joomla/index.php?option=com_content&task=view&id=4&Itemid=9" class="latestnews">
Newsflash 3</a>
</li>
<li class="latestnews">
<a href="http://127.0.0.1/joomla/index.php?option=com_content&task=view&id=6&Itemid=2" class="latestnews">
Exemple Article 1</a>
</li>
<li class="latestnews">
<a href="http://127.0.0.1/joomla/index.php?option=com_content&task=view&id=9&Itemid=2" class="latestnews">
Exemple Article 4</a>
</li>
</ul> </div>
</div>
<div>
<table class="blog" cellpadding="0" cellspacing="0"><tr><td valign="top"><div> <table class="contentpaneopen">
<tr>
<td class="contentheading" width="100%">
Bienvenue sur Joomla! </td>
</tr>
</table>
<table class="contentpaneopen">
<tr>
<td width="70%" align="left" valign="top" colspan="2">
<span class="small">
Écrit par Webmaster </span>
</td>
</tr>
<tr>
<td valign="top" colspan="2" class="createdate">
12-06-2004 </td>
</tr>
<tr>
<td valign="top" colspan="2">
Si vous avez tout lu sur les Systè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ès compliqué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érent du modèle habituel de logiciel web. Pour commencer, Joomla! est simple à prendre en main. Joomla! a été développé pour le plus grand nombre. Il est distribué sous license GNU/GPL, facile à installer, facile à administrer et stable. Les utilisateurs et administrateurs Joomla! n'auront même pas besoin de connaissances HTML pour mettre en oeuvre et gérer ce CMS.</p> </td>
</tr>
<tr>
<td colspan="2" align="left" class="modifydate">
Dernière mise à jour : ( 12-06-2004 )
</td>
</tr>
<tr>
<td align="left" colspan="2">
<a href="http://127.0.0.1/joomla/index.php?option=com_content&task=view&id=1&Itemid=1" class="readon">
Lire la suite...</a>
</td>
</tr>
</table>
<span class="article_seperator"> </span>
</div></td></tr><tr><td valign="top"><table width="100%" cellpadding="0" cellspacing="0"><tr><td valign="top" width="50%"> <table class="contentpaneopen">
<tr>
<td class="contentheading" width="100%">
Newsflash 1 </td>
</tr>
</table>
<table class="contentpaneopen">
<tr>
<td width="70%" align="left" valign="top" colspan="2">
<span class="small">
Écrit par Administrator </span>
</td>
</tr>
<tr>
<td valign="top" colspan="2" class="createdate">
09-08-2004 </td>
</tr>
<tr>
<td valign="top" colspan="2">
Joomla! 1.0 - 'Faites l'expérience de la liberté'!. Il n'a jamais été aussi facile de créer soi-même un site dynamique. Gérez tout le contenu de votre site depuis une interface d'administration. </td>
</tr>
</table>
<span class="article_seperator"> </span>
</td><td valign="top" width="50%"> <table class="contentpaneopen">
<tr>
<td class="contentheading" width="100%">
Newsflash 2 </td>
</tr>
</table>
<table class="contentpaneopen">
<tr>
<td width="70%" align="left" valign="top" colspan="2">
<span class="small">
Écrit par Administrator </span>
</td>
</tr>
<tr>
<td valign="top" colspan="2" class="createdate">
09-08-2004 </td>
</tr>
<tr>
<td valign="top" colspan="2">
Hier, tous les serveurs des Etats-Unis se sont mis en grève en revendiquant le droit à plus de RAM et à de meilleurs processeurs. Un porte parole a déclaré que ce besoin en RAM supplémentaire était consécutif à l'accroissement inconsidéré de la vitesse des bus front-side. Il a été demandé aux bus résidants des carte mères de lever le pied. </td>
</tr>
</table>
<span class="article_seperator"> </span>
</td></tr></table></td></tr><tr><td valign="top"><div class="blog_more"> <div>
<strong>
Suite... </strong>
</div>
<ul>
<li>
<a class="blogsection" href="http://127.0.0.1/joomla/index.php?option=com_content&task=view&id=4&Itemid=1">
Newsflash 3</a>
</li>
</ul>
</div></td></tr></table> </div>
<div>
<div class="moduletable">
<h3>
Articles les plus lus </h3>
<ul class="mostread">
<li class="mostread">
<a href="http://127.0.0.1/joomla/index.php?option=com_content&task=view&id=11&Itemid=9" class="mostread">
Exemple FAQ Item 2</a>
</li>
<li class="mostread">
<a href="http://127.0.0.1/joomla/index.php?option=com_content&task=view&id=10&Itemid=9" class="mostread">
Exemple FAQ Item 1</a>
</li>
<li class="mostread">
<a href="http://127.0.0.1/joomla/index.php?option=com_content&task=view&id=9&Itemid=2" class="mostread">
Exemple Article 4</a>
</li>
<li class="mostread">
<a href="http://127.0.0.1/joomla/index.php?option=com_content&task=view&id=6&Itemid=2" class="mostread">
Exemple Article 1</a>
</li>
<li class="mostread">
<a href="http://127.0.0.1/joomla/index.php?option=com_content&task=view&id=7&Itemid=2" class="mostread">
Exemple Article 2</a>
</li>
</ul> </div>
</div>
<div class="post-info">
Essai
</div>
</div>
</div>
<div class="post-date">
<span class="date-month">
<br clear="all" /><br clear="all" />
<a href="rss.php"><img src="http://127.0.0.1/joomla/templates/rhuk_solarflare_ii/images/rssmlp.gif" alt="Flux RSS"></a>
</div>
</div>
<br clear="all" />
</div>
<br clear="all" />
<div id="copyright">
<div id="sponsor-text">
Copyright © 2008 - Tous droits réservés
</div>
<div id="copyright-text">
</div>
</div>
<br clear="all" />
<br />
<script type="Text/Javascript">
if(document.links.length > 0)
{
for(var i=0; i < document.links.length; i++)
{
if (document.links[i].className.indexOf("_blank") > -1)
{
document.links[i].target="_blank";
}
}
}
</script>
</body>
</html>
Et voici le fichier style.css :
body {
font-family:Arial;
font-size:12px;
color:#777;
background-color:#a7a7a7;
background-image:url("images/site-background.gif");
background-repeat:repeat-x;
margin:0;
line-height:20px;
}
img {
border:0;
}
p img {
float:left;
margin:0 10px 0 0;
padding-left: 6px;
padding-bottom: 2px;
}
html {
scrollbar-face-color:#a7a7a7;
scrollbar-highlight-color:#a7a7a7;
scrollbar-3dlight-color:#a7a7a7;
scrollbar-darkshadow-color:#a7a7a7;
scrollbar-shadow-color:#a7a7a7;
scrollbar-arrow-color:#111111;
scrollbar-track-color:#a7a7a7;
}
.topsearch{
font-size:10px;
}
h1 { font: bold 1.31em "Arial", Sans-Serif; margin: 0; color: #a3ceff; }
h3 { font: bold 1.5em "Arial", Sans-Serif; margin: 0; color: #ff6600; }
h5 { font: bold 1.31em "Arial", Sans-Serif; margin: 0; color: #8FCF3C; }
h6 { font: bold 1.31em "Arial", Sans-Serif; margin: 0; color: #8FCF3C; }
.catego{
background: #ffffff;
width : 200px;
height: 6px;
padding: 3px 3px 3px 3px;
border: 1px dotted #CCCCFF;
}
table.sample {
width:100%;
}
table.sample th {
}
table.sample td {
width:33%;
text-align:left;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 3px;
-moz-border-radius: 12px;
}
.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}
.catwdc{
color:#55A16C;
text-decoration:none;
font-size:13px;
}
.catwdc a{
color:#55A16C;
text-decoration:none;
font-size:13px;
}
.catwdc a:hover{
color:#8FCF3C;
text-decoration:none;
font-size:13px;
}
.details{
color:#8FCF3C;
text-decoration:none;
font-size:11px;
}
.details a{
color:#D16903;
text-decoration:none;
font-size:11px;
}
.details a:hover{
color:#D16903;
text-decoration:underline;
font-size:11px;
}
.rss {
color:#ff6600;
text-decoration:none;
font-size:11px;
}
.rss a{
color:#046380;
text-decoration:none;
font-size:11px;
}
.rss a:hover{
color:#4BB5C1;
text-decoration:none;
font-size:11px;
}
.annau{
color:#ffff00;
text-decoration:none;
font-size:28px;
}
.annau:hover{
color:#F1F1F1;
text-decoration:none;
font-size:28px;
}
.sitetable {
width: 100%;
border: 1px solid #c2c2c2;
vertical-align : top;
}
.sitetables {
width: 100%;
vertical-align : top;
}
.sitetd {
border: 1px solid #c2c2c2;
}
.votelargeur {width: 50px;}
a.cat_display {
text-decoration: none;
font-weight: bold;
font-size: 13px;
color:#333333;
}
a.cat_display:hover {
text-decoration: none;
font-weight: bold;
font-size: 13px;
color:#CC0000;
}
a.subcat_display {
text-decoration: none;
font-size: 10px;
border-bottom : 1px dotted #CCC;
}
.votetable {
background: #ffffff;
width : 50px;
height: 92px;
margin-right: 5px;
}
.vote span.note {
font-size: 9px;
height: 12px;
display: block;
}
.vote span.nombre
{
font-size: 16px;
display: block;
}
.vote a{
color: #399171;
font-size: 16px;
font-weight: bold;
}
.vote a:hover{
color: #399171;
font-size: 16px;
font-weight: bold;
}
/* Onglets fiche site */
#containered {
font: bold 10px Verdana;
list-style-type: none;
text-align: left;
width: 540px;
}
#containered hr {
clear: both;
border: 1px solid #CCC;
margin-top: 10px;
width: 50%;
}
#containered ul#mest {
font-weight: bold;
}
#containered ul#mest li {
font: bold 10px Verdana;
list-style-type: none;
text-align: left;
display: inline;
margin: 1px;
}
#containered ul#mest li a {
text-decoration: none;
}
#containered ul#mest li a:hover {
text-decoration: none;
color: #333333;
}
#containered h1,
#containered .content {
border: 1px solid #d5d5d5;
padding: 10px;
text-align: left;
}
#containered a.current {
padding: 5px 3px;
border: 1px solid #d5d5d5;
background-image: url(images/shadeactive.gif);
border-bottom-color: white;
background-color: white;
color: #333333;
font-size: 12px;
}
#containered a.ghost {
padding: 5px 3px;
margin-right: 1px;
border: 1px solid #d5d5d5;
color: #333333;
font-size: 12px;
background: white url(images/shade.gif) top left repeat-x;
}
#containered a.current:hover {
padding: 5px 3px;
border: 1px solid #d5d5d5;
background-image: url(images/shadeactive.gif);
border-bottom-color: white;
background-color: white;
font-size: 12px;
color: #333333;
}
#containered a.ghost:hover {
padding: 5px 3px;
margin-right: 1px;
border: 1px solid #d5d5d5;
color: #333333;
font-size: 12px;
}
#containered .on {
display: block;
text-align: left;
}
#containered .off {
display: none;
}
form {
padding:0;
margin:0;
}
input, textarea {
background-color:#fff;
padding:5px;
border:1px solid #cdcdcd;
margin:0;
}
h2 {
font-size:22px;
font-weight:normal;
color:#757575;
line-height:27px;
margin:0;
}
a:link, a:visited {
color:#757575;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
#top-block {
width:878px;
height:92px;
background-image:url("images/top-block.gif");
background-repeat:no-repeat;
margin:auto;
}
#site-title a{
float:left;
width:270px;
font-size:26px;
color:#fff;
padding:5px 0 0 54px;
line-height:92px;
}
#site-slogan {
float:left;
width:290px;
width:285px;
font-size:11px;
color:#fff;
padding:5px 0 0 15px;
line-height:92px;
text-align:center;
}
#search-box {
float:right;
width:230px;
padding:0 20px 0 0;
line-height:92px;
text-align:right;
}
#search-input {
width:151px;
height:19px;
background-image:url("images/search-background.gif");
background-repeat:no-repeat;
border:0;
vertical-align:middle;
}
#search-button {
width:41px;
height:29px;
background-image:url("images/find.gif");
background-repeat:no-repeat;
border:0;
margin:0;
vertical-align:middle;
}
#top-divider{
width:878px;
height:49px;
background-image:url("images/top-divider.gif");
background-repeat:no-repeat;
margin:auto;
}
#top-nav-container {
width:878px;
height:60px;
margin:auto;
}
#top-nav-background {
float:left;
width:686px;
height:40px;
background-image:url("images/top-nav-background.gif");
background-repeat:no-repeat;
padding:20px 0 0 15px;
}
#top-nav-background a {
font-size:11px;
font-weight:bold;
color:#717171;
background-image:url("images/grey-arrows.gif");
background-repeat:no-repeat;
padding:0 0 0 20px;
margin:0 20px 0 0;
vertical-align:middle;
}
#top-nav-background ul {
list-style-image:none;
list-style-type:none;
margin:0;
}
#top-nav-background li {
display:inline;
list-style-type:none;
}
#date-background {
float:right;
width:177px;
height:60px;
font-size:11px;
color:#fff;
font-weight:bold;
background-image:url("images/date-background.gif");
background-repeat:no-repeat;
text-align:center;
line-height:32px;
}
#main-area {
width:876px;
background-color:#fff;
background-image:url("images/main-gradient.gif");
background-repeat:repeat-x;
padding:0 1px 0 1px;
margin:auto;
}
#sidebar {
float:right;
width:196px;
margin:0 10px 0 0;
}
.nav-header {
width:186px;
height:33px;
font-weight:bold;
color:#fff;
background-image:url("images/nav-header.gif");
background-repeat:no-repeat;
padding:0 10px 0 0;
margin:0 0 10px 0;
text-align:right;
line-height:33px;
}
.nav-header a {
color:#fff;
}
.nav-content {
width:186px;
font-size:11px;
background-color:#f0f0f0;
list-style:none;
}
.nav-content ul {
list-style:none;
padding:0 10px 0 10px;
margin:0;
}
.nav-content li {
background-image: url("images/green-arrows.gif");
background-repeat:no-repeat;
border-bottom:1px dotted #858585;
padding:2px 0 2px 0;
margin:0;
}
.nav-content a {
margin:0 0 0 15px;
}
.nav-footer {
width:186px;
height:20px;
background-image:url("images/nav-footer.gif");
background-repeat:no-repeat;
margin:0 0 10px 0;
}
#main-content {
float:left;
width:610px;
background-image:url("images/main-content-background.gif");
background-repeat:no-repeat;
padding:30px 20px 20px 30px;
margin:0 10px 0 0;
}
#data-header{
width:838px;
height:20px;
background-image:url("images/data-header.gif");
background-repeat:no-repeat;
margin:auto;
}
#footer-content {
width:798px;
font-size:11px;
background-color:#444444;
padding:0 20px 0 20px;
margin:auto;
}
#footer-links {
float:left;
width:256px;
margin:0 15px 0 0;
}
#footer-pages {
float:left;
width:256px;
margin:0 15px 0 0;
}
#footer-posts {
float:left;
width:256px;
}
.footer-headers {
font-size:18px;
color:#fff;
}
#footer-content ul {
list-style:none;
padding:5px 10px 0 10px;
}
#footer-content li {
background-image: url("images/green-arrows.gif");
background-repeat:no-repeat;
border-bottom:1px dotted #858585;
padding:2px 0 2px 0;
margin:0;
}
#footer-content a {
color:#ccc;
margin:0 0 0 15px;
}
#data-footer {
width:878px;
height:40px;
background-image:url("images/data-footer.gif");
background-repeat:no-repeat;
margin:auto;
}
#copyright {
width:878px;
height:50px;
font-size:11px;
color:#fff;
background-image:url("images/copyright.gif");
background-repeat:no-repeat;
margin:10px auto 0 auto;
line-height:50px;
}
#sponsor-text {
float:left;
padding:0 0 0 20px;
}
#sponsor-text a {
color:#fff;
}
#copyright-text {
float:right;
padding:0 55px 0 0;
}
.post-wrap {
width:610px;
}
.post-content-wrap {
float:left;
width:516px;
}
.post-content-wrap a {
color:#333;
}
.post-date {
float:right;
width:65px;
height:93px;
background-repeat:no-repeat;
padding:11px 0 0 0;
margin:0 0 0 20px;
text-align:center;
}
.post-title a {
font-size:22px;
color:#757575;
line-height:27px;
}
.date-month {
font-size:12px;
font-weight:bold;
color:#fff;
}
.date-day {
display:block;
font-size:25px;
font-weight:bold;
color:#fff;
}
.entry {
clear:both;
display:block;
}
.post-info {
float:left;
width:532px;
font-size:11px;
color:#b2b2b2;
background-color:#f4f4f4;
border:1px solid #dedede;
padding:5px;
margin:15px 0 25px 0;
}
.post-info a {
color:#b4b4b4;
}
.post-info-icon {
vertical-align:middle;
margin:0 15px 0 15px;
}
.pagination a {
display:block;
float:left;
width:101px;
height:31px;
font-size:11px;
font-weight:bold;
color:#fff;
background-image:url("images/button.gif");
background-repeat:no-repeat;
margin:0 2px 0 0;
text-align:center;
line-height:31px;
}
.comment-meta-data {
font-size:11px;
color:#006538;
}
.comment-meta-data a {
color:#757575;
}
.comment-1 {
background-color:#f0f0f0;
padding:10px 15px 10px 15px;
}
.comment-2 {
background-color:#fff;
padding:10px 15px 10px 15px;
}
#comment-submit {
width:101px;
height:31px;
font-size:11px;
font-weight:bold;
color:#fff;
background-image:url("images/button.gif");
background-repeat:no-repeat;
border:0;
padding:0;
text-align:center;
line-height:31px;
}
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 .
De plus la page s'affiche à gauche de l'écran au lieu d'être centrée.
Des idées?
Merci,
Afficher la suite
