Formater un Textarea responsive
Bonjour,
Je tente de réaliser une page responsive, contenant une image et au dessous un texte de la même largeur que l'image.
Pour l'image le responsive fonctionne correctement mais pour le texte je n'arrive à rien, je souhaiterais que le texte soit de la même largeur que limage, pour ça j'ai modifié la valeur de "cols", mais à la finale lors du test la page n'est plus responve.
J'ai tenté de placer l'ensemble dans un tableau pour voir si ça aurait contenu la largeur tu "textarea" mais en vain.
Pouvez vous m'expliquer se qu'il ne va pas, svp ?
Mon code actuel:
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
| <!DOCTYPE html>
<html>
<head>
<title>Test_Responsive</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #777;
padding: 30px;
text-align: center;
color: white;
}
textarea {
resize: none;
}
</style>
</head>
<body>
<table align="center">
<tr>
<th bgcolor="#666666" ><h3>L’ORIGINE DE LA ROSE</h3>
<p><img src="https://d1r3ldy4dta636.cloudfront.net/sites/default/files/rose-rose.jpg" alt="Photo 1" style="max-width:100%;height:auto;"/><br>
<textarea cols="100" rows="10" readonly="yes" wrap="hard">L’ORIGINE DE LA ROSE
Les Grecs, les Romains et les Égyptiens de l’Antiquité connaissaient la rose depuis longtemps, mais nous avons dû attendre le XVIe siècle pour en profiter à notre tour. La popularité de la rose ne cesse depuis de grandir et de nouvelles variétés sont introduites chaque année. Une chose est certaine : la rose va nous accompagner encore longtemps. </textarea>
<br>
</th>
</tr>
</table>
</body>
</html> |
