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 !

Adapter à la taille de l'écran

HTML

Discussions similaires

Partager

Partager