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
Bonjour,

Je vous remercie d'avance pour votre aide.

Voila je suis entrain de réaliser un site web pour une association de sérigraphie. Pour le moment je suis plutôt dans les débuts mais le design est définitif.
Celui est extensible et j'ai un problème majeur.

Je possède un cadre au centre de la page, celui ci contient les textes.
J'aimerai que ce cadre soit centré sur la page, quelque soit la taille de l'écran et que la largeur ET la hauteur se redimentionnent de même manière.
Cependant, IMPOSSIBLE de redimensionner la hauteur ET la largeur , ni même la hauteur d'ailleurs. De fait, j'arrive à peu près à cadrer la largeur mais pour la hauteur ça ne vas pas.

Je vous donne le lien vers la page en construction;
http://lesatelierskontakt.com/projetspedagogiques.php#

Je tiens à préciser que cela ne fonctionne que pour les navigateurs récents pour le moment. Enfin c'est en construction.

C'est surement un truc simple car beaucoup de sites sont construits comme cela et j'ai consultés pas mal de tuto etc... mais je ne trouve pas la solution.

Merci encore!




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
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é
0
unker Messages postés 61 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 7 octobre 2013
15 juin 2013 à 14:01
Salut inspiring,

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
0
inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
15 juin 2013 à 14:55
je regarde ça et repost un peu plus tard ;)
0
inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
15 juin 2013 à 16:55
je t'ai rectifié un peu la structure en me basant sur la page actuelle.

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
0
unker Messages postés 61 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 7 octobre 2013
15 juin 2013 à 17:58
Merci beaucoup c'est vraiment sympa!

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?
0
inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
15 juin 2013 à 18:04
Tiens, tu peux récupérer l'archive sur mon site

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 ?
0