[résolu] Inserer du contenu avec mise en forme CSS

[doudy]

#~~~~~ 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:


Pouvez vous me conseiller une solution possible ?

Merci d'avance.

[Ouik]

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

[doudy]

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


Merci

[Ouik]

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

[Whymsun]

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 ?

[Ouik]

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.

[doudy]

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

Merci

[Ouik]

Tant mieux !

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