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

**SyndromHD** · 05/12/2015, 18h58

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) Nom : FooterS.png
Affichages : 937
Taille : 7,2 Ko

Nom : FooterS.png
Affichages : 937
Taille : 7,2 Ko

Quand je veut la mettre par dessus mon background qui est celui-ci : Nom : background.png
Affichages : 5673
Taille : 1,07 Mo

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 : Nom : pba.PNG
Affichages : 1025
Taille : 1,00 Mo

Nom : pba.PNG
Affichages : 1025
Taille : 1,00 Mo

Code CSS :

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
 
.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 html :

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

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)

**NoSmoking** · 06/12/2015, 10h20

Bonjour,

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.

**laurentSc** · 07/12/2015, 19h47

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

Code html :

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
<!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 css :

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
.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

Invité · 08/12/2015, 10h47

@laurentSc
Bravo Laurent, tu viens de réussir 2 exploits... !

Non seulement tu écris du code faux pour toi, mais aussi pour les autres !

J'adore :

Envoyé par laurentSc

Frankeinsteinsc

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 :

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 html :

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

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 :

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 !

**laurentSc** · 08/12/2015, 12h59

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 ?

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

CSS

Discussions similaires

Partager

Partager