Le Baranougat !

Bnmaster · » 08/04/09 - 14h39

Hello,

Je suis en train d'essayer de faire quelque chose en CSS, et je n'y arrive pas, alors je me dis que peut-être quelqu'un pourra m'éclairer.
L'idée est simple, prenons par exemple la phrase :
Lapindoux a mangé/dévoré/ingurgité du poulet ce matin.
Mangé, dévoré, ingurgité sont 3 mots au choix dans cette phrase, et j'aimerai pouvoir les mettre les uns au dessus des autres à l'aide des CSS. Histoire que ça donne un truc comme ça :

Le souci, c'est que ça ne fonctionne pas.
Pour les tests j'arrive à faire que les textes soient l'un au dessus de l'autre (avec les margin, les position: relative; ou le vertical-align), mais je n'arrive pas à les aligner horizontalement.

Si quelqu'un a une idée bn_big_smile

Ah, et voici ce sur quoi j'ai testé, si ça peut en intéresser certains :
Code :

<!DOCTYPE html PUBLIC "-//W3 //DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
    <title>Aligner du texte (1)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
    <style>
    span.tout {
    position: relative;
    top: 0.5em;
    }
    span.haut {
    float: left;
    display: inline;
    }
    span.bas {
    clear: left;
    /*left: -<?php echo strlen('délivre-moi')/2.6; ?>em;*/
    float: left;
    display: inline;
    }
    </style>
</head>

<body>

<span style="position:relative;font-size:2em;border:1px solid black;background-color:green;">coucou <span style="border:1px solid black;vertical-align:top;text-indent:-<?php echo strlen('coucou')/2.65; ?>em;background-color:red;">coucou2</span> coucou3</span>
<h1>Test</h1>
<p>Mon Dieu ! <span class="tout"><span class="haut">délivre-moi</span> <span class="bas">de mes ennemis</span></span>, protège-moi contre mes adversaires ! Délivre-moi des malfaiteurs, et sauve-moi des hommes de sang ! Car voici, ils sont aux aguets pour m'ôter la vie ; des hommes violents complotent contre moi, sans que je sois coupable, sans que j'aie péché, ô Éternel ! Malgré mon innocence, ils courent, ils se préparent : réveille-toi, viens à ma rencontre, et regarde ! <table style="display:inline;border:1px solid black;margin:0;padding:0;"><tr><td>délivre-moi</td></tr><tr><td>de mes ennemis</td></tr></table>Toi, Éternel, dieu des armées, dieu d'Israël, lève-toi, pour châtier toutes les nations ! N'aie pitié d'aucun de ces méchants infidèles ! Ils reviennent chaque soir, ils hurlent comme des chiens, ils font le tour de la ville. Voici, de leur bouche ils font jaillir le mal, des glaives sont sur leurs lèvres ; car, qui est-ce qui entend ? Et toi, Éternel, tu te ris d'eux, tu te moques de toutes les nations. Quelle que soit leur force, c'est en toi que j'espère, car Dieu est ma haute retraite. Mon Dieu vient au-devant de moi dans sa bonté, dieu me fait contempler avec joie ceux qui me persécutent. Ne les tue pas, de peur que mon peuple ne l'oublie ; fais-les errer par ta puissance, et précipite-les, seigneur, notre bouclier ! <ul style="display:inline;"><li>Leur bouche pèche</li> <li>à chaque parole de leurs lèvres</li></ul> : qu'ils soient pris dans leur propre orgueil ! Ils ne profèrent que malédictions et mensonges. Détruis-les, dans ta fureur, détruis-les, et qu'ils ne soient plus ! Qu'ils sachent que Dieu règne sur Jacob, jusqu'aux extrémités de la terre ! Ils reviennent chaque soir, ils hurlent comme des chiens, ils font le tour de la ville. Ils errent çà et là, cherchant leur nourriture, et ils passent la nuit sans être rassasiés. Et moi, je chanterai ta force ; dès le matin, je célébrerai ta bonté. Car tu es pour moi une haute retraite, un refuge au jour de ma détresse. O ma force ! c'est toi que je célébrerai, car Dieu, mon Dieu tout bon, est ma haute retraite.</p>

</body>
</html>

Merci d'avance !

Bnmaster · » 18/04/09 - 15h25

J'ai un petit peu abandonné pour l'instant, mais je compte bien réussir un jour !
Donc si quelqu'un a des idées, je suis toujours preneur mini_bn

Le Baranougat !

Menu

Mon compte

Recherche

Annonce

#1 [xHTML, CSS] Choix multiples » 08/04/09 - 14h39

#2 » [xHTML, CSS] Choix multiples » 18/04/09 - 15h25

Pied de page des forums

Mini-tchat

Publicité