Footer impossible à mettre sur toute la largeur

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [Problème] Footer impossible à mettre sur toute la largeur

    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

    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>
    Et le template.css

    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;
    }
    (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

  • #2
    Re : Footer impossible à mettre sur toute la largeur

    <!-- le footer -->
    </div>
    <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 id="debug">

    <jdoc:include type="modules" name="debug" />
    </div>
    </body>
    </html>

    et au niveau css:
    #footer {width:100%}

    Commentaire


    • #3
      Re : Footer impossible à mettre sur toute la largeur

      dans ton css le footer a une taille en % et pas en pixels ?
      sinon tu n'aas pas une version online pour qu'on puisse jeter un oeil?

      Commentaire


      • #4
        Re : Footer impossible à mettre sur toute la largeur

        @bagou..la le footer est sorti de la balise qui le bloque en largeur...donc lui mettre une valeur de 100% le force a s etendre sur toute la largeur disponible......
        Il n est plus limité par le #centre......

        Commentaire


        • #5
          Re : Footer impossible à mettre sur toute la largeur

          le footer est inclut dans la div #wrapper qui a comme propriété margin: 0 auto.
          Ce qui laisse a pensé que sa largeur est définie ailleurs, un des 2 autres fichiers css ou une directive inline par un module comme bgmax.
          Pour trouver, le plus simple est un lien vers la page.
          UP, le plugin universel à découvrir sur https//up.lomart.fr
          bgMax
          , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

          Commentaire


          • #6
            Re : Footer impossible à mettre sur toute la largeur

            oui d ou la modif que j ai indiqué..s il n est plus ds le #wrapper alors on peut l agrandir....

            Commentaire

            Annonce

            Réduire
            Aucune annonce pour le moment.

            Partenaire de l'association

            Réduire

            Hébergeur Web PlanetHoster
            Travaille ...
            X