Aide style CSS

Version imprimable

24/10/2012, 16h33
18carats

Aide style CSS

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
24/10/2012, 16h58
Rafapouf

Bonjour,

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

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
 
<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é.

24/10/2012, 17h06
Rafapouf

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 ;)
24/10/2012, 17h12
18carats

je vais essayer d'appliquer ca dans la soirée et je vous tiendrais au courant, surement demain matin.
Merci!
24/10/2012, 17h17
18carats

en fait ça y est j'ai déjà tout appliqué et tout marche a merveille! merci beaucoup!