Sur mon mini-blog météo, je voulais positionner le titre verticalement dans la marge du message et qu'il reste fixe quand on fait défiler la page...
J'ai eu beaucoup de mal à trouver une solution. Pour le positionner à l'extrême droite ou gauche de la page, pas de problème. Pour le positionner dans la marge, OK, mais quand on change de résolution d'écran, plus rien ne va plus!
Mon idée a donc été de mettre mon image dans un tableau invisible, celui-ci se trouvant lui-même dans ce qu'on appelle une "couche" ou "layer". En fait un "DIV".
Le DIV est positionné à 50% du bord gauche, ce qui fait que le résultat est le même quelque soit la taille de l'écran. Il a fallu aussi tâtonner pour trouver la bonne dimension du tableau et du DIV. Ici: 316 pixels. L'image est alignée à droite et en haut, mais je pense qu'on aurait pu faire autrement. Ci-dessous le tableau avec son image (J'ai laissé les bordures visibles mais normalement elles sont invisibles. Ça vaut mieux!)
 |
Voir le résultat sur le blog: nbbc-met.blogspot.fr ou plus bas dans un iframe.
<div name='essai' style='position: fixed; top: 20px; left: 50%; width: 316px; margin: auto; visibility : visible;z-index : 1;'>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 316px;">
<tbody>
<tr>
<td style="text-align: right;">
<a href="http://nbbc-met.blogspot.fr/" target="_self"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3WCx1YTNXB4g30EyCenScFQeE5uYNwyzzRgY6WNQHhH286qXMffvYkZrKqg-_krSHTep9HgQcsjB1b870Msx11PMFdJUlUkKtvKhJiQ8cXpMUGNpAb3TiZPP0XfRlRz30UBULFyBBriI/s1600/titrevertical.png" style="width: 22px; height: 226px; float: right;" title="HOME - ACCUEIL" /></a></td>
</tr>
</tbody>
</table>
</div>
En bleu, le DIV, en vert, le tableau et en violet, tout ce qui concerne l'image et le lien.
Ce code doit être inséré dans un widget HTML-Javascript, mais je pense qu'on peut essayer mon autre méthode, directement dans le HTML. Voir messages précédents.
Mon mini-blog météo
Note: il est tout-à-fait possible de le décaler plus à droite (sur l'arrière-plan) ce qui est pas mal aussi.
Concernant mon mini-blog, l'image de background est extrêmement légère puisqu'elle ne mesure qu'1 seul pixel de large sur 1024 de haut.
Bien entendu, cette manipulation peut parfaitement s'appliquer à des flèches de navigation rapide.
Concernant mon mini-blog, l'image de background est extrêmement légère puisqu'elle ne mesure qu'1 seul pixel de large sur 1024 de haut.
Bien entendu, cette manipulation peut parfaitement s'appliquer à des flèches de navigation rapide.
Aucun commentaire:
Enregistrer un commentaire