Formater un Textarea responsive

**cortoh** · 14/06/2020, 07h46

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 :

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

**NoSmoking** · 16/06/2020, 17h55

Bonjour,
• pourquoi passer par une <textarea>, il me semble préférable de mettre le commentaire dans un élément classique.
• Pourquoi faire une mise en page sur base d'une <table>, regarde plutôt du côté d'un élément <figure> par exemple.

**cortoh** · 17/06/2020, 10h02

Bonjour,

Merci pour votre aide, "figure" correspond effectivement à mes besoins et beaucoup plus facile à formater.

Gros merci !

Formater un Textarea responsive

HTML

Vue hybride

Discussions similaires

Partager

Partager