Page en Responsive design
Bonsoir,
j'ai développé une page web.
Il me faut maintenant la transformer pour qu'elle soit compatible avec une tablette / portable.
L'affichage doit se faire sur une colonne sur une tablette / portable.
J'ai essayé dans le CSS :
Code:
1
2
3
4
5
| @media (min-width: 481px) and (max-width: 1024px){
.container {
column-count: 1;
}
} |
Mon
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
| <!DOCTYPE html>
<html>
<head>
<title>Mon projet de site</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="styles" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<header class="col-12 text-center">
<header style="background-color:#DAB30A;">
<h1><strong>Au bon goût du miel</strong></h1>
<picture class="phto"><img src="images\capture2.jpg" alt="Photo d'abeilles"/></picture>
<!img src="images\capture.jpg" height="150" width="225" alt="Photo d'abeilles"/>
</header>
</div>
<div class="row">
<nav class="col-12" id="nav-horizontal">
<ul id="nav-horizontal">
<li><a href="Présentation.html">Présentation</a></li>
<li><a href="Evénements.html">Evénements</a></li>
<li><a href="La Boutique.html">La Boutique</a></li>
<li><a href="Nos Métiers.html">Nos Métiers</a></li>
<li><a href="Nos Recettes.html">Nos Recettes</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</nav>
</div>
<div class="row">
<nav class="col-3" id="nav-vertical">
<ul id="nav-vertical">
<li><a href="Miel de printemps.html">Miel de printemps</a></li>
<li><a href="Miel toutes fleurs.html">Miel toutes fleurs</a></li>
<li><a href="Miel de lavande.html">Miel de lavande</a></li>
<li><a href="Miel de forêt.html">Miel de forêt</a></li>
<li><a href="Miel d'acacia.html">Miel d'acacia</a></li>
</ul>
</nav>
<main class="col-9">
<h1>Miel toutes fleurs</h1>
<div class="container">
<div class="row">
<div class="col-8">
<h3>Un produit de terroir</h3>
<p><strong>Le Miel de fleurs d'été est récolté et mis en pot en Bretagne.</strong></p>
<h3>Un produit de qualité</h3>
<p>Les principales fleurs visitées par les abeilles pour élaborer ce miel sont : la <strong>ronce</strong>, le <strong>châtaigner</strong>, le <strong>sarraisin</strong>, le <strong>trèfle blanc</strong>.</p>
<p>Le miel est liquide à la récolte et cristallise rapidement une fois mis en pot.</p>
<p>La cristrallisation est un phénomène naturel et indique que le miel n'a pas été chauffé et qu'il garde ainsi toutes ses propriétés bienfaisantes et gustatives.</p>
</div>
<div class="col-4">
<img src="images\miel.jpg" height="250" width="305" alt="Photo de miel"/>
</div>
<div class="col-8" id="table">
<caption><h1>Tableau de prix</h1></caption>
<table summary="prix selon taille du pot et livraison">
<thead>
<tr>
<th></th>
<th>250g</th>
<th>500g</th>
<th>750g</th>
<th>1kg</th>
</tr>
</thead>
<tbody>
<tr>
<th>retrait à la miellerie</th>
<td>4€</td>
<td>6€</td>
<td>8€</td>
<td>10€</td>
</tr>
</tbody>
<tbody>
<tr>
<th>livraison à domicile</th>
<td>7€</td>
<td>9€</td>
<td>11€</td>
<td>13€</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
<footer class="row">
<div class="col-4 text-center">
Livraison rapide
</div>
<div class="col-4 text-center">
Paiement sécurisé
</div>
<div class="col-4 text-center">
© développé par Stéphane Cozien
</div>
</footer>
</div>
</body>
</html> |
Et mon
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
| @media (min-width: 481px) and (max-width: 1024px){
body {
width : 100%;
font-size: 2em;
}
}
@media (min-width: 481px) and (max-width: 1024px){
.container {
column-count: 1;
}
}
nav, main, div {
*border: 1px solid lightgrey;*
}
header {
height: 200px;
background: #DAB30A;
color: #fff;
font-size: 1em;
display: flex;
grid-gap: 10px 2em;
align-items: center;
justify-content : center;
border-right: 1px solid #CCCCCC;
}
@media (min-width: 481px) and (max-width: 1024px){
header {
height: 100%;
background: #DAB30A;
color: #fff;
font-size: 1em;
display: flex;
grid-gap: 2em 2em;
align-items: center;
justify-content : center;
border-right: 1px solid #CCCCCC;
}
}
#nav-horizontal {
width: 700px;
padding: 10px 10px 10px 10px;
display: flex;
align-items: center;
justify-content : center;
}
nav ul{
padding 0px;
margin: 0px;
list-style-type: none;
background-color: #DAB30A;
}
nav li {
display : inblock;
width: 200px;
height : 40px;
margin: 0px;
padding: 0px;
border-right : 1px solid #CCCCCC;
text-align: left;
line-height: 40px;
}
nav li a{
text-decoration: none;
color: #FFFFFF;
}
#nav-vertical {
padding: 10px 10px 10px 10px;
width: 200px;
}
main {
min-height: 500px;
padding: 1em;
}
table {
height: 150px;
font-size: 1em;
width:100%;
padding: 1em;
}
caption {
font-family:sans-serif;
}
thead {
background-color:#DAB30A;
color: #FFFFFF;
text-align:center;
border:1px solid #6495ed;
}
tbody {
border:1px solid #6495ed;
}
th {
border:1px dotted #6495ed;
padding:5px;
color: #FFFFFF;
background-color:#DAB30A;
}
td {
border:1px solid #6495ed;
padding:5px;
text-align:right;
} |
Merci pour vos retours.
