Problème de flash qui passe au dessus d’un menu css

Virginie — Thu, 01 Oct 2009 11:47:11 +0000

Vous avez un menu déroulant en CSS et une animation Flash en dessous, et quand vous déroulez votre menu, celui-ci passe sous l’animation… Pas de panique, voici une solution.

Dans le code html, admettons que vous avez un div#menu qui contient votre menu, et un div#animation qui contient quelque chose comme ça :

Pour résoudre le problème, il suffit de :

Rajouter un paramètre dans l’object ;
Rajouter l’attribut wmode=”transparent” dans la balise embed
Dans la feuille de style, mettre : z-index:100; sur le div#menu et z-index:-1; sur le div#animation

(Testé avec IE6, IE7, Firefox 3.5 et Safari 4)

Plusieurs instances de FCK Editor avec des feuilles de styles différentes

Virginie — Thu, 02 Jul 2009 10:57:03 +0000

Vous utilisez FCK Editor pour éditer des contenus. Vous avez sur votre site plusieurs éditeurs FCK. Mais leurs contenus seront affichés à des endroits différents, et cet affichage est régi par des styles différents. Vous voudriez donc pouvoir changer la feuille de style de l’éditeur en fonction de vos différentes instances de FCK.

Les feuilles de styles

La feuille de style utilisée par défaut est fckeditor/editor/css/fck_editorarea.css

Modifions-la, ce sera notre première feuille de style :

body
{
font-family:Verdana, Arial, sans-serif;
color:red;
}

Créons notre seconde feuille de style : fck_editorarea2.css dans fckeditor/editor/css/

body
{
font-family:Georgia, serif;
color:blue;
}

Principe général

Il s’agit de modifier la valeur de la variable FCK Editor Config['EditorAreaCSS']

Placement des éditeurs : solution 1, en Php

include_once("fckeditor/fckeditor.php") ;

//premier éditeur
$oFCKeditor = new FCKeditor('content') ;
$oFCKeditor->BasePath = './fckeditor/' ;

//la variable à modifier. Le chemin se définit par rapport au basepath
$oFCKeditor->Config['EditorAreaCSS'] = './css/fck_editorarea.css';

$oFCKeditor->Value = 'Contenu avec la première feuille de style' ;
$oFCKeditor->Height = 300 ;
$oFCKeditor->Create() ;

//deuxième éditeur
$oFCKeditor2 = new FCKeditor('content2') ;
$oFCKeditor2->BasePath = './fckeditor/' ;

//Chemin de notre seconde feuille de style
$oFCKeditor2->Config['EditorAreaCSS'] = './css/fck_editorarea2.css';

$oFCKeditor2->Value = 'Contenu avec la deuxième feuille de style' ;
$oFCKeditor2->Height = 300 ;
$oFCKeditor2->Create() ;

Placement des éditeurs : solution 2, en JavaScript (remplacement d’un textarea)

Notez que je préfère cette méthode : si l’utilisateur à JavaScript désactivé, les textarea apparaissent et sont éditables, tandis qu’avec l’éditeur placé avec Php, rien ne s’affiche.

A l’intérieur de la balise , placez le code suivant :

Bien entendu, vous devez avoir les textarea correspondants dans le html :

Contenu avec la première feuille de style
Contenu avec la deuxième feuille de style

Démonstration

Vous pouvez voir la démo ici.