Décalage des div selon la taille de l'écran

**philippef** · 12/04/2016, 17h38

Bonjour,

J'ai mis un site en ligne http://www.associationculturelletroi...p?page=accueil mais je me rends compte que j'ai plusieurs problèmes :
- j'ai construis le site sur un écran de 17 pouces et quand il est plus petit la photo du titre du site passe sous les 2 photos de gauche et du coup tout est décalé

- sur ma page d'accueil j'ai 3 div : une contient des photos, une autre située à côté contient du texte et une autre à droite contient aussi des photos. Pour que la 3è s'affiche comme je veux j'ai du mettre margin-top:-1100px. Je voudrais savoir si c'est correct.
je joins ma page index.php, ma page accueil.php et ma page style.css

Merci de me dire comment je peux résoudre ces problèmes.

**Azerx** · 12/04/2016, 17h43

Bonjour,
renseigne toi sur le "responsive design" c'est ça qu'il te faut (des cours sont disponibles sur ce site)! En tout cas sur mon écran 4:3 ton site est illisible!

**philippef** · 12/04/2016, 19h27

Merci pour la réponse. je vais regarder tout ça car je ne connais pas du tout "responsive design"
le site était fait pour pc et pas pour tablette ou smartphone et autre.

**Azerx** · 13/04/2016, 09h12

Envoyé par philippef

le site était fait pour pc et pas pour tablette ou smartphone et autre.

Il n'empêche que pour les (rares) utilisateurs qui utilisent encore du 4:3, le contenu est condensé sur le 1/3 droit de la page, les deux tiers de gauches restant blancs. Donc certains utilisateurs ne peuvent pas naviguer sur ton site!

Sur chrome et firefox tu as un outil pour "simuler" plusieurs tailles d'écran, tu peux le trouver dans le menu qui s'ouvre quand tu appuies sur F12

**johnrock** · 14/04/2016, 19h04

Bonjour!
Puisque tu dis que ton site n'étais pas pas conçu pour être responsive, je te conseille alors de jouer avec la propriété left: 0px;, tout en veillant au positionnement.

**Azerx** · 15/04/2016, 10h14

Si tu en as l'occasion, je pense qu'aujourd'hui il est quand même plus pertinent d'être responsive!

**JujuPomme** · 15/04/2016, 12h27

Bonjour,

Un site aujourd'hui, se doit d'être responsive. Ce n'est plus une option, mais une obligation (à mes yeux en tout cas). Trop de massacres sont faits sans penser à tout types d'utilisateurs...

Pour ce faire, je te renvoie sur les balises CSS media-queries, qui sont entre autre, celles qui gèrent le responsive.
Il existe de très bons tuto un peu partout, et des liens ont déjà été donnés.

Bon courage en tout cas

**philippef** · 26/04/2016, 19h21

Je reprends la discussion.

j'ai cherché en vain un tuto ou autre sur responsive design.
Quelqu'un peut me guider ?

Invité · 26/04/2016, 21h37

Bonjour,

ce n'est pourtant pas ce qui manque... :

+

A lire :

Les sites non responsive web design pénalisés par Google à partir du 21 avril 2015

Pour tester (parmi d'autres...) :

**philippef** · 27/04/2016, 14h45

Merci pour ces infos.
Donc j'essaie de refaire le site en ne fixant plus les tailles.
Pour l'instant j'en suis à vouloir régler le div bandeau du site

Le fichier index.php

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Association pour l&apos;Animation Culturelle de Troissy~Bouquigny</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="description" content="Association culturelle, Culture, Histoire, Troissy, Bouquigny, Champagne"/>
<meta name="keywords" content="Association, Culturel, Histoire, Crypte, Brocante, Champagne, Troissy, Bouquigny, Dormans, 51, 51700 "/>
<meta name="Robots" content="index, follow, all"/>
<meta name="Revisit-after" content="5 days"/>
<link rel="stylesheet" type="text/css" href="css/styles.css">
 
</head>
<body>
	<div id="bandeau">
		<img src="images/logo_association.jpg" alt="" style="margin-left:0.5em;max-width:100%;" align="left"/>
		<img src="images/crypte.jpg" alt="" style="margin-left:1em;max-width:100%;" align="left" />
		<img src="images/bandeau.jpg" alt="" style="margin-left:0em;max-width:100%;" align="left" />
		<span style="color:blue;margin-left:10em">monnom <br /></span><span style="color:yellow;margin-left:10em"> déconnexion </span>
	</div>
 
	<div id="filariane">
		<span style="margin-left:11em;">Vous êtes ici </span><img src="images/ariane.jpg" alt="" style="margin-left:0.5em;max-width:100%;" /> 
	</div>
 
	<div id="menu">Ceci est le menu</div>
	<div id="contenu">Ceci est le contenu<br /></div>		
	<div id="pied_page">Ceci est le pied de page</div>
</body>
</html>

le fichier 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
 
body {
   height: 100%;
   background-color: #FFFFFF;
   border: 0px solid transparent;
   font-size: 1em; /* Ideal: 16px */
   margin: 0px 0px 0px 0px;
   min-height: 100%;
   padding: 0px 0px 0px 0px;
   width: 100%;
  	-webkit-background-size: cover; /* pour Chrome et Safari */
  	-moz-background-size: cover; /* pour Firefox */
  	-o-background-size: cover; /* pour Opera */
  	background-size: cover; /* version standardisée */
}
div#bandeau {
	width : 100%;
	height : 9.5em;
	background-color : #A52A2A;
	}
div#filariane {
	width : 100%;
	height : 1.3em;
	color : #FFFFFF;
	background-color : #8E514D;
	}

la résolution de mon, écran est 1600 x 900
Quand je fais varier la largeur de l'écran voilà ce qui se passe :
Les 2 images de gauche (logo et crypte) diminuent bien selon la largeur de l'écran. La 3èm image (le bandeau passe sous les 2 premières. Tout ça ne me gène pas.
le problème c'est le div filariane qui reste sous les 2 premières images et le texte passe sous l'image bandeau?

Juste pour pouvoir démarrer merci de me dire ce qui ne va pas

Invité · 27/04/2016, 15h32

1/

Code :

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

1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Code :

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

<!DOCTYPE HTML>

2/

Code css :

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

1
2
3
4
5
6
7
8
9
body {
   height: 100%;
   background-color: #FFFFFF;
   border: 0px solid transparent;
   font-size: 1em; /* Ideal: 16px */
   margin: 0px 0px 0px 0px;
   min-height: 100%;
   padding: 0px 0px 0px 0px;
...

Code css :

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

1
2
3
4
5
6
7
8
9
body {
   height: 100%;
   background: #FFF;
   border: 0;
   font-size: 1em; /* Ideal: 16px */
   margin: 0;
   min-height: 100%;
   padding: 0;
...

Inutile de compliquer le code "pour le plaisir". Un "bon" code est un code "simple".

3/

Code css :

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

1
2
3
4
5
6
body {
...
  	-webkit-background-size: cover; /* pour Chrome et Safari */
  	-moz-background-size: cover; /* pour Firefox */
  	-o-background-size: cover; /* pour Opera */
  	background-size: cover; /* version standardisée */

Pour quoi faire ? tu as définit ton background à "blanc" : background: #FFF;

4/

Code css :

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

1
2
3
4
5
6
div#bandeau {
	width : 100%;
...
div#filariane {
	width : 100%;
...

Code css :

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

1
2
3
4
#bandeau {
...
#filariane {
...

Un id est unique. C'est suffisant.
Les <div> sont de type block, dont la largeur par défaut est 100%. Inutile d'en rajouter.

5/

Code :

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

<img src="images/logo_association.jpg" alt="" style="margin-left:0.5em;max-width:100%;" align="left"/>

au lieu d'écrire du CSS "en ligne", tu as une feuille de style : utilise-là.
align="left" : obsolète !

6/ CONCLUSION

Ce n'est pas uniquement en "responsive design" que tu as des lacunes. Mais en CSS en général.
Il va falloir t'y coller :

Décalage des div selon la taille de l'écran

CSS

Discussions similaires

Partager

Partager