Se connecter / S'enregistrer
Votre question
Fermé

Comment adapter ma page web a toutes les tailles d'ecran ????

Tags :
  • Sites Internet
  • Programmation
Dernière réponse : dans Programmation
5 Janvier 2009 19:12:16

Bonjour a tous,

Voila j'ai un problème et d'avance je suis debutant en programmation...
alors soyez indulgent avec moi... ;) 

Voila...Je suis en train de creer mon site internet avec Photoshop et Image ready.... Jusqu'ici tout va bien

Mais au moment de creer mon fichier index.html la j'ai un problème.

Je creer mon fichier .pds (en 700px / 525px) puis je transforme en jpeg...
Et quand je l'envoi sur mon index et que je l'ouvre, pas de problème il apparait normalement sur mon ecran et prend toute la place sur mon ecran...
mais quand je vais ailleurs (famille ou amies) selon la taille de l'ecran il apparait plus petit en haut et ne prend pas tout l'ecran comme chez moi.

J'ai un peu chercher sur le net et j'ai trouver un code css qui devait le faire mais ca ne marche pas
peut etre que je m'y prends mal

voici mon code HTML :

<!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" xml:lang="fr" >
<head>
<title>Alternative média musicale "Toute l'actualité de toutes les musiques</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style> body{width:100%;height:100%;margin:center;min-width:0px;max-width:2000px} </style>

</head>
<body>
<!-- ImageReady Slices (page de presentation disqover.psd) -->
<center><img src="images/premierepage.jpg"alt=""><center>
<!-- End ImageReady Slices -->

</body>
</html>

J'aimerai tout savoir pour que n'importe ou ailleurs que chez moi la page de mon site prenne tout l'ecran.

Sil vous plait aidez moi...je n'en peux plus
et essayer d'etre le plus clair possible car je suis graphiste et pas encore programmeur (enfin je debute)

Aidez moi sil vous plait
merci d'avance et bonne année a tous

SETH

Autres pages sur : adapter page web tailles ecran

6 Janvier 2009 02:46:17

Bonjour,

C'est normal puisque tu as créer une image de 700px / 525px
Sur tout les écran tu aura cette dimension...

D'abort un design de site web ne se fait pas en une seul image mais en découpage.

Exemple:

J'affiche un rectangle rouge de 500px de largeur et 200px de hauteur:

  1. <div id="rectangle">
  2. </div>


  1. #rectangle {
  2. width: 500px;
  3. height: 200px;
  4. background: red;
  5. }


Maintenant je veux que ce rectangle prenne tout la largeur de l'écran, sur n'importe quelle résolution:

  1. #rectangle {
  2. width: 100%;
  3. height: 200px;
  4. background: red;
  5. }


En gros pour que ton design soit extensible, pour qu'il soit affiché pareil sur tout les écran il faut utilisé un pourcentage et non pas une taille fixe...

Ou alors, il suffit de créer un conteneur, d'une certaine taille, et d'afficher le contenu à l'intérieur, ainsi sur n'importe quelle résolution la taille sera la même... Biensure il faut l'adapter à la plus petite résolution possible... La plupart des site possédant un conteneur sont d'une largeur maximum de 800px pour la résolution 800X600px.
6 Janvier 2009 03:08:44

est ce que ce code est meilleur ????
J'ai integrer le code css directement dans le html..

<!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" xml:lang="fr" >
<head>
<title>Alternative média musicale "Toute l'actualité de toutes les musiques</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>body { margin-left:5%;margin-right:5%; }div#global{width:100%;
height:200%;margin-left:auto;margin-right:auto;max-width:2000px;}
</style>

</head>
<body>
<div id="global">

<center><img src="images/premierepage.jpg"alt=""><center>

</div>
</body>
</html>
Contenus similaires
6 Janvier 2009 03:14:55

<style type="text/css">
...
</style>

Je te conseil de créer une page externe, parce que si tu as plusieurs page tu va devoir modifier le CSS de toute les pages.

Puis comme je te l'ai dis un design ce découpe...
6 Janvier 2009 03:27:14

ok d'accord mais mis a part <style type="text/css"> que je dois remplacer
le reste est il bon pour s'afficher sur tous pc a la meme taille

ce n'est que provisoire, mon site est en construction et après je ferai appel a un webmaster

mais est ce que c'est bon avec ce code ou pas ???

merci d'avance
6 Janvier 2009 03:31:42

Ton site ce résume a une image

<center><img src="images/premierepage.jpg"alt=""><center>

De plus la balise <center> n'est plus utilisé...

Pour faire un site dans les normes il faut:

- 1 header
- 1 menu soit horizontale, soit en colone
- le contenu
- le footer

Centré le contenu:

  1. <div id="conteneur">
  2. blabla blabla
  3. </div>


  1. #conteneur {
  2. width: 800px;
  3. margin: auto;
  4. overflow: auto;
  5. }


Surtout pas de height!
6 Janvier 2009 03:39:27

alors ok
je vais t'expliquer
je sais qu'en principe un site se fait comme ceci mais la j'ai fait la page de site en construction avec photoshop car je suis en train de faire la maquette de mon futur site

est ce que avec ce code mon site va s'afficher correctement sur tous les ecran ou je suis obligé de decouper ???

6 Janvier 2009 03:42:39

Tu veux que l'image s'agrandisse si la résolution de l'écran est plus grande?

Ce n'est pas possible avec une image de taille fixe!
6 Janvier 2009 03:46:28

tu ne reponds jamais au question mon cher allstar....

Alors explique moi clairement comment faire ???
Dois je decouper mon image en plusieurs parties et leurs appliquer des valeurs en CSS ou autre solutions ???

sois plus clair s'il te plait....
6 Janvier 2009 03:48:45

Bon pour faire simple:

Si ton image fais 400px de largeur, elle fera 400px de largeur sur toutes les résolutions d'écran...

Peut pas faire plus clair!
6 Janvier 2009 03:50:53

tu racontes que de la merde
allez va te couchez gamin
6 Janvier 2009 03:53:57

SETH92 a dit :
tu racontes que de la merde
allez va te couchez gamin


En même temps avec un code source de merde, on ne peut que proposé de la merde...
http://siteduzero.com apprend d'abort les bases...

Alala les gens!
6 Janvier 2009 03:58:20

ouais......je pense que t'est surtout limité
et code source de merde...exact je suis graphiste et non programmeur
j'apprends et le site du zero ne n'apprendra rien de plus car ma premiere page est un jpg et eux explique comme toi avec un header,un contenu,ect...

c'est possible de faire ca avec un jpg
seulement au lieu de me dire que tu ne sais pas tu reponds a coté
j'ai horreur de ca

a de bon entendeur
6 Janvier 2009 04:01:59

C'est toi qui ne veut pas comprendre qu'une image avec tel dimension fera la meme taille sur une résolution différente, que veux tu que je te dise d'autre...

Tu es le seul graphiste qui arrive à faire des .pds avec photoshop...
6 Janvier 2009 04:04:10

pds ????
c quoi une blaque fan de dbz ou bien ??
6 Janvier 2009 04:07:36

SETH92 a dit :

Je creer mon fichier .pds (en 700px / 525px) puis je transforme en jpeg...


Non ce n'étais pas une blague, pour éviter de partir hors sujet, et que tu ne veux pas comprendre se que je te dis... je te laisse te débrouillé, ou attend qu'une ame charitable te donne des conseils.

Bonne chance.
6 Janvier 2009 04:09:46

ouais j'avais pas capter...mais en tout cas merci comme même et bonne chance
6 Janvier 2009 08:49:47

Et bien ... pas très sympatique ce SETH92 :/ 

Bon pour résumé tout ce petit bordel :

Oui il est possible de faire des blocs de taille dynamique selon la taille d'un écran que ce soit avec ou sans css.

<div width="100%".... ou en css #divName { width:100%; }

Oui il est possible de redimensionner une image selon la taille de l'écran , mais le résultat sera dégueulasse ( image étirée ).

<img src="...." width="100%"/> ou en css #imgName { width:100%; }

Oui il est possible d'appliquer un background fixe à un bloc , le seul soucis ce qu'il n'est pas possible du coup d'étirer l'image sur l'ensemble du bloc mais de la répeté , résultat dégueulasse.

<div id ="divName"></div>

#divName{
width:100%;
background-image: url("");
}

Donc comme l'a dit Allstar27, ce n'est pas possible de faire quelque chose de dynamique à partir d'un support fixe. ( quoiqu'en php ... il y a moyen de trifouiller l'image , en la redimenssionant tout en gardant un certain ratio et de centrer l'image dans un bloc, le résultat sera mitigé pour trop de chose à mettre en place pour rien )
6 Janvier 2009 08:51:09

Pour le "code source de merde " , générer à partir de inDesign du html n'est vraiment pas la meillleure chose à faire.
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS