Reglé la taille d'un site suivant la résolution de l'écran

[krikridu08]

Bonsoir les ICistes

J'ai un site chez Wiféo, pour la météo mais uniquement de mon village, il est trés simple, mais j'ai l'intention de créer un site sur la météo en Champagne-Ardenne. J'ai déjà attaquer la page d'accueil, mais rien n'est encore en ligne, j'attend qu'il a avancé un peu plus.

Et donc, j'ai une question, j'avait déjà un site chez les Pages-Perso d'Orange avant, sauf qu'il étais mal réglé car quand j'y allait sur un autre PC, tout étais collé sur la gauche, et non centré.

On m'a expliqué que c'étais parce qu'il fallait réglé la taille du site, car personne n'est censé avoir la même résolution d'écran. Pour l'instant, je l'ai mis en 800px, sauf que lorsque je vais voir mon site sur le navigateur pour voir si tout est bien placé, je me rend compte que le site ne prend pas toute ma page (normal, je ne suis pas en 800px).

Je voulais savoir comment il faut faire pour que de n'importe résolution d'écran, le site remplit toute la largeur de l'écran correctement, car tout collé à gauche, c'est pas trés esthétique

Merci d'avance

[ZHB]

Salut,

Je te conseil de regarder la structure de ces gabarits : http://www.alsacreations.com/static/gabarits/liste.html

Ils ne sont pas compliqué à comprendre. Fais un clique droite, puis enregistrer sous pour télécharger la structure et les fichiers css correspondants.

Si tu veux garder une largeur fixe à ton site mais le centrer sur l'écran il te suffit de créer une div conteneur et tu lui donne l'attribut css

margin: auto;

width:900px; (selon la largeur désirée).

[krikridu08]

Oki, merci, je vais aller voir à ça

[Michel-Chx]

Pour mon site j'avais dû tout changer à cause de ce problème, et au lieu de régler en PPX, j'ai tout réglé en %, donc 100 %, et quel que soit la taille de l'écran, ton site l'occupera en entier, mais pense à tout centrer.

[krikridu08]

Ah ben oui, en pourcentage ! Je n'y avait pas pensé, merci pour le conseil Faudra que je fasse ça !

J'ai bidouillé des trucs, j'ai fait pleins d'essais aussi, qui pourrait aller voir le début (y'a juste la bannière pour le moment) et me dire si il n'y a pas de trucs qui cloche, car je veut soigner le mal dès le début, pour ne pas à avoir tout à recommencer à la fin

http://pagesperso-orange.fr/meteo-champagne/

J'ai une autre question trés bête d'ailleur, je l'avoue !

Comme je redimensionne toutes mes photos avant de les mettre sur mon site, pour ne pas que ça mette des plombes à se charger pour ceux qui n'aurait pas le haut-débit, je me demandait, là, par exemple, ma bannière, je l'ai mise en 800px de largeur, et est ce que lorsque une personne qui à une résolution de plus de 800px aura la bannière ragrandit à sa taille ? Car si on passe un format en 800px à du 1200px voire plus, la photo risque d'être trés floue.

[Ex_Rat]

Bonsoir, oui ta bannière est redimensionné (je suis en 1024X768)

"800px × 160px (redimensionnée en 1020px × 200px) "

Tu dois avoir moyen (dans les option de l'image) d'empêcher cela /emoticons/wink@2x.png 2x" width="20" height="20">,

tu utilises quoi comme logiciel pour faire ta page web?

Amicalement, François

[krikridu08]

J'utilise NVU pour faire ma page

[Michel-Chx]

Pour l'image (je fais avec photofiltre, très simple), si tu la redimensionnes en pixels (et proportionnel), elle ne bouge plus quel que soit la taille de l'écran.

Si tu la redimensionnes en % elle s'adaptera aux écrans et il ne faut pas (flou ou déformations comme tu le dis). Seuls la taille de la page ou des cadres doivent être en %

Ton image a un problème, car sur ton site elle est en 200 Px de haut, mais en 160 Px si tu fais "voir l'image" (avec Mozilla ou Sea Monkey), donc elle a une taille qui varie encore.

Tes 5 petites photos sont à gauche, tu devrais aussi les centrer.

A+... et bon courage.

[krikridu08]

Les photos, je les redimensionne avec un logiciel photo, du même genre que Photophiltre, mais là, je ne croit pas que j'ai fait attention si elle a été rediemensionée en % ou en px, va falloir que je vérifie.

J'avait redimensionnée la bannière en 800X160px, c'est une erreur de ma part si elle est en 200px, fausse manip'

Pour les petites vignettes ainsi que l'image "en construction", j'essaierai de les remettre centrées demain

[krikridu08]

J'ai fait quelques petites modification lors de mon temps libre d'aujourd'hui, qui pourrait me dire si tout est centré ? Car je ne voit pas avec mon PC

Merci

[Michel-Chx]

Il y a des bugs dont je ne connais pas l'origine, le mieux c'est que tu vois cela.

[ZHB]

", en lui attribuant une largeur fixe de 1000px et en en mettant des marges à droites et à gauche sur "auto".

La div contenant ton image est elle aussi correctement insérée, c'est à dire qu'elle se trouve "à l'intérieur" de ta div

. Tu as cependant inséré 2 div à la place d'en avoir qu'une. Regarde ci-dessous la structure que tu as, il te faut supprimer ce que j'ai mis en rouge.

Pour tes images elles sont elles aussi insérées au bon endroit, mais elles ont chacune l'attribut "position:absolute". C'est à dire qu'elles sont positionnée dans ton cas à X et Ypx à partir du haut gauche de l'écran. Si tu regardes tes photos ont : position:absolute; top:30px; left: 100px; (les valeurs de top et left varient pour chaque image)

cela signifie donc qu'elles sont toutes placés par rapport au haut gauche de ton écran, à une distance de X pixel depuis le haut et Y pixel depuis la gauche.

Pour centrer tes images par rapport à ton contenu centré précédement il faut donc enlever l'attribut "poisition:absolute; top:..px; left:...px;" de toutes tes images. Pour qu'elles s'affichent sur une ligne enlève les
qui les séparent.

Tout le contenu présent dans ton site ne doit jamais posséder l'attribut position:absolute afin que ton site se positionne par rapport à

Tu as donc une structure comme celle-ci :

le contenu de ta page.

[krikridu08]

Oh là ! Ah oui, effectivement, y'a des bugs là-dedans

Je vais aller essayer de remédier à tout ça ...

[krikridu08]

J'ai essayer de faire comme vous m'aviez dit, j'ai également remis ma page en % contrairement au px. Je vais aller rebricolé quelques petits trucs dessus.

Par contre, j'ai NVU qui bug pas mal Il existe un logiciel du même genre que NVU (WYSIWYG) facile à utiliser et gratuit si possible ? Car là, impossible de mettre des images ou autres, c'est assez embêtant

[Michel-Chx]

Ta page en %, c'est impecc, rien ne varie avec les différentes tailles ou résolutions d'écran.

Ton bandeau n'est pas au centre, est ce voulu ?

Moi j'utilise le composeur de Sea Monkey, il est assez basique, mais sans problème.

[krikridu08]

Impeccable alors si en % c'est parfait !

Par contre, nan, c'est pas voulu que la bannière n'est pas centrée, faut que je voye à ça.