Bonjour à tous,

je vais inaugurer mon premier post avec une question bien vilaine comme moi seul en ai le secret (certains pourrons confirmer !).

Mon idée de base était d'appliquer un style à la balise h4, pour que, quand mon client créer un titre de niveau 4 il se retrouve avec un "joli" fond. L'ennui c'est si j'applique ça à un h4 le background central prend toute la largeur du conteneur...J'avais pensé ajouté un span mais sur le template de base ce n'est pas faisable (pas dans mon idée en tout cas).

Du coup j'ai modifié la balise code pour que ce style apparaissent. Même si c'est moins propre qu'avec un span class ça reste exploitable. Et ça fonctionne bien sous mozilla...

L'ennui c'est que ça ne tourne pas sous ie, malgré l'utilisation des js récuperer sur alsacréations, et d'ailleurs les codes qu'ils fournissent ne fonctionnent pas ni sous IE 6, ni sous IE7 (curieux pour ce site !)

Le résultat attendu (et obtenu sous mozilla) :










j'ai créer ce type de mise en page :

 
/* en css */
code:before {
	content:url("h4_before.gif");
}
 
code:after {
	content:url("h4_after.gif");
}
 
code {
	background:url("h4_bg.gif") repeat-x;
	padding-top:19px;
	color:#3F73B6;
 	text-transform:uppercase;
	font-size:1.0em;
	font-family:Arial;
        font-weight:bolder;
}

côté html je n'utilise que la balise code, et le texte à l'intérieur.

Dans l'absolu je pourrais tricher avec mon design, et faire en sorte d'éviter le recours à :after / :before. Mais c'est tout de même bien pratique !!
De plus j'utilise un padding top pour positionner mon background central et évidemment le contenu n'est pas centré dans le bloc...

Merci d'avance de vous pencher sur mon cas,

Charly

Alors, plusieurs choses, la technique est plutôt sympa, le soucis c'est que internet explorer n'implémente pas encore les pseudo-éléments :after et :before...
Voici un lien qui récapitule le support ou non des différentes propriétés css modernes (pseudo-classes et pseudo-éléments): http://caniuse.com/ (MAJ 07/2011)


Bref, revenons à nos moutons,
Avec e-majine, il existe un certain nombre de templates qui ne sont pas fournis, il existe notamment un template pour les blocs de titre qui doit s'appeler titre.html, il te suffit de créer un template avec ce contenu dans un dossier du FTP qui s'appelle

/html/modeles/fr/Modele1/_elements/structuredtext/

:

 
<div class="title_h">
   <<mx:text id="type" />>
      <span><mx:text id="titre" /></span>
   </<mx:text id="type" />>
</div>
 

Au niveau des CSS, voila ce que ça devrait donner :

 
h4 {
      display:inline;
      background:url(/images/h4_before.gif) no-repeat left top;
      padding-top:19px;
      color:#3F73B6;
      text-transform:uppercase;
      font-size:1.0em;
      font-family:Arial;
      font-weight:bolder;
}
h4 span {
      background:url(/images/h4_after.gif) no-repeat right top;
}
 

Attention, on pourra remarquer qu'en CSS, j'ai appliqué un style de type

display:inline;

à mes balises h4, ce qui signifie, que ma balise h4 ne va plus générer de retour à la ligne comme le font toutes les balises de type block, c'est donc pourquoi, j'ai encapsulé tout mes titres dans des balises div qui elles vont gérer le retour à la ligne.

Sinon, dans un soucis d'optimisation, je ne ferai pas trois images comme tu l'a fait, mais seulement deux, c'est à dire plutôt que de s'embêter avec trois images, on va garder l'image de gauche, et pour l'arrondi de droite on va le regrouper avec le fond, il faudra simplement que cette image soit assez longue pour prendre la totalité de la largeur de ta zone de contenu.

Parfait, ça marche comme il faut, le seul "soucis" c'est que j'ai l'impression qu'il tente d'appliquer mon background H4 a certaines balises wiki (!! je crois - titre de niveau 2). Comment pallier à ce problème ?

C'est normal, les balises T1, T2 et T3 que l'on retrouve dans le WIKI ne correspondent pas aux blocs de titres 1, 2 et 3 (et donc aux balises H1, H2 et H3) mais plutôt aux titres H3, H4 et H5. On à défini ça de cette façon, car en fait les endroits ou l'on peut faire du WIKI dans les articles en blocs (les blocs de texte) correspondent à des paragraphes et les balises H1 et H2, ont été définies avec tellement d'importance sémantiquement parlant, qu'elle ne sont pas disponibles dans les paragraphes. Ces titres H1 et H2 correspondent plus à des titres de pages, de rubriques...

Effectivement c'est plus clair, et logique mais le style title_h4 s'applique correctement à mes balises h4 contenu dans mes articles (si je fais "ajouté un titre" dans un article) mais que mon style ne s'applique pas pour les balises wiki T2 justement.

Au niveau du rendu j'ai bien ma balise h4 avec son background mais pas celui contenu dans le span.

Je suppose que cela vient du fait qu'il n'y a pas de dans le template correspondant au wiki. Où puis-je modifier cela ? Afin que tous mes titres h4 (wiki ou article) possède le même style ?

Enfer et damnation, les styles tilte_h4 ne passe pas sous IE, le span passe en dessous...