Une petite question de CSS

Le problème exposé dans ce sujet a été résolu.

Bonjour / Bonsoir,

Voici donc ce que j'ai fais: Actuellement

Et se que je souhaites faire, c'est de poursuivre le background de la partie central jusqu'au footer: Image utilisateur

Mon code html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="fr">
    <head>  
        <title>Title</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="../style/all.css">
    </head>
    <body>
        <div id="background"></div>
        <div id="wrap">
            <div id="container">
                <?php require_once '../assets/header.inc.php'; ?>
                <section>
                    <h3><?php echo $TITLE; ?></h3>
                    <?php require_once '../assets/nav.inc.php'; ?>
                    <article id="content">
                        <?php echo $CONTENT; ?>
                    </article>
                </section>
            </div>
        </div>
        <?php require_once '../assets/footer.inc.php'; ?>
    </body>
</html>

Mon code CSS:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
/* GENERAL */
html, body{
    height:100%;
    background: url("../assets/fond.png");
    background-repeat:repeat;
    min-width:1100px;
}
body, h1, p, ul, h3{
    margin: 0;
    padding: 0;
}
ul{
    box-sizing: border-box;
}
#container {
    width: 100%;
    height:100%;
}
#wrap{
    min-height: 100%;
}

/* HEADER */
header{
    background-color:rgb(70,70,150);
    text-align:center;
    padding:15px;
    color:white;
}

/* ACCESS */
#access{
    background-color:rgb(200,200,200);
    text-align:center;
    border-bottom:1px solid rgb(170,170,170);
}
#access ul{
    list-style-type:none;
    width:1100px;
    margin:auto;
}
#access li{
    display:inline-block;
    background-color:blue;
    text-align:center;
    width:25%;
}
#access li a{
    color:white;
    background-color:rgb(90,90,170);
    display:block;
    padding:3px 0 3px 0;
    text-decoration:none;
}
#access li a:hover{
    background-color:rgb(70,70,150);
    text-decoration:underline;
}

/* SECTION */
section{
    margin:auto;
    width:1100px;
    background-color:rgb(250,250,250);
    background-color:rgba(200,200,200, 0.5);
    height:100%;
    padding-bottom:40px;
}
section h3{
    text-align:center;
    background-color: rgb(200,200,200);
    padding:5px;
}

/* NAV */
nav{
    width:200px;
    float:left;
}
nav ul{
    list-style-type:none;
}
nav ul li a{
    padding:5px 0 5px 20px;
    display:block;
    color:black;
}
nav ul li a:hover{
    background-color:rgb(150,150,150);
}

/* ARTICLE */
article{
    width:900px;
    padding: 10px 10px 10px 210px;
}
article h3{
    text-align:center;
}

/* FOOTER */
footer{
    background-color:rgb(90,90,170);
    color:white;
    position: relative;
    margin-top: -40px;
    clear:both;
    height: 40px;
    line-height:40px;
    padding:0 20px 0 20px;
}
footer p{
    display:inline-block;
    width:33.1%;
}
footer p.center{
    text-align: center;
}
footer p.right{
    text-align: right;
}

(Je n'ai pas mis toutes les parties du HTML, dites moi si vous en avez besoin.)

En vous remerciant, WinXaito

+0 -0

Un truc qui me vient à l'esprit (pas forcément propre, mais vu ton HTML assez simple) c'est de placer #background en fond sur toute le page (position: fixed) et d'utiliser un pseudo-élément (::before par exemple) de la largeur de ton contenu et de le centrer et lui donner une hauteur de 100%.

Sinon tu peux jouer avec des calc et des vh pour calculer la hauteur minimale de ton contenu pour qu'il touche les deux bords.

Au passage, attention à ton choix de balises : header n'est pas forcément fait pour contenir l'entête d'une page, tout comme footer pour le pied de page ou nav pour le menu. Chaque balise a un sens sémantique avant tout.

+0 -0

Le background en position fixed, c'est exactement ce que j'ai fais. Le problème est que soit il se trouve tout en haut ou alors derrière le body.

::before ? Je ne connaissais pas ceci, je vais voir.

Et j'utilise mal les balises ? Je ne vois pas, selon comment j'ai appris le html il y a déjà un bon moment, le problème que j'ai.

Merci beaucoup !

WinXaito

[edit] J'ai un peu regardé pour le ::before mais je n'ai pas compris en quoi il pourrait m'être utile ni trop comment l'utilisé ?

+0 -0

Bonjour, en recherchant un bon moment, j'ai finalement trouvé une autre solution.

J'ai trouvé ceci sur un forum anglais: jsfiddle.net

Et je l'ai adapté sur mon code. Il me semble que se soit un peu plus propre qu'un background en fixed…

Encore un grand merci !

(Par contre je ne suis pas contre une petite explication sur le ::before :))

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte