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

Pages adaptées au format de lecture

CSS

Vue hybride

Discussions similaires

Partager

Partager