Piwigo.org

AkaiKen · 2007-11-28 15:53:11

Bonjour,
j'utilise PWG en complément de mon blog, et j'aimerais imbriquer l'un dans l'autre. Je m'explique : le blog est plus ancien, son design longuement élaboré, et j'aimerais reproduire ce design sur ma galerie. Or le point central est un menu horizontal en CSS (qui s'ajouterait au menu horizontal du thème MontBlanc que j'utilise). Ce menu, je l'ai trouvé chez PêUR, c'est dans cet article.
Est-il possible de l'importer sur PWG ? Cela me permettrait d'harmoniser l'ensemble et de construire le design de mon site PWG autour.

Pour l'instant j'ai tenté exactement la même manip que sur le blog, c'est-à-dire un menu à puces dans l'entête, qui est ensuite modifié par un code dans le CSS (j'ai bidouillé dans theme.css). Et pour l'instant, rien n'apparaît, pire, LocalFilesEditor refuse que j'ajoute mes lignes dans le CSS.

Quelqu'un saurait-il m'aider ? Merci d'avance.

EDIT : bon, j'ai réussi à l'afficher, le problème venait sûrement, pour le CSS, des caractères spéciaux ("bannière"), et pour la partie html à mettre dans l'entête, du tableau (il y a 3 cellules en ligne pour 'compléter' l'image).
Donc c'est un peu résolu. Pas complètement puisque je ne peux pas mettre de tableau dans l'entête, et ça ne m'arrange pas... Une idée ?
(et puis ça m'a un peu tout cassé, en plus =( j'ai perdu la menubar et l'édito via PWG Stuff ; qu'est-ce que j'ai fait ?)

Dernière modification par AkaiKen (2007-11-30 14:21:05)

grum · 2007-11-28 20:13:35

si t'as pas changé le template, c'est que le code html que tu as dans ta bannière n'est pas correct.

en synthétique tu as dans ta page :

Code:

<div id="theHeader">
 <div align="center"></div>
 <div id="menubar"></div>
 <div id="content"></div>
 <div id="ftc_plugin" style="float: right; padding-right: 30px;"></div>
 <div id="copyright"></div>
</div>

au lieu d'avoir

Code:

<div id="theHeader"></div>
<div id="menubar"></div>
<div id="content"></div>
<div id="ftc_plugin" style="float: right; padding-right: 30px;"></div>
<div id="copyright"></div>

dans ta bannière, doit y avoir un </div> manquant

Dernière modification par grum (2007-11-28 20:14:00)

P@t · 2007-11-28 20:45:56

Jette déjà un oeil sur le site de saimon, l'auteur du thème montblanc:
http://saimon.org/galerie/

Il a un menu du meme genre!

Je vais regarder plus précisément ce qui ne va pas sur ta page...

P@t · 2007-11-28 21:15:49

Première remarque, comme le dis grum, il te manque un </div> à la fin de ton menu...
Ce qui met pas mal de bordel!

Dernière modification par P@t (2007-11-28 21:18:17)

AkaiKen · 2007-11-28 21:43:25

</div> ajouté, menu et édito revenus, merci beaucoup ! (marre, c'est tout le temps sur de petits détails de ce genre que je bloque...)

En revanche, je n'arrive pas à ajouter les deux bouts manquants aux extrémités de mon menu (l'image complète se voit bien sur le blog, lien au dessus, où j'avais mis un tableau 1 ligne / 3 colonnes), comment puis-je faire ?

J'ai regardé le menu du site de Saïmon, ça n'a pas l'air d'être du Sliding doors, le côté graphique du menu ne change pas quand on approche la souris.

VDigital · 2007-11-28 22:11:15

<img alt="" src="http://akaiken.free.fr/sanctuaire/blog/menu_g.gif"/>
n'est pas dans le block #nav il aura du mal à être à sa gauche.
8-)

grum · 2007-11-28 22:34:22

solution qui n'est pas des plus élégantes.....

Code:

<table style="border-spacing:0px;"><tr><td>
<img style="position:relative;top:1px;" src="http://akaiken.free.fr/sanctuaire/blog/menu_g.gif" alt=""/>
</td><td id="nav">
            <ul>
                <li><a href="http://akaiken.over-blog.com/" title="Vers le blog du Griffon">Blog</a></li>
                <li><a href="http://akaiken.free.fr/site" title="Vers la galerie">Galerie</a></li>
        <li><a href="http://akaiken.deviantart.com" title="Vers mon site deviantART">deviantART</a></li>
                <li><a href="http://akaiken.free.fr/site/index.php?/additional_page/1" title="Vers une présentation de votre serviteuse">Présentation</a></li>
        <li><a href="http://akaiken.over-blog.com/article-3998763.html" title="Vers les liens de tas de gens que j'admire">Liens</a></li>           
            </ul>
</td></tr></table>

à la place de <div id="nav"> ... </div>

te reste à ajouter une troisième colonne sur le modèle de la première pour le côté droit...

P@t · 2007-11-28 22:39:49

Et moi qui ai passé des heures à apprendre le CSS pour éviter d'utiliser des tableaux dans PWG Stuffs!

AkaiKen · 2007-11-28 22:42:21

Donc on peut mettre un tableau ? Mais... mais j'avais essayé, pourtant.

Voilà le code que j'avais (qui marche très bien dans l'entête de mon blog, c'était le moyen qu'on m'avait suggéré pour 'coller' mes morceaux), mais je vais tester le tien en attendant, merci !

Code:

<table width="200" cellspacing="0" cellpadding="0" border="0" align="center">
    <tbody>
        <tr>
            <td>
            <div><img align="right" src="http://akaiken.free.fr/sanctuaire/blog/menu_g.gif" alt="" /></div>
            </td>
            <td>
            <div id="nav">
            <ul>
                <li><a title="etc.</a></li>
            </ul>
            </div>
            </td>
            <td><img align="left" src="http://akaiken.free.fr/sanctuaire/blog/menu_d.gif" alt="" /></td>
        </tr>
    </tbody>
</table>

repie38 · 2007-11-28 22:46:55

pourquoi ne pas modifier seulement le css du menu de pwg, et d'ajouter dedans les liens que tu veut en plus, plutot que d'essayer de concatener les deux ?

AkaiKen · 2007-11-28 22:48:40

En fait, je voudrais reproduire le design de mon blog, que j'aime bien, et utiliser ce menu comme lien entre toutes les différentes parties, puis le menu horizontal de PWG contiendrait les liens internes (comme le second menu du blog propose le fil RSS, la liste des articles, etc.).

Edit : le tableau fonctionne ! (pourquoi mon ancien code ne marchait-il pas ici... les mystères de l'html restent entiers pour moi)

Dernière modification par AkaiKen (2007-11-28 22:52:57)

repie38 · 2007-11-28 22:50:54

ah ok, j'croyais que tu voulais tout mettre sur une ligne.

P@t · 2007-11-28 23:01:10

Ta solution était la bonne akaiken...
Il te manquait juste un float:left...

La dessus, rien à changer....

<div id="nav">
<ul>
<li><img src="http://akaiken.free.fr/sanctuaire/blog/menu_g.gif" alt=""></li>
<li><a title="Vers le blog du Griffon" href="http://akaiken.over-blog.com/">Blog</a></li>
<li><a title="Vers la galerie" href="http://akaiken.free.fr/site">Galerie</a></li>
<li><a title="Vers mon site deviantART" href="http://akaiken.deviantart.com">deviantART</a></li>
<li><a title="Vers une présentation de votre serviteuse" href="http://akaiken.free.fr/site/index.php?/additional_page/1">Présentation</a></li>
<li><a title="Vers les liens de tas de gens que j'admire" href="http://akaiken.over-blog.com/article-3998763.html">Liens</a></li>
</ul>
</div>

Rajouter le float:left:

#nav li {
float : left;
margin : 0;
padding : 0;
display : inline;
letter-spacing : 0;
font-size : 12px;
}

AkaiKen · 2007-11-28 23:23:21

Hum, je ne vois pas trop les changements apportés par le float :left, c'est censé faire quoi ?

Sinon, ça marche bien, sauf que l'extrémité de droite est décalée d'un pixel vers le haut :'(

J'ai écrit ça : (c'est le code entier de l'entête)

Code:

<div align="center"><img alt="Au Griffon griffonnant, dessins, gribouillages, peintures numeriques (chez AkaiKen)" src="http://akaiken.free.fr/sanctuaire/blog/banni%c3%a8re-griffin-dessinant-new.jpg"/>
<table style="border-spacing:0px;"><tr>
<td>
    <img style="position:relative;top:1px;" src="http://akaiken.free.fr/sanctuaire/blog/menu_g.gif" alt=""/>
        </td>
            <td id="nav">
            <ul>
                <li><a href="http://akaiken.over-blog.com/" title="Vers le blog du Griffon">Blog</a></li>
                <li><a href="http://akaiken.free.fr/site" title="Vers la galerie">Galerie</a></li>
                <li><a href="http://akaiken.deviantart.com" title="Vers mon site deviantART">deviantART</a></li>
                <li><a href="http://akaiken.free.fr/site/index.php?/additional_page/1" title="Vers une présentation de votre serviteuse">Présentation</a></li>
                <li><a href="http://akaiken.over-blog.com/article-3998763.html" title="Vers les liens de tas de gens que j'admire">Liens</a></li>
            </ul></td>
        <td><img src="http://akaiken.free.fr/sanctuaire/blog/menu_d.gif" alt=""></li></td>          
            </td></tr></table></div>

P@t · 2007-11-28 23:33:22

Je veux bien te donner un coup de main...
Mais le code source de ta page est bourré d'erreurs...
Utilises HTML Validator pour firefox...

Il y a des </li> et </td> en trop...
Et l'affichage sous IE n'est pas le meme... (marge antre les bords)

Dernière modification par P@t (2007-11-28 23:33:38)

Piwigo.org

Annonce

#1 2007-11-28 15:53:11

Menu CSS "Sliding doors"

#2 2007-11-28 20:13:35

Re: Menu CSS "Sliding doors"

Code:

Code:

#3 2007-11-28 20:45:56

Re: Menu CSS "Sliding doors"

#4 2007-11-28 21:15:49

Re: Menu CSS "Sliding doors"

#5 2007-11-28 21:43:25

Re: Menu CSS "Sliding doors"

#6 2007-11-28 22:11:15

Re: Menu CSS "Sliding doors"

#7 2007-11-28 22:34:22

Re: Menu CSS "Sliding doors"

Code:

#8 2007-11-28 22:39:49

Re: Menu CSS "Sliding doors"

#9 2007-11-28 22:42:21

Re: Menu CSS "Sliding doors"

Code:

#10 2007-11-28 22:46:55

Re: Menu CSS "Sliding doors"

#11 2007-11-28 22:48:40

Re: Menu CSS "Sliding doors"

#12 2007-11-28 22:50:54

Re: Menu CSS "Sliding doors"

#13 2007-11-28 23:01:10

Re: Menu CSS "Sliding doors"

#14 2007-11-28 23:23:21

Re: Menu CSS "Sliding doors"

Code:

#15 2007-11-28 23:33:22

Re: Menu CSS "Sliding doors"

Pied de page des forums