Une petite question de CSS

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

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

Édité par WinXaito

+0 -0

De façon générale, si ton problème ne vient pas code PHP, essaye de toujours poster le code HTML rendu par le navigateur - ou juste une partie, en fonction des cas -, sans le PHP, quitte à le mettre en spoil s'il est long.

« There was a kingdom that was falling so fast that people wouldn't help it, they wouldn't make it last » - Animal Kingdom, Beau

+0 -0
Staff

Cette réponse a aidé l'auteur du sujet

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.

Édité par viki53

Auteur du sujet

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é ?

Édité par WinXaito

+0 -0
Auteur du sujet

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
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

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