Bonjour,

pas encore très à l'aise avec le positionnement CSS (utilisateur habituel de tableau) , je m'en remets à vous afin de savoir si ma présentation est bonne, compliant et compatible sur tous les navigateurs.

Tout d'abord, voila ce que je souhaite afficher (toute proportion simplifiée) :



J'ai mis les bordures en couleurs afin qu'on puisse bien distinguer les différentes div.


Voici mon code HTML, j'ai utilisé par mal de DIV afin de bien séparer les couches.

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
 
<div class="bloc_maphoto">
    <div class="bloc_maphoto_image">
        <div class="bloc_maphoto_image_miniature">
            <p>Miniature de la photo</p>
        </div>
        <div class="bloc_maphoto_image_note">
            <p>7/10<br />nb de notes</p>
        </div>
    </div>
    <div class="bloc_maphoto_titre">
        <p><strong>Titre de la photo</strong></p>
    </div>
    <div class="bloc_maphoto_stats">
        <p>date ajout</p>
        <p>Nombre de vues</p>
    </div>
</div>
Et voici mon code CSS, j'ai utilisé la proprieté float pour aligner _miniature et _notes, mais ça me semble par encore très clair...

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
 
.bloc_maphoto { /* Bloc global photo */
    float:left;
    width:30%; /* J'utilise ces proprietés car j'ai normalement 3 blocs alignés sur la même ligne */
}
.bloc_maphoto_image_miniature { /* Bloc contenant la miniature */
    float:left;
    width:60%;
    height: 100px;
}
.bloc_maphoto_image_note { /* Bloc contenant la note */
    height: 100px;
}
Voila, de cette façon là, ça se presente à peu près comme je le voudrai sous FF et sous IE (sauf pour les marges en bas, ou je présume qu'il faut les préciser)
Mais dés que je touche aux proprietés de hauteur et largeur pour ajuster, tout se chevauche...
Est ce que mon code est bon ? Même par rappot à mon conteneur global qui est déjà en float:left...

Merci pour vos reponses.