Discussion :

[seb67110]

Bonjour,

Je souhaitais adapter une image pour qu'elle occupe 100% de la page.
Tout marchait, mais quand j'ajoute le doctype, l'image est plus grande que la fenêtre.

Pour que vous puissiez visualiser :

Lien sans doctype

Lien avec doctype (J'ai activé la scroolbar pour que vous voyez bien la différence)

Merci d'avance

[blueice]

Le lien avec DOCTYPE ne fonctionne pas et de toute manière un document DOIT avoir un DOCTYPE, donc refait le site en prenant en compte le DOCTYPE...

[seb67110]

Merci de ta réponse,

Mon lien marche. Mais si je refais le site avec le doctype, il y aura les mêmes comportements, non ?
Si tu veux je te donne mon code css et tu me dis ce que t'en pense...

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
<style type="text/css">
<!--
body {
 
	background-image: url(images/fonts/bienvenue2.png);
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.Style3 {font-size: 12px}
.Style5 {color: #000000}
 
 
#photo {
    width: 100%;
    height: 100%;
 
}
 
#Layer1 {
	position:absolute;
	width: 100%;
	height:28px;
	left : 0%;
	top: 88%;
	z-index: 1;
}
#Layer2 {
	position:absolute;
	width: 100%;
	height:28px;
	left : 0%;
	top: 95%;
	z-index: 2;
	}
 
-->
</style>

Donc #photo c'est la photo qui doit prendre la taille de la fenêtre et les layers ce sont les cadres de texte.


Merci d'avance

[seb67110]

Bonjour,

En fait, je remarque que l'attribut height de #photo n'est pas pris en compte, il prend une valeur Auto je pense. Pourquoi ?

Merci

[blueice]

Rajoute la ligne *{...} et modifie le body comme donné...

Code css :

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

1
2
3
 
* { margin:0; padding:0; }
body {background-image: url(images/fonts/bienvenue2.png); }

[seb67110]

Merci beaucoup, c'est déjà mieux, il n'y a plus de fond qui dépasse
Si tu veux voir

Par contre l'attribut height de #photo est toujours ignoré... Je me demande pourquoi.

Si tu veux voir mon fichier entier : bienvenue2.html

[Korko Fain]

IE7 élargi l'image en fond pour qu'elle prenne toute la largeur résultat elle est bien trop grande en hauteur. Alors soit tu cache le bas (overflow: hidden) soit tu fait en sorte qu'elle ne s'agrandisse pas et qu'elle garde sa taille.

Je peux pas te dire comment puisque je ne comprend pas pourquoi l'image est étirée ^^

[Candygirl]

Par contre l'attribut height de #photo est toujours ignoré... Je me demande pourquoi.

Parce que tu dois avoir le height du parent spécifié si tu veux pouvoir attribuer un height en % autrement la valeur passe à auto ce qui arrive dans ton cas. Tu dois donc propager le height de 100% jusqu'à ton image, en commençant par un:

Code :

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

html,body {height:100%;}

Actuellement ton image est dans une balise a, elle-même dans une balise p (qui ne sert à rien). Tu dois donc encore propager le height de 100% à ces balises.

[seb67110]

Merci mille fois Candygirl ! ça marche. Effectivement j'ignorais qu'il fallait d'abord attribuer height au parent.
Merci beaucoup !

Merci aussi à Korko Fain pour sa réponse mais c'était pas le fond le problème Merci quand même.