28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je suis chargée d'écrire du contenu dans une base de donnée juridique développée sur sharepoint 2007, et je suis amenée à écrire des choses de ce genre :

Rente de réversion
Dépassement x -------------------------------------------------
Rente de réversion + rente de réversion garantie

(je sais, le contenu n'est pas fun, mais c'est une base juridique !)

Pour l'instant je bidouille avec les espaces, sachant que le style de sharepoint contribution n'est pas le même que celui que visualise le lecteur, que les largeurs d'écrans ne sont pas les mêmes, que nous travaillons sur ie8 et que les paramètres d'écran peuvent varier beaucoup.

Je peux aller dans le code html, mais je n'ai pas la main sur la feuille de style ; auriez-vous une solution pour avoir quelque chose d'un peu propre ?

J'ai essayé d'inscrire 3 <div> dans une, mais je n'arrive pas à les faire tenir à la suite parce que sharepoint ne veut pas de float dans le code html, seulement dans la css (à ce que j'ai compris). Petite précision, je suis juriste de formation et je maîtrise à peu près le code html de base, mais je suis débutante pour le reste...

Merci par avance de l'aide que vous pourrez m'apporter !
Oui, c'est exactement cela.

J'ai fait de nombreuses recherches sur le web, mais je suis toujours tombée sur des solutions qui impliquaient des feuilles de style !
Tu peux toujours essayer d'ouvrir une balise <style></style> dans le <head></head> sinon dans tes <div> essaye de mettre un style="clear:both"...
Malheureusement, je n'ai pas accès au head : le développement de l'outil fait que je ne peux contribuer que sur le body. (nous sommes très limités dans les possibilités mais en même temps, les personnes chargées du développement sont overbookées, et pas pour notre projet, d'où ma tentative d'artisanat...)

Suite à votre proposition, j'ai essayé le style="clear:both" : il me le laisse dans le code ce qui est déjà un progrès, mais cela n'a aucune incidence en visualisation.

J'avais tenté les tableaux, qui fonctionnaient assez bien, mais compte tenu des contraintes liées aux postes des diférents utilisateurs et des règles d'accessibilité, j'ai fini par y renoncer. En même temps, ce sont les seules tentatives qui donnaient un résultat correct !
Est-ce que ceci marche sur ie8 ?

<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>Déplacement</mi>
<mo>×</mo>
<mfrac>
<mrow>
  <mi>Rente de réversion</mi>
</mrow>
<mrow>
  <mi>Rente de réversion</mi>
  <mo>+</mo>
  <mi>Rente de réversion garantie</mi>
</mrow>
</mfrac>
</math>
<script type="text/javascript"
   src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
Et oui, malheureusement un clear:both fonctionne avec un float:left...

Je trouve ça anormal que le float:left ne fonctionne pas.
Modifié par JuseN (18 Feb 2013 - 16:32)
A priori oui, mais je ne pourrai pas le laisser sur le site pour des questions de fiabilité (je ne peux pas laisser des liens sur sites autres que ceux autorisés comme légifrance : en plus, si les informaticiens apprennent que je fais des liens sur fichier js, je vais me faire appeler Arthur, qui est un très joli prénom, mais pas le mien !)

En tout état de cause, cela ne correspondait pas exactement à ce que je cherchais, puisque lorsque j'ai écris mon post, il n'a pas pris les blancs que j'avais oublié de faire insécables.

En fait je cherche à écrire en développé :

dépassement x [retraite de réversion / (retraite de réversion + retraite de réversion garantie)]

Parce que les utilisateurs de la base sont plutôt techniciens du droit et assez peu mathématiciens Smiley biggrin
à JuseN :

je pense que le float:left doit fonctionner s'il est sur la feuille de style, non ? a priori, il ne fonctionne pas si je l'insère directement dans la <div> mais peut-être que je ne m'y prends pas bien, ce qui est fort possible !

J'avais écrit

<div>
<div float:left>dépassement</div>
<div float:left> x</div>
<div float left> retraite de réversion <br>----------------
<br>retraite de réversion +rente de réversion garantie </div>
</div>
ah, je me disais aussi !

<div>
<div style="float:left;clear:both">dépassement</div>
<div style="float:left;clear:both"> x</div>
<div style="float left;clear:both"> retraite de réversion <br>----------------
<br>retraite de réversion +rente de réversion garantie </div>
</div>


Il faut mettre : style="" pour appliquer du style à un élément HTML sans passer par le CSS.
Modifié par JuseN (18 Feb 2013 - 16:43)
A juseN :

Je récapitule : je connais le langage html très très très basique et pour le reste, je suis une citrouille ! Smiley biggrin

J'essaierai le code demain, (rentrée maison !) mais je pense aussi que cela devrait marcher ! Je reviens demain. En tout cas, merci beaucoup d'avoir pris le temps de me répondre. C'était la première fois que j'osais venir sur un forum et j'apprécie vraiment.

à Beryem : Je ne peux pas télécharger d'image autre que celle autorisée par les administrateurs mais merci quand même.
mulojpb a écrit :
Je ne peux pas télécharger d'image autre que celle autorisée par les administrateurs mais merci quand même.


Tu n'es pas forcé d'uploader ces images sur ton serveur, tu peux les héberger ailleurs Smiley smile
Revenue au boulot, j'essaie tout de suite la solution miracle, mais las ! pas de résultat

Voilà ce que j'ai mis:
<DIV>
<DIV style="FLOAT: left; CLEAR: both">
<P align=center>dépassement</P></DIV>
<DIV style="FLOAT: left; CLEAR: both">
<P align=center>x</P></DIV>
<DIV style="CLEAR: both">
<P align=center>Retraite de réversion&nbsp;du régime général&nbsp;+ Rente de réversion garantie <BR/>------------------------------------------------------------------------------------------ <BR/>Retraite de réversion&nbsp;de tous les régimes visés &nbsp;+ Rente de réversion garantie&nbsp;</P></div></div>


J'ai essayé aussi bien sur sharepoint 2007, éditeur de texte de base (sur lequel on travaille tout le temps Smiley sweatdrop ) et sur designer qu'on a téléchargé sur nos poste sans être relié à notre site quand on en peut plus de travailler sur du code sans couleur et sans mise en forme !
et cela ne marche pas.

à Beryem : on est sur un site intranet avec des utilisateurs sur toute la France et je ne peux pas faire pointer sur une image hors serveur. Nous ne sommes que des juristes contributeurs et nous n'avons que peu de droits sur le site.
Voilà ce que ça donne en visuel :

dépassement
x
Retraite de réversion du régime général + Rente de réversion garantie
------------------------------------------------------------------------------------------
Retraite de réversion de tous les régimes visés + Rente de réversion garantie
mulojpb a écrit :
Bonjour,
je suis amenée à écrire des choses de ce genre :

Rente de réversion
Dépassement x -------------------------------------------------
Rente de réversion + rente de réversion garantie


mulojpb a écrit :

Voilà ce que ça donne en visuel :

dépassement
x
Retraite de réversion du régime général + Rente de réversion garantie
------------------------------------------------------------------------------------------
Retraite de réversion de tous les régimes visés + Rente de réversion garantie



donc c'est pas bon ? j'ai pas trop compris , les floats on pas marché ? (pas de MAJ dans le style). Tu a eu
Pour les majuscules, je suis désolée mais c'est sharepoint qui me les transforme (j'écris toujours en minuscule et il me transforme les balises en majuscule)

En fait je voudrais quelque chose du style :


upload/48382-equation.gif

du coup merci à Beryem pour le lien vers le site d'image d'équation !
Mais je ne peux pas prendre les images du site d'équation parce qu'elle n'ont pas le rendu de notre charte rédactionnelle. C'est la raison pour laquelle je cherche une solution en html directement dans le texte, c'est la seule latitude que j'aie !

J'ai bien conscience d'avoir des contraintes particulièrement fortes, mais je voudrais bien y arriver pour avoir un rendu correct visuellement.