Discussion :

[supertino7]

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.

[mehdi_scofield]

Tu teste sur les deux navigateurs si sa va c'est bon sinon je te conseille d'aller valider ta page en XHTML Strict de cette façon je pense que tout se passera bien pour le problem des compatibilités des navigateurs sinon une derniere solution et de telecharger le logiciel styleMaster vraiment c est un régale , il contient le help, en plus il colore les cadre sur lequel tu click en plus il te donne le chemain css pour ce cadre ou DIV .

Bon courage .

[devyan]

... telecharger le logiciel styleMaster vraiment c est un régale , il contient le help, en plus il colore les cadre sur lequel tu click en plus il te donne le chemain css pour ce cadre ou DIV .

Bon courage .

Je ne connaîs pas cet outil.
Par contre un outil fantastique avec FF est le plugin Firebug (permet le debogage de css ET de scripts dans firefox)
Un autre pour IE est le panneau DEV TOOLBAR disponible sur le site Microsoft qui a des fonctionnalités similaires au plugin FF mais uniquement pour les CSS (ce qui est déjà pas mal)

[mehdi_scofield]

Je ne connaîs pas cet outil.
Par contre un outil fantastique avec FF est le plugin Firebug (permet le debogage de css ET de scripts dans firefox)
Un autre pour IE est le panneau DEV TOOLBAR disponible sur le site Microsoft qui a des fonctionnalités similaires au plugin FF mais uniquement pour les CSS (ce qui est déjà pas mal)

Ah ouai tu as complètement raison fireBug je l'ai partout , je l'ai installé sur tout mes pcs , il te permet de comprendre chaque astuce dans une page web même les Script dans la page, y a meme firephp pour débuger l'ajax dans la page..

pour IE7 moi j'utilisais un autre outils.