Hey!
Pour le fond avec le header dans le contour, ça n'a rien à voir avec un fond déjà tout fait ni avec une bannière normale^^
Le graphiste/codeur de ce forum a utilisé une image vide (https://2img.net/i/fa/subsilver/empty.gif, le truc classique des forums hitskin, bref!), le header (http://www.pixyup.com/uploads/140029394c155bd35fb0a.png), le footer (http://www.pixyup.com/uploads/140044274c155f4b5c4d1.png) et le corps ou page-body (http://www.pixyup.com/uploads/131005054c1491315d8f4.png). Par logique, quand tu auras vu l'apparence de ce dernier, c'est un jeu sur la répétition, comme un motif^^
Le codeur est donc partit sur une page vide, puis il a utilisé du CSS pour mettre en forme tout ça, comme pour un fond sans vraiment en être un.
Pour faire ça tu vas donc dans le PA >> Affichage >> Couleurs >> Feuille style CSS.
Dès lors tu copies celà:
- Code:
body {background-color: #aef2b7;background-image: url("http://2img.net/i/fa/subsilver/empty.gif");background-attachment: fixed;}
body {
background-image : url();
background-position: center;
background-repeat: repeat-y;
background-color: #fff;
}
.bodyline {
max-width: 800px;
}
.mainmenu {
margin-top: -40px;
}
#page-body {
background-image: url(http://www.pixyup.com/uploads/131005054c1491315d8f4.png);
background-position: top center;
background-repeat: repeat-y;
width: 800px;
}
#page-footer {
background-image: url(http://www.pixyup.com/uploads/131005054c1491315d8f4.png);
background-position: top center;
background-repeat: repeat-y;
width: 800px;
}
#header {
position: relative;
width: 800px;
margin: auto;
}
#header {
background-position : top center;
width: 800px;
height: 240px;
margin-bottom: -3px;
background-image: url(http://www.pixyup.com/uploads/140029394c155bd35fb0a.png);
}
#footer
{
position: absolute;
width: 800px;
height: 38px;
margin-top: -19px;
background-image: url(http://www.pixyup.com/uploads/140044274c155f4b5c4d1.png);
}
#footer
{
position: relative;
width: 800px;
margin: auto;
}
A savoir que je suis tombée sur la feuille de style en voulant afficher le fond (clique droit sur Firefox). Comme j'utilise une grande partie de ces techniques pour mes design, je me suis permise de recopier le schéma, mais en pouvant l'expliquer un minimum.
Ainsi le début défini le fond sans image, mais avec la couleur blanche (#fff, que tu peux modifier avec ce que tu veux bien sûr). Le "repeat-y" permet au forum de paraître glisser (le header avec) et non être fixé (le header resterait en place et le forum passerait dessus). Cela concerne bien sûr les headers en fond.
Pour le body-line j'ai un doute, mais normalement ça définit la largeur maximum du forum. (Donc ne mets pas 900px si ton image de corps (le motif) fait 800px!)
Le main-menu concernerait la position de la navigation (chiffre négatif: elle est "relevée").
Le page-body concerne donc le motif pour le corps (j'ai laissé les adresses si ça peut t'aider). Là on retrouve la largeur de 800px, donc reliée au body-line dont j'ai parlé plus haut^^ Il est placé en "center" comme le fond, et aussi en "repeat-y"(donc verticale... Pour l'info culturelle, repeat-x c'est horizontal et repeat-z c'est de devant à derrière et inversement^^) pour donner une continuité sur le corps du forum (la définition du motif vérifiée). Idem pour le footer (Avec la même image-motif! /!\).
Le header est ensuite placé en fonction de tout ce que tu as déjà marqué. On vérifie bien la largeur de 800px pour ne pas avoir de dépassements intérieurs ou extérieurs. Ensuite on définit (autre accolade) ses propriétés précises. A savoir qu'il doit suivre le mouvement du forum, donc être pris comme élément du fond; On définit la largeur et la longueur de la zone de clic (quand tu veux retourner sur la page d'accueil), la position et la marge en fonction du bas/bottom (plus proche/plus loin de la navigation) et on donne limage en "background" donc en fond.
Ensuite on en vient à la détermination du footer (donc l'herbe en bleu et les copyrights). Idem que pour le header, on retrouve les définitions de position, la largeur et la longueur de l'image transparente et l'adresse de l'image de fond qui sera donc reliée au reste. On retrouve aussi la marge par rapport au haut ("top"), soit -19px ici. On lui donne les indications de position comme pour le header dans une autre accolade.
Après je ne pense pas qu'il y ai besoin de toucher aux templates, puisque les bornes auxquelles on fait appel (avant les accolades, les mots avec le #) y sont normalement déjà définies^^
Et le tour est joué!
Normalement je n'ai rien oublié... A savoir que je découvre aussi le CSS donc je n'ai pas tout comprit non plus x) J'ai expliqué de mon mieux, en espérant que ça t'aidera!^^ Et ça ne m'empêchera pas de répondre à tes questions si tu en as
Voilà!
Conseil: Je n'ai pas testé ce que j'ai dit, normalement c'est bon mais au cas où... Pense bien à garder ton PA ouvert et l'aperçu de ton forum dans une autre fenêtre ou un autre onglet^^
