Tweet
Bonjour,
Cela fait plusieurs fois que j'essaye tant bien que mal de faire en sorte que mon footer prenne toute la largeur de la page. J'ai regardé sur plusieurs forums, entré les bonnes propriétés CSS mais rien n'y fait. Pourtant j'ai bien vérifier à ce qu'il n'hérite pas d'une propriété qui viendrait me gêner.
Mon footer fait 1000*150px.
Voici le index.php
Et le template.css
(je n'ai pas trouvé la bonne balise pour le css)
Es ce que quelqu'un aurait une idée ?
Je vous remercie d'avance,
Cordialement
Cela fait plusieurs fois que j'essaye tant bien que mal de faire en sorte que mon footer prenne toute la largeur de la page. J'ai regardé sur plusieurs forums, entré les bonnes propriétés CSS mais rien n'y fait. Pourtant j'ai bien vérifier à ce qu'il n'hérite pas d'une propriété qui viendrait me gêner.
Mon footer fait 1000*150px.
Voici le index.php
Code PHP:
<?php
/**
* @copyright Copyright (C) 2011 Cédric KEIFLIN alias ced1870
* http://www.ck-web-creation-alsace.com
* http://www.joomlack.fr
* Template 1870 pour Joomla! 1.6
* @license GNU/GPL
* @ version : 1.1
**/
defined('_JEXEC') or die;
?>
<!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="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction ?>">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<?php
$centreclass = 'large';
if ($this->countModules('position-6')) :
$centreclass = 'normal';
endif;
?>
<?php
$nbmodules = 0;
if ($this->countModules('module-1')) $nbmodules++;
if ($this->countModules('module-2')) $nbmodules++;
if ($this->countModules('module-3')) $nbmodules++;
if ($nbmodules == 1) $modulesclasse = 'entier';
if ($nbmodules == 2) $modulesclasse = 'moitie';
if ($nbmodules == 3) $modulesclasse = 'tiers';
?>
</head>
<body>
<div id="wrapper">
<div id="conteneur">
<div id="header">
<div id="logo">
<h1>SuperSite</h1>
</div>
<!-- Insertion d'un slideShow à la place des news -->
<div id="news">
<jdoc:include type="modules" name="news" />
</div>
<!-- Fin insertion slideShow -->
<div class="clr"></div>
</div>
<div id="topmenu">
<jdoc:include type="modules" name="position-1" />
</div>
<div class="clr"></div>
<?php if ($this->countModules('position-12')) : ?>
<div id="slideshow">
<jdoc:include type="modules" name="position-12" />
</div>
<?php endif; ?>
<div id="breadcrumbs">
<jdoc:include type="modules" name="position-2" />
</div>
<div id="gauche">
<jdoc:include type="modules" name="position-7" style="xhtml" />
</div>
<div id="centre" class="<?php echo $centreclass; ?>">
<div class="interne">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
</div>
<?php if ($this->countModules('position-6')) : ?>
<div id="droite">
<jdoc:include type="modules" name="position-6" style="xhtml" />
</div>
<?php endif; ?>
<div class="clr"></div>
</div>
<?php if ($nbmodules) : ?>
<?php if ($this->countModules('module-1')) : ?>
<div class="modules_bas <?php echo $modulesclasse; ?>">
<div class="interne">
<jdoc:include type="modules" name="module-1" style="xhtml" />
</div>
</div>
<?php endif; ?>
<?php if ($this->countModules('module-2')) : ?>
<div class="modules_bas <?php echo $modulesclasse; ?>">
<div class="interne">
<jdoc:include type="modules" name="module-2" style="xhtml" />
</div>
</div>
<?php endif; ?>
<?php if ($this->countModules('module-3')) : ?>
<div class="modules_bas <?php echo $modulesclasse; ?>">
<div class="interne">
<jdoc:include type="modules" name="module-3" style="xhtml" />
</div>
</div>
<?php endif; ?>
<div class="clr"></div>
<?php endif; ?>
<!-- le footer -->
<div id="footer">
<jdoc:include type="modules" name="position-14" style="xhtml" />
<p>Copyright LeSuperSite - 2011/2012 - Tous droits reservés - Mentions légales</a></p>
</div>
<!-- fin du footer -->
</div>
<jdoc:include type="modules" name="debug" />
</body>
</html>
Code:
html {
height: 101%;
overflow : hidden;
}
body {
color : #333;
background : #FFFFF;
font-family: Arial, sans-serif;
font-size : 12px;
padding : 0;
margin : 0;
}
img {
border : none;
}
a {
color : #9e9e9e;
}
a:hover {
text-decoration : none;
}
a:focus {
outline: none;
}
.clr {
clear : both;
}
li {
list-style : none;
}
p {
padding : 4px 0 4px 0;
}
* {
margin : 0;
padding : 0;
}
h1, h2, h3, h4, h5 {
font-size : 14px;
font-weight : normal;
}
#wrapper {
margin: 0 auto;
}
@font-face {
font-family: "ThrowMyHandsUpintheAir";
src: url('ThrowMyHandsUpintheAir.ttf');
}
@font-face {
font-family: "ThrowMyHandsUpintheAirBold";
src: url('ThrowMyHandsUpintheAirBold.ttf');
}
#topmenu {
height: 50px;
}
#slideshow {
height: 235px;
clear: both;
margin: 10px 0 10px 0;
}
#breadcrumbs {
height: 20px;
}
#gauche {
width: 200px;
float: left;
}
/*#centre.normal{
float: left;
width: 590px;
}*/
#centre.large {
float: right%;
width: 790px;
}
/*
#centre div.interne {
padding: 10px;
}*/
#droite {
width: 200px;
float: left;
}
/***** HEADER *****/
#header{
background-color:#5b3715;
height: 120px;
margin-top : 0;
}
#logo {
height: 100px;
width: 490px;
float: left;
/*background: url(../images/logo.png) top left no-repeat;*/
}
#logo h1{
margin-top : 5%;
display: block;
font-size: 5em;
color : #FFFFFF;
font-family: "ThrowMyHandsUpintheAirBold";
}
#news {
height: 100px;
width: 500px;
float: left;
}
/******************/
/**** FOOTER ****/
#footer {
background: url("../images/Footer.png") no-repeat;
width: 100%;
height : 15%;
position : absolute;
bottom : 0;
text-align: center;
}
/*****************/
/*** modules bas ***/
div.entier {
width: 100%;
}
div.moitie {
width: 50%;
}
div.tiers {
width: 33%;
}
div.modules_bas {
float: left;
}
div.modules_bas div.interne {
padding: 10px;
}
div.modules_bas ul li {
line-height: 20px;
margin-left: 10px;
}
div.modules_bas h3 {
line-height: 35px;
}
/*** topmenu ***/
#topmenu li {
background: #000;
height: 50px;
padding: 0 10px;
float: left;
margin: 0 2px;
width: auto;
line-height: 45px;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
}
#topmenu li a {
color: #fff;
padding: 0;
margin: 0;
line-height: 45px;
}
#topmenu li a:hover, #topmenu li.current {
color: #9e9e9e;
}
/*** menu colonne ***/
h3 {
color: #9e9e9e;
font-size: 14px;
font-weight: bold;
padding-left: 20px;
}
ul.menu li {
background: #9e9e9e;
border-bottom: 1px solid #fff;
line-height: 30px;
margin: 0 5px;
}
ul.menu li ul li{
margin-left: 10px;
background: #666;
}
ul.menu li a {
color: #fff;
text-decoration: none;
line-height: 25px;
padding-left: 10px;
}
ul.menu li a:hover {
color: #000;
}
/*** module gris ***/
div.moduletable_gris h3 {
height: 36px;
background: url(../images/titre_modulegris.png) left top repeat-x;
line-height: 30px;
color: #fff;
font-weight: normal;
}
div.moduletable_gris {
background: #9e9e9e url(../images/bas_modulegris.png) left bottom repeat-x;
padding-bottom: 35px;
color: #fff;
margin-top: 10px;
}
div.moduletable_gris a {
color: #fff;
padding-left : 10px;
line-height: 20px;
}
/*** formulaires ***/
input#modlgn-username, input#modlgn-passwd {
width: 153px;
height: 28px;
line-height: 25px;
background: url(../images/login_form.png) left top no-repeat;
border: none;
margin: 0;
padding: 0px 0 5px 10px;
}
#login-form fieldset{
border: none;
}
#login-form li{
line-height: 20px;
}
input.button {
background: #333;
color: #fff;
border: none;
padding: 7px;
cursor: pointer;
}
Es ce que quelqu'un aurait une idée ?
Je vous remercie d'avance,
Cordialement
Commentaire