Pages adaptées au format de lecture

Version imprimable

10/05/2019, 15h38
Laurent84100

Pages adaptées au format de lecture

Bonjour à toutes et tous,

Je viens de découvrir votre forum et j'espère que je trouverais les réponses à mes questions sur la création de pages web. J'essaierai de répondre aux questions simples également.
J'ai créer il y a de nombreuses années, des pages web que je voudrais actualiser aux normes actuelles et la plus importante à mes yeux c'est la définition de ces pages sur des supports plus petits (smartphones, tablettes et surtout notebook...).
Car actuellement mes pages sont définies avec des valeurs fixes (width=1270px, les hauteurs également). N'étant pas dela partie développeur, je ne sais pas comment commencer.

Dois-je refaire toutes mes pages ?
Puis-je les adapter à un format "flottant" ?
Quid de mes images qui sont fixes ?

Bref, j'ai besoin de vos avis avant de me lancer dans les modifications.

Merci pour votre aide.
10/05/2019, 18h05
NoSmoking

Bonjour et bienvenue sur DVP.

Pour une première approche je te conseille la lecture de
↪ Les fondamentaux du Responsive Web Design
14/05/2019, 12h14
Laurent84100

Bonjour et merci pour ta réponse.
Je vais l'étudier et je reviendrai avec mes questions.
14/05/2019, 13h17
Laurent84100

Avant d'aller plus loin dans l'étude du cours.
Une question vite fait sur les marges.
La taille de mon site est 1280px = 100%
L'image de mon header est 900 px = 0.703125% mais si je veux centrer l'image horizontalement comment faire ?
Car margin auto ne fonctionne pas.

Je viens de faire mes premières modifs et plus rien ne fonctionne. Je pense avoir respecter le cours, mais là je ne comprends pas.

Voici mon code html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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" />
<title>iD Rechange</title>
<link rel="stylesheet" media="screen" type="text/css" title=" style" href="../../idstyl2b.css" />
</head>
 
<body>
 
	<div id="headerv">
    <a href="doctele/iD_04-2019v4.pdf" target="_blank"><div class="btn"></div></a>
    <a href="arradh_v3.html"><div class="base"></div></a> 
	</div>
</body>

Voici le code css initial :

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
/*L'ensemble du site - ABONNES*/
body{
width:1280px;
background:#FFF;
margin:auto;
font-family: Arial;
font-size:14px;
}
 
 
/*Head*/
 
div#headerv{
background: url(images/headAb3.png) no-repeat;
width:1280px;
height:250px;
margin-top:10px;	
}
 
div#headerv img { 
position:absolute; 
display:block; 
top:0; 
left:0; 
right:0; 
bottom:0; 
}
 
.base{
background: url(images/iD_base.png) no-repeat;	
width:226px;
height:226px;
}
 
.btn{
display: block;
float:right;
width:250px;
height:200px;
background-image: url(images/btn4b.png)  ;
margin-right:10px;
margin-top:30px;
}
 
.btn:hover {
float:right;
width:250px;
height:200px;
background-image: url(images/btn5b.png)    ;
margin-right:10px;
margin-top:30px;
}
 
.retour {
width:30px;
height:25px;
background-image: url(images/retour.png)    ;
margin-top:5px;
text-decoration:none;
}

Et voici le css modifié :

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
/*L'ensemble du site - ABONNES*/
body{
width:100%;
background:#FFF;
margin:auto;
font-family: Arial;
font-size:0.875em; /*14/16*/
}
 
/*Head*/
 
div#headerv{
background: url(images/headAb3.png) no-repeat;
width:100%;
height:100%;
margin-top:0.0078125%;	/*10/1280*/
}
 
div#headerv img { 
position:absolute; 
display:block; 
top:0; 
left:0; 
right:0; 
bottom:0; 
}
 
.base{
background: url(images/iD_base.png) no-repeat;	
width:0.1765625%; /*226/1280*/
height:0.1765625%; /*226/1280*/
}
 
.btn{
display: block;
float:right;
width:0.1953125%; /*250/1280*/
height:0.15625%; /*200/1280*/
background-image: url(images/btn4b.png)  ;
margin-right:0.0078125%; /*10/1280*/
margin-top:0.0234375%; /*30/1280*/
}
 
.btn:hover {
float:right;
width:0.1953125%; /*250/1280*/
height:0.15625%; /*200/1280*/
background-image: url(images/btn5b.png)    ;
margin-right:0.0078125%; /*10/1280*/
margin-top:0.0234375%; /*30/1280*/
}
 
.retour {
width:0.0234375%; /*30/1280*/
height:0.01953125%; /*25/1280*/
background-image: url(images/retour.png)    ;
margin-top:;/*25/1280*/
text-decoration:none;
}

Et là, du coup, plus rien n'apparait !!
Une idée, une suggestion, un début de solution ??
Merci

14/05/2019, 18h43
NoSmoking

Regarde du côté de background-position: center, par exemple.

↪ Propriétés de mise en forme d'arrière-plans

Je ne vois pas ce que tu veux dire. Je dois me servir de

Code:

1
2
3
 
background-position:center;
background-attachment:fixed;

Comme ceci ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div#headerv{
background: url(images/headAb3.png) no-repeat;
background-position:center;
background-attachment:fixed;
width:100%;
height:100%;
margin-top:0.0078125%;	/*10/1280*/
}
 
div#headerv img { 
display:block; 
top:0;
left:0;
right:0; 
bottom:0; 
}

Mais cela ne fonctionne tjs pas. Je n'ai plus rien.

16/05/2019, 18h23
NoSmoking

Citation:

Je n'ai plus rien.

supprime background-attachment:fixed;.
17/05/2019, 08h26
Laurent84100

Ben, désolé mais c'est le même résultat !!

Ton élément div#headerv n'a pas de hauteur réelle, 100% de 0 sera toujours égal à 0, donc rien n'est visible !
Met à ton élément une « vraie » valeur :
Code:

1 2 3 4 5 6 7 8 div#headerv{ background: url(images/headAb3.png) no-repeat; background-position:center; /* width:100%; /* inutile, c'est la valeur par défaut */ /* height:100%; /* c'est en pourcentage du parent */ /* margin-top:0.0078125%; /*10/1280*/ /* pas judicieux */ height: 10em; /* par exemple */ }
il y a d'autres petits trucs à savoir mais pour le moment ...

17/05/2019, 10h18
Laurent84100
Effectivement, cela fonctionne en ajustant.
Code:

1 2 3 4 5 div#headerv{ background: url(images/headAb3.png) no-repeat; background-position:center; height: 20em; }
Mais si je passe dans une autre résolution, mon image est tronquée. Le but de mes changements étant d'ajuster pour les différents formats

Il te faut utiliser la propriété background-size en mettant sa valeur à cover par exemple.

Essaie cet exemple :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Background</title>
<style>
html, body {
  margin: auto;
  padding: 0;
  font: 1em/1.25 Arial;
}
#header-top {
  height: 20em;
  background-image: url(https://cyberzoide.developpez.com/misc/background2008-04.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
</head>
<body>
  <div id="header-top">
  </div>
</body>
</html>

Ressource :
• Propriété CSS background

17/05/2019, 15h56
Laurent84100

Ok, j'ai compris que cela permettait d'adapter mon image aux écrans.
J'ai rajouté des marges en %.
Cependant, lorsque je teste via "En direct de Dreamweaver", cela ne s'adapte pas en version tablette et smartphone... est-ce normal ?
17/05/2019, 17h07
NoSmoking

Citation:

je teste via "En direct de Dreamweaver"

fait tes tests avec un « vrai » navigateur récent de préférence !