Design extensible width-height
Fermé
unker
Messages postés
61
Date d'inscription
vendredi 17 mai 2013
Statut
Membre
Dernière intervention
7 octobre 2013
-
Modifié par unker le 14/06/2013 à 20:15
unker Messages postés 61 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 7 octobre 2013 - 17 juin 2013 à 18:01
unker Messages postés 61 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 7 octobre 2013 - 17 juin 2013 à 18:01
A voir également:
- Design extensible width-height
- Maeva vient de créer son entreprise de design à montréal ✓ - Forum Loisirs / Divertissements
- Memup feel design - Forum Matériel & Système
- Mon pc ne reconner pas memup feel design - Forum Disque dur / SSD
- Disque dur multimédia memup - Forum Disque dur / SSD
- Stb refsw design c'est quoi - Forum MacOS
1 réponse
inspiring
Messages postés
1813
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
265
Modifié par inspiring le 15/06/2013 à 13:47
Modifié par inspiring le 15/06/2013 à 13:47
Tu peux partir sur une architecture responsive, en utilisant les media queries.
Ton principal probleme de gestion de la hauteur vient surtout du contenu. Si ta largeur s'adapte à celle de l'écran, ton contenu reste sur un affichage en intégralité, augmentant donc cette hauteur en fonction de la réduction de la largeur.
La solution est de définir une modification de la taille de police proportionnelle à la taille de l'écran, mais avec cette pénalité sur les petit écran d'avoir un texte illisible (trop petit).
Les média queries peuvent te permettrent de tous définir en taille fixe (px), positionnement et width x height, mais toujours avec ce problème du contenu affiché.
Autre point, défini ta classe .cadrecentral en margin:150px auto; (par exemple)
Tes marges actuelles, fixes, déstructure le cadre au retrecissement de fenetre (il sort)
Ce dernier devra d'ailleurs etre placé dans un container l'empechant de glisser sous la colonne de gauche
Pense aussi a virer le overflow:hidden défini pour le body, qui bloque le scroll vertical (sauf si c'est voulu)
Au final, je pense surtout que tu devrai retravailler l'architecture générale, en évitant les positionnement absolu.
Si tu souhaite un site multi-résolution (responsive), le positionnement absolu est son ennemi juré
Ton principal probleme de gestion de la hauteur vient surtout du contenu. Si ta largeur s'adapte à celle de l'écran, ton contenu reste sur un affichage en intégralité, augmentant donc cette hauteur en fonction de la réduction de la largeur.
La solution est de définir une modification de la taille de police proportionnelle à la taille de l'écran, mais avec cette pénalité sur les petit écran d'avoir un texte illisible (trop petit).
Les média queries peuvent te permettrent de tous définir en taille fixe (px), positionnement et width x height, mais toujours avec ce problème du contenu affiché.
Autre point, défini ta classe .cadrecentral en margin:150px auto; (par exemple)
Tes marges actuelles, fixes, déstructure le cadre au retrecissement de fenetre (il sort)
Ce dernier devra d'ailleurs etre placé dans un container l'empechant de glisser sous la colonne de gauche
Pense aussi a virer le overflow:hidden défini pour le body, qui bloque le scroll vertical (sauf si c'est voulu)
Au final, je pense surtout que tu devrai retravailler l'architecture générale, en évitant les positionnement absolu.
Si tu souhaite un site multi-résolution (responsive), le positionnement absolu est son ennemi juré
15 juin 2013 à 14:01
Merci beaucoup pour ta réponse!
Je suis autodidacte pour le moment et j'avoue que j'ai du mal à faire des codes corrects.
J'ai deja créer un site web pour un collège mais celui-ci était assez basique et comporte pas mal de soucis encore... Enfin pour ce nouveau site j'essaye de faire quelque chose de plus correct.
J'ai bien lus ton commentaire et je pense comprendre tes propos et je vais voir ça, je m'y remet lundi.
Il faut que je refasse toute l'architecture c'est certain, là ce n'est qu'une page de "test" du design, des fonctionnalités possible etc...!
Alors ok pour retravailler le design mais à part le positionnement absolute à éviter, que faire de plus?
D'ailleurs, il faut donc poser en relative plutot que absolute? Mais comment puis-je indiquer des z-index si c'est en positionnement relatif...?
Il est encore tant de modifier les choses donc toute aide est la bien venue!
Merci encore
15 juin 2013 à 14:55
15 juin 2013 à 16:55
Il y a bcp d'erreur que tu doit absolument rectifier dans ta manière de coder :
- On appelle toujours les fichiers js et css dans le <head></head> de la page, jamais dans le <body> (sauf exception de script js)
- On appelle pas plusieurs fois le meme fichier, là tu appelles jquery au moins 3 fois
- Attention au fermeture de balise, tu as pas mal d'erreur de code qui pourrais poser des problèmes
- tu te complique bcp trop la tache avec des règles uniques pour chaque élément, essai de définir des règles généralisées
- evite les majuscule dans les noms de fichiers, tu pourrai rencontrer des problèmes.
Je ne sais pas trop comment je te post le code ? ici, en MP, une archive téléchargeable ? Dis moi
C'est une base, tu as encore pas mal de travail à fournir mais elle te permet d'éviter le positionnement en absolute et peut etre completé en CSS pour devenir responsive
15 juin 2013 à 17:58
C'est vrai qu'il y a toutes ces erreurs et encore d'autres et je pensais rectifier ça à la fin de la construction de la base mais j'ai tendance à y oublier et du coup à prendre des chemins à rallonge etc...
Je veux bien que tu donne une archive telechargable si tu le veux bien.
En tout cas c'est super cool de ta part.
ps: je sais pas si tu as vus j'ai essayer de mettre une galerie de photo qui devra contenir une page en superposition qui décrit les ateliers etc... mais la page apparait sur un click sur l'image alors que pour faire bouger le diapo il faut le faire avec un clic aussi du coup j'aimerai changer l'action "bouger le diapo" par click pour un Onmouseover. Possible en modifiant le javascript?
15 juin 2013 à 18:04
http://dbmwebdesign.fr/Download/kontact-retif.rar
tu as encore du boulot dessus, je n'ai inclus que la structure
j'ai pas bien compris la question pour la galerie, peux tu préciser ?