Discussion:
[CSS] Afficher des points de conduite
(trop ancien pour répondre)
pascal
2004-08-10 11:58:02 UTC
Permalink
Bonjour,

Je souhaite afficher des points de conduite sous cette forme :

Proposition 1..................................A
Autre proposition..............................B
Encore une proposition, mais bien plus longue
qui nécessite un passage à la ligne............C
etc

Comment obtenir simplement ce résultat, en sachant que les intitulés des
propositions sont variables (générés par php). Le point qui me pose
problème en fait c'est l'alignement à droite des lettres A,B,C.

Merci pour vos suggestions,
--
Pascal
personne
2004-08-10 12:39:57 UTC
Permalink
Post by pascal
Bonjour,
Proposition 1..................................A
Autre proposition..............................B
Encore une proposition, mais bien plus longue
qui nécessite un passage à la ligne............C
etc
Comment obtenir simplement ce résultat, en sachant que les intitulés des
propositions sont variables (générés par php). Le point qui me pose
problème en fait c'est l'alignement à droite des lettres A,B,C.
Merci pour vos suggestions,
Un DIV a droite pour les lettres et un autre a gauche pour le reste ?
François Battail
2004-08-10 13:37:12 UTC
Permalink
Le Tue, 10 Aug 2004 14:39:57 +0200, personne a écrit :

Bonjour,
Post by personne
Post by pascal
Proposition 1..................................A
Autre proposition..............................B
Encore une proposition, mais bien plus longue
qui nécessite un passage à la ligne............C
etc
Comment obtenir simplement ce résultat, en sachant que les intitulés des
propositions sont variables (générés par php). Le point qui me pose
problème en fait c'est l'alignement à droite des lettres A,B,C.
Un DIV a droite pour les lettres et un autre a gauche pour le reste ?
Pour être plus précis et en jouant avec une liste de
définition :

css :

dl
{
width: 100% ;
}

dt
{
display: block ;
width: 80% ;
float: left ;
margin: 0 ;
padding: 0 ;
}

dd
{
display: block ;
width: 20% ;
float: right ;
padding: 0 ;
margin: 0 ;
}

dd:after
{
clear: both ;
}

html :

...
<dl>
<dt>Proposition 1</dt>
<dd>A</dd>
<dt>Autre proposition</dt>
<dd>B</dd>
...
</dl>

Mais bien sûr IE Win ne gère pas dd:after, prévoir IE7 ou de l'ECMA
Script pour y remédier.

@+
fb
Thibaut Allender
2004-08-10 14:00:54 UTC
Permalink
Post by François Battail
Mais bien sûr IE Win ne gère pas dd:after, prévoir IE7 ou de l'ECMA
Script pour y remédier.
euh, le sujet parle de points de conduite :)
pas d'un simple alignement d'elements

et puis avec la liste de definitions, si un retour intervient dans le
DT, le DL ne s'aligne pas en bas (enfin, aligner en bas en css, ca a
tjrs ete problematique ;)
--
thibaut allender | freelance | http://capsule.org
François Battail
2004-08-10 17:25:56 UTC
Permalink
Post by Thibaut Allender
Post by François Battail
Mais bien sûr IE Win ne gère pas dd:after, prévoir IE7 ou de l'ECMA
Script pour y remédier.
euh, le sujet parle de points de conduite :)
pas d'un simple alignement d'elements
Argh, très juste ! Points de conduite est un terme de typographie que je
ne connaissais pas alors tir rectificatif :)

css :

dl
{
width: 100% ;
text-align: justify ;
}

dt
{
display: block ;
width: 95% ;
padding: 0 ;
margin: 0 ;
margin-right: 5% ;
border-bottom: #000 1px dotted ;
z-index: 1 ;
}

dt span
{
border-bottom: #fff 1px solid ;
z-index: 2 ;
}

dd
{
text-align: right ;
display: block ;
margin: 0 ;
margin-left: 95%;
padding: 0 ;
position: relative ;
top: -2ex ;
}

html :
...
<body>
<dl>
<dt><span>Proposition 1</span></dt>
<dd>A</dd>
<dt><span>Autre proposition</span></dt>
<dd>B</dd>
<dt><span>Autre proposition beaucoup plus longue</span></dt>
<dd>C</dd>
</dl>
</body>
...

Sans float et sans :after si ça se trouve ça passe peut être même dans
IE ;-)

@+
fb
Thibaut Allender
2004-08-10 22:32:34 UTC
Permalink
Post by François Battail
Sans float et sans :after si ça se trouve ça passe peut être même dans
IE ;-)
je sais pas, mais les points de conduite doivent commencer apres le
texte, et a alignés sur la base des lettres, comme ca en fait :

Test ................. A

a mon avis le moyen le plus efficace d'y arriver et d'utiliser un
background comme le disait Raphael
avec un border, ca ne pourra pas fonctionner, a moins de bidouiller
comme dans mon premier exemple
--
thibaut allender | freelance | http://capsule.org
Thibaut Allender
2004-08-10 13:28:35 UTC
Permalink
Post by pascal
Comment obtenir simplement ce résultat, en sachant que les intitulés des
propositions sont variables (générés par php). Le point qui me pose
problème en fait c'est l'alignement à droite des lettres A,B,C.
j'ai vite bidouillé ce code :

<br />

<div style="border-bottom: 1px dashed #000;">
<div style="float: left; padding: 5px; background: #fff; font-size:
12px; font-family: verdana, sans-serif;">texte<br />sur 2 lignes</div>
<hr style="clear: both; margin-top: -18px; visibility: hidden; " />
<div style="font-family: verdana, sans-serif; font-size: 12px;
background: #fff; float: right; padding: 5px; margin-top: -15px;">A</div>
</div>

<br /><br />

<div style="border-bottom: 1px dashed #000;">
<div style="float: left; padding: 5px; background: #fff; font-size:
12px; font-family: verdana, sans-serif;">texte sur 1 ligne</div>
<hr style="clear: both; margin-top: -18px; visibility: hidden; " />
<div style="font-family: verdana, sans-serif; font-size: 12px;
background: #fff; float: right; padding: 5px; margin-top: -15px;">A</div>
</div>

ca fonctionne mais ca fait *tres* bricolage
--
thibaut allender | freelance | http://capsule.org
Thibaut Allender
2004-08-10 13:34:01 UTC
Permalink
Post by Thibaut Allender
ca fonctionne mais ca fait *tres* bricolage
et evidemment ca ne fonctionne pas sous IE qui augmente tout seul la
hauteur du container contenant des floats...
--
thibaut allender | freelance | http://capsule.org
Raphaël Wils
2004-08-10 14:07:48 UTC
Permalink
Post by pascal
Bonjour,
Proposition 1..................................A
Autre proposition..............................B
Encore une proposition, mais bien plus longue
qui nécessite un passage à la ligne............C
etc
Comment obtenir simplement ce résultat, en sachant que les intitulés des
propositions sont variables (générés par php). Le point qui me pose
problème en fait c'est l'alignement à droite des lettres A,B,C.
Merci pour vos suggestions,
Pour les points peut être une image de fond css qui se répete ?
--
Raphaël
http://www.r-wils.com/perso
« Don't mean a thing if you ain't got that swing ! »
Raphaël Wils
2004-08-10 14:10:29 UTC
Permalink
Post by Raphaël Wils
Post by pascal
Bonjour,
Proposition 1..................................A
Autre proposition..............................B
Encore une proposition, mais bien plus longue
qui nécessite un passage à la ligne............C
etc
Comment obtenir simplement ce résultat, en sachant que les intitulés
des propositions sont variables (générés par php). Le point qui me
pose problème en fait c'est l'alignement à droite des lettres A,B,C.
Merci pour vos suggestions,
Pour les points peut être une image de fond css qui se répete ?
Ou alors un bloc décalé avec une bordure type "dotted" ou "dashed" ???
--
Raphaël
http://www.r-wils.com/perso
« Don't mean a thing if you ain't got that swing ! »
Raphaël Wils
2004-08-10 14:24:36 UTC
Permalink
Post by pascal
Bonjour,
Proposition 1..................................A
Autre proposition..............................B
Encore une proposition, mais bien plus longue
qui nécessite un passage à la ligne............C
etc
Comment obtenir simplement ce résultat, en sachant que les intitulés des
propositions sont variables (générés par php). Le point qui me pose
problème en fait c'est l'alignement à droite des lettres A,B,C.
Merci pour vos suggestions,
Comme cela sinon :

http://www.r-wils.com/permis.html
--
Raphaël
http://www.r-wils.com/perso
« Don't mean a thing if you ain't got that swing ! »
Continuer la lecture sur narkive:
Loading...