Problème avec doctype : pas les mêmes dimensions en css avec ou sans doctype

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

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

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:

---

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

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

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

Code:

---

1 2 3

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

---

Merci beaucoup, c'est déjà mieux, il n'y a plus de fond qui dépasse:king:
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

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

Citation:

---

Envoyé par seb67110

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:

---

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.

Merci mille fois Candygirl ! :king: ç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.