[golive] positions des calques

[JediMac]

LO,

j'essaie de faire un page web qui me semble toute simple, mais ça coince. J'y connais que couic en html, je me tourne donc vers vous.
Voici la mise en page telle que je l'ai choisie, dans Golive :

Mais voici ce que ça devient dans l'aperçu de golive :

Ou dans Safari :

J'ai procédé comme ça :
un tableau d'une cellule, centré dans la page, avec une image dans la cellule (et non en fond), c'est la carte.
Chaque jour est dans un calque.

Mais vous voyez que les calques ne restent pas à leur place ces fouteurs de souk

.
J'ai lu qu'il fallait éviter les calques, mais je ne vois pas tellement comment faire autrement pour positionner mes jours où je le souhaite. Et si j'ai mis les jours "au-dessus" du fond de carte et non inclus dans le fond, c'est qu'il y a un petit effet rollover qui lui fonctionne (le texte passe du jaune au rouge

).

Alors comment fixer les claques ou aboutir à la mise en page que j'aimerai avoir ?

Merci !

 

[JediMac]

Et en mettant une grille de mise en page, ça améliorerait les choses ? J'm'en va essayer !

 

[JediMac]

Ben pas mieux avec une grille de mise en page. En fait quand j'élargis la fenêtre sous Golive (en mode aperçu ou mise en page) ou sous Safari, la carte se déplace pour rester au centre, mais pas les "boites flottantes" qui elles restent fixent et donc décalées par rapport au nouvel emplacement de la carte.

Please help me ! Y'a quelque chose à cocher ou une autre méthode pour parvenir au résultat que je souhaite.
Oui d'accord, la meilleure est d'apprendre l'html, xml et consort

, mais j'ai pas le temps maintenant et j'aimerai que ce site des plus simples il me semble, soit mis en ligne prochainement.

 

[macmarco]

Ok, ok !
Effectivement, oublie les calques !
Donc fais plutôt comme ça :
Un premier tableau de 2 colonnes.
Dans la première colonne tu mets un "espaceur"(spacer) en gif transparent d'un pixel sur un pixel et que tu "étires" en hauteur sur toute la hauteur de ta carte et tu lui attribues une largeur d'un pixel(pour la cellule tu ne lui attribues que la largeur et tu laisses la hauteur en "automatique").
Ensuite, tu mets ta carte en fond de la 2ème cellule.
Puis, dans cette cellule tu insères un nouveau tableau(de 6 lignes si j'ai bien compté) où tu places tes "boutons" "jour1" etc(pour les placer exactement tu peux les faire dans Photoshop de la largeur la carte et les "enregistrer pour le web" en gif transparent) ...
Là, ça restera en place quelque soit le navigateur !

 

[JediMac]

Merci ! Mais quelle pataquesse pour faire une mise en page des plus simples. J'espère que les pros ont d'autres techniques dans leur sac, parce que sinon ça doit vite être compliqué de faire une mise en page un peu jolie

.
Sinon, je ne vois pas pourquoi ce "spacer". Quelle est sa fonction ?

 

[macmarco]

Bon, attends, j'ai plus simple !

(Le spacer c'est parce que la valeur "height" pour les tableaux n'est pas conforme aux normes : http://www.w3.org/ )
Donc tu places tes boutons dans Photoshop, tu mets des repères puis tu passes à ImageReady, tu crées des tranches à partir des repères(cf image) et tu eenrgistres les deux états de tes boutons etu les insères dans un tableau de 6 lignes(les cellules contenant des images, tu ne devrais pas avoir besoin de l'espaceur...)
Voilà, voilà !
Essaies comme ça !

 

[JediMac]

J'ai quand meme continué avec la méthode des tableaux imbriqués, mais pour finir ça foire complétement. La position n'est pas respectée non plus, même si les boutons se déplacent lors d'un étirement de la page. Dans IE c'est la cata. Mes cellules, au lieu d'être les unes en dessous des autres sont sur un axe horizontal

. Quand même c'est dingue ces changements. C'est Golive ou les navigateurs qui mettent un souk pareil.
Bon j'essaie la seconde méthode

.

 

[macmarco]

Il ne faut pas mettre en 100% !

Tu pourrais poster le code source de ta page ?

 

[JediMac]

Il ne faut pas mettre en 100% !

Aucune de mes cellules est un %age, elles ont toutes une cote en pixel.
Voici ce que j'ai fait :
1 cellule dont le fond est la carte et dont les dimensions sont celles de la carte.
dans cette cellule, un autre tableau de 1 cellule, avec une image insérée, mon bouton. j'ai demandé à ce que l'alignement dans la grande cellule soit en haut à droite. Du coup, la 2è cellule était positionnée en haut à droite. En jouant sur les hauteur/largeur de la 2è cellule, j'ai amené le bouton là où il faut, sachant que l'alignement dans la 2è cellule est bas/droite.
Ensuite saut de ligne et je mets un 3ème tableau d'une cellule qui reçoit le 2è bouton et je suis la même méthode. Etc, ect. Cette fois ci, l'aperçu de Golive est bon, mais une fois dans les butineurs ça ne va plus...

 

[macmarco]

Ce sont les sauts de ligne qui te foutent le souk !
Voilà comment faire :
un tableau de 6 lignes, un bouton avec ses deux états dans chaque cellule et ça devrait rouler !

 

[JediMac]

Ce sont les sauts de ligne qui te foutent le souk !
Voilà comment faire :
un tableau de 6 lignes, un bouton avec ses deux états dans chaque cellule et ça devrait rouler !

Ben non, parce que je ne peux pas donner une largeur spécifique à une cellule d'un tableau sans que les autres ne la prennent aussi ! Si ???
Du coup, impossible de placer des objets qui sont décalés à la fois verticalement en horizontalement avec cette technique.

 

[macmarco]

Attends, je te prépare un petit tuto....

 

[JediMac]

Attends, je te prépare un petit tuto....

Oh ben non ! Ca me gêne

.
Sinon, j'en suis au tranchage selon la méthode 2. Mais je me demandais si ça n'allait pas être lourd à charger et si les rollovers allaient être rapides, vu les tranches à afficher ? A moins que je ne débite tout ça en puzzle pour ne faire des rollovers que sur les jours et pas sur toute une tranche...
C'qu'on s'amuse !

 

[macmarco]

En fait, il y a plusieurs solutions pour ton problème...
En voici une : http://jmcgraph.com.free.fr/macg/padawan/voulu.html

Donc, si tu as peur que ce soit trop lourd, tu peux déjà jouer sur l'optimisation(l'exemple est optimisé avec les paramètres "maximum", pour que tu voies si tu trouves ça trop lourd) "maximum", "haut", "moyen", "bas"...
Tu peux effectivement aussi faire du puzzle !

Une autre solution consiste à utiliser l'mage en fond de tableau et à découper seulement les boutons que tu insères dans des tabeaux de deux colonnes(ce qui te permet de moduler les largeurs de cellules pour caler tes images) eux-mêmes insérés dans chaque cellule du tableau contenant l'image de fond.
Sinon, si seul le texte est censé réagir au survol, tu peux utiliser une feuille de style, mais là, il faut avoir des bases html...

le texte étant calé de la meme manière que les images dans l'exemple précédent...

 

[JediMac]

Merci ! Je vais voir ça demain.
Bonne soirée Master !

 

[macmarco]

Merci ! Je vais voir ça demain.
Bonne soirée Master !

 

[pulpnet]

Salut, pour moi le plus simple c'est une grille de mise en page avec comme fond de ta grille ton image principale (plan), en image de fond bien sur, et sur ta grille tu poses tes images ou tu le veux.
Normalement ca ne doit pas bouger comme ça !

A+

 

[JediMac]

Ben ça ne marche pas !!!

Dans ton exemple, les rollovers fonctionnent sur toute une bande de l'image et pas seulement sur les jours. Je me suis donc dit, comme hier, suffit de découper plus finement l'image pour ajuster les zones "rollover" aux jours. Mais c'est pas bon non plus !!! Parce que si je fais ça, et comme les jours ne sont pas alignés verticalement, pour zoner un jour, j'en tranche un autre en deux et pour zoner un 3ème jour, je tranche les autres en 3, puis 4, etc, et ça fait autant de cellules dans un tableau. Du coup dans la page web, quand je passe au-dessus de la cellule qui contient, par exemple, "JO" de jour le rollover s'applique uniquement à ces lettres et pas au reste du mot. Donc ça va pas non plus !

Là je ne vois plus

! Ca devrait quand même être facile de faire ce style de page sans connaître le html non

!

 

[JediMac]

Salut, pour moi le plus simple c'est une grille de mise en page avec comme fond de ta grille ton image principale (plan), en image de fond bien sur, et sur ta grille tu poses tes images ou tu le veux.
Normalement ca ne doit pas bouger comme ça !

A+

Il me semble avoir déjà essayé ça, mais je ne sais plus. Je me mélange les neurones avec toutes ces bidouilles. Je retourne donc tenter cette méthode.

 

[macmarco]

Tu peux fusionner les tranches...