Superposition CSS sur page HTML / PHP via fichier de design Photoshop

Version imprimable

3 pièce(s) jointe(s)

Bonjour , j'ai toute à l'heure crée un petit design de template WEB (un test) sur le logiciel Photoshop , mais j'ai un problème.

Lorsque j'ai enregistré / découpez mes fichier images (par exemple , une image pour mon footer) Pièce jointe 194397
Quand je veut la mettre par dessus mon background qui est celui-ci : Pièce jointe 194398

Les fichiers ne se superposent pas , ils sont les uns à la suite alors que leur z-index est différent , mais peut que j'ai fait une gourde dans le CSS , en tout cas pour la page PHP (pour l'instant , j'ai mis l'image du Footer dans le Body juste pour test mais je mettrait ensuite dans le <footer>.

Voici l'image problème : Pièce jointe 194399

Code CSS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 .background { background-image: url("background.png"); position: absolute; left: 0px; top: 0px; width: 1980px; height: 1200px; z-index: 1; } .FooterS { background-image: url("FooterS.png"); position: absolute; left: 0px; top: 0px; width: 1980px; height: 121px; z-index: 2; }
Code HTML :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <html> <head> <title>Projet DEV</title> <meta charset="UTF-8" /> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <img class="background" src="images/background.png"> <img class="FooterS" src="images/FooterS.png"> </body> <footer> </footer> </html>
Merci de vos suggestion et désolé si mon explication n'est pas claire x)

06/12/2015, 10h20
NoSmoking

Bonjour,

Citation:

Merci de vos suggestion...

• Ton code n'est pas conforme, balise <footer> en dehors du <body>.

• Met un DOCTYPE, par exemple <!doctype html>, à ton document cela aide à ne pas avoir de surprise.

• Abandonne le style inline pour tout mettre dans la partie style de ta page.

La solution consiste à ne pas utiliser la balise <img> :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
    <title>Projet DEV</title>
    <meta charset="UTF-8" />
    <link href="style2.css" rel="stylesheet"/>
</head>
 
<body >
      <div class="background" >
 
    <footer>
      <div class="FooterS">
    </footer>
</body>
 
</html>

style.css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.background {
  background-image: url("background.png");
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1980px;
  height: 1200px;
  z-index: 1;
  background-repeat:no-repeat;
}
 
.FooterS {
  background-image: url("FooterS.png");
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1980px;
  height: 121px;
  z-index: 2;
  background-repeat:no-repeat;
}

Frankeinsteinsc :mrgreen:

08/12/2015, 10h47
Invité
@laurentSc
Bravo Laurent, tu viens de réussir 2 exploits... !
:moinsser: Non seulement tu écris du code faux pour toi, mais aussi pour les autres ! :aie:
:plusser: J'adore :

Citation:

Envoyé par laurentSc

Frankeinsteinsc :mrgreen:

Je doute que tu aies fait exprès, mais ce mélange de "Frankenstein" et Franck Einstein" est juste génial !
Je t'avais rebaptisé "frankensteinSc", en rapport avec le premier; tu t'es toi-même re-rebaptisé "frankeinsteinSc". J'A-DO-RE !

@SyndromHD
Avant de chercher à mettre des images, il faut d'abord apprendre la syntaxe correcte d'une page HTML :
- Les meilleurs cours et tutoriels (X)HTML
- HTML5 : le guide du débutant
Pour faire (très) simple : c'est la juxtaposition ou l'imbrication de "boites" !

Ensuite, il existe plusieurs types d'images :
- les images descriptives : celle qu'on mets dans les balises <img />, à forte valeur sémantique, car elle doivent être "lues" par les moteurs de recherche, les mal et non voyants,...
- les images illustratives (ou décoratives*) : qu'on met en background de "boite" (div,...), et qui n'ont pas besoin d'être lues car juste décoratives
- Les icônes, décoratives* elles aussi : qu'on mettra aussi plutôt en background de la balise parente (a, h4,...)
*c'est-à-dire qu'on peut les supprimer, sans changer la signification du document.
Et pour reprendre le code de l'ami frankeinsteinSc :
Code:

1 2 3 4 5 6 7 <body class="background"> ..... <footer class="FooterS"> ..... </footer> </body>
Dernier point : NE PAS ABUSER des position: absolute; !
Tout-à-fait inutile ici.

[EDIT] Je viens de voir celle-ci :

Citation:

Envoyé par SyndromHD

...Les fichiers ne se superposent pas , ils sont les uns à la suite alors que leur z-index est différent , mais peut que j'ai fait une gourde dans le CSS ...

C'est pour ça que c'est tombé à l'eau ! :mouarf:
08/12/2015, 12h59
laurentSc

Exact, j'avais pas fait exprès. Sinon, en effet, mais on peut se passer des <div>, mais ce qui était faux, c'est bien que j'avais oublié de refermer ces balises ?