Discussion :

[totofe]

Bonjour,

J'ai des difficultés pour mettre en forme ma page html. Pouvez vous me donner un coup de main?

j'aimerai avoir ce rendu:


Voici mon fichier 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
16
17
18
19
20
21
22
23
24
25
<ion-view class="content">
    <ion-content class="padding">
        <ion-list>
 
                <ion-item >
                        <img  class="profile-avatar"   ng-src="/img/docs/venkman.jpg" />
                    <span class="profile-desc">
                        <span class="nameprofile"> test</span>
                        <span class="last_message" >message</span>
                        <a class="button button-icon icon ion-person-add icon_add" ></a>
                    </span>
                </ion-item>
 
                <ion-item >
                        <img  class="profile-avatar"   ng-src="/img/docs/venkman.jpg" />
                    <span class="profile-desc">
                        <span class="nameprofile"> test2</span>
                        <span class="last_message" >message2</span>
                        <a class="button button-icon icon ion-person-add icon_add" ></a>
                    </span>
                </ion-item>
       </ion-list>
 
    </ion-content>
</ion-view>

et mon fichier CSS :

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
.icon_add {
    position: absolute;
    top:3px;
    right: 5px;
}
 
.contact_added{
    color: #66a2ed;
}
 
.profile-desc{
    position: inherit;
    float:right;
    display:inline;
    width:100%;
    height:100%;
}
.nameprofile{
 
    max-width:100%;
    padding-left: 10px;
}
 
.last_message{
    color: #bebebe;
    padding-top: 5px;
    display: inherit;
    overflow: hidden;
   -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    width:100%;
}
 
img.profile-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  bottom: 10px;
  float: left;
}

Et voici mon rendu :

[NoSmoking]

Bonjour,
autant que faire ce peut laisse tes éléments prendre leur place dans le flux, sans changer ton code on pourrait avoir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
.profile-desc{
/*    position: inherit;/* SUPPRIME*/
/*    float:right;      /* SUPPRIME*/
    display:inline;
    width:100%;
    height:100%;
}
.nameprofile{
    display:block;      /* AJOUT */
    max-width:100%;
    padding-left: 10px;
}

Le code HTML généré aurait était bienvenue !

[totofe]

Super ! c'est exactement ça

Merci.