Ajouter une image en fonction d'une position


#1

Bonjour,

J’aimerais ajouter mon logo sur Tiddlywiki. J’aimerais le positionner en bas à droite (cf: http://i.imgur.com/b6PH1GH.png) et je ne parviens pas à le faire proprement.

Auriez vous une idée ?

Merci !


#2

Oh mais je reconnais la structure du document :innocent: Cool si le modèle est utilisé !

Tu dois pouvoir t’en sortir en positionnant ton image avec une règle CSS.

Par exemple :

.footer {
padding: 2em;
right: 0;
bottom: 0;
position: fixed;
}

A toi de jouer sur le padding éventuellement.
Mettre ce code dans le tiddler taggué $:/tags/Stylesheet

Ensuite tu peux créer un tiddler avec une transclusion de ton image, et appliquer le style :

<div class="footer">
{{logo.png}}
</div>

EDIT : faut rajouter un tag système pour que cela reste affiché lorsque ton tiddler n’est pas affiché :smile:
Par exemple $:/tags/PageTemplate.

A voir s’il faut jouer aussi avec un z-index (par exemple z-index: -1;) pour que l’image passe en dessous des liens de l’onglet “Récents” par exemple quand la liste des éléments est un peu longue.

(si j’ai un logo à mettre, en général je le mets simplement dans le sous-titre du document).


#3

Hey !

Je suis grillé :slight_smile: Il est très bien ton modèle, pas de raison que je réinvente la roue :smile:
J’essaie ce que tu proposes et je ferais un retour si ça fonctionne (ou si ça ne fonctionne pas d’ailleurs…).

Merci Sylvain :smile:


#4

C’est bon j’ai réussi à le mettre en place grâce à tes précieuses indications. Plus je m’imprègne de la façon de fonctionner de TW plus j’apprécie. :smile:
Là j’essaie de réduire la taille du logo via TW sans toucher à l’image, pour l’instant ce n’est pas un succès :slight_smile:

En fait j’avoue ne pas savoir ou placer ça :

img.resize{
width:10px;
height: auto;
}

(Je ne suis pas dev :p)


#5

Oui faudrait adapter ton code CSS pour appliquer ça à la règle que l’on a créé avant .footer, soit ajouter dans ton tiddler qui stocke tes règles CSS :

.footer img {
width:120px; 
height: auto;
}

Ainsi j’applique ces indications aux éléments img.

Une autre option, modifier ton tiddler qui appel l’image, et ne pas faire de transclusion mais plutôt ça :

<div class="logo">
[img width="50"[logo.png]]
</div>

Où 50 équivaut à 50 px (tu peux aussi mettre 50px).

NB : c’est un autre côté magique de TW, de pouvoir apprendre en faisant et c’est un très bon exercice pour l’apprentissage que de voir le résultat tout de suite.


#6

J’ai du relire ce que tu m’avais écrit je m’entêtais à ajouter width et height dans le .footer déjà créé. Du coups ça ne passait pas (ça me déplaçait juste le logo).
Du coups, je suis passé sur la seconde méthode que tu proposais et là l’image avait la bonne taille mais uniquement dans le tidler :stuck_out_tongue:

En relisant avec le doigt, j’ai vu qu’il fallait ajouter une autre “balise” .footer mais avec le “img” (oui j’avais pas capté du tout ce que tu voulais dire en fait !). Là ça fonctionne :smile:
Merci