Piwigo.org

Tajem · 2006-04-05 00:26:11

Bonjour à vous,
Ceci est mon premier message sur ce forum, j'espère en respecter les consignes !
Dans la page "personnalisation", dans la catégorie " Placer un logo au dessus du menu à gauche" (http://phpwebgallery.net/doc/doku.php?i … u_a_gauche) la solution proposée est de mettre le logo dans \category.tpl. Ce n'est pas du meilleur effet visuel (décalage du menu) et il est indiqué : "Si vous avez une meilleure proposition, le forum vous est ouvert. Une autre solution basée sur header.tpl n’est pas exclue."
Donc, me voici dans le Forum pour vous soumettre la solution (simpliste !) que j'ai appliqué et qui fonctionne pour IE et Firefox (j'ai pas encore testé avec Konqueror et autres....)
Mon but : encadrer le titre par deux images : une à droite et une à gauche (logo et Common Creative Licence)
dans /header.tpl on a :

<body id="{BODY_ID}">
<div id="the_page">

<div id="theHeader">
<h1>{GALLERY_TITLE}</h1>
<p>{GALLERY_DESCRIPTION}</p>
</div>

L'idée est de placer une image dans chaque DIV. cela donne :

<body id="{BODY_ID}">
<div id="the_page">
<a href="http://mon site" title="mon Logo"><img src="template/yoga-dark/theme/logo.jpg" width="50" height="50" align="left"></a>

<div id="theHeader">
<a href="http://creativecommons.org/licenses/by-nc-sa/2.0/fr/" title="Licence Creative Commons"><img src="template/yoga-dark/theme/somerights20.gif" align="right"></a>
<h1>{GALLERY_TITLE}</h1>
<p>{GALLERY_DESCRIPTION}</p>
</div>

Il faut remplacer le chemin de l'image par le votre. Il y a juste un petit décalage du {GALLERY_DESCRIPTION} qui n'est pas forcément centré sous le titre en fonction de sa longueur et peut-être que ce bout de code mérite encore quelques amélioration mais cela fonctionne. Evidemment on est pas obligé de mettre deux images. Le logo seul peut figurer.
PS : mon site sera bientôt en ligne et je pourrais vous indiquer la page à consulter.
A+
Tajem

VDigital · 2006-04-05 06:37:33

Tajem a écrit:
Mon but : encadrer le titre par deux images : une à droite et une à gauche (logo et Common Creative Licence)
[...]
L'idée est de placer une image dans chaque DIV.

L'idée est excellente,et tu es le bienvenu.
Personnellement, j'aurai encadrer par des <div> pour éviter les décalages.
Et la mise en page passant coté css.
Une autre solution passe par un tableau mais cela se gère assez mal en fait.

Code:

<body id="{BODY_ID}">
<div id="the_page">
<div id="theHeader">
<div id="headleft">
<a href="http://mon site" title="mon Logo"><img src="template/yoga-dark/theme/logo.jpg"></a>
</div>
<div id="headcenter">
<h1>{GALLERY_TITLE}</h1>
  <p>{GALLERY_DESCRIPTION}</p>
</div>
<div id="headright">
  <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/fr/" title="Licence Creative Commons"><img src="template/yoga-dark/theme/somerights20.gif"></a>
</div>
</div>

Tajem a écrit:
PS : mon site sera bientôt en ligne et je pourrais vous indiquer la page à consulter.
Tajem

Avec plaisir...
Tu parles de Logo (de "ton Logo" propose quelque chose sur le Concours du Logo de PhpWebGallery

Tajem · 2006-04-05 13:08:43

Salut !

VDigital a écrit:
Personnellement, j'aurai encadrer par des <div> pour éviter les décalages.
Et la mise en page passant coté css.

Oui, tu as raison et c'est ce que j'ai essayé de faire initialement. Mais j'ai eu des problèmes d'affichage dans IE alors que cela allait bien dans firefox... :-(
Je dois avouer que j'ai fait mon premier site en 98 et que j'ai encore de vieux reste d'HTML de grand papa ;-) Ta solution est plus propre mais je me suis aussi dit qu'avec une solution plus simple cela évitait de redéfinir des div dans le CSS et que c'était donc plus à porté de Mr tout-le-monde ...

VDigital a écrit:
Tu parles de Logo (de "ton Logo" propose quelque chose sur le Concours du Logo de PhpWebGallery

Promis, si j'ai un tout petit peu de temps, je "phosphore" avec vous ! Un des buts de mon site est justement de mettre des dessins, logo et autres à disposition de tous.
Donc, A+ et félicitations à tous ceux qui ont déjà créer de bien jolies choses !
Tajem

Allan · 2006-04-05 13:26:47

Bonjour,

Je suis d'accord pour la mise en page via CSS plutôt que par l'attribut align (incompatible avec le DOCTYPE strict de toute façon), en revanche pas pour encadrer par des DIV, ce qui serait inutile (pas de raison d'avoir des décalages, ?).

A+

VDigital · 2006-04-05 17:15:28

Allan a écrit:
en revanche pas pour encadrer par des DIV, ce qui serait inutile (pas de raison d'avoir des décalages, ?).

Allan, ton idée m'intéresse et m'interpelle. J'explique.
Avant tout, je lutte aussi contre la multiplication de l'usage de ID=, CLASS=, des <SPAN> inutiles, et des <DIV> superflues.
J'ai tenté ce genre d'approche sans <div>.
Mais je n'ai pas réussi par du css à cadrer correctement:

une image à gauche, une image à droite, et d'aligner "centré"/"à gauche" du texte entre les deux images.
chrisaga et moi avons "bidouillé" deux solutions différentes qui marchent mais si tu veux bien nous proposer la tienne... Ce serait sympa. 8-)

Allan · 2006-04-06 11:26:45

Bonjour Vincent,

Je n'ai pas une technique particulière, j'utilise simplemement float ou le positionnement (relatif+absolu) selon les cas.
A vrai dire, je ne vois pas où tu as eu un problème, et comment ce problème aurait pu être réglé par en encadrant de div (A et IMG sont certes type "en-ligne", mais via le flottement ou le positionnement ça ne pose pas de problème)
Il y a juste que si tu utilises le flottement gauche et droite pour les logos, il faut mieux les mettre avant le titre. Mais ceci vaut également avec des div.

Si tu as un jour un exemple concret d'un cas qui pose problème, on pourra voir ça.

Bonne journée,
Alain

VDigital · 2006-04-06 12:05:09

Merci Alain.
Si Chrisaga a de nouveau le problème (qu'on a connu avec la mise en place de la 1.5), on te sollicitera pour avoir ton avis.
8-)

Tajem · 2006-04-06 17:04:13

Allan a écrit:
Bonjour Vincent,

Je n'ai pas une technique particulière, j'utilise simplemement float ou le positionnement (relatif+absolu) selon les cas.
Si tu as un jour un exemple concret d'un cas qui pose problème, on pourra voir ça.
Alain

Est-ce que tu pourrais rependre l'exemple ci-dessus du header.tpl ? Tu signalais que le "align" n'était pas W3c. S'agit-il simplement d'introduire un float left ou right à la place ? Je veux bien de tes lumières !
Merci
Tajem

VDigital · 2006-04-06 18:02:52

Tajem a écrit:
S'agit-il simplement d'introduire un float left ou right à la place ?

Tajem,

Avec Allan, nous ne parlons plus de balises HTML.
Tu dois coder dans les css, des choses comme:

Code:

#headleft { float: left; }

Piwigo.org

Annonce

#1 2006-04-05 00:26:11

Logo dans le header

#2 2006-04-05 06:37:33

Re: Logo dans le header

Tajem a écrit:

Code:

Tajem a écrit:

#3 2006-04-05 13:08:43

Re: Logo dans le header

VDigital a écrit:

VDigital a écrit:

#4 2006-04-05 13:26:47

Re: Logo dans le header

#5 2006-04-05 17:15:28

Re: Logo dans le header

Allan a écrit:

#6 2006-04-06 11:26:45

Re: Logo dans le header

#7 2006-04-06 12:05:09

Re: Logo dans le header

#8 2006-04-06 17:04:13

Re: Logo dans le header

Allan a écrit:

#9 2006-04-06 18:02:52

Re: Logo dans le header

Tajem a écrit:

Code:

Pied de page des forums