[résolu]Problème de mise en page CSS[résolu]

Question

blobi

5 Jan 2012 à 11:42

Salut tout le monde ,
je suis en train de développer une application intranet ,
et j'ai un problème car mon footer (pied de page) se fixe par rapport à mon menu de nav au lieu de se fixer par rapport à ma division centrale.

Voici une capture d'écran de mon problème :

http://pix.kegtux.org/images/os7L.png

Voici le code de ma page index.php :


<?php session_start() ;?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
        <title>Mon appli intranet</title>
    </head>
    <body>
        <div class="global">
            <?php include ('includes/header.inc.php');?>
            <div class="center">
                <?php include ('includes/nav.inc.php');?>  
                <div class="main">
                <?php
                   if( isset($_GET["p"]))
                    {
                      include("donnees/".$_GET["p"].".php");//on inclut la page demandà¹‰e
                        
                    }
                    else if (isset($_GET["v"]))
                    {
                        if (isset ($_GET['id'])){
                            $_SESSION['id']=$_GET['id'];
                            include("./vues/".$_GET["v"]);//on inclut la page demandà¹‰e
                        }
                         else {
                             include("./vues/".$_GET["v"]);//on inclut la page demandà¹‰e
                        }
                        
                    }
                    else{
                        include("donnees/accueil.php");//on inclut la page demandà¹‰e
                    }
                    
                ?>
                </div>
              
            </div><!-- fin div center-->
            <?php include ('includes/footer.inc.php');?> 
            
        </div>
    </body>
    <?php if (isset ($_GET['message'])){
        echo '<script>alert("'.$_GET['message'].'");</script>';
    }?>
</html>

Voici le contenu de mon fichier style.css :


/* 
    Document   : style.css
    Created on : 3 oct. 2011, 23:08:00
    Author     : Louis
    Description:
        Purpose of the stylesheet follows.
*/
/*Reset du style, chaque navigateur interprètera le code CSS selon ses propres standards.*/
*,html,body{
    margin: 0;
    padding: 0;
    border: none;
}
/*Ajout de polices spécifiques au site*/
@font-face {
	font-family: "neon";
        font-family: 14pt;
	src: url('fonts/neon.ttf');
}
@font-face {
	font-family: "Sweet Home OK";
        font-family: 14pt;
	src: url('fonts/sweet_home_ok.ttf');
}
@font-face {
	font-family: "Ciudad";
        font-family: 14pt;
	src: url('fonts/ciudad.ttf');
}
@font-face {
	font-family: "Star avenue";
        font-family: 14pt;
	src: url('fonts/staravenue.ttf');
}
/*Paramètres généraux des h1,h2,h3... a, b , p, pre, ... etc*/

p{
    color:white;
    text-align: justify;
}
h3{
    text-align: center;
    font-family: neon;
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
}


ul li {/* Modification de l'apparence du menu de gauche' */
    text-align: center;
    list-style: none;
}
/*Paramètres de l'arrière plan du site*/
body{
    background: #000;
    background-image: url("images/bg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

}


/*Paramètres de la super div globale*/

.global{
    width:990px;
    margin:0 auto;
/*    background: rgba(0, 0, 0, 0.6);*/
    -moz-border-radius: 10px 10px 10px 10px;
    border-radius: 10px;

    margin-top: 5px;
    margin-bottom:  10px;
    height:auto;
/*    box-shadow:1px 1px 25px white;
    -moz-box-shadow: 1px 1px 25px white;*/
}

/*Paramètre de l'entête du site */

.header{
    height: 150px;
    box-shadow:1px 1px 25px white;
    -moz-box-shadow: 1px 1px 25px white;
    background: rgba(0, 0, 0, 0.6);
    background-position: center center;
    -moz-border-radius: 10px 10px 10px 10px;
}

.sitename h3{/*Modification du titre/nom du site*/
    float:none;
    text-align: center;
    padding-top: 25px;
    font-size: 24px;
    font-family: 'neon';
    color: #fff;
}
.slogan h3{/*Modification de l'esthétique du slogan*/
    text-align: center;
    font-size: 24px;
    font-family: 'neon';
    color: #fff;
}
.sitetext{/*Modification de la division contenant le titre et le slogan*/
    float:none;
    display: block;
    position: absolute;
    margin-left:430px;
}
#siteicon img{/*Modification relative au logo du site */
    float: left;
    display: block;
    position: relative;
    height:140px;
    margin-left:140px;
    margin-top: 5px;
}

/*Paramètres de la partie centrale du site*/

.center{
    display: block;
    position:relative;
    height: auto;
    margin:0 auto;
    margin-top: 10px;
    margin-bottom: 10px;    
    background-color: rgba(255, 255, 255, 0.9);
}

/*Paramètres du bloc de gauche*/

.nav{
    display: inline-block;
    position: relative;
    background-color: rgba(0,0,0, 0.75);
    height:auto;
    
    width: 200px;
    -moz-border-radius: 10px 10px 10px 10px;
    box-shadow:1px 1px 25px white;
    -moz-box-shadow: 1px 1px 25px white;
    color: #fff;
}

.nav a{
    color: #fff;
}
/*Paramètres de la partie dynamique du site*/

.main{
    display: inline-block;
    position: absolute; 
    background-color: rgba(0,0,0, 0.75);
    min-height: 450px;
    height:auto;
    width: 780px;
    margin-left: 10px;
    box-shadow:1px 1px 25px white;
    -moz-box-shadow: 1px 1px 25px white;
    -moz-border-radius: 10px 10px 10px 10px;
    text-align: justify;
}

/*Paramètres du pied de page */

.main-footer{
    display: block;
    position: relative;
    background: rgba(0, 0, 0, 0.6);
    -moz-border-radius: 10px 10px 10px 10px;
    border-radius: 10px;
    height:auto;
    margin-top: 10px;
    padding-bottom: auto;
    box-shadow:1px 1px 25px white;
    -moz-box-shadow: 1px 1px 25px white;
}
.left-footer{
    display: inline-block;
    position: relative;
    height: auto;
    width : 33%;
    margin-left: 1%;
    margin-top: 10px;
    padding-bottom: auto;
    background: rgba(0, 0, 0, 0.4);
    color:grey;
    -moz-border-radius: 10px 10px 10px 10px;
    border-radius: 10px;
}

.center-footer{
    display: inline-block;
    position: absolute;
    margin-left: 1%;
    min-height: 75px;
    height: auto;
    width : 33%;
    margin-top: 10px;
    padding-bottom: auto;
    background: rgba(0, 0, 0, 0.4);
    color:grey;
    -moz-border-radius: 10px 10px 10px 10px;
    border-radius: 10px;
}
.center-footer a{
    color: grey;
}
.center-footer img{
    display: inline-block;
    position: relative;
    margin-left: 40px;
    height: 150px;
}
.right-footer{
    display: inline-block;
    position: absolute;
    margin-left:35%;
	width : 30%;
    margin-top: 10px;
    padding-bottom: auto;
    background: rgba(0, 0, 0, 0.4);
    color:grey;
    -moz-border-radius: 10px 10px 10px 10px;
    border-radius: 10px;
}

.right-footer img{
    display: inline-block;
    position: relative;
    margin-left: 25px;
    
}


.low-footer{
    display: inline-block;
    position: relative;
    min-height: 20px;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    margin-top: 10px;
    margin-bottom: 10px;
    color:grey;
}
.low-footer a{
    color:grey;
}
.low-footer a:hover{
    color:yellow;
}


.article {
    height: auto;
}
.article h3{
    font-family: neon;
    font-size: 24px
}
.pics img{
    display: inline-block;
    position:absolute;
    height: 250px;
    margin: 0 auto;
    margin-left: 27%;
}
.text-article{
    
    display: inline-block;
    position: relative;
/*    width: 960px;*/
    margin:5px;
    font-family: star avenue;
}

Modifié par blobi (06 Jan 2012 - 14:57)

SBoudrias

5 Jan 2012 à 16:48

Au pif,

essaie d'utiliser clear: both sur le contenant du footer.

Sinon, fournit un exemple en ligne idéalement !

fvsch

6 Jan 2012 à 14:18

Bonjour,

Ton bloc .main est positionné en absolu. Il est donc parfaitement logique qu'il ne repousse pas le pied de page. Solution: ne pas utiliser le positionnement absolu ici.

Quelques repères: Guide de survie du positionnement CSS.
Tu peux aussi t'inspirer de l'un des gabarits suivants: Alsacréations - Gabarits HTML et CSS simples.
Modifié par fvsch (06 Jan 2012 - 14:19)

blobi

6 Jan 2012 à 14:56

Effectivement j'ai résolu le problème en n'utilisant pas de positionnement en absolu pour mon .main .

Merci tout le monde.

Sujet clos

CSS et mise en forme, CSS3

[résolu]Problème de mise en page CSS[résolu]