18041 sujets
Questions générales et questions de débutants
Bonjour aussi...
Oui, c'est possible.
Pour être sûr que le div s'affiche par dessus les autres éléments de la page il faudra jouer sur z-index. Le div, lui, sera positionné de préférence en absolu et ses coordonnées seront définie au hazard par un langage de programmation (côté serveur = php ou côté client = JS).
Par contre, je ne suis pas sûre que ton idée soit vraiment bonne d'un point de vue ergonomie, design ou accessibilité
Oui, c'est possible.
Pour être sûr que le div s'affiche par dessus les autres éléments de la page il faudra jouer sur z-index. Le div, lui, sera positionné de préférence en absolu et ses coordonnées seront définie au hazard par un langage de programmation (côté serveur = php ou côté client = JS).
Par contre, je ne suis pas sûre que ton idée soit vraiment bonne d'un point de vue ergonomie, design ou accessibilité
Bonjour,
J’avoue que ta demande est surprenante, dans un monde où les designers cherchent plutôt à avoir un design qui colle au pixel près à leur maquette photoshop quel que soit le navigateur, du coup je suis piquée de curiosité : pourquoi une telle demande ?
Pour ce qui est de la solution, je n’ai pas une solution toute faite, mais quelques pistes d’idées :
- un z-index élevé te permettrait de faire passer ton logo au-dessus de tout le contenu du site
- un position :absolute ; permettrait de le placer n’importe où
- on pourrait imaginer mélanger le tout avec un javascript qui se serve de Math.random() (donne un nombre aléatoire entre 0 et 1) pour donner un top :xx ; et left :xx ; à ton div placé en position aboslute, générant ainsi aléatoirement les coordonnées.
Par contre, j’ai un peu peur que ton idée pose problème en termes d’utilisabilité et d’ergonomie : si le logo est positionné aléatoirement comme tu le dis toi-même « au-dessus des autres contenus » tu perds le contrôle, il risque de couvrir, du moins visuellement, une partie « importante » du site. Imagine que ton logo couvre un bout de navigation, l’utilisateur serait obligé de recharger la page, pas très pratique.
Après tu peux toujours imaginer un « faux » aléatoire, à savoir, donner une liste de valeurs de coordonnée prédéfinies sur ta page où ton logo pourra se placer sans que ça gène l’utilisateur, avec un javascript qui pioche aléatoirement dans cette liste de valeurs (ça doit bien exister quelque part ^^).
Edit : graou grilled by Laurie-Anne
Modifié par InpIxelItrust (20 Sep 2010 - 14:08)
J’avoue que ta demande est surprenante, dans un monde où les designers cherchent plutôt à avoir un design qui colle au pixel près à leur maquette photoshop quel que soit le navigateur, du coup je suis piquée de curiosité : pourquoi une telle demande ?
Pour ce qui est de la solution, je n’ai pas une solution toute faite, mais quelques pistes d’idées :
- un z-index élevé te permettrait de faire passer ton logo au-dessus de tout le contenu du site
- un position :absolute ; permettrait de le placer n’importe où
- on pourrait imaginer mélanger le tout avec un javascript qui se serve de Math.random() (donne un nombre aléatoire entre 0 et 1) pour donner un top :xx ; et left :xx ; à ton div placé en position aboslute, générant ainsi aléatoirement les coordonnées.
Par contre, j’ai un peu peur que ton idée pose problème en termes d’utilisabilité et d’ergonomie : si le logo est positionné aléatoirement comme tu le dis toi-même « au-dessus des autres contenus » tu perds le contrôle, il risque de couvrir, du moins visuellement, une partie « importante » du site. Imagine que ton logo couvre un bout de navigation, l’utilisateur serait obligé de recharger la page, pas très pratique.
Après tu peux toujours imaginer un « faux » aléatoire, à savoir, donner une liste de valeurs de coordonnée prédéfinies sur ta page où ton logo pourra se placer sans que ça gène l’utilisateur, avec un javascript qui pioche aléatoirement dans cette liste de valeurs (ça doit bien exister quelque part ^^).
Edit : graou grilled by Laurie-Anne
Modifié par InpIxelItrust (20 Sep 2010 - 14:08)
Effectivement dans un monde trop strict, un peu de fantaisie de fait pas de mal!!
Oui, j'ai bien pensé que mon logo couvre une partie du contenu, ça fait partie de la subtilité et de la fantaisie!
J'arrive assez facilement à créer des données aléatoires en javascript en fonction de la taille de la fenêtre, par contre je ne sais pas comment faire pour communiquer ces données au positionnement du div... Quelqu'un a-t-il la solution?
Modifié par samroud (20 Sep 2010 - 14:52)
Oui, j'ai bien pensé que mon logo couvre une partie du contenu, ça fait partie de la subtilité et de la fantaisie!
J'arrive assez facilement à créer des données aléatoires en javascript en fonction de la taille de la fenêtre, par contre je ne sais pas comment faire pour communiquer ces données au positionnement du div... Quelqu'un a-t-il la solution?
Modifié par samroud (20 Sep 2010 - 14:52)
samroud a écrit :
Oui, j'ai bien pensé que mon logo couvre une partie du contenu, ça fait partie de la subtilité et de la fantaisie!
Soit. Je ne suis néanmoins pas convaincue que l'utilisateur qui ne va pas réussir à lire un bout de contenu, ou pire, ne pas réussir à naviguer sur ton site, soit convaincu en se disant "oui bon j'arrive pas à cliquer, mais c'est cool j'apprécie la fantaisie de ce site je reviendrais" (peut-être au moins le prévenir qu'il suffit de re-actualiser la page pour déplacer le logo dans ce cas ?)
Après Laurie-Anne et moi t'avons mis en garde, à tes risques et périls héhéhé
Pour ce qui est de communiquer les données au positionnement de ton div, tu peux le mettre en position:absolute, sans remplir de top, left ou autre dans la css.
Puis en javascript (peut-être php coté serveur aussi) tu vas créer une fonction qui va passer des propriétés css supplémentaires à ton élément (donnes lui un id, ça sera moins complexe à récupérer en javascript). Un petit exemple ici de comment on change une propriété css.
Dans ton cas, il faudrait adapter avec top ou left ( liste des propriétés style object ) et je pense lancer sur l'évènement onload plutôt que onclick.
Sinon tu peux utiliser la même méthode mais en jquery pour changer les propriétés de ton élément. Là encore, le lancer avec .ready()
Désolé j'ai que de la doc en anglais, mais tu peux en trouver en français avec ces principale fonctions.
Bonne chance
Par contre, dans http://www.w3schools.com/jsref/dom_obj_style.asp, rotate n'existe pas... comment faire pour appeler rotate depuis javascript?
samroud a écrit :
Ok, merci!
Ne vous inquiétez pas pour moi pour la question ergonomie... je gère!
Gniii que de teasing, veux voir la page moi !!!!
Pour la rotation j'ai trouvé ce plugin jquery mais j'avoue que j'ai pas testé, à voir si tu peux faire un mixe (si le plugin fonctionne) entre le plugin, et un chiffre généré aléatoirement entre 0 et 360.
Bon sinon l'autre idée, serait encore une fois un "faux" aléatoire, avec une "banque" d'images pré-retournées que tu switch aléatoirement à chaque chargement. L'avantage c'est que tu peux contrôler la rotation sous photoshop (ou autre) et t'assurer que ton image est pas totalement atroce (ou entièrement à l'envers, c'est chiant de lire un logo à l'envers!), l'inconvénient c'est un long boulot de préparation et un gros alourdissement des pages je pense (mais ça ça reste à voir).
Dernière question : tu veux mettre ça sur toutes les pages ou juste la page d’accueil ?