- Si je me base par rapport a l'outil de développement de chrome, tu as bien tes trois colonnes, avec une largeur fixé a 132px; (normal c'est ce que tu as écrit ton css). je te conseil de mettre 315px par colonne.
- Autre chose la largeur de #wrapper est de 1000px donc il faut que tu réduise la largeur du #footer (a cause des marges et des padding).
- display: table-cell; définit les blocs comme des cellules de tableaux (pratique car quelques soit la hauteurs du contenu des colonnes, elle reste bien aligner).
- l'image que tu utilise dans le footer est trop grande 1000px au lieu de 950 a réduire
- je te rappel que chaque id doit être unique, il faut que tu supprime le deuxième <div id="footer">.
- Au vue de tes derniers commentaires et de ton site je vois ce que tu veux faire et voici les codes qui vont avec
Code a inclure dans ton pied de page Xoops
<p class="colonne">
Contenu de ta première colonne
</p>
<p class="colonne">
Contenu de la seconde colonne
</p>
<p class="colonne">
Contenu de la troisième colonne
</p>
Le fichier theme :
<!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" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<head>
<{assign var=theme_name value=$xoTheme->folderName}>
<title><{if $xoops_pagetitle !=''}><{$xoops_pagetitle}> - <{/if}><{$xoops_sitename}></title>
<meta http-equiv="content-type" content="text/html; charset=<{$xoops_charset}>" />
<meta name="robots" content="<{$xoops_meta_robots}>" />
<meta name="keywords" content="<{$xoops_meta_keywords}>" />
<meta name="description" content="<{$xoops_meta_description}>" />
<meta name="rating" content="<{$xoops_meta_rating}>" />
<meta name="author" content="<{$xoops_meta_author}>" />
<meta name="copyright" content="<{$xoops_meta_copyright}>" />
<meta name="generator" content="XOOPS" />
<link rel="alternate" type="application/rss+xml" href="<{xoAppUrl backend.php}>" />
<link rel="shortcut icon" type="image/ico" href="<{xoImgUrl icons/favicon.ico}>" />
<link rel="icon" type="image/png" href="<{xoImgUrl icons/icon.png}>" />
<link type="text/css" rel="stylesheet" href="<{xoImgUrl css/style.css}>" />
<{$xoops_module_header}>
</head>
<body>
<div id="wrapper">
<div id="header">
<a class="sitename" href="<{$xoops_url}>"><img src="<{xoImgUrl images/logo.png}>" /></a>
<{includeq file="$theme_name/menu.html"}>
<div id="navigation">
<ul>
<li class="nav-com<{if $xoops_dirname == 'news'}>-active<{/if}>"><a href="<{$xoops_url}>/modules/news">News</a></li>
<li class="nav-com<{if $xoops_dirname == 'newbb'}>-active<{/if}>"><a href="<{$xoops_url}>/modules/newbb">Forum</a></li>
<li class="nav-com<{if $xoops_dirname == 'wfdownloads'}>-active<{/if}>"><a href="<{$xoops_url}>/modules/wfdownloads">Downloads</a></li>
<li class="nav-com<{if $xoops_dirname == 'myalbum'}>-active<{/if}>"><a href="<{$xoops_url}>/modules/myalbum">Gallerie</a></li>
<li class="nav-com<{if $xoops_dirname == 'xoopspoll'}>-active<{/if}>"><a href="<{$xoops_url}>/modules/xoopspoll">Umfragen</a></li>
<li class="nav-com<{if $xoops_dirname == 'contact'}>-active<{/if}>"><a href="<{$xoops_url}>/modules/contact">Support</a></li>
</ul>
</div>
</div>
<div id="contentWrapper<{if $xoBlocks.canvas_left and $xoBlocks.canvas_right}>1<{elseif $xoBlocks.canvas_right}>2<{elseif $xoBlocks.canvas_left}>3<{/if}>">
<{if $xoBlocks.canvas_left}>
<div id="left">
<{includeq file="$theme_name/block.html" blocks=$xoBlocks.canvas_left}>
</div>
<{/if}>
<{if $xoops_contents && ($xoops_contents != ' ') or $xoBlocks.page_topleft or $xoBlocks.page_topcenter or $xoBlocks.page_topright or $xoBlocks.page_bottomleft or $xoBlocks.page_bottomcenter or $xoBlocks.page_bottomright}>
<div id="content">
<{if $xoBlocks.page_topleft or $xoBlocks.page_topcenter or $xoBlocks.page_topright}>
<div id="centerblocks">
<div class="centerblocks-center">
<{foreach item=block from=$xoBlocks.page_topcenter}>
<{includeq file="$theme_name/centerblock.html"}>
<{/foreach}>
</div>
<div class="centerblocks-left">
<{foreach item=block from=$xoBlocks.page_topleft}>
<{includeq file="$theme_name/centerblock.html"}>
<{/foreach}>
</div>
<div class="centerblocks-right">
<{foreach item=block from=$xoBlocks.page_topright}>
<{includeq file="$theme_name/centerblock.html"}>
<{/foreach}>
</div>
</div>
<br style="clear: both;" />
<{/if}>
<{$xoops_contents}>
<{if $xoBlocks.page_bottomleft or $xoBlocks.page_bottomcenter or $xoBlocks.page_bottomright}>
<div id="centerblocks">
<div class="centerblocks-center">
<{foreach item=block from=$xoBlocks.page_bottomcenter}>
<{includeq file="$theme_name/centerblock.html"}>
<{/foreach}>
</div>
<div class="centerblocks-left">
<{foreach item=block from=$xoBlocks.page_bottomleft}>
<{includeq file="$theme_name/centerblock.html"}>
<{/foreach}>
</div>
<div class="centerblocks-right">
<{foreach item=block from=$xoBlocks.page_bottomright}>
<{includeq file="$theme_name/centerblock.html"}>
<{/foreach}>
</div>
</div>
<{/if}>
</div>
<{/if}>
<{if $xoBlocks.canvas_right}>
<div id="right">
<{includeq file="$theme_name/block.html" blocks=$xoBlocks.canvas_right}>
</div>
<{/if}>
<div class="contentfooter">
<{$xoops_footer}>
</div>
</div>
</div>
</body>
</html>
et le css qui va avec :
@charset "utf-8";
/* CSS Document */
* {
border: 0;
padding: 0;
margin: 0;
vertical-align: baseline;
font: 13px Verdana, serif, sans-serif;
color: #555;
}
body {
background: #0D1E28;
width: 1024px;
margin-left: auto;
margin-right: auto;
}
a {
color: #0D1E28;
text-decoration: none;
}
a:hover {
color: #1E5E79;
text-decoration: underline;
}
#wrapper {
width: 1000px;
padding: 10px;
margin-top: 20px;
}
#header {
width: 980px;
height: 150px;
background: url(../images/header.png);
padding: 10px 10px 10px 11px;
}
.sitename img {
padding: 10px 0 0 0;
}
a:hover.sitename {
text-decoration: none;
}
#navigation {
margin-top: 54px;
background: url(../images/bg-nav.png);
width: 979px;
float: left;
height: 28px;
border-top: 2px solid #CCC;
border-bottom: 2px solid #CCC;
}
#navigation ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#navigation ul li {
display: inline;
padding: 5px;
height: 18px;
margin-left: 25px;
font-weight: bold;
}
#navigation ul li a {
font-weight: bold;
color: #111;
}
#navigation ul li.nav-com-active {
background: url(../images/bg-nav-com-active.png) center bottom no-repeat;
}
#contentWrapper, #contentWrapper1, #contentWrapper2, #contentWrapper3 {
width: 970px;
padding: 5px 15px 5px 15px;
background: url(../images/bg-contentWrapper.png);
}
/* ContentWrapper1 */
#contentWrapper1 #left {
float: left;
width: 190px;
margin-right: 5px;
padding: 5px;
}
#contentWrapper1 #content {
float: left;
width: 550px;
padding: 5px;
}
#contentWrapper1 #right {
float: right;
width: 190px;
margin-left: 5px;
padding: 5px;
}
/* ContentWrapper2 */
#contentWrapper2 #left {
display: none;
}
#contentWrapper2 #content {
float: left;
width: 750px;
padding: 5px;
}
#contentWrapper2 #right {
float: right;
width: 190px;
margin-left: 5px;
padding: 5px;
}
/* ContentWrapper3 */
#contentWrapper3 #left {
float: left;
width: 190px;
margin-right: 5px;
padding: 5px;
}
#contentWrapper3 #content {
float: right;
width: 750px;
padding: 5px;
}
#contentWrapper3 #right {
display: none;
}
/* Centerblocks */
#contentWrapper1 #centerblocks .centerblocks-center {
width: 550px;
margin-bottom: 10px;
}
#contentWrapper1 #centerblocks .centerblocks-left {
width: 270px;
float: left;
margin-right: 10px;
}
#contentWrapper1 #centerblocks .centerblocks-right {
width: 270px;
float: right;
}
#contentWrapper2 #centerblocks .centerblocks-center {
width: 750px;
margin-bottom: 10px;
}
#contentWrapper2 #centerblocks .centerblocks-left {
width: 370px;
float: left;
margin-right: 10px;
}
#contentWrapper2 #centerblocks .centerblocks-right {
width: 370px;
float: right;
}
#contentWrapper3 #centerblocks .centerblocks-center {
width: 750px;
margin-bottom: 10px;
}
#contentWrapper3 #centerblocks .centerblocks-left {
width: 370px;
float: left;
margin-right: 10px;
}
#contentWrapper3 #centerblocks .centerblocks-right {
width: 370px;
float: right;
}
#centerblocks .centerblocks-center .block-title, .centerblocks-left .block-title, .centerblocks-right .block-title {
font-weight: bold;
padding: 3px;
border-bottom: 1px solid #EBEBEB;
}
#centerblocks .centerblocks-center .block-content, .centerblocks-left .block-content, .centerblocks-right .block-content {
padding: 3px;
border: 1px solid #EBEBEB;
background: #FFF url(../images/bg-centerblock.png) repeat-x;
margin-bottom: 10px;
}
.errorMsg,.confirmMsg, .resultMsg, .successMsg {
text-align: center;
margin: 10px;
padding: 20px;
}
.errorMsg {
background-color: #FBE3E4;
color: #D12F19;
border: 1px solid #FBC2C4;
}
.confirmMsg {
background-color: #FFF6BF;
color: #817134;
border: 1px solid #FFD324;
}
.resultMsg, .successMsg {
background-color: #E6EFC2;
color: #529214;
border: 1px solid #C6D880;
}
.block {
width: 190px;
height: auto;
margin-bottom: 10px;
}
.block .blocktitle {
background: url(../images/bg-blocktitle.png) no-repeat;
text-align: center;
font-weight: bold;
color: #FFF;
height: 27px;
padding-top: 8px;
overflow: hidden;
}
.block .blockcontent {
padding: 5px;
border: 2px solid #CCC;
border-bottom: none;
border-top: none;
}
.block .blockcontent ul {
list-style: none;
}
.block .blockcontent table {
border: 0;
}
.block .blockcontent table.outer {
border: 1px solid #CCC;
}
.block .blockfooter {
height: 30px;
width: 190px;
background: url(../images/bg-blockfooter.png);
}
#mainmenu a, #usermenu a {
display: block;
margin-bottom: 3px;
}
#mainmenu a.menuSub, #usermenu a.menuSub {
display: block;
margin: 2px 2px 2px 8px;
font-style: italic;
}
table {
clear: both;
border: 1px solid #CCC;
padding: 1px;
margin-bottom: 3px;
}
table td, th {
padding: 3px;
}
thead, th {
background: url(../images/bg-th.png) center;
color: #FFF;
font-weight: bold;
}
thead, th a {
color: #FFF;
font-weight: bold;
}
.head, .footer {
background: #F1F1F1;
}
.even {
background: #FAFAFA;
}
.odd {
background: #FFF;
}
.usermenu, .login {
margin: 15px;
float: right;
}
.usermenu span, .login span {
padding: 5px 0 3px 5px;
}
ul {
list-style-type: none;
}
input[type=text], input[type=select], input[type=password], input[type=checkbox], select {
padding: 3px;
color: #111;
border: 1px solid #CCC;
margin: 3px;
}
input[type=submit], input[type=reset], input[type=button], button {
padding: 3px;
color: #111;
border: 1px solid #CCC;
margin: 3px;
height: 25px;
background: url(../images/bg-button.png);
}
input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, button:hover {
background: url(../images/bg-button-over.png);
}
.item {
border: 0;
}
.item table {
border: 0;
}
.item .itemHead {
border-bottom: 1px solid #CCC;
padding: 3px;
}
.item .itemTitle, .itemTitle a {
font-size: 18px;
font-weight: bold;
}
.item .itemInfo {
font-style: italic;
color: #CCC;
}
.item .itemInfo .itemPoster, .itemPoster a {
font-style: italic;
color: #CCC;
}
.item .itemInfo .itemPoster a:hover {
color: #23497C;
}
.item .itemInfo .itemPostDate {
font-style: italic;
color: #CCC;
}
.item .itemInfo .itemStats {
font-style: italic;
color: #CCC;
}
.item .itemBody .itemText {
padding: 5px;
}
.item .itemFoot {
border-top: 1px solid #F4F4F4;
padding: 5px;
text-align: right;
border-bottom: 1px solid #CCC;
}
.contentfooter {
clear: both;
display: table;
margin: 10px 10px 0 10px;
padding-top: 5px;
text-align: center;
border-top: 1px solid #EBEBEB
}
.colonne{
display: table-cell;
width: 315px;
padding: 5px;
}
.colonne:first-child {
vertical-align: middle;
text-align: center;
}
.colonne + .colonne {
border-left:2px solid #fff;
vertical-align: middle;
text-align: center;
}
.colonne + .colonne + .colonne {
border-left:2px solid #fff;
vertical-align: middle;
text-align: center;
}
#xo-logger-output {
width: 1010px;
margin: auto;
}
.comTitle {
color: #FFF;
font-weight: bold;
}
#comment {
margin-bottom: 10px;
padding: 3px;
border-bottom: 1px dotted #CCC;
float: left;
width: 100%;
}
#comment .com-left {
padding: 5px;
width: 20%;
float: left;
}
#comment .com-left div {
margin-bottom: 5px;
}
#comment .com-right {
margin-bottom: 5px;
width: 78%;
float: right;
}
#comment .com-right .com-actions {
text-align: right;
}
Comme tu peux voir j'ai modifié la class .contentfooter et j'ai rajouter la class .colonne
De cette façon, ca fonctionnera sans problème (sauf sur IE7 et IE6)
![Open in new window](javascript:CaricaFoto("/uploads/newbb/14931_5325680ead6ec.png");)
