Bonsoir,

Novice en mise en forme web xhtml/css, j'ai tenté de mettre en place une sorte de galerie.

J'obtiens, visuellement, l'effet voulu au moyen des codes suivants :
Le xhtml :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
    <div id="gal">
        <h4>Titre 4</h4>
        <h4>suite&nbsp;:</h4>
        <ul>
            <li class="item">
                <p class="photo"></p>
                <br>
                Objet 1
            </li>
            <!-- ici, copier/coller le <li/> ci-dessus une vingtaine de fois pour reproduire mon problème -->
        </ul>
    </div>
...
La 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
.item {
	padding: 10px;
	width: 150px;
	float: left;
	background: #fff;
	text-align: center;
	border-style: solid;
	font-size: 0.8em;
}
 
.photo {
	border: 2px solid #333;
	height: 133px;
	width: 100px;
	background: #f99;
	margin-left: 25px;
	margin-right: 25px;
}
Je n'ai mis ici que la partie du code qui semble utile ...

Visuellement, donc, tout colle.

Le problème, c'est dès que je veux imprimer ... ou même faire un aperçu.

Sous Firefox, tout sort impec' jusqu'à la dernière ligne de la page. Là, on a un bout de cadre, puis ça passe à la page suivante, et on a perdu un "objet" (au niveau des légendes, ils ont tous un N° différent et il me manque un N° dans ma séquence). Et c'est pareil à chaque fin de page s'il y a beaucoup de cadres.

Sous IE, j'ai mon titre sur une page, et tous les cadres sur la deuxième ... enfin, tous ceux qui rentrent dans la page car il n'y a rien au delà de la deuxième page, même s'il y a beaucoup de cadres.


A force de fureter sur le net, j'ai compris que c'était à cause du div/float qui était mal géré à l'impression sur de nombreux navigateurs.

Si c'est le cas, comment faire pour avoir le même genre de résultat à l'écran et à l'impression ?

Le document est une espèce de "galerie", constituée de blocs ayant chacun une paire photo+légende. Je souhaite, en outre, conserver un design "fluide", avec rejet des objets suivants à la ligne suivante en cas de réduction de la largeur.

J'aimais bien la liste non ordonnée car, sémantiquement, c'est bien une liste de produits que je construis.

Quelqu'un a une meilleure idée ?