Discussion :

[flamant]

Bonjour, je développe une petite application angular material. Mon objectif est d'obtenir le design suivant pour une card, qui s'applique à tous les média (desktop, mobile, tablette)


mon composant app.component.html est le suivant

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
26
27
28
29
30
31
    <mat-toolbar color="primary">
      <div style="width:100%;" class="md-toolbar-tools" >
        Liste des annonces
        <span flex></span>
      </div>
    </mat-toolbar>
    <div fxLayout="row">
      <div fxFlex="20%"></div>
      <div fxFlex="60%">
        <mat-card *ngFor="let annonce of annonces; let i = index" style="border:red">
            <mat-card-content style="border:blue">
                <img src="./../assets/image/image{{i+1}}.jpg" alt="Avatar" style="position:absolute;top:0px;left:0px;width:40%;height:100%">
                <div class="container" style="left: 45%; top:10px;">
                  <div style="left:70%;">{{annonce.dateConstruction | date:'dd MMMM yyyy'}}</div>
                  <div>
                    <span>{{annonce.type}}</span>
                    <span style="float:right">{{annonce.prix}}</span>
                  </div>
                  <h4>{{annonce.surface}}</h4>
                  <h4>{{annonce.adresse}}</h4>
                  <div style="left:45%;">
                    <p>{{annonce.description}}</p>
                  </div>
                </div>
            </mat-card-content>
        </mat-card>
      </div>
      <div fxFlex="20%"></div>
    </div>
 
    <router-outlet></router-outlet>

Je suis nul pour placer les éléments et texte (ou image) dans les pages html (jreaux62, (ou un autre membre de developpez.com suffisamment fort en html/css) si tu lis cette discussion, ça m'intéresserai de prendre des cours particulier avec toi, moyennant finance, bien sur) et dans ce cas dans une "card". J'obtiens la sortie suivante sur mon browser


De plus, quand je réduis mon browser, je ne peux pas voir les éléments et textes sur la droite de mon image placés correctement. j'ai essayé de reproduire la même chose sur stackblitz (https://stackblitz.com/edit/angular-...e=package.json), mais j'ai des soucis avec les tags angular material qui ne sont pas pris en compte.

Donc, pouvez vous m'aider en me disant ce qui ne va pas, commenter le code correct à appliquer, de manière à ce que je puisse progresser. Merci beaucoup.