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

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

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:

En combinant cette image de fond:

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

titre réaliser avec cette image

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