Adapter à la taille de l'écran

Version imprimable

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:

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

27/12/2011, 09h58
Torgar

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 :aie:
27/12/2011, 10h00
NoSmoking

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.
27/12/2011, 12h26
simonfr

Si je met tout en pourcentage pensez vous que cela pourrait marcher ?
27/12/2011, 12h30
Torgar

Ca dépend, tes images pourraient être déformées suivant la méthode d'affichage employées.
27/12/2011, 15h17
miss_socrates

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.
30/12/2011, 19h44
simonfr

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

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

exemple :

Code:

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>

31/12/2011, 12h37
Atomya Rise
Code:

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 !