aligner un champ sur deux lignes

**lince102** · 02/05/2008, 09h02

Bonjour à tous,

Mon probleme est :

Je dois afficher des données concernant un dossier
A gauche, on trouve les intitulés et à droite ce qui corespond aux intitulés.
Par exemple :
Dossier 255488748

Mon souci est que si ce qui correspond aux intitulés est tres long.Ceci va a la ligne mais tout à gauche de la page , or moi j'aimerais que cela soit aligner à droite.Je vous mais un fichier joint pour mieux comprendre.

**Er3van** · 02/05/2008, 09h27

Un peu de code vaut mieux qu'un long discours !

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
19
20
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<style type="text/css">
.desc {
        text-align : right ;
}
</style>
<body>
	<div>
		<table>
			<tr>
				<td width=200px ;>Mon Dossier</td><td class='desc'>Ma description ou mon libell&eacute; du dossier qui peuvent &ecirc;tre suffisamment long pour passer &agrave; la ligne suivante. La ça suffit pas pour passer &agrave; la ligne suivante donc je meuble avec un peu n'importe quoi m'enfin c'est l'id&eacute;e qui compte !</td>
			</tr>
		</table>
	</div>
</body>
</html>

Si ça ne fonctionne pas comme tu l'entends fais le moi savoir

**lince102** · 02/05/2008, 09h31

je n'ai pas utilisé de tableau.Je suis donc obligé?

**Er3van** · 02/05/2008, 09h41

Pas vraiment, mais tu es obligé d'utiliser un bloc, soit <div>,<p> soit <table> ou encore un autre, ou un %inline avec

Code css :

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

display : block ;

Et dans ce cas, tu vas devoir séparé ton nom de dossier de ton libellé, et à mon avis ça va te compliquer la tâche.

La table est donc le plus simple et efficace dans ton cas je pense.

**lince102** · 02/05/2008, 09h44

Oui je voudrais bien mais le souci c'est que je ne peux pas! (c'est un include d'un autre fichier et je ne sais pas si je peux le modifier autant).

**lince102** · 02/05/2008, 09h47

Cela me pose probleme que pour un champ : l'opération du dossier.

Mon code est le suivant

Code :

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

1
2
3
4
5
6
7
 
<div>
	<span class="label">{#labelOperation#}</span>
	<div class="operation">
	<span>{$dossier.Dossier.operation}</span>
	</div>
</div>

Et dans mon css j'ai cela pour le moment :

Code :

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

1
2
 
#imprimerDossier div.operation 	{font-weight: bold ; font-size: 19px;}

Comment puis je faire?

**Er3van** · 02/05/2008, 09h50

Tu peux montrer ton code dans l'intégralité ? Parceque je ne suis pas sûr de comprendre.

**lince102** · 02/05/2008, 09h57

Code :

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

1
2
3
4
 
<div id="imprimerDossier">
{include file="info_dossier.tpl"}
</div>

et dans info_dossier on trouve

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
div>
	<span class="label">{#labelDossier#}</span>
	<div class="dossier">
	<span>{$dossier.Dossier.id_dossier}</span>
	</div>
	<div>
</div>
<div>
	<span class="label">{#labelClient#}</span>
	<div class="client">
	<span>{$client.Client.num_aspheria} - {$client.Client.client}</span>
	</div>
</div>
<div>
	<span class="label">{#labelClasse#}</span>
	<span>{$CLASSES[$dossier.Dossier.id_classe]} / {$MARCHES[$dossier.Dossier.id_marche]}</span>
</div>
<div>
	<span class="label">{#labelStatut#}</span>
	<span>{$STATUTS[$dossier.Dossier.id_statut]}</span>
</div>
<div>
	<span class="label">{#labelAppli#}</span>
	<span>{$dossier.Dossier.libelle_appli}&nbsp;</span>
</div>
<div>
	<span class="label">{#labelIntervenants#}</span>
	<span>{foreach name=boucle from=$intervenants item=intervenant}
			{assign var="id" value=$intervenant.DossierIntervenant.id_utilisateur}
			<a class="title" href="#" title="{$UTILISATEURS[$id]|escape:'html'}">{$USRS[$id]}</a>{if $smarty.foreach.boucle.last}.{else},{/if}
	{/foreach}&nbsp;</span>
</div>
<div>
	<span class="label">{#labelOperation#}</span>
	<div class="operation">
	<span>{$dossier.Dossier.operation}</span>
	</div>
</div>
 
<div>
	<span class="label">{#labelDateOuverture#}</span>
	<span>{$dossier.Dossier.date_ouverture|date_format:$smarty.config.dateFormatLong}</span>
</div>

Et mon code dans le css est :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
#imprimerDossier div.role		{ display:inline; float:left; width:19em; }
#imprimerDossier div.jalon		{ display:inline; float:left; width:18em; }
#imprimerDossier a.title:link,
#imprimerDossier a.title:visited,
#imprimerDossier a.title:hover,
#imprimerDossier a.title:active { cursor:default; text-decoration:none; color:#000000; }
#imprimerDossier span.label		{ display:inline; float:left; width:18em; }
#imprimerDossier div.dossier 	{font-weight: bold ; font-size: 22px;}
#imprimerDossier div.client 	{font-weight: bold ; font-size: 22px;}
#imprimerDossier div.operation 	{font-weight: bold ; font-size: 19px;}

Merci beaucoup pour ton aide!

**Er3van** · 02/05/2008, 10h00

Si j'ai tout suivi t'as juste à mettre :

Code CSS :

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

#imprimerDossier div.operation 	{font-weight: bold ; font-size: 19px; text-align : right ;}

**lince102** · 02/05/2008, 10h03

non ca ca va juste centrer mon libellé de mon opération à droite

**franculo_caoulene** · 02/05/2008, 10h05

Salut,

Envoyé par lince102

je n'ai pas utilisé de tableau.Je suis donc obligé?

Si la mise en page ressemble à un ensemble de lignes et de colonnes et qu'on peut mettre un intitulé en tête de chaque colonne, alors il est correct d'utiliser un tableau.

**lince102** · 02/05/2008, 10h08

Oui je l'ai tres bien compris.Mais ce n'est pas moi qui décide c'est un travail en équipe.Et l'include que j'utilise n'a pas été réalisé par moi.
C'est pour cela que je voulais savoir si il y avait un autre moyen.

**Er3van** · 02/05/2008, 10h20

Euh, ton libellé c'est pas le 'label' ?
Si c'est le cas c'est illogique :S
Le label est hors du div operation...

Code html :

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

1
2
3
4
5
6
7
<div>
	<span class="label">{#labelOperation#}</span> <!-- <- ton label ? -->
	<div class="operation">
	<span>{$dossier.Dossier.operation}</span> <!-- <- ton contenu ? -->
 
	</div>
</div>

**lince102** · 02/05/2008, 10h24

Non non mon label c'est l'intitulé.Moi c'est ca que je veux qui s'affiche centré :

Code :

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

1
2
 
<span>{$dossier.Dossier.operation}</span>

**Er3van** · 02/05/2008, 10h25

Sinon, simple remarque :

Code html :

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

1
2
3
4
5
6
7
8
9
 
<div> <!-- balise coupée -->
	<span class="label">{#labelDossier#}</span>
	<div class="dossier">
	<span>{$dossier.Dossier.id_dossier}</span>
	</div>
	<div> <!-- tu ouvres un div-->
</div> <!-- que tu fermes ici -->
<!-- et ton premier div n'est pas fermé ! -->

**Er3van** · 02/05/2008, 10h27

Envoyé par lince102

Non non mon label c'est l'intitulé.Moi c'est ca que je veux qui s'affiche centré :

Code :

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

1
2
 
<span>{$dossier.Dossier.operation}</span>

Et

Code html :

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

<div style='text-align:right'>{$dossier.Dossier.operation}</div>

Ne fonctionne pas ?

**lince102** · 02/05/2008, 10h30

Ben pourtant dans le code que je t'ai mis il n'y a pas de div ouvert à la fin

**lince102** · 02/05/2008, 10h38

Non ca ne fonctionne pas.Mais j'ai remarqué un truc.En fait ce qui me gene c'est que c'est pour lancer une impression avec ces données.
Quand j'imprime avec Firefox j'obtient

Opération
Mise en place d'une application reprise IFU avec insertion d'un encart

Ceci me va tres bien!!!
Mais par contre avec IE j'obtiens

Opération Mise en place d'une application reprise
IFU avec insertion d'un encart

Et je trouve ca pa tres esthétique

Si j'arrivai à regler ce beug cela serait bon!