28220 sujets

CSS et mise en forme, CSS3

Position, marge négative, et IE

Bonjour à tous,

J'essaye (a moitier comme exercisse) de transformer un site fait en flash, en un site css, je voudrais garder un design le plus proche possible de celui fait initialement en flash, et conserver autant d'animation que possible (en fait surtout pour pouvoir dire: regardez, on peut faire exactement la même chose en css ) Smiley lol

Bon c'était pour l'intro
vous pouvez voir les 2 sites ici pour vous faire une idée:


en flash

en html

et maintenant mon probleme de positionement:
J'utilise la propriété hover d'un lien pour afficher l'image correpondante au survol et si je veux repsecter le design flash original, je dois ensuite afficher l'image au dessus de la liste de lien

 <div id="photo">
                  images
                  <a href="./index.php?contenu=air&langue=fr">
                          1
                          <span>
                                  <img src="images/chambres/air/air1b.jpg">
                          </span>
                  </a>
                  <a href="./index.php?contenu=air&langue=fr">
                          2
                          <span>
                                  <img src="images/chambres/air/air2b.jpg">
                          </span>
                  </a>
                  <a href="./index.php?contenu=air&langue=fr">
                          3
                          <span>
                                  <img src="images/chambres/air/air3b.jpg">
                          </span>
                  </a>
                  <a href="./index.php?contenu=air&langue=fr">
                          4
                         <span>
                                  <img src="images/chambres/air/air4b.jpg">
                          </span>
                  </a>
          </div>


ce qui affiche la liste suivante:

images 1 2 3 4

au survol d'un numéro une photos s'affiche au dessus de la liste (celle du span)

mais je ne sais pas comment faire:

placer la photo avec une marge négative: fonctionne sous FF mais pas IE
placer la photo en absolute: fonctionne avec les 2 navigateurs mais très nul dès qu'on redimenssionne la fenetre ou qu'on change de résolution.

est - ce possible de faire ce que je veux, ou ferais je mieux d'abandonner?
un truc, une astuce?
d'avance merci
Modifié par yobuntu (27 Mar 2007 - 18:41)
Je n'ai pas regardé tout ton problème mais il me semble que si tu déclares ton contenu-centre en position relative, tu pourras placer tes images en absolu snas problème de redimensionnement de la fenêtre.
En effet, un élément positionné se place par rapport à son premier parent positionné.
super ça
je l'avais vu dans un tuto d'ici en plus mais j'avais pas bien compris, je croyais qu'il fallait que l'element parent ait le même type de positionement.

Merci!
yobuntu a écrit :
J'essaye (a moitier comme exercisse) de transformer un site fait en flash, en un site css, je voudrais garder un design le plus proche possible de celui fait initialement en flash, et conserver autant d'animation que possible (en fait surtout pour pouvoir dire: regardez, on peut faire exactement la même chose en css ) Smiley lol

Tu veux dire que tu vas tenter de reproduire l'ergonomie absolument calamiteuse de ce site en Flash ? J'ai du mal à comprendre pourquoi quelqu'un de sensé voudrait faire ça. Smiley sweatdrop

Non sérieusement, ce site est une plaie. Le choix d'un mini-format est sans doute un des points qu'il faudrait remettre à plat dans le cadre d'une refonte. Le système de menu et autres éléments actifs, peu régulier, gagnerait à être un peu rationalisé.

En dehors des effets à ne surtout pas reproduire (les effets pour dessiner les contenus au lieu de les charger dès le départ, par exemple... c'est vrai quoi, c'est pas comme si le visiteur avait autre chose à faire que d'attendre que le contenu de chaque page se dessine pour pouvoir le lire...), il y a les effets qui seront difficilement reproductibles en HTML/CSS. Le menu de navigation avec ombre qui se ballade, par exemple, c'est même pas la peine d'y penser.

Ah oui, pour la photo avec nuages qui défilent : garder une animation Flash pour la photo elle-même. L'effet est sympathique, et Flash est clairement adapté à la gestion de tels éléments de contenu ou de décoration.


Edit : ah ok, je constate que le site HTML n'est pas une tentative illusoire de « faire la même chose » en HTML/CSS. Mes avertissements ci-dessus sont donc en partie inutiles. Smiley cligne

Pour la série d'images réactives, il sera préférable de travailler avec du Javascript.
Javascript désactivé : on montre une seule image (la plus représentative).
Javascript activé : on génère les liens qui permettent (en JS toujours) d'appeler les autres images.
Modifié par Florent V. (27 Mar 2007 - 21:14)
Sujet clos
Aller à