Site web adapté aux différentes résolutions écran

**ludivine49** · 01/07/2010, 14h48

voilà, j'ai configuré mon site pour une résolution de 1680*1050 (résolution de mon ordi). Cependant, j'ai revu la feuille de style css de mon site pour qu'il soit adapté pour différentes résolutions. J'ai mis les positions en pourcentage ainsi que les dimensions et j'ai bien mis un width:100% comme il était conseillé dans certains forums. Cependant, cela ne résout rien. Au changement de résolution, les écritures vont les unes sur les autres et il n'y a que la bannière qui est redimmensionnée (est-ce qu'il faut mettre en pourcentage les écritures j'ai fait ça mais ça change rien).
Ci-joint mon code

Code html

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
<body>
 
		<div id='pagePrincipale'>
		<div id="banniere">
			<?php
 
					echo "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0' align='center' width='96%' height='26%'>
												<param name='movie' value='".$chemin."'/>
												<param name='quality' value='high'/>
												<param name='menu' value='false'/>
												<param name='wmode' value='transparent'/>
											<EMBED src='".$chemin."' quality='high' bgcolor='#FFFFFF' NAME='banniere' ALIGN='center' width='96%' height='26%' wmode='transparent'
												TYPE='application/x-shockwave-flash' PLUGINSPAGE='http://www.macromedia.com/go/getflashplayer'></EMBED></object>";
 
			?>
		</div>
 
		<div id="partieCentrale">
 
			<div id="menu">
				<?php
					include('menu.php');
				?>
			</div>
 
			<div id="contenu">
				<?php
					$page = $_GET['page'];
					include ( $page.'.php' );
				?>
 
			</div>
 
			<div id="piedPage">
				<?php
					include('piedPage.php');
				?>
			</div>		
		</div>
 
 
 
		<div id="recherche">
			<?php
				if($page!='activMediasTV' && $page!='imoBox' && $page!='recherche')
				{
					include('formRecherche.php');
				}
			?>
		</div>
		</div>
      </body>

Code css

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
body
{
	background-color:black;
	height:100%;
	behavior:url("css/csshover.htc");
	font-family:Verdana;
	font-size:11pt;
	margin:0;
	padding:0;
	z-index:3;
	color:white;
}
 
#pagePrincipale
{
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	width:1000px;
	min-height:100%;
}
 
#banniere
{
	width:96%;
}
 
#partieCentrale
{
	margin-left:auto;
	margin-right:auto;
	width:96%;
	text-align:left;
}
 
#contenu
{
	position:absolute;
	top:30%;
	left:35%;
	/*min-height:310px;*/
	width:76%;
}
 
#contenuPage
{
	position:relative;
	top:2%;
	left:2%;
	/*max-width:74%;*/
	min-height:310px;
	text-align:left;
}
 
#menu
{
	text-align:left;
	width:24%;
}
 
#contenuMenu
{
	color:#ffcc00;
	font-family:Verdana;
	font-size:12pt;
	text-align:top;
	position:absolute;
	top:27%;
	left:22%;
}

Voilà, merki de m'aider, ça fait plusieurs jours que je galère.
Si vous avez également des solutions (autre que faire une feuille de style pour chaque résolution ce qui est impossible), merki.

**devyan** · 01/07/2010, 16h00

Bonjour,

Envoyé par ludivine49

Si vous avez également des solutions (autre que faire une feuille de style pour chaque résolution ce qui est impossible), merki.

Ce n'est pas la première fois que je me fais la réflexion mais vu que tu tends la perche

...

Pourquoi "faire un site pour toutes les résolutions" ? Et si la fenêtre de mon navigateur est réduite à 200pixels de larges tu fais comment ?
Les "barres de défilement" sont là pour ça non ?

Par contre je comprends que tu prévoies ton site d'une certaine largeur (la plus souvent utilisée) ou plutôt d'une largeur minimum (comme sur ce forum)

J'entends déjà Erwan31 arriver pour nous dire qu'il faut aussi penser aux smartphones et autres médias

devyan

**ludivine49** · 01/07/2010, 16h28

ça c'est sûr c'est la vrai galère entre les différents navigateurs et différentes résolutions. En fait, si on change de résolution, alors mon site web n'est pas visuable (si je reste en %) ou alors il es tro gros (si je reste en pixels)
J'aimerai juste baisser la largeur mai j'y arrive pas.
Tu penses qu'il faut mieux faire un site 800*600 et l'agrandir ou faire un site en 1680*1050 et le rétrécir. Je suis un peu perdu. J'ai même essayer avec un tableau tt simple mais mon contenu ne se réduit pas (les polices ne diminuent pas). Même ds le css directement, cela ne se modifie pas.
Aidez-moi, please

**devyan** · 01/07/2010, 17h53

Mon avis ?

Il vaut mieux faire un site qui s'affiche correctement sur 1000pixels de largeur et éventuellement permettre à la zone de contenu de s'étendre.

Une grande partie des portables de 12" à 16" ont des écrans 16/9 de 1366x768 (c'est même le cas de certains 17").
On descend à 1024x600 pour les 10".

devyan.

**Drahcir** · 19/11/2010, 02h44

Bonsoir !

Vous pouvez faire un site extensible mais dont le corps aurait une largeur prédéfinie.

Je m'explique. Certains <div> seraient à 100% pour permettre par exemple une image d'arrière plan très large tandis que le toutes les parties principales comme l'entête , le corps et le pied de page auraient une largeur fixe.

Un site que je développe actuellement pour ma municipalité a deux de ses balises qui contiennent des images d'arrière plan qui prennent toute la largeur peu importe la résolution de l'utilisateur.

Le contenu des pages lui est de 970 pixels en largeur et selon la section une hauteur est déterminée.

Voici un petit bout de code Css pour illustrer ce dont je parle:

Code :

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

1
2
3
4
5
body { width: 100%; margin: 0; font-family: Arial, Tahoma, Helvetica, sans-serif; color: #737068; background-image: url(images/bg.gif); background-repeat: repeat-x; text-align: justify; /*overflow:auto*/ }
 
#blocs { position: absolute; width: 100%; height: 1200px; }
	#bloc_entete { position: absolute; width: 100%; height: 139px;  }
		#entete { position: absolute; width: 970px; height: 139px; left: 50%; margin-left: -485px;  background-image: url(images/bg_menuaccueil.gif); }

Body contient une image d'arrière plan qui prend toute la largeur du site peu importe la résolution de l'utilisateur.

Blocs est la dimension du site en entier. Pas de limite en largeur mais une en hauteur, soit 1200 pixels.

Le bloc d'entête, comme plusieurs autres d'ailleurs, a une hauteur fixe mais n'est pas limité en largeur. C'est un conteneur général comme il y en a un pour chacune des sections (header, slideshow, menu etc).

Enfin, #entete a une hauteur et une largeur fixes. Son positionnement central est déterminé par la balise left: 50%. Il a sa propre image d'arrière plan qui ne dépasse pas les 970 pixels.

Je crois que vous pourrez facilement comprendre ces explications et j'espère qu'elles vous seront utiles.

Bonne continuation.

Site web adapté aux différentes résolutions écran

CSS

Discussions similaires

Partager

Partager