Arrière plan continu sur entête et pied d'une tableau HTML

**grapheyes** · 17/06/2010, 13h35

Bonjour à tous,
Je suis nouveau sur le forum et je me suis inscrit suite à un problème en face duquel je me trouve aujourd'hui.

Je suis graphiste de formation et webmaster (depuis peu) de plusieurs sites. Je souhaiterais comme le sujet du post l'indique obtenir à partir d'un tableau html comportant plusieurs lignes un arrière plan "en débord" sur la première ligne et un arrière plan "en débord" sur la dernière ligne du tableau.

Je veux dire par "en débord" un arrièplan (couleur web ou gif) qui déborde du tableau html et qui s'affiche (sur toute la hauteur de la ligne bien sûre) sur toute la largeur de la fenetre d'un navigateur web quelquesoit l'échelle de l'affichage.

J'espère être assez clair dans mon explication.

En vous remerciant d'avance pour l'aide que vous saurez m'apporter.

**devyan** · 17/06/2010, 14h32

Bonjour et bienvenue,

Personnellement je ne vois pas bien ce que tu veux exactement... un visuel d'exemple de ce que tu veux obtenir pourrait être utile.

devyan

**polymorphisme** · 17/06/2010, 15h05

Bonjour,

dans un premier temps, tu pourras aborder ce sujet avec les feuilles de styles CSS. Sur le site, il y a un forum sur ce sujet.

Bon courage

**grapheyes** · 18/06/2010, 10h26

Dans un premier temps, merci pour vos réponses.

Voici une maquette vite faite ce matin sur photoshop pour illustrer ce que je cherche à faire sur l'arrière plan du site, au niveau du haut de page et du bas de page.
En espérant cette fois que cela sera plus clair pour tout le monde.

Je serais ravi que quelqu'un me guide vers un tutorial pour réaliser ce genre de chose car je suis graphiste de formation et non développeur.

Merci encore à ceux qui prendront le temps de m'orienter.

**devyan** · 18/06/2010, 11h28

Bonjour,

En fait c'est la notion de "débord" que je ne saisissait pas bien.

Une solution consiste à gérer ton fond indépendamment du tableau que tu veux afficher au dessus.

Tu aurais donc :
1/ un bandeau TOP de hauteur fixe (zone orange)
2/ un bandeau BOTTOM de hauteur fixe (zone grise)
3/ un fond "extensible" en dessous de tout ça (zone blanche)
4/ un contenu centré qui défini la hauteur de la page

Remarque: l'exemple ci-dessous est une optimisation dans laquelle j'utilise le body pour porter l'image de pied de page au lieu d'un div supplémentaire.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <style>
      html, body {
        height:100%;
      }

      html {
        background: white; /* ici le fond extensible */
      }

      body  {
        margin:0;
        padding:0;
        background: transparent url(chemin_de_l_image_pied_de_page) left bottom no-repreat; /* ici le fond gris */
      }
      
      #top {
        background:transparent url(chemin_de_l_image_d_entete) left top no-repeat; /* ici le fond orange */
        height:50px;
        position:relative;
        top:0;
        width:100%;
      }
      
      #contenu {
        background:none repeat scroll 0 0 green;
        height:100%;
        margin:-50px auto 0;
        position:relative;
        text-align:left;
        top:0;
        width:900px;
        z-index:10;
      }
    </style>
  </head>
  <body>
    <div id="top"></div>
    <div id="contenu"></div>
  </body>
</html>

devyan

**grapheyes** · 18/06/2010, 13h01

Merci Devyan pour ta réponse qui m'aiguille déjà beaucoup.
A moi maintenant de jongler avec le code que tu mas transmit.

Par contre, je ne vois pas apparaitre le pied de page quand je copie le code sur une nouvelle page HTML dans dreamweaver. Je crois que j'ai du mal à comprendre le principe quand tu dis : "Remarque: l'exemple ci-dessous est une optimisation dans laquelle j'utilise le body pour porter l'image de pied de page au lieu d'un div supplémentaire."

Comment je dois faire pour que le pied de page se place en fonction de mon contenu en fait, je vois pas trop, désolé...

En attendant ta réponse, je vais déjà commencer par exploiter ton code et je réaliserai dès que j'ai tout compris une page modèle que je mettrais en ligne pour constater ce que j'ai fait ou si j'ai fait qqchose qu'il ne fallait pas.

Merci beaucoup Devyan dans tous les cas.

**devyan** · 18/06/2010, 13h57

C'est dans le css qu'est indiqué l'image à utiliser, il faut bien entendu mettre tes images à la place.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
body  {
        margin:0;
        padding:0;
        background: transparent url("chemin_de_l_image_pied_de_page") left bottom no-repreat; /* ici le fond gris */
      }

Tu peux sinon partir sur la base du type de template suivant :
J'ai repris les mêmes couleurs que dans ton exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <style>
      html, body {
        height:100%;
      }
 
      body  {
        margin:0;
        padding:0;
        background: white;
        text-align: center;
      }
      
      #top {
        background:orange;
        height:50px;
        position:relative;
        top:0;
        width:100%;
      }
      
      #contenu {
        background:green;
        height:100%;
        margin:-50px auto -25px; /* -50 hauteur de l'entête -25 hauteur du pied de page */
        position:relative;
        text-align:left;
        top:0;
        width:900px;
        z-index:10;
      }
 
      #bottom {
        background: gray;
        bottom:0;
        height:25px;
        position:relative;
        width:100%;
      }
    </style>
  </head>
  <body>
    <div id="top"></div>
    <div id="contenu"></div>
    <div id="bottom"></div>
  </body>
</html>

Quand à DreamWeaver je ne peux pas t'aider je ne l'utilise pas.
J'utilise un simple éditeur de texte et fait les prévisualisations directement dans le navigateur

devyan

**grapheyes** · 24/06/2010, 10h07

Bonjour,
Ca y est j'ai exploité le code que vous m'avez communiqué pour faire une page d'essai.
La page est visible ici : www.nailsgarden.fr/essai.html
J'ai repris en fait le contenu de mon index actuel (qui est conçu sous forme de tableaux) que j'ai intégré dans les balises div concernées.
Merci de critiquer ma page d'essai afin que je corrige ce qui ne va pas.

Par contre, devyan m'a communiqué un bout de code de CSS qui soit disant pilotait l'image de fond. Je n'ai pas du tout utilisé ce code car je ne sais pas comment le lier à ma page.
Du coup, J'ai renseigné mon image de fond dans le <head> de ma page html, vous verrez le code de ma page à www.nailsgarden.fr/essai.html

Si quelqu'un peut m'aiguiller sur la marche à suivre pour lier le code CSS de devyan à ma page html, ce serait sympa.

Merci pour votre accompagnement.

**grapheyes** · 24/06/2010, 16h35

Bon j'ai trouvé par moi même en regardant dans le code, il faut simplement ajouter dans le HEAD la ligne de code appelant le fichier CSS en question. Ci dessous le code à rajouter :

<link rel="stylesheet" type="text/css" href="chemin du fichier css" media="all" />

En tout cas, encore un grand merci à toi devyan pour tes explications.
Mon problème est désormais résolu!!

Arrière plan continu sur entête et pied d'une tableau HTML [HTML 4.0]

HTML

Discussions similaires

Partager

Partager