css et h1 de l'aide pour mon design

snypi · 22/03/2010 10:28:48

voila je cherche la solution pour designé mon site
voici le rendu que j'aimerai
.$replace_callback[$i].
donc une ligne qui fait le long de la page avec le texte du titre 1 ce superpose et cache le trait avec un background blanc

et en css voici mon code

h1 {
background: #ffffff; 
padding: 0 5px 0 5px;
color: #660099;
}

h1.titreh1{ /*ici une classe que j'essaye d'attribué au h1*/
display:block; 
line-height: 53px;/*taille de mon image*/
	background:url(deco/titre_v.jpg)no-repeat center left;/*ma ligne violette */
	font-size: 150%;
	padding-left: 50px;
}

mais cela ne marche pas un seul background est pris en considération

avez vous une solution pour m'aider

voici la ligne déja fait pour m'aider .$replace_callback[$i].

important je veut que cela soit éditable et faisable avec timynce

Dernière modification par snypi (22/03/2010 13:52:06)

jpg · 22/03/2010 11:40:23

Bonjour,

et pourquoi pas un panneau haut à la place de ton h1.titreh1 ?

Tu mets l'image dans ce panneau via tinyMCE.

a+
Jean-Paul

snypi · 22/03/2010 12:26:30

oui facilité
mais pour le référencement un H1 vaut bien mieux qu'une image !!!

snypi · 22/03/2010 13:51:15

ceci marcherai si je pouvais rajouter une balise SPAN entre les balises H1 avec tinymce

h1 {
  background:url(deco/titre_v.jpg) no-repeat center left;

}

h1 span {

  background-color: white;

  padding: 20px 0;

  margin-left: 50px;

}

Dernière modification par snypi (22/03/2010 13:53:03)

jpg · 22/03/2010 18:57:05

Je suis pas sur de ce que tu veux faire exactement...
... alors pour voir si j'ai bien compris:

Tu veux réaliser ce design:
.$replace_callback[$i].

En combinant cette image de fond:
.$replace_callback[$i].
et en écrivant dessus un texte éditable via tinyMCE.
Ce texte doit être inséré sur un fond opaque blanc pour interrompre la ligne du dessin.

La solution: un panneau Haut, avec comme source:

et tu gardes l'image de fond dans ta balise.

ps: pour faire simple::
- l'exemple est sans css
- il manque le code pour positionner le panneau à la bonne place

a+
jean-paul

snypi · 23/03/2010 01:15:15

le css que j'ai donné au dessus marche avec un code comme celui ci <h1><span> Titre du H1 </span></h1>

h1 {

  background:url(deco/titre_v.jpg) no-repeat center left;

}

h1 span {
	background-color: white;
	padding: 0px 5px 0px 5px;
	margin-left: 50px;
}

ce que j'aimerai c'est que via tinymce cela ce fasse automatiquement (pour qu'un webmaster d'un zite plus puisse habillé son titre de niveau 1) sans avoir à passé par le code ou la construction de panneau

on ma filé un code java que je ne sais traduire mais cela pourrait le faire

$(document).ready(function(){ 
  $('h1.truc').wrapInner('<span></span>'); 
});

je vais testé de ce pas et vous tien au courant
++

edit
le javanais j'ai trop de mal cela ne marche pas j'ai copier ce code dans le header et malheureusement cela n'inclue pas de balise <span> entre mes balises <H1>

<script type="text/javascript">
        $(document).ready(function(){ 
  $('h1.truc').wrapInner('<span></span>'); 
});
        </script>

Dernière modification par snypi (23/03/2010 01:31:57)

snypi · 23/03/2010 11:02:00

Résolue !!
je récapitule l'ensemble
je souhaitait créer un habillage de certain titre de niveau 1 dans tinymce pour qu'un utilisateur lambda puisse l'appliquer.
voila le rendu finale
.$replace_callback[$i].
titre réaliser avec cette image
.$replace_callback[$i].

dans un premier temps il faut créer un fichier tinymce.css à la racine du site et modifier le fichier zite/tinymce.php à la ligne 27 et entre les guillements rajouter tinymce.css

du javascript coté serveur avec jquery permet de placé des balises <span> entre les balises <h1 classe="truc">
dans la partie <head> on applique le java (merci au forum d'alsacreations)

<!-- JavaScripts-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function(){ 
  $('h1.truc').wrapInner('<span></span>'); 
});
        </script>

le css à inscrire dans le fichier style.css et tinymce.css

h1.truc { 
  background:url(deco/titre_v.jpg) no-repeat center left;
} 
 
h1.truc span{ /*ici la classe truc et on applique l'effet au span ce qui superpose les backrounds*/ 
 background-color: white;

padding: 0px 5px 0px 5px;

  margin-left: 50px;
}

maintenant lorsque que vous sélectioné un texte dans votre zite faut lui appliquer le " titre de niveau 1" puis le style "truc" et le tour est joué

Attention !! de temps en temps tinymce vous créer ceci <h1><span classe="truc">titre du h1</span></h1> au lieu de <h1 classe="truc"><span>titre du h1</span></h1>
dans ces cas la on efface la ligne et on recommance (je ne sais pourquoi un coup sur 4 il nous fait un code différent).

en espérant avoir été claire et avoir bien détaillé la procédure

edit : imaginé

 
  $('h1.truc').wrapInner('<span></span>'); 
$('h1.bidule').wrapInner('<span></span>'); 
$('h1.chouette).wrapInner('<span></span>');

Dernière modification par snypi (23/03/2010 11:42:16)

Forum ZitePLUS

#1 22/03/2010 10:28:48

css et h1 de l'aide pour mon design

#2 22/03/2010 11:40:23

Re : css et h1 de l'aide pour mon design

#3 22/03/2010 12:26:30

Re : css et h1 de l'aide pour mon design

#4 22/03/2010 13:51:15

Re : css et h1 de l'aide pour mon design

#5 22/03/2010 18:57:05

Re : css et h1 de l'aide pour mon design

#6 23/03/2010 01:15:15

Re : css et h1 de l'aide pour mon design

#7 23/03/2010 11:02:00

Re : css et h1 de l'aide pour mon design

Pied de page des forums