probleme resolution de la page

loloseven · Message par **loloseven** » 12 sept. 2009, 00:15

Bonjour tout le monde, alors voila je suis un novice qui se lance dans la création de page et j'ai un petit souci

voila j'ai decidé de faire ma page avec une résolution de 1024 px car j'ai lu que la majorité des écrans etaient dans cette résolution.
seulement voila la page s'affiche très bien sur un pc avec resolution 1024...
mais lorsque je l'affiche sur un pc à la résolution plus grande l'image du fond se répéte sur la droite (je sais pas si c'est tres clair

)
en gros ma page en 1024 n'est pas assez grosse et donc l'image de fond recommence pour combler le vide du navigateur ....

je voudrais savoir comment remedier à cela ...

est il possible que sur un pc a la resolution supérieure a 1024 px de large la page s'affiche comme il faut et c'est tout ... je veux dire le reste de l'espace dans le navigateur ne soit pas occupé ...

jai cherché partout et je n'y parvient pas ...

j'ai bien lu quelque part qu'il fallait exprimer la taille de la page en % mais je ne comprends pas bien ou je dois modifier les px en % dans le code ...

voici la page en question : http://m.berru.free.fr/

merci beaucoup d'avance !

loloseven · Message par **loloseven** » 12 sept. 2009, 00:39

juste pour info, je viens de tomber la dessus :

http://www.alsacreations.com/tuto/lire/ ... tions.html

"liquid : le site a une largeur fixe mais se place toujours au milieu du navigateur (ex: les sites www.lemonde.fr , fr.yahoo.com ou www.alsacreations.fr ) "

c'est ça que je voudrais faire, que ma page est une largeur fixe de 1024 px et qu'elle se mette au milieu du navigateur en cas de résolution plus grande .. merci

Message par **Ymai** » 12 sept. 2009, 08:06

Bonjour
Une manière simple de procéder consiste à:
- fixer la largeur du <body> à 1024px, par exemple
- laisser les marges se disposer automatiquement à gauche et à droite.
Pour l'image, inclure un bloc "conteneur" dans le <body> réduit et fixé:
Ce qui pourrait donner quelque chose comme:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>sans titre</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<style type="text/css">
body {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid black;
	}
#conteneur {
       background-color: red; color: blue
       }
</style>
<body>
<div id="conteneur">test pour voir</div>
</body>
</html>

Remplacer la directive pour la couleur de fond par la directive idoine pour l'image de fond.

loloseven · Message par **loloseven** » 12 sept. 2009, 11:28

bonjour merci pour votre aide... j'ai essayé vos indications avec un résultat en demi teinte

j'ai intégré : body {
width: 1000px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
}

et je me retrouve avec des marges qui encadre une fenetre de 1024 px de large ... seulement mon image de fond dépasse toujours de ce cadre

(http://m.berru.free.fr/)

le souci c'est donc que je n'arirve pas a fixer l'image de fond a 1024 px de large ...

j'ai tenté d'intégrer : #conteneur {
background-image: url(images/13.jpg)
}

mais je me retrouve avec un fond blanc et "#conteneur {
background-image: url(images/13.jpg)" affiché en haut de ma page ....

pourriez vous m'aider a fixer la taille de ma page de fond ?

je vous intégre la source de ma page si ça peut vous aider ...

Merci mille fois pour votre patience

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>45</title>
</head>
<body
style="border: 1px solid black; background-image: url(images/13.jpg); width: 1024px; margin-left: auto; margin-right: auto;">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</body>
</html>

Message par **Ymai** » 12 sept. 2009, 11:56

Bonjour
L'image de fond doit être intégrée dans le "conteneur" et non appliquée à "body".
Dans l'éditeur CSS, choisir le composant "#conteneur", dans la colonne de gauche
-> onglet Background (sans doute Fond en version française)
-> choisir l'image
-> refuser toute répétition si l'image a la bonne dimension horizontalement (soit 1000px)
Verticalement, tout dépendra de la quantité de texte à l'écran.

loloseven · Message par **loloseven** » 12 sept. 2009, 12:04

bonjour, merci encore pour votre aide. j'ai réussi a faire que l'image de fond ne se répéte pas avec background-repeat: no-repeat intégré dans le body que j'ai trouvé dans une discussion.
donc maintenant la page est comme je veux c'est a dire a 1024 px de large et le fond ne se répéte pas... (m.berru.free.fr)
seulement elle est alignée a gauche... je voudrais qu'elle soit centrée... une idée ?

<body
style="margin-left: auto; margin-right: auto; background-image: url(images/13.jpg); background-repeat: no-repeat; width: 1024px;">
<div style="margin-left: 40px; text-align: right;"></div>

voila la ligne clé je pense. j'ai intégré les marges automatiques comme vous me l'avez indiqué car je pensais que cela allait centrer la page mais ça ne change rien ? est ce que j'ai placé ""margin-left: auto; margin-right: auto;" au mauvais endroit ???

merci encore

Final-Blond · Message par **Final-Blond** » 11 mars 2010, 21:16

Au vu de la date, je ne sais pas si ton problème a été réglé, mais je te le souhaite...

Sinon, oublie le margin-left: auto; margin-right: auto; qui est plus à gérer avec un width: auto; et encore, il n'est pas traduit pareil selon les navigateurs.
Non, ce qu'il faut, c'est positionner ton fond.
Dans les propriétés de ton image de fond, voilà ce que ça donne et dont la syntaxe peut être :
body {background: url('images/13.jpg') no-repeat top center fixed;}

aetos · Message par **aetos** » 29 mars 2010, 10:26

Bonjour, je suis entrain de faire un site avec Kompozer, l'écran de mon ordi est de 17", la résolution 1440x900, j'ai changé la résolution en 1024x768 pour voir ce que ça fait, la présentation n'est plus la même, normal, ça agrandi et l'image n'est plus vraiment nette, je voulais savoir si cela vient du fait d'être passé à une résolution 1024x768 sur un écran de 17" ou est-ce que l'image est ainsi sur les écrans de 15", est-ce qu'il existe une autre méthode pour voir ce que serait la présentation sur un écran 15" ? Ne serait-il pas plus simple en page d'accueil de dire aux visiteurs d'agrandir ou rétrécir l'affichage en appuyant sur Ctrl + molette ? Merci d'avance de vos conseils.

GAUNCE · Message par **GAUNCE** » 29 mars 2010, 12:58

Bonjour,
Si tu navigues avec Firefox, il existe une extension, indispensable, qui s'appelle "Web developper" et qui te permettra de visionner tes pages dans toutes les configurations désirées.
En tout état de cause, ta page à partir de 1024X768 devrait être intégralement visible, sans intervention aucune. Soit parce que ta page est conçue en pourcentage ou en taille fixe à partir de 1024X768. PLus l'écran sera grand plus l'arrière plan sera visible dans ce cas de figure.

aetos · Message par **aetos** » 29 mars 2010, 13:35

GAUNCE a écrit :Bonjour,
Si tu navigues avec Firefox, il existe une extension, indispensable, qui s'appelle "Web developper" et qui te permettra de visionner tes pages dans toutes les configurations désirées.
En tout état de cause, ta page à partir de 1024X768 devrait être intégralement visible, sans intervention aucune. Soit parce que ta page est conçue en pourcentage ou en taille fixe à partir de 1024X768. PLus l'écran sera grand plus l'arrière plan sera visible dans ce cas de figure.

Re-bonjour, merci pour tes conseils, je vais aller voir cette extension "Web developper", bonne journée !

Message par **chinon37** » 29 mars 2010, 13:42

Bonjour,

il est hors de question de demander au visiteur d'adapter son écran à la taille de ta page. C'est à toi de t'adapter à tous les écrans, soit en mettant une taille de page fixe, centrée dans le navigateur, soit une taille proportionnelle avec une structure (en css) qui permette un résultat correct sur tous les écrans.
Quel type d'image mets-tu pour qu'elle se dégrade? peut-on voir la page?

aetos · Message par **aetos** » 29 mars 2010, 14:32

chinon37 a écrit :Bonjour,

il est hors de question de demander au visiteur d'adapter son écran à la taille de ta page. C'est à toi de t'adapter à tous les écrans, soit en mettant une taille de page fixe, centrée dans le navigateur, soit une taille proportionnelle avec une structure (en css) qui permette un résultat correct sur tous les écrans.
Quel type d'image mets-tu pour qu'elle se dégrade? peut-on voir la page?

Bonjour, je suis débutant, il n'y a pas d'image sur ma page, elle n'est pas finie, c'est surtout et pour le moment des titres et du texte, bon va falloir que je me renseigne sur ce que tu viens de me conseiller, css... merci.

Message par **chinon37** » 29 mars 2010, 15:06

aetos a écrit : l'image n'est plus vraiment nette,

ma remarque sur l'image venait de ce que tu avais dit.

Si tu es débutant, je t'invite à jeter un coup d'œil (voire plus si affinité) aux liens de ce post: http://www.geckozone.org/forum/viewtopi ... 20&t=20704, et en particulier aux 2 premiers.

bobo · Message par **bobo** » 30 mars 2010, 13:58

aetos a écrit :Bonjour, je suis entrain de faire un site avec Kompozer, l'écran de mon ordi est de 17", la résolution 1440x900, j'ai changé la résolution en 1024x768 pour voir ce que ça fait, la présentation n'est plus la même, normal, ça agrandi et l'image n'est plus vraiment nette, je voulais savoir si cela vient du fait d'être passé à une résolution 1024x768 sur un écran de 17" ou est-ce que l'image est ainsi sur les écrans de 15"

Ton problème de netteté vient probablement du changement de résolution, en effet.
Si tu utilises un écran LCD, ton écran aura une résolution native, apparemment c'est 1440x900 chez toi. Cette résolution n'est pas vraiment liée à la taille, il existe certes des 15'' en 1024x768, mais il y a aussi des 15'' en 1280x1024, etc. Les écrans LCD sont ainsi fait qu'ils sont constitués d'une mosaïque de petits points physiques. Quand tu utilises la résolution native, les pixels de l'image sont alignés avec les pixels physiques de l'écran, et le résultat est net. Quand tu utilises une autre résolution, les pixels de l'image vont être plus gros que les pixels physiques, et vont se retrouver à cheval sur plusieurs pixels physiques et le résultat sera un peu plus flou.

aetos · Message par **aetos** » 13 avr. 2010, 12:21

Bonjour à tous et désolé de vous répondre avec du retard, j'ai été pas mal occupé en ce moment, bon, j'ai téléchargé "Web developper" et c'est très pratique pour voir comment s'affichera le site dans les différentes résolutions. Par contre, je galère pour faire en sorte que ça soit centré dans une résolution de base à 1024x768, chinon37, pourrais-tu me dire comment as-tu fait pour ta présentation centrée http://www.vinslorieux.com, merci d'avance.

Geckozone

probleme resolution de la page

probleme resolution de la page

Re: probleme resolution de la page

Re: probleme resolution de la page

Re: probleme resolution de la page

Re: probleme resolution de la page

Re: probleme resolution de la page

Re: probleme resolution de la page

Re: probleme resolution de la page

Re: probleme resolution de la page

Re: probleme resolution de la page

Re: probleme resolution de la page

Re: probleme resolution de la page

Re: probleme resolution de la page

Re: probleme resolution de la page

Re: probleme resolution de la page

Qui est en ligne ?