Adapter à la taille de l'écran

simonfr · 27/12/2011, 01h58

Bonjour a tous,

Je souhaiterai savoir si il était possible de d'adapter tout un document html a la taille d'un écran. C'est a dire que j'ai fait un design sous photoshop je l'ai découper mais il n'est pas a la taille de mon écran.

Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<html>
<head>
<title>Portail</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Portail.psd) -->
<table id="Tableau_01" width="1275" height="801" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="9">
			<img src="images/Portail_01.jpg" width="1275" height="301" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/Portail_02.jpg" width="138" height="83" alt=""></td>
		<td>
			<img src="images/Portail_03.jpg" width="228" height="60" alt=""></td>
		<td colspan="3" rowspan="2">
			<img src="images/Portail_04.jpg" width="530" height="83" alt=""></td>
		<td rowspan="2">
			<img src="images/Portail_05.jpg" width="202" height="83" alt=""></td>
		<td colspan="2" rowspan="2">
			<img src="images/Portail_06.jpg" width="177" height="83" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/Portail_07.jpg" width="228" height="23" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/Portail_08.jpg" width="125" height="416" alt=""></td>
		<td colspan="3">
			<img src="images/Portail_09.jpg" width="254" height="297" alt=""></td>
		<td rowspan="2">
			<img src="images/Portail_10.jpg" width="491" height="416" alt=""></td>
		<td colspan="3">
			<img src="images/Portail_11.jpg" width="254" height="297" alt=""></td>
		<td rowspan="2">
			<img src="images/Portail_12.jpg" width="151" height="416" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/Portail_13.jpg" width="254" height="119" alt=""></td>
		<td colspan="3">
			<img src="images/Portail_14.jpg" width="254" height="119" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="125" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="13" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="228" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="13" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="491" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="26" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="202" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="26" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="151" height="1" alt=""></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Merci de votre aide,

Simonfr

Torgar · 27/12/2011, 09h58

Bonjour,

C'est normal, les design exportés en version web par Photoshop ne sont pas extensibles et sortent aux dimensions de ton espace de travail.

De plus, nous ne pouvons pas voir ton design, puisque nous n'avons pas les images

NoSmoking · 27/12/2011, 10h00

Bonjour,
le découpage pour mettre dans une TABLE ne m'apparaît pas comme une bonne idée, ça c'est pour rester clean.

simonfr · 27/12/2011, 12h26

Si je met tout en pourcentage pensez vous que cela pourrait marcher ?

Torgar · 27/12/2011, 12h30

Ca dépend, tes images pourraient être déformées suivant la méthode d'affichage employées.

miss_socrates · 27/12/2011, 15h17

Le code en html est obsolète en ce qui concerne la mise en page et il faudrait utiliser dess divisions plutôt que des tables avec des cellules qui sont réservées aux présentation structurées.
Il faudrait passer au CSS pour la présentation, et il serait possible de tout afficher sur un écran notamment avec les pourcentages.

simonfr · 30/12/2011, 19h44

Alors, y aurait-il un autre moyen de convertir un psd en html ou php ou css ?

NoSmoking · 31/12/2011, 10h08

tu peux toujours mettre ton image en ne spécifiant qu'une largeur à 100%, la hauteur s'adaptera.

exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[Image 100%]</title>
<style type="text/css">
html, body{
  width : 100%;
  height : 100%;
  margin : 0;
  padding : 0;
}
#developpez{
  width:100%;
}
</style>
</head>
<body>
<img id="developpez" src="http://www.developpez.net/template/images/logo.png">
</body>
</html>

Atomya Rise · 31/12/2011, 12h37

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<table id="Tableau_01" width="1275" height="801" border="0" cellpadding="0" cellspacing="0">

Pour info, tu utilises une largeur de 1275px, or, si tu veux que cela s'adapte à tout les écrans, je te conseille une largeur maximal de 1024px afin que les petits écran n'ont pas le soucis de la barre de défilement horizontale...

Comme certains l'on déjà dis, pour passer ton image en pixel, c'est possible, mais ceci déformera obligatoirement ton image....
Si tu mets une largeur de 100% à ton image, la hauteur s’adaptera en effet, mais la hauteur risque de pendre une place non négligeable, et cela pourrait être ennuyeux...

Au pire des cas, le mieux est de faire une image de 1000px, de la découper en 3 morceaux sur la largeur.
L'image de gauche est droite feront 500px et l'image centrale de 1px de largeur avec un [codeinline]background-repeat: repeat-x;[codeinline] et là, ça te permettra de tricher, mais aussi d'adapter ton site à tout les type d'écran...

En espérant ne pas me tromper, bonne chance !

27/12/2011, 09h58	#2
Torgar Membre expérimenté Jérémy Développeur Web Inscription : août 2007 Messages : 326 Détails du profil Informations personnelles : Nom : Jérémy Âge : 26 Localisation : France, Gard (Languedoc Roussillon) Informations professionnelles : Activité : Développeur Web Secteur : Industrie Informations forums : Inscription : août 2007 Messages : 326 Points : 535 Points : 535	Bonjour, C'est normal, les design exportés en version web par Photoshop ne sont pas extensibles et sortent aux dimensions de ton espace de travail. De plus, nous ne pouvons pas voir ton design, puisque nous n'avons pas les images __________________ Vivez vos rêves !!! Si vous voulez que l'on vous aide, postez votre code avec la balise [ CODE ] [ /CODE ] (bouton # de l'éditeur)
	00

27/12/2011, 12h30	#5
Torgar Membre expérimenté Jérémy Développeur Web Inscription : août 2007 Messages : 326 Détails du profil Informations personnelles : Nom : Jérémy Âge : 26 Localisation : France, Gard (Languedoc Roussillon) Informations professionnelles : Activité : Développeur Web Secteur : Industrie Informations forums : Inscription : août 2007 Messages : 326 Points : 535 Points : 535	Ca dépend, tes images pourraient être déformées suivant la méthode d'affichage employées. __________________ Vivez vos rêves !!! Si vous voulez que l'on vous aide, postez votre code avec la balise [ CODE ] [ /CODE ] (bouton # de l'éditeur)
	00

27/12/2011, 15h17	#6
miss_socrates Membre habitué Inscription : mai 2011 Messages : 112 Détails du profil Informations personnelles : Sexe : Localisation : Belgique Informations professionnelles : Secteur : Enseignement Informations forums : Inscription : mai 2011 Messages : 112 Points : 134 Points : 134	Ajuster à la taille de l'écran Le code en html est obsolète en ce qui concerne la mise en page et il faudrait utiliser dess divisions plutôt que des tables avec des cellules qui sont réservées aux présentation structurées. Il faudrait passer au CSS pour la présentation, et il serait possible de tout afficher sur un écran notamment avec les pourcentages.
	00

27/12/2011, 10h00	#3
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	Bonjour, le découpage pour mettre dans une TABLE ne m'apparaît pas comme une bonne idée, ça c'est pour rester clean.
	00

27/12/2011, 12h26	#4
simonfr Invité de passage Développeur Web Inscription : septembre 2011 Messages : 15 Détails du profil Informations personnelles : Sexe : Localisation : France, Loire Atlantique (Pays de la Loire) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : septembre 2011 Messages : 15 Points : 2 Points : 2	Si je met tout en pourcentage pensez vous que cela pourrait marcher ?
	00

30/12/2011, 19h44	#7
simonfr Invité de passage Développeur Web Inscription : septembre 2011 Messages : 15 Détails du profil Informations personnelles : Sexe : Localisation : France, Loire Atlantique (Pays de la Loire) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : septembre 2011 Messages : 15 Points : 2 Points : 2	Alors, y aurait-il un autre moyen de convertir un psd en html ou php ou css ?
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email