Etienne.
On 9 sep, 00:43, Loiseau2nuit (Zzz. dans un passé lointain...)
<l.oiseau2n...@gmail.com> wrote:
On 8 sep, 22:54, jerome ecureuil <jerome.ecure...@free.fr> wrote:
> Merci Etienne pour l'info,
Je t'en prie 
> je pensais aussi à une combine CSS de ce genre.
> Dans l'idée afficher le logo et par dessus un div cliquable contenant
> le lien,
Ben là en fait, ya même pas besoin d'aller jusque là :
le div cliquable c'est ton lien,
et le logo lui est passé en image de fond.
Explication rapide :
en CSS le lien est un élément de type "en ligne" / une div est un
élément "en bloc"
Là l'astuce consiste à transformer l'élément lien "en ligne" en
élément de type bloc. En gros on lui demande en CSS de se comporter
comme une div (par la déclaration display:block; )
Ainsi ton lien devient une "div" que tu peux modeler à souhait, lui
donner les dimensions qui t'intéresse, lui coler une bordure, une
image de fond, le placer en absolute, ... and so on !
Ainsi, pas besoin de faire un amoncelement d'éléments les uns par
dessus les autres, un seul suffit.
Là dessus, le lien comportant quand même un texte à l'origine, il
suffit d'isoler le dit texte dans un span, et d'ajouter la déclaration
- span {display:none;} - pour que le texte ne s'affiche pas à l'écran
mais soit là quand même en terme d'accessibilité.
ce qui nous donne donc le code suivant :
###### SQUELETTE ######
<BOUCLE_suivant(ARTICLES){age_relatif<0}{par date}{0,1}>
<a class="pager article_suivant" style="background:transparent
url([(#GET{#LOGO_ARTICLE}extraire_attribut{src})]) no-repeat left
top;" href="#URL_ARTICLE"><span>Article suivant</span></a>
</BOUCLE_suivant>
######### CSS ###########
.pager a {
display:block;
width: 100px; // par exemple
height: 100px; // par exemple
... etc ...
}
.pager a span { display:none; }
##########################
En fait il n'y a que l'image de fond du .pager a que je code en dur
dans la boucle (<a style="background: ..." ...) parce que CSS ne
comprend pas bien les #GET et les #SET, ces balises là ne peuvent
fonctionner que dans le contexte de la boucle, et comme il y a quand
même très peu de boucles dans une feuille CSS... 
Voila
Etienne.
> il n'y
> a pas de raison que cela ne marche pas.
> Jérôme
> Le 8 sept. 08 à 22:24, Loiseau2nuit (Zzz. dans un passé lointain...) a
> écrit :
> > C'est pas testé, c'est immaginé et codé en live, sur la base d'une
> > soluce qu'on m'a donné pour un autre problème mais un truc dans ce
> > style devrait (peut être) fonctionner :
> > <BOUCLE_suivant(ARTICLES){age_relatif<0}{par date}{0,1}>
> > <a class="pager article_precedent" style="background:transparent
> > url([(#GET{#LOGO_ARTICLE}extraire_attribut{src})]) no-repeat left
> > top;" href="#URL_ARTICLE"><span>Article precedent</span></a>
> > </BOUCLE_suivant>
> > Là dessus en CSS, tu met la class .pager de ton lien en display:block
> > avec les mêmes dimensions que celle de ton logo. Tu ajustes au besoin.
> > et tu passes ton .pager span en display:none; } pour que le texte
> > laisse la place à l'image de fond.
> > Tiens moi au courant, je suis quand même curieux de voir si çà tourne
> > mon affaire
> > Etienne.
> > On 8 sep, 22:01, jerome ecureuil <jerome.ecure...@free.fr> wrote:
> >> Bonjour,
> >> je planche sur un portfolio maison et j'aimerai faire ceci :
> >> - le logo de mon article 1 s'affiche
> >> - en cliquant dessus sur ce logo je souhaite afficher l'article 2
> >> j'ai ma boucle pour l'article suivant comme ceci :
> >> <BOUCLE_suivant(ARTICLES){age_relatif<0}{par date}{0,1}>
> >> <a href="#URL_ARTICLE">suivant</a>
> >> </BOUCLE_suivant>
> >> mais au lieu du texte "suivant" j'aimerai avoir le logo, en gros
> >> je recherche une syntaxe de ce type :
> >> [(#LOGO_ARTICLE||#URL_ARTICLE_SUIVANT})]
> >> une idée ?
> >> Merci d'avance.
> >> Jérôme
> >> _______________________________________________
> >> liste spip
> >> s...@rezo.net - désabonnement : spip-...@rezo.net
> >> Infos et archives :http://listes.rezo.net/mailman/listinfo/spip
> >> Documentation de SPIP :http://www.spip.net/
> >> irc://irc.freenode.net/spip ouhttp://embed.mibbit.com/?server=irc.freenode.net&channel=%23spip
> > _______________________________________________
> > liste spip
> > s...@rezo.net - désabonnement : spip-...@rezo.net
> > Infos et archives :http://listes.rezo.net/mailman/listinfo/spip
> > Documentation de SPIP :http://www.spip.net/
> > irc://irc.freenode.net/spip ouhttp://embed.mibbit.com/?server=irc.freenode.net&channel=%23spip
> _______________________________________________
> liste spip
> s...@rezo.net - désabonnement : spip-...@rezo.net
> Infos et archives :http://listes.rezo.net/mailman/listinfo/spip
> Documentation de SPIP :http://www.spip.net/
> irc://irc.freenode.net/spip ouhttp://embed.mibbit.com/?server=irc.freenode.net&channel=%23spip
_______________________________________________
liste spip
s...@rezo.net - désabonnement : spip-...@rezo.net
Infos et archives :http://listes.rezo.net/mailman/listinfo/spip
Documentation de SPIP :http://www.spip.net/
irc://irc.freenode.net/spip ouhttp://embed.mibbit.com/?server=irc.freenode.net&channel=%23spip
