probleme -positionnement image de fond, depuis MAJ

pierremomo · Message par **pierremomo** » 05 déc. 2005, 16:18

Bonjour,
depuis que je suis passé en 1.5 j'ai un problème avec une image d'arriere plan:
je tape:

<html>
<head>
  <style type="text/css">
    BODY { 
      background: url("fond.jpg");
      background-repeat: no-repeat;
      background-position: center center;
    }

  </style> 

</head>

<body>
  Bonjour
</body>
</html>

pour pouvoir centrer mon image de fond ... avant ça marchait, sous IE ça marche, mais maintenant sous firefox il ne me la centre que horizontalement et par contre il me manque toute la moitié (à peu près) haute de l'image ...

pierremomo · Message par **pierremomo** » 05 déc. 2005, 17:26

tiens je viens de voir qu'il y avait un forum xhtml-developpeur-web ... ça serait peut-etre plus adapté la-bas ? enfin ça me semblait venir de firefox donc bon ...

calimo · Message par **calimo** » 05 déc. 2005, 19:03

C'est étrange

Tu as cet exemple en ligne quelque part ?

N'oublie pas qu'une page HTML commence toujours par indiquer le doctype utilisé

pierremomo · Message par **pierremomo** » 05 déc. 2005, 22:42

voilà un exemple...

la page:
http://sandeconner.free.fr/fonds/essai.html

capture d'écran avec firefox 1.0.7 (ou IE):

capture d'écran avec firefox 1.5 (en safe mode aussi bien qu'en normal):

edit: et sinon pour le "doctype" qui doit débuter chaque page web, j'avoue que je n'en ai jamais entendu parler

... apres verification sur quelques pages, j'imagine que c'est quelque chose du style "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">" ... mais à quoi ça sert ? et surtout comment savoir quoi mettre ?

calimo · Message par **calimo** » 06 déc. 2005, 09:48

pierremomo a écrit :edit: et sinon pour le "doctype" qui doit débuter chaque page web, j'avoue que je n'en ai jamais entendu parler ... apres verification sur quelques pages, j'imagine que c'est quelque chose du style "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">" ... mais à quoi ça sert ? et surtout comment savoir quoi mettre ?

Ça sert à savoir dans quelle langue ton code va parler au navigateur

Plus d'infos sur OpenWeb, par exemple l'article Toi comprendre moi ?

pierremomo · Message par **pierremomo** » 06 déc. 2005, 10:23

Ok merci, je vais regarder tout ça

... et pour ma page exemple, ça donne quoi chez vous ? vous la voyez normalement ? une idée du pourquoi du comment ?

Asumbaa · Message par **Asumbaa** » 06 déc. 2005, 10:47

Bonjour,

Rajoute

Code : Tout sélectionner

border: 1px solid #000;

à tes styles du body, tu vas vite comprendre pourquoi ton fond se retrouve trop haut

Du coup il faudra fixer une hauteur à ton body (ou hauteur minimum), mais dans ce cas si ton contenu est plus grand que ta fenêtre, ton background va descendre. A toi de voir !

pierremomo · Message par **pierremomo** » 06 déc. 2005, 11:50

Salut, merci pour ton aide déjà

j'ai rajouté ce que tu m'as dit et ça m'a encadré ma ligne Bonjour ... J'imagine que ça veut dire que mon "body" c'est juste ma ligne (ça c'est normal, en ce qui concerne mon body, j'ai toujours surveillé ma ligne ... ahem desolé ...) et que du coup quand il centre l'arriere plan bin il centre par rapport au "body" ...
mais si j'ouvre la nouvelle page (avec ta ligne) sous IE ou sous un ancien firefox, bin cette fois c'est bien ce qu'il faut, il m'encadre ma page tout entiere (du coup c'est bien cadré) ... comment se fesse ???

donc comment je pourrais faire pour que le body soit par défaut la taille de la fenetre ??

peut-etre que sinon ce que j'aurais envie de faire c'est plutot d'afficher une image et de pouvoir ecrire dessus (plutot que de passer par un background) mais je sais pas si c'est plus simple ... une idée ?

Asumbaa · Message par **Asumbaa** » 06 déc. 2005, 12:05

Mmmh...
Si ton image est de la déco, il vaut mieux la laisser en background. C'est plus propre et accessible.

Pour le body, par exemple tu peux lui mettre une hauteur minimale :

Code : Tout sélectionner

min-height: 600px;

mais ça va ennuyer les petites résolutions...
Ou encore, tenter un

Code : Tout sélectionner

height: 100%;

sans garantie.
Une solution plus viable, je pense, consiterait à placer ton background non pas au milieu verticalement (que se passera-t-il quand ton contenu débordera ? Bah on verra plus toute ton image) mais à une certaine distance du haut.
Quelque chose comme

Code : Tout sélectionner

background-position: center 50px;

de façon à ne pas perturber ton visiteur : l'image sera toujours là à sa place.

pierremomo · Message par **pierremomo** » 06 déc. 2005, 15:23

Une solution plus viable, je pense, consiterait à placer ton background non pas au milieu verticalement (que se passera-t-il quand ton contenu débordera ? Bah on verra plus toute ton image) mais à une certaine distance du haut.
Quelque chose comme

Code : Tout sélectionner

background-position: center 50px;

de façon à ne pas perturber ton visiteur : l'image sera toujours là à sa place.[/quote]

ok merci bien c'est ce que j'ai fait (bon c'est plus centré mais j'imagine que ça va passer dans la plupart des cas

)...

en revanche qqun a une explication sur le pourquoi du comment du fait qu'avec le nouveau firefox ça a changé qqchose ?

calimo · Message par **calimo** » 06 déc. 2005, 18:17

Moi j'essayerais d'abord de mettre un bon doctype pour faire passer Firefox en mode "standard".

Ce qu'il s'est passé ? Ben c'est simple, tu es en mode de rendu "quirk" (bizarre, ou "mode de compatibilité"). Firefox considère que tu fais n'importe quoi (ce qui est vrai, tu n'as pas mis de doctype), et en retour il fait lui aussi n'importe quoi. Il se peut que quelqu'un ait trouvé que ça améliore les choses dans certains sites.

Donc il faut toujours développer en "mode standard" (= avec un bon doctype) sinon tu es sur d'avoir des comportements totalement imprévisibles

pierremomo · Message par **pierremomo** » 06 déc. 2005, 18:34

ah ? j'ai pas du bien comprendre ce que c'était le doctype alors

je croyais que c'était un truc à spécifier pour rendre le code plus lisible mais PAS pour le navigateur ... je pensais pas que ça pouvait changer un truc pour firefox ...
du coup il faudrait que je mettre quoi si mon code est celui que j'ai mis tout en haut ??

calimo · Message par **calimo** » 06 déc. 2005, 18:56

Ah ben si c'est justement pour le navigateur. Pour que ce soit plus lisible pour le navigateur. Qu'il sache dans quel langage tu va lui parler

Pour savoir quoi mettre, il n'y a pas de recette magique, ça dépend de ce que tu veux faire : HTML 4.01 ou XHTML 1.0 ? Version Stricte ou Transitionnelle ? À toi de voir. Choisis le bon doctype ici : http://www.w3.org/QA/2002/04/valid-dtd-list.html

Geckozone

probleme -positionnement image de fond, depuis MAJ

probleme -positionnement image de fond, depuis MAJ

Qui est en ligne ?