28220 sujets

CSS et mise en forme, CSS3

salut,
j'ai un problème que je n'arrive pas à résoudre, et si je l'avais résolu je donnerais ici la solution parce que c'est trop trop : dans une div, des images cliquables doivent rester en ligne pour générer un ascenseur horyzontal.
aucun problème dans Firefox, IE, ou Opéra sur PC, aucun prob. dans Safari sur Mac, mais ça marche pas dans IE sur Mac... (et en plus j'ai pas de Mac)
j'ai mis en ligne un exemple concret : http://choc03.free.fr/, faut cliquer sur un lien qui ouvre une nouvelle fenêtre, et cette fenêtre est sensée avoir un ascenseur vertical pour du texte, un ascenseur horyzontal pour les images...

merci à tous
Modifié par chankalan (21 Oct 2005 - 09:32)
je mets ici le code htm :
<div id="aigalerie">
     <div id="igalerie" class="vignette">
          <a href="#" onClick="afficher01()"><img src="01.jpg" width="133" height="85" alt="" /></a>
          <a href="#" onClick="afficher02()"><img src="02.jpg" width="70" height="85" alt="" /></a>
          <a href="#" onClick="afficher03()"><img src="03.jpg" width="70" height="85" alt="" /></a>
          <a href="#" onClick="afficher04()"><img src="04pt.jpg" width="44" height="85" alt="" /></a>
          <a href="#" onClick="afficher05()"><img src="05pt.jpg" width="45" height="85" alt="" /></a>

          <a href="#" onClick="afficher06()"><img src="06pt.jpg" width="128" height="85" alt="" /></a>
     </div>
</div>


et ici le css:

#titregalerie {
width: 205px;
height: 20px;
margin-top: 40px;
margin-left: 70px;
}
#atgalerie {                       /* le bloc de l'ascenseur du texte */
position: absolute;
width: 205px;
height: 215px;
top: 80px;
right: 20px;
overflow: auto;
}
#tgalerie {                        /* le bloc de texte */
width: 175px;
}
#aigalerie {                       /* le bloc de l'ascenseur des images */
position: absolute;
width: 260px;
height: 120px;
overflow: auto;
top: 345px;
left: 20px;
}
#igalerie {                        /* le bloc des images */
height: 100px;
white-space: nowrap;
display: inline;                   /* alignement/espacement des vignettes dans les ascenseurs */
}
.listeordonnée {

}
   /* fin MEF de la page galerie, par thème ou par artiste */
   /* MEF de la page de l'oeuvre */
#affiche {                         /* mef de l'oeuvre */
position: absolute;
width: 490px;
height: 450px;
top: 15px;
left: 50%;
margin-left: -245px;
text-align: center;
}
#legende {                         /* mef de la légende */
position: absolute;
bottom: 7px;
left: 10px;
}
#fermer {                          /* mef du la mention fermer la fenêtre */
position: absolute;
font-size: 70%;
height: 23px;
margin-top: 495px;
bottom: 7px;
right: 10px;
text-align: right;
}

Modifié par chankalan (19 Oct 2005 - 17:58)
Je n'ai pas de mac, mais je voulais juste te faire une remarque, je trouve que ca fait trop de fenêtre ouverte pour un meme site Smiley ohwell Regarde ici il y a une solution pour eviter ce que tu fait (pop-up qui s'affiche sur la meme page).
Administrateur
Hello chankalan,

Voudrais-tu bien relire les règles du forum en ce qui concerne la façon d'afficher les codes dans tes messages ?
Merci ensuite de modifier ton message précédent en appliquant la recommandation Smiley smile

PS : je déplace dans le salon CSS
Modifié par Raphael (19 Oct 2005 - 16:18)
je connais ce tut et je l'ai employé déjà quand c'était possible : ici il s'agit d'une galerie d'art et il y a beaucoup d'artistes et beaucoup d'oeuvres à indexer, alors j'ai pris la solution des pop-up : je ne peux pas tout mettre sur un seule page...
enfin ça ne poserait pas de problème de charger toute la galerie même si tu regardes qu'une image ? les petites connexions seraient larguées non ?
Oui c'est vrai, enfin ouvrir 300 pop-up c'est embetant , surtout qu'on est pas prévenu (ou j'ai mal vu). Enfin je ne peux pas t'apporter plus d'aide, As tu lu ce que dis Raph ? =>
Raphael a écrit :
Voudrais-tu bien relire les règles du forum en ce qui concerne la façon d'afficher les codes dans tes messages ?
Merci ensuite de modifier ton message précédent en appliquant la recommandation
oui j'ai lu, je suis désolé et je suis en train de chercher dans les règles du forum... j'y travaille......
ça y est, je risque pas d'oublier !
Modifié par chankalan (19 Oct 2005 - 17:59)
Super_baloo8 a écrit :
enfin ouvrir 300 pop-up c'est embetant , surtout qu'on est pas prévenu (ou j'ai mal vu)

en fait c'est un exemple, c'est pas un site terminé que tu vois sur cette page, parce que j'ai simplifié pour voir le problème qui arrive sur Safari Mac...en fait c'est pas sur IE, mais comme moi, y'a pas beaucoup de monde qui possède un Mac ici ...?
Si tu utilises des popup, fais-en au moins des qui ne soient pas trop stupides...

En fait, le problème est que la propriété overflow ne fonctionne pas bien sous IE Mac (voire même pas du tout).

En fait, le contenu de toute balise affectée par cet overflow ne s'affiche simplement pas. Donc pour que ça fonctionne sous Mac, il va te falloir les enlever ou alors utiliser le hack suivant :

/* \*/ overflow: auto; /* IE Mac Hack */


(Sans jeu de mot avec le "Mac Hack" hein Smiley biggol )

Donc sur IE Mac, il prend le "\*" comme un échappement de l'étoile, et considère donc le overflow comme un commentaire.

C'est la seule solution pour garder en état ton système, mais évidemment, je te conseille fortement de trouver une autre méthode, parce que c'est plutôt moyen je trouve ; déjà qu'on ne peut pas redimensionner le popup, on ne peut pas l'ouvrir dans un nouvel onglet (c.f. le lien plus haut), et puis je pense que graphiquement parlant, et même ergonomiquement, on peut trouver bien mieux...
ok, je sais pas si tu as un Mac, mais on vient de me dire que le problème n'es pas sur IE mais sur Safari... et je peux pas vérifier...
le white-space:nowrap n'est pas pris en compte....
faut-il que je fasse un tableau ?
(pour ma part, je m'occupe pas du graphisme, les choix sont bouclés, mais je trouve pas ça stupide ces 2 ascenseurs, alors j'essaie de le faire, mais seulement si ça marche pas je change...)
et merci pour ton aide
Modifié par chankalan (20 Oct 2005 - 16:52)
Bonjour,
je viens de tester :
Sous Safari (2.0 (412)) pas de problèmes (peut être que le problème se pose sur d'autres version ...)
Par contre sur IE mac :
- le lien "fermer la fenêtre" est en haut a droite (au niveau du titre)
- au niveau des assenceurs : en fait les deux apparaissent : horizontal et vertical (il passe à la ligne après 3 images d'ou l'ascenceur vertical)
- on ne peux pas cliquer sur les ascenceurs car ils sont "interceptès" par les liens des images.

Une piste (qui réglera à coup sur le problème de "fermer la fenêtre" et peut être celui des assenceurs) : Pourquoi tout tes blocs sont en position absolue ???
A prioris ce n'est pas nécessaire pour ton design et IE Mac l'interpréte très mal (position:absolute; marche mais top,left ... provoque des gros bugs ...)
Donc essaye de tout replacer avec des bloc en float et en utilisant margin et padding ...
Bonjour,

Il semble que le "fermer la fenêtre" passe mieux sur IEmac, par contre les ascenceurs sont toujours inutilisables. Pour Safari 2 et FF, pas de soucis. Des images pour vérifier :
Firefox
upload/2482-FF.png

IE mac
upload/2482-IEmac.png


Safari
upload/2482-safari.png
Modifié par zzzazzz (20 Oct 2005 - 22:55)
merci beaucoup,
en effet c'est mieux pour l'emplacement des boites, mais j'ai pas pu garder la légende callée en bas (et quand y'a plus de texte, le bloc remonte), j'aimais bien ça mais là j'oublie pour l'instant...verrais plus tard....
heuuuuuu, c'est la panne alors, la vraie panne sèche, l'impasse... je vais m'en sortir avec un tableau et pis c'est tout...
je vous tiens au courant demain, salut, et merci Smiley biggrin
alors voilà le tableau : je suis pas sûr que ce soit inévitable, mais j'ai pas la solution maintenant... je verrais plus tard Smiley biggol
merci encore, maintenant ça doit passer correctement non ?
Ca passe, pas de problème pour Safari ni IE Mac ...

Domage d'avoir du utiliser un tableau je suis sur qu'il ne manquait pas grand chose ... mais bon quand on a pas un mac pour tester c'est pas facile de faire autrement ...
je te remercie de ton aide, c'est vrai que c'est dommage mais bon...
à+

(j'ai regardé ton site sur "la cage" : vérifie le lien de téléchargment... ça fonctionne pas chez moi... dommage)
Oups merci, je n'avais pas vu le lien mort ... (en fait la version en ligne est une version un peu "batarde" mix de l'ancien et du nouveau site ... nouvelle version la semaine prochaine ...)