Forum CMS Made Simple FR
[résolu] Inserer du contenu avec mise en forme CSS - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Modules, Tags (https://forum.cmsmadesimple.fr/forum-14.html)
+--- Sujet : [résolu] Inserer du contenu avec mise en forme CSS (/thread-1663.html)

[résolu] Inserer du contenu avec mise en forme CSS - doudy - 23/12/2011

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: #1.10.2
#~ Url du site : localhost
#~ Hébergeur / Soft :
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.10.2
#~ Installed Modules:
#~ CMSMailer: 2.0.2
#~ CMSPrinting: 1.0
#~ FileManager: 1.2.0
#~ MenuManager: 1.7.7
#~ MicroTiny: 1.1.1
#~ ModuleManager: 1.5.3
#~ News: 2.12.3
#~ Search: 1.7
#~ ThemeManager: 1.1.4
#~ TinyMCE: 2.9.4
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template: false
#~ output_compression: false
#~ max_upload_size: 10000000
#~ default_upload_permission: 664
#~ url_rewriting: none
#~ page_extension:
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale:
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.3.8
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ E_DEPRECATED: 0
#~ memory_limit: 128M
#~ max_execution_time: 60
#~ output_buffering: 1
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 100M
#~ upload_max_filesize: 10M
#~ session_save_path: c:/wamp/tmp (0777)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ Server Information:
#~ Server Api: apache2handler
#~ Server Db Type: MySQL (mysql)
#~ Server Db Version: 5.5.16
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~



Bonjour,

Souhaitant inserer du contenu avec une mise en forme CSS, je rencontre des difficultés à utiliser les éditeurs intégrés.
J'ai essayé avec MicroTiny et TinyMCE.

J'ai donc créé un content.css:

Code :
[== CSS ==]
/* ===========cadre-transparent-ombre-redimentionnable=================== */

.cadre {
position: relative ; top: 5px ; left: 130px ;
     float:left;
    background:url(/cms/uploads/images/cadretransparent/cadre-top.png) no-repeat top right;
    padding-top:13px;
}
.cadre .middle {
    background:url(/cms/uploads/images/cadretransparent/cadre-middle.png) top right;
    padding:0 10px;
}
.cadre .bottomLeft,  .cadre .bottomRight{
    float:left;
    width:50%;
    height:14px;
    background:url(/cms/uploads/images/cadretransparent/cadre-bottom.png) no-repeat bottom left;
}
.cadre .bottomRight{
    float:left;
    background:url(/cms/uploads/images/cadretransparent/cadre-bottom.png) no-repeat bottom right;
}
.offreDuJour {
    width:480px;
    height:311px;
}
.offreDuJour300 {
    width:380px;
    height:70px;
}

/* =========== FIN cadre-transparent-ombre-redimentionnable=================== */

Et voici le code que je dois entrer à la main en désactivant le Wysiwing de TinyMCE:

Code :
[== HTML ==]
<p>Congratulations! The installation worked. You now have a fully functional installation of CMS Made Simple and you are <em>almost</em> ready to start building your site.</p>
<!-- =========== -->
<div class="cadre">
<div class="middle offreDuJour300" style="text-align: center; line-height: 16pt;"><strong>Exemple de carde CSS ... <strong>Exemple de carde CSS ..<br />Exemple de carde CSS ... </strong><br /> </strong><span style="font-size: medium;">HELP !!</span></div>
<div class="bottomLeft"> </div>
<div class="bottomRight"> </div>
<p> </p>
</div>
<!-- =========== -->
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>If you chose to install the default content, you will see numerous pages available to read. You should read the
En effet, TinyMCE me propose bien les styles : offreDuJour, offreDuJour300 et cadre, mais je n'arrive pas à obtenir le résultat attendu sans désactiver le Wysiwing pour saisir le code !!

Voici le résultat obtenu:
[Image: captur10.png]

Pouvez vous me conseiller une solution possible ?

Merci d'avance. Smile

[résolu] Inserer du contenu avec mise en forme CSS - Ouik - 23/12/2011

Et sinon, un peu de CSS3 pour styler le cadre, ça te dit pas ?

[résolu] Inserer du contenu avec mise en forme CSS - doudy - 24/12/2011

Je souhaiterais rester compatible avec le plus de navigateurs.
Mais je vais essayer en CSS3


Merci Smile

[résolu] Inserer du contenu avec mise en forme CSS - Ouik - 26/12/2011

Tu peux en CSS3 pour navigateurs récents et js pour les anciens IE.

[résolu] Inserer du contenu avec mise en forme CSS - Whymsun - 30/12/2011

Ce qui est sur, c'est que TinyMCE a horreur des div vides, d'où l'obligation de désactiver le Wysiwing ou alors d'entrer un commentaire :

Code :
<div class="bottomLeft"><!-- Add code here that should appear in the content block of all new pages --></div>

As tu solutionné ton problème ?

[résolu] Inserer du contenu avec mise en forme CSS - Ouik - 31/12/2011

Whymsun a écrit :Ce qui est sur, c'est que TinyMCE a horreur des div vides
Ce qui est logique : une div ne doit logiquement pas rester vide, même si parfois c'est bien pratique.

[résolu] Inserer du contenu avec mise en forme CSS - doudy - 31/12/2011

J'ai tout passé en CSS3 et ça marche bien avec TinyMCE .

Merci Smile

[résolu] Inserer du contenu avec mise en forme CSS - Ouik - 03/01/2012

Tant mieux ! Cool

N'oublie pas d'ajouter [résolu] au titre de ton premier post.