Les dimensions d'un site à partir de sa charte graphique

Version imprimable

13/03/2013, 13h02
mehdi.cheddani

Les dimensions d'un site à partir de sa charte graphique

Bonjour,
j'un fichier .AI qui contient une charte graphique d'un site web qui a comme taille
1000*700 et je veux savoir ou je mets ces dimensions est ce que c'est dans la css si c'est le cas quelles sont les propriétés et ou je dois les mettre.
Merci.
13/03/2013, 13h38
saymoneu
Bonjour,

dans ton css il va falloir préciser la taille du body.
Code:

1 2 3 4 body{ width:1000px; /*largeur*/ height:700px; /*hauteur*/ }
13/03/2013, 16h06
mehdi.cheddani

enlever le scroll selon taille

Bonjour,
voila je voudrai que la barre de défilement disparait tout en respectant les mesures de la charte graphique.
Merci.
13/03/2013, 16h21
Torgar

Sans code ça risque d'être compliqué de t'aider.

M'enfin, à toute fin utile, regarde la propriété CSS overflow.
13/03/2013, 17h39
mehdi.cheddani

Image en taille

j'ai arrivé à résoudre le premier problème et la je voudrai qu'une image de background prenne cette taille aussi.
Merci.
13/03/2013, 17h50
Torgar

Tant que tu te décideras pas à poster ton code, on pourra pas t'aider.

Et j'ai pas pris option Divinatoire dans mes études. Donc la voyance ne fonctionnera pas pour ton cas.

code tant souhaité

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body
{
        height:100%;
        width:100%;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:auto;
        text-align:center;
        overflow:auto;
        background-repeat:no-repeat;
        background-position:center;
        background-size:cover !important;
}
#main
{
        width:600px;
        height:510px;
        overflow:hidden;
        border-radius:20px;
        background-color:#FFF;
        position:relative;
        margin-left:auto;
        margin-right:auto;
        margin-top:15px;
        margin-bottom:20px;
        top:0;
        bottom:0;
}
ul#menu
{
        list-style-type:none;
}
ul#menu li
{
        display:inline-table;
        margin-right:10px;
        margin-left:10px;
        font-family:Arial, Helvetica, sans-serif;
        font-size:14px;
        text-align:center;
}
 ul#menu a {
         text-decoration:none;
        color: #FFFFFF;
} 
 ul#menu a:hover {
        color:#F60;
} 
#arriere{
/* l'image occupe toute la place du body */
width : 100%;
height: 100%;
}
</style>
<title>OM.COM</title>
</head>
<body background="backg.png">
<table id="conteneur" width="100%" height="600" border="0" cellpadding="0" cellspacing="0" style=" width:100%;height:100%; top:0px !important; left:0px!important; text-align:center; vertical-align:middle; margin-top:0px !important; margin-left:auto!important;">
	<tr>
		<td style="text-align:center !important;vertical-align:middle !important; width:100% !important;" width="100%" height:"907" valign="middle" align="center">
        <div id="main">
        </div>
        </td>
	</tr>
  <tr>
	  <td style="background-image:url(OM-02-02.png);background-repeat:repeat-x;margin-left:0px; margin-right:0px;position:absolute" width="100%" height="43">
 <ul id="menu">
      <li><a href="#">L'AGENCE</a></li>
      <li><a href="#">REALISATIONS</a></li>
      <li><a href="#">SERVICES</a></li>
      <li><a href="#">REFERENCES</a></li>
      <li><a href="#">NOTRE EQUIPE</a></li>
      <li><a href="#">CONTACT</a></li>
      </ul>
</td>
	</tr>
	<tr>
	  <td style="background-color:#575657 !important;" width="100%" height="100">
	  </td>
	</tr>
</table>
</body>
</html>

Voila

14/03/2013, 12h15
Torgar

Avec le doctype que tu as mis, ceci n'est pas valide :

Code:

width="100%" height="600" border="0" cellpadding="0" cellspacing="0"

Les attributs width, height et border sont dépréciés en XHTML, préfère le CSS.

Et de toute manière, les valeurs de dimensions prennent des unités. Donc tes height ne sont pas corrects car on sait pas si c'est des pixels, pourcentages, etc.