Pages adaptées au format de lecture

**Laurent84100** · 10/05/2019, 15h38

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.

**NoSmoking** · 10/05/2019, 18h05

Bonjour et bienvenue sur DVP.

Pour une première approche je te conseille la lecture de
↪ Les fondamentaux du Responsive Web Design

**Laurent84100** · 14/05/2019, 12h14

Bonjour et merci pour ta réponse.
Je vais l'étudier et je reviendrai avec mes questions.

**Laurent84100** · 14/05/2019, 13h17

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.

**Laurent84100** · 14/05/2019, 15h24

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 html :

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

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 :

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
/*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 :

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
/*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

**NoSmoking** · 14/05/2019, 18h43

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

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

**Laurent84100** · 15/05/2019, 08h56

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

Code :

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

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

Comme ceci ?

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
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.

**NoSmoking** · 16/05/2019, 18h23

Je n'ai plus rien.

supprime background-attachment:fixed;.

**Laurent84100** · 17/05/2019, 08h26

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

**NoSmoking** · 17/05/2019, 09h50

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 :

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

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 ...

**Laurent84100** · 17/05/2019, 10h18

Effectivement, cela fonctionne en ajustant.

Code :

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

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

**NoSmoking** · 17/05/2019, 15h12

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

Essaie cet exemple :

Code html :

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
<!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

**Laurent84100** · 17/05/2019, 15h56

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 ?

**NoSmoking** · 17/05/2019, 17h07

je teste via "En direct de Dreamweaver"

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

Pages adaptées au format de lecture

CSS

Discussions similaires

Partager

Partager