[xhtml/css]Problème d'impression de div (tous navig.)

**2Eurocents** · 25/09/2006, 22h37

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 ?

**MasterOfChakhaL** · 26/09/2006, 00h23

il semblerait qu'en mettant le contenu de ta liste en absolute, ca regle une partie du problème...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#gal {
  position: absolute;
}

malheureusement, on dirait bien que les marges sont mangées sous IE...
le display:table-cell; fonctionne sous les navigateurs respectants les standards

EDIT:
j'ai rajouté, ce doctype:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Et IE 6 ne mange plus les marges en bas de page

**blueice** · 26/09/2006, 08h56

Utilise une feuille de style pour l'impression...

**2Eurocents** · 26/09/2006, 09h54

Envoyé par blueice

Utilise une feuille de style pour l'impression...

Débutant, mais pas innocent ... j'ai toujours eu une feuille pour l'impression.

Initialement, il y avait un menu sur la page, masqué dans la feuille de style d'impression.

Envoyé par MasterOfChakhaL

il semblerait qu'en mettant le contenu de ta liste en absolute, ca regle une partie du problème...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#gal {
  position: absolute;
}

malheureusement, on dirait bien que les marges sont mangées sous IE...
le display:table-cell; fonctionne sous les navigateurs respectants les standards

EDIT:
j'ai rajouté, ce doctype:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Et IE 6 ne mange plus les marges en bas de page

Merci.
Avec ces modifications, sous IE, il n'y a plus aucun problème.
Reste le problème FF qui, avec ces modifications, ne sait plus repérer le saut de page. Tous les cadres en trop sortent en bas de la page et il n'y a qu'une page ...

Pour vous faire une idée, je joins tous mes fichiers, ainsi qu'une capture d'écran de Firefox avec (2e miniature) et sans correction (1ere miniature).

Si quelqu'un a une piste complémentaire ...

[xhtml/css]Problème d'impression de div (tous navig.)

CSS

Vue hybride

Discussions similaires

Partager

Partager