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

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

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, 15h32

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, 16h05

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, 11h26

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, 12h28

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, 14h01

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.

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

HTML

Vue hybride

Discussions similaires

Partager

Partager