- 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)
Tous les messages (montuy337513)
![Open in new window](javascript:CaricaFoto("/uploads/newbb/14931_5325680ead6ec.png");)
Transférer
