Couteau suisse : lame 'jolis coins"

Général
1

Bonsoir

Je teste en local la lame "jolis coins" du couteau suisse.

J'ai une div avec dans les css (entre autres)
#onglet-une, #onglet-archives{
...
  border: 1px solid #82ade2;
  border-bottom : none;
  z-index: 2;
}

Dans la fenêtre de "jolis coins", j'ai mis d'abord
    #onglet-une, #onglet-archives = .corner("tr tl")
J'ai bien mes coins arrondis mais plus le border ni le z-index

J'ai donc modifié en
#onglet-une, #onglet-archives = css("border","1px solid #82ade2") .corner("tr tl")
pas mieux

J'ai lu le forum, fouillé un peu ailleurs et j'avoue que je suis un peu paumé.

Une idée de la solution ?

2

Pour "border", c'est normal. Les jolis coins arrondissent des <div> colorés sans bordure.
Pour la bordure, il faut deux <div> imbriquées, comme suggéré sur la page d'exemples.

Pat

Jean-Christophe Villeneuve a écrit :

Bonsoir

Je teste en local la lame "jolis coins" du couteau suisse.

J'ai une div avec dans les css (entre autres)
#onglet-une, #onglet-archives{
...
border: 1px solid #82ade2;
border-bottom : none;
z-index: 2;
}

Dans la fenêtre de "jolis coins", j'ai mis d'abord
   #onglet-une, #onglet-archives = .corner("tr tl")
J'ai bien mes coins arrondis mais plus le border ni le z-index

J'ai donc modifié en
#onglet-une, #onglet-archives = css("border","1px solid #82ade2") .corner("tr tl")
pas mieux

J'ai lu le forum, fouillé un peu ailleurs et j'avoue que je suis un peu paumé.

Une idée de la solution ?

3

Tu parles des exemples fournis avec le plugin ?

// coins ronds pour les menus de navigation
.rubriques, .breves, .syndic, .forums, .divers

// en couleurs sur l’accueil
.liste-articles li .texte = css(‹ background-color ›, ‹ #E0F0F0 ›) .corner()

jusque là je pige, quoique si on veut mettre plusieurs styles, quelle syntaxe

// colorisation de la dist de SPIP 1.92 en ajoutant un parent
« #contenu .texte » = wrap(‹ 

 ›) .parent() .addClass(‹ jc_parent ›)

// coins ronds aux parents !
.jc_parent

là par contre je suis largué. Imaginons que mon code soit du style

... et les autres

ça donne quoi dans « jolis coins » si je veux une bordure ?

Pat a écrit :

Pour « border », c’est normal. Les jolis coins arrondissent des

colorés sans bordure.
Pour la bordure, il faut deux
imbriquées, comme suggéré sur la page d’exemples.

Pat

Jean-Christophe Villeneuve a écrit :

Bonsoir

Je teste en local la lame « jolis coins » du couteau suisse.

J’ai une div avec dans les css (entre autres)
#onglet-une, #onglet-archives{
…
border: 1px solid #82ade2;
border-bottom : none;
z-index: 2;
}

Dans la fenêtre de « jolis coins », j’ai mis d’abord
#onglet-une, #onglet-archives = .corner(« tr tl »)
J’ai bien mes coins arrondis mais plus le border ni le z-index

J’ai donc modifié en
#onglet-une, #onglet-archives = css(« border »,« 1px solid #82ade2 ») .corner(« tr tl »)
pas mieux

J’ai lu le forum, fouillé un peu ailleurs et j’avoue que je suis un peu paumé.

Une idée de la solution ?

4

Ecoute, le plus simple est de gratter un peu la page d'exemples, t'as essayé au moins ? Ca tombera pas tout cuit...

Tu crées donc tes deux <div> nécessaires pour les bordures :
<div class="outer">
   <div class="inner">
     <b>Test Round</b>
   </div>
</div>

Avec (suivre l'exemple dans un premier temps !!) :

div.inner {
  background:#FFFFCC none repeat scroll 0%;
  border:0pt none;
  margin:0pt;
  padding:10px;
  color:#000000;
  text-align:center;
}

div.outer {
  background:#CC8822 none repeat scroll 0%;
  float:left;
  margin:15px;
  padding:8px;
  width:22em;
}

Ce qui est important de voir ici, c'est les couleurs de fond...
Et ensuite dans le Couteau Suisse, tu mets exactement le code de l'exemple :

.inner = corner("round 8px").parent().css('padding', '4px').corner("round 10px")

Et en principe, c'est tout bon. Mais travaille avec Firefox/Firebug, tout devient bien plus simple...

Vérifie au final que ton site s'affiche bien lorsque le Javascript est désactivé...

Pat

Jean-Christophe Villeneuve a écrit :

Tu parles des exemples fournis avec le plugin ?

    // coins ronds pour les menus de navigation
   .rubriques, .breves, .syndic, .forums, .divers

    // en couleurs sur l'accueil
   .liste-articles li .texte = css('background-color', '#E0F0F0') .corner()

jusque là je pige, quoique si on veut mettre plusieurs styles, quelle syntaxe

   // colorisation de la dist de SPIP 1.92 en ajoutant un parent
   "#contenu .texte" = wrap('<div style="padding:4px;
   background-color:#E0F0F0; margin:4px 0;"></div>') .parent()
   .addClass('jc_parent')

   // coins ronds aux parents !
   .jc_parent

là par contre je suis largué. Imaginons que mon code soit du style

   <div classe=bords">
     <div id="onglet-archives">
     ... et les autres
     </div>
</div>

ça donne quoi dans "jolis coins" si je veux une bordure ?

Pat a écrit :

Pour "border", c'est normal. Les jolis coins arrondissent des <div> colorés sans bordure.
Pour la bordure, il faut deux <div> imbriquées, comme suggéré sur la page d'exemples.

Pat

Jean-Christophe Villeneuve a écrit :

Bonsoir

Je teste en local la lame "jolis coins" du couteau suisse.

J'ai une div avec dans les css (entre autres)
#onglet-une, #onglet-archives{
...
border: 1px solid #82ade2;
border-bottom : none;
z-index: 2;
}

Dans la fenêtre de "jolis coins", j'ai mis d'abord
   #onglet-une, #onglet-archives = .corner("tr tl")
J'ai bien mes coins arrondis mais plus le border ni le z-index

J'ai donc modifié en
#onglet-une, #onglet-archives = css("border","1px solid #82ade2") .corner("tr tl")
pas mieux

J'ai lu le forum, fouillé un peu ailleurs et j'avoue que je suis un peu paumé.

Une idée de la solution ?

5

Pat a écrit :

Ecoute, le plus simple est de gratter un peu la page d'exemples, t'as essayé au moins ? Ca tombera pas tout cuit...

Autant je t'apprécie pour ton superbe outil qu'est le couteau suisse, autant j'ai du mal avec ce genre de réponse de ta part.
Oui, j'ai essayé. Je cherche toujours à me débrouiller tout seul et je fais des recherches avant de poster ici.
Je vais donc continuer à essayer et si je n'y arrive pas, ben tant pis, je me contenterai des coins arrondis avec Firefox (grâce à -moz-border-radius) et je m'en passerais avec IE
Parce que le néophyte et béotien que je suis a du mal avec tout ça.
Merci néanmoins de ta réponse.

Tu crées donc tes deux <div> nécessaires pour les bordures :
<div class="outer">
  <div class="inner">
    <b>Test Round</b>
  </div>
</div>

Avec (suivre l'exemple dans un premier temps !!) :

div.inner {
    background:#FFFFCC none repeat scroll 0%;
    border:0pt none;
    margin:0pt;
    padding:10px;
    color:#000000;
    text-align:center;
}

div.outer {
    background:#CC8822 none repeat scroll 0%;
    float:left;
    margin:15px;
    padding:8px;
    width:22em;
}

Ce qui est important de voir ici, c'est les couleurs de fond...
Et ensuite dans le Couteau Suisse, tu mets exactement le code de l'exemple :

.inner = corner("round 8px").parent().css('padding', '4px').corner("round 10px")

Et en principe, c'est tout bon. Mais travaille avec Firefox/Firebug, tout devient bien plus simple...

Vérifie au final que ton site s'affiche bien lorsque le Javascript est désactivé...

Pat

Jean-Christophe Villeneuve a écrit :

Tu parles des exemples fournis avec le plugin ?

    // coins ronds pour les menus de navigation
   .rubriques, .breves, .syndic, .forums, .divers

    // en couleurs sur l'accueil
   .liste-articles li .texte = css('background-color', '#E0F0F0') .corner()

jusque là je pige, quoique si on veut mettre plusieurs styles, quelle syntaxe

   // colorisation de la dist de SPIP 1.92 en ajoutant un parent
   "#contenu .texte" = wrap('<div style="padding:4px;
   background-color:#E0F0F0; margin:4px 0;"></div>') .parent()
   .addClass('jc_parent')

   // coins ronds aux parents !
   .jc_parent

là par contre je suis largué. Imaginons que mon code soit du style

   <div classe=bords">
     <div id="onglet-archives">
     ... et les autres
     </div>
</div>

ça donne quoi dans "jolis coins" si je veux une bordure ?

Pat a écrit :

Pour "border", c'est normal. Les jolis coins arrondissent des <div> colorés sans bordure.
Pour la bordure, il faut deux <div> imbriquées, comme suggéré sur la page d'exemples.

Pat

Jean-Christophe Villeneuve a écrit :

Bonsoir

Je teste en local la lame "jolis coins" du couteau suisse.

J'ai une div avec dans les css (entre autres)
#onglet-une, #onglet-archives{
...
border: 1px solid #82ade2;
border-bottom : none;
z-index: 2;
}

Dans la fenêtre de "jolis coins", j'ai mis d'abord
   #onglet-une, #onglet-archives = .corner("tr tl")
J'ai bien mes coins arrondis mais plus le border ni le z-index

J'ai donc modifié en
#onglet-une, #onglet-archives = css("border","1px solid #82ade2") .corner("tr tl")
pas mieux

J'ai lu le forum, fouillé un peu ailleurs et j'avoue que je suis un peu paumé.

Une idée de la solution ?