28220 sujets

CSS et mise en forme, CSS3

Impression de flottant

Bonjour,

j'ai créé une page qui reprend les infos introduites par un utilisateur dans un formulaire. Avec la CSS, j'ai aligné les labels à droite et les infos à gauche:

NOM: info
PRENOM: info
DATE NAISSANCE: info

(EDIT: on ne voit pas l'alignement dans ce sujet)

A l'affichage dans IE et dans firefox, ça fonctionne.
J'utilise des float pour faire cela 


<div class="ligne">
	<span class="label">Date de naissance:</span>
	<span class="info"> #NAISSANCE# (#AGE#) </span>
</div>

<div class="ligne">
			<span class="label">Adresse:</span>
		    <span class="info"> #ADRESSE# </span> 
</div>




.ligne { 
      clear:both;
      margin:1em;
      padding: 1em;
}

.label { 
      float:left;
      margin:0em;
      padding:0.1em;
      border:none;
      text-align:right;
      width:20em;
	 }

.info { 
      float:left;
      margin:0.1em;
      padding:0em;
      border:none;
      text-align:left;
      width:40em;
    }


Comment faire pour garder cette même disposition à l'impression puisque les floats doivent être remplacé ? Est-il possible de faire en sorte que le label et son info reste sur la même ligne en gardant l'alignement à gauche des labels ?

Si oui, comment ?

Merci d'avance.
Modifié par contact2oli (15 Aug 2005 - 10:22)
Bonjour contact2oli,

Rien ne t'empêche de conserver tes flottants dans la CSS print, une fois les données de marge et de largeur adaptées (en points). Mais rien n'empêchera non plus les flottants d'aller à la ligne si la largeur d'impression disponible hors marges utilisateurs, etc. n'est pas suffisante, surtout si l'utilisateur imprime depuis un navigateur comme Firefox qui n'adapte pas le contenu à l'impression (ce que font Opera et IE7 beta 1).

Tout dépend en fait du contenu à imprimer : réduire la police à l'impression, réduire les marges, etc. peut aider.

Pour "figer" davantage l'impression, il faudrait proposer un contenu spécifique pour l'impression, formatté avec un tableau. Mais d'autres problèmes se poseront, tout aussi gênants (rognage)...

Si l'important est de conserver tes deux infos sur la même ligne, le plus sûr est de renoncer à l'alignement et de laisser les deux <span> s'imprimer en flux.

S'il est essentiel d'avoir un certain rendu imprimé sans aucune modification, passer par la génération d'un PDF.
Modifié par Laurent Denis (15 Aug 2005 - 10:40)
Pour le moment, j'ai utilisé un tableau "pour avoir plus facile".
L'impression fonctionne bien.

Mais je voulais voir si on ne pouvait pas obtenir le même résultat avec des css.

Je vais essayer en laissant les float et voir ce que cela donne.

Merci pour ta réponse rapide Smiley cligne
re-bonjour,

j'ai essayé les floats mais j'ai un problème (que j'avais déjà eu auparavant):
dans Firefox, tout est correctement affiché et imprimé.

Dans IE, l'impression est OK MAIS l'affichage n'est pas super:

J'affiche de temps à autre un titre pour séparé mes info (équivalent du fieldset de mon formulaire).

<div class="cadre">

<div class="lignetitre">#NOM# #PRENOM#</div>

<div class="ligne">
	<span class="label">Date de naissance:</span>
	<span class="info"> #NAISSANCE# (#AGE#) </span>
</div>

...

</div>


Toutes les infos sont affichées dans un cadre (un peu comme le form qui est encadré).




.cadre 
{
	border: 1px solid black;
	color: black;
	margin: 1em ;
	padding: 1em;
}


.lignetitre
{
      margin:5px;
      padding:5px;
      background-color: #FEF0C0;
	font-size: 16pt;
	text-align: left;
}


Si je spécifie un background au cadre ( background: #efefef;), les titres n'apparaissent pas (toujours) sous IE. Si je les sélectionne avec la souris, ils apparaissent et parfois ils restent affichés quand je 'relâche' la sélection.
Parfois, aucun titre ne s'affiche, parfois quelques titres s'affichent mais pas les autres...

Il y a une astuce pour ce problème à part se passer du background sur le cadre ?

merci
Sujet clos
Aller à