Aide style CSS

**18carats** · 24/10/2012, 16h33

Bonjour,

je souhaiterais réaliser une div présentée comme ceci:

http://imageshack.us/photo/my-images...stitre2ndj.png

Mon problème est qu'actuellement j'affiche le carré de gauche dans une div, les textes sont dans un tableau et la croix est une image.

Ainsi, n'ayant aucun style, les différents éléments se déplacent. (notamment la croix qui se retrouve au plus près du texte plutôt que de rester en haut a droite. Elle passe parfois même en dessous du texte lorsque celui-ci est trop grand en première ligne.

Quels styles appliquer? je n'arrive pas à m'en sortir.

Merci par avance

**Rafapouf** · 24/10/2012, 16h58

Bonjour,

Il faudrait le code déjà tapé histoire d'en savoir un peu plus !

**18carats** · 24/10/2012, 17h02

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
 
<div style="width: 30%; height:95px; background: #C8C8C8; float: left; margin-right: 10px; margin-bottom: 10px;
                    border-radius: 10px;">
                    <div style="float: left; margin: 10px">
                        <img style="height:75px;width:75px;" src="" >
                    </div>
                    <div style="float: left">
                        <table>
                            <tbody><tr>
                                <td colspan="2">
                                    <span>Blalaa</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span></span>
                                </td>
                                <td>
                                    <span>Blalaa</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <span>Blalaa</span>
                                </td>
                                <td>
                                    <span>Blalaa</span>
                                </td>
                            </tr>
                        </tbody></table>
                    </div>
                    <input type="image" style="width:30px;" src="../Styles/image/cancel.png" >
 
                </div>

Voici le code utilisé.

**Rafapouf** · 24/10/2012, 17h06

Pour que le texte ne soit pas coller, il faut lui donner un padding-left.
Pour l'image, il suffit de faire flotter l'image à droite avec un float:right et de lui mettre un padding aussi histoire qu'elle ne se colle pas complètement à droite