Aide pour CSS à %

Aide pour CSS à % - HTML/CSS - Programmation

Marsh Posté le 03-10-2008 à 19:21:02    

Bonjour,
 
Voilà, je vous présente mon problème. :spamafote:
 
J'ai actuellement un site, que je viens de créer, qui fonctionne à 2 CSS.
Un qui se déclenche si la largeur de l'écran est strictement supérieure à 1279, l'autre sinon.
 
Ce que je voudrais maintenant faire, c'est qu'il n'y ait pas de sélection de page à chaque ouverture de nouvelle page en fait, ce qui laisse une fraction de seconde le site sans CSS, avant de le sélectionner.
 
J'envisageais donc de faire un unique CSS à pourcentages. ;)
 
Disons que j'ai pigé le principe, comment redimensionner "théoriquement" en fonction de la résolution, mais je ne sais pas comment l'appliquer "concrètement" en programmation.
 
Je viens donc demander de l'aide, en espérant que vous soyez emballés !
 
Merci d'avance. :respect:

Reply

Marsh Posté le 03-10-2008 à 19:21:02   

Reply

Marsh Posté le 03-10-2008 à 22:42:15    

Hé bien, t'utilise un pourcentage de l'écran. [:spamafote]
genre tu veux un bloc qui utilise la moitié de l'écran, ben width: 50%; et voilà.


---------------
Ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn
Reply

Marsh Posté le 04-10-2008 à 13:26:37    

Essayer d'adapter l'affichage en fonction de la Res utilisateur, c'est naze, et ça a déjà été discuté 12335³ fois  [:prodigy] (entre autre....pour les utilisateurs qui surfent avec écran en mode portrait)
 
Sinon je ne saisis pas très bien ton problème : un design en largeur fluide s'utilise comme tu l'as précisé dans le titre, en utilisant des %.... [:transparency]  
 
-> http://wiki.mediabox.fr/documentation/css/width


---------------
Easy Ridin'  ⎝⏠⏝⏠⎠  
Reply

Marsh Posté le 05-10-2008 à 12:05:35    

@tholdan : Merci, mais j'ai compris la "théorie", le "principe", mais je ne sais pas l'appliquer en langage informatique. Si je vois vraiment une fois comment il faut faire, ça ira pour la suite, mais je suis dans le flou total. ;)
 
@ANViL : J'ai fait une recherche là dessus mais j'ai rien trouvé sur le forum. :spamafote: J'avais recherché CSS % et CSS pourcentage, et ce qui correspondait était pas vraiment en rapport. :/
Oui, je sais juste qu'il faut utiliser ces %, mais je ne sais pas le faire moi même, c'est mon principal problème. :jap:
Je vais jeter un oeil à ton lien, merci.
 
Merci pour vos réponses!
 
Edit: Sinon, est ce qu'il est possible de créer un cookie qui ne serait valable que le temps du passage du visiteur sur le site ? Qu'il s'efface en quelque sorte une fois que celui ci s'en va. Et une fois que le visiteur revient, la résolution de l'écran est "redemandée" pour adapter le CSS qui va bien.


Message édité par Ryuzaki7 le 05-10-2008 à 12:10:19
Reply

Marsh Posté le 07-10-2008 à 19:09:46    

Up?..

Reply

Marsh Posté le 13-10-2008 à 16:49:14    

Non?.. Allez, une âme charitable !
 
Juste pour m'aider sur une image pour me sortir du pétrin et que je fasse pareil avec les autres... :(

Reply

Marsh Posté le 13-10-2008 à 21:13:59    

[:parisbreizh]


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 14-10-2008 à 12:10:37    

Ah, ça explique tes 6k messages. :)

Reply

Marsh Posté le 14-10-2008 à 12:25:06    

Je vois vraiment pas ce qui te pose problème... A priori t'as déjà fait du CSS, mais on dirait pas.


---------------
Ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn
Reply

Marsh Posté le 14-10-2008 à 12:30:27    

Ryuzaki7 a écrit :

Ah, ça explique tes 6k messages. :)


me moquer des abrutis qui comprennent pas le francais a qui on a deja donné la reponse deux fois?
oui [:romf]


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 14-10-2008 à 12:30:27   

Reply

Marsh Posté le 14-10-2008 à 13:11:20    

@tholdan : Je n'ai pas réellement fait de CSS. Me dire "faut mettre un %", ça m'aide pas à comprendre comment cela marche informatiquement, et la méthode qu'il faut utiliser pour que ça marche. C'est ce que je précisais en haut. ;)
 
@mIRROR : Tu m'fais de la peine. :)
Edit: Et si tu ne sers à rien, évite au moins de repasser sur ce topic, pour montrer qu'il te reste un bout de cerveau. ;)

Message cité 1 fois
Message édité par Ryuzaki7 le 14-10-2008 à 13:13:39
Reply

Marsh Posté le 14-10-2008 à 13:28:51    

Ryuzaki7 a écrit :

@tholdan : Je n'ai pas réellement fait de CSS. Me dire "faut mettre un %", ça m'aide pas à comprendre comment cela marche informatiquement, et la méthode qu'il faut utiliser pour que ça marche. C'est ce que je précisais en haut. ;)
 
@mIRROR : Tu m'fais de la peine. :)
Edit: Et si tu ne sers à rien, évite au moins de repasser sur ce topic, pour montrer qu'il te reste un bout de cerveau. ;)


Google. [:mlc]


---------------
Ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn
Reply

Marsh Posté le 14-10-2008 à 13:37:53    

J'y suis déjà passé par Google... Mais j'arrive pas à appliquer le truc. -.-
 
Je cherche seulement une personne qui pourrait m'aider pour une image du site et me montrer comment ça marche explicitement, pour que je refasse pareil pour toutes...
 
Me dire "Faut mettre un %", ça va pas m'aider.
 
Surtout que c'est pas des % "basiques", mais plutôt du genre :
 
- Si réso > 1279, largeur = 100%
- Si 1024 < réso < 1280, largeur = 70%
- Si réso < 1025, largeur = 50%
 
J'ai dit les chiffres au pif, mais c'est le principe. :spamafote:
'Fin bon.


Message édité par Ryuzaki7 le 14-10-2008 à 13:38:21
Reply

Marsh Posté le 14-10-2008 à 13:43:30    

A mon avis t'as pas bien saisi le concept de pourcentage. Le truc, c'est que techniquement, quelle que soit la résolution, l'apparence sera la même. Fin je peux me tromper mais c'est ce que j'ai compris.


---------------
Ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn
Reply

Marsh Posté le 14-10-2008 à 13:47:33    

Oui, ça c'est que j'ai pu voir partout, et c'est pourquoi je crée ce topic vu que ce n'est pas ce que je voulais faire...
 
Si tu mets les parties du CSS ou ya des images, et que tu mets un script qui choppe la résolution de l'utilisateur et tu en fais une variable 0, 1 ou 2 par exemple.
 
Et après, Si 0, tel %, si 1, tel %, sinon, tel %.
 
Enfin, c'est ce que j'voyais, et je ne sais justement pas si c'est possible. Et si oui, je ne sais pas l'appliquer concrètement. :spamafote:

Reply

Marsh Posté le 14-10-2008 à 13:52:55    

Faudrait peut-être nous fournir un lien, qu'on comprenne ce que tu n'arrives pas à modifier.
 
Parce que là, en gros, si on passe outre le fait que c'est absurde d'utiliser une mise en page en fonction d'une résolution, on ne peut que te dire d'utiliser des valeurs type "50%" au lieu des valeurs absolues type "421px"...

Reply

Marsh Posté le 14-10-2008 à 13:59:16    

Ben, là j'ai pas de lien à donner, c'est en local, mais ça n'aurait aidé en rien pour le coup.
 
L'inconvénient des valeurs absolues : Inadaptées pour les grosses résolutions.
L'inconvénient des % : Je ne souhaite pas que ça prenne tout l'écran avec des grosses résolutions, contrairement aux petites résolutions.
 
Ce que je recherche : Redimensionner les images en fonction de 3 plages de résolution. Si sup à 1280, image de base, si inf à 1024, redimensionner à 50%, sinon, à 70%. :jap:
 
Encore une fois, les valeurs ont été dîtes au hasard...

Reply

Marsh Posté le 15-10-2008 à 20:00:39    

mais c est quoi l interet de cette prise de tete ?
surtout qu a moins que tu aies les ecrans adaptés tu pourras meme pas tester correctement le rendu
une css bien ecrite permet de se passer de la configuration de ton user
si ton image prend disons 30% de la largeur de ta page sur la plus haute definition et bah tu lui fous un width 30% et ca se redimensionnera tout seul sur les autres resolutions
bref t as rien compris a ce qu on te dit depuis le début

 

edit : tab de mairde


Message édité par mIRROR le 15-10-2008 à 20:03:29

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 16-10-2008 à 09:40:07    

J'ai les écrans adaptés pour tester le rendu...
 
Je pense que c'est toi qui n'a pas vraiment compris.
 
Je ne veux pas que l'image soit proportionnelle à la largeur de la page. Mais pour faire un truc comme je veux sans utliser 2 CSS, je ne vois que cette option de % avec d'autres constantes associées.
 
Si l'écran a une largeur strictement supérieure à 1280 :
Largeur de la ban = Largeur écran * 0.7%
 
Si l'écran une largeur strictement inférieure à 1281 :
Largeur de la ban = Largeur écran * 0.8%
 
Ou alors, basé sur le même principe :
 
Image de base de 1200 px
-> Correspond à 1680*1024
 
Si 1680, 100%
Si 1400, 90%
Si 1280, 90%
Si 1024, 80%
Etc selon d'autres valeurs.
 
Les % ne sont pas linéaires avec la largeur d'écran.
 
Seulement, je ne sais pas adapter ça en informatique.
 
Encore une fois, les nombres choisis ne sont pas exacts, en particulier pour le premier exemple. C'est pour illustrer le fait que lorsqu'on a une grosse résolution (en particulier les écrans wide), la largeur de la bannière ne prend pas toute la largeur de l'écran, contrairement aux largeurs moins élevées...
 
http://img521.imageshack.us/img521/3593/exho6.th.jpghttp://img521.imageshack.us/images/thpix.gif


Message édité par Ryuzaki7 le 16-10-2008 à 09:42:03
Reply

Marsh Posté le 16-10-2008 à 16:46:54    

j imaginais bien que c etait un probleme dans ce genre et je te repete que c est une mauvaise idee
tu commences avec la banniere et apres ca va etre quoi ?
surtout qu avec un resize html le resultat est rarement du meilleur effet et il te faudrait une image pour chaque reso
si demain tu changes de banniere, au lieu d en faire une t en feras 5 ou 6
et comme tous les ans ou tous les deux ans t as une reso superieure qui apparait, c est inmaintenable
dans ton cas il faudrait servir tes bannieres par un javascript, mais c est une tres mauvaise idée, de plus en plus de gens surfent avec le js désactivé par défaut. la banniere ne s affichera pas "site d amateur jme barre"
bref dans tous les cas s inquieter de la reso de l utilisateur c ets pas ton job, sinon il y a un probleme. prends exemple sur le header du forum y a un logo avec motif qui se repete pour prendre toute la largeur. ca se fait tout seul pas besoin de cette prise de tete


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 16-10-2008 à 19:52:27    

Je suis graphiste à la base, donc faire une ou six images et les dimensionner comme il faut pour donner un effet que je souhaite, ce n'est pas un problème, c'est juste amusant.
 
Si, c'est justement mon problème la résolution de l'utilisateur, c'est un site personnel et non professionnel, donc c'est bien à moi de m'occuper de ce genre de choses.
 
Le header du forum, certes, une portion se répète, mais c'est moche. :spamafote:
 
Enfin bref, je vais réfléchir à d'autres solutions...

Reply

Marsh Posté le 17-10-2008 à 00:26:22    

Si vraiment tu veux chipoter, je te conseille cet article.
Tu auras la même image quel que soit la résolution.
Et tu donnes un max-width à ton contenu.
http://www.search-this.com/2008/06 [...] nd-images/

Reply

Marsh Posté le 17-10-2008 à 09:18:07    

Je vais aller lire l'article, merci. :jap:
 
Je n'ai pas trop compris par "Même image pour toute résolution", mais je vais découvrir tout ça. ^^'
 
Merci !
 
Edit -Avant lecture de l'article- :
 
Dans mon cas pour l'instant, j'avais 2 CSS. Un pour réso > 1279, un autre sinon.
Ce qui me génait, c'était le temps de chargement du CSS à chaque nouvelle ouverture de page, puisque le script rechoppait à chaque fois la réso de l'utilisateur pour adapter le CSS qu'il fallait.
Est ce que, on peut, -Attention, question de noob en approche-, mettre en place un cookie "temporel". Genre il capte la résolution la première fois, et ne fait plus la manip' durant 24h, associant systématiquement le CSS qu'il faut sans avoir à chopper la réso et compagnie. Parce qu'avoir 2 CSS et que ça fasse pas "méga propre", c'est pas grave, tant que ça se "voit" pas trop... Là, à chaque chargement de page, on doit avoir qqs ms où la page est "sans CSS". :/


Message édité par Ryuzaki7 le 17-10-2008 à 09:23:51
Reply

Marsh Posté le 17-10-2008 à 11:22:11    

Les cookies sont par définition limités dans le temps...
 
Ceci dit, ce que tu veux faire peut l'être avec du javascript mais pas purement en css. Tu n'as qu'à créer des classes css contenant les pourcentages différents et appliquer la classe qui convient à ton élément en javascript.
 
Par contre, je ne vois pas comment tu pourrais faire ça de manière optimisée et après quel type d'événement. Si tu veux que la taille s'adapte réellement à la résolution visible de la fenêtre (et non de l'écran) il faudra exécuter une fonction javascript à chaque redimensionnement de celle-ci. Un cookie de 24h est ainsi inutile puisqu'un utilisateur peut très bien décider de redimensionner la fenêtre de son navigateur...

Reply

Marsh Posté le 17-10-2008 à 15:46:10    

Huh, j'me suis peut être fait mal comprendre ou je me suis mal exprimé. Je compte pas faire en fonction de la fenêtre, mais de l'écran, de la résolution de l'utilisateur. ;)
 
Un cookie prend ainsi son sens ? (Je savais pas que c'était par définition limité dans le temps, j'vois le principe seulement...)
 
Pour les classes contenant les %, j'ai pas vraiment compris... :/

Reply

Marsh Posté le 17-10-2008 à 15:57:42    

Je parle de résolution de fenêtre car tu ne peux pas prendre en compte la seule résolution de l'écran, à moins que tu sois vraiment certain que ton site sera toujours visualisé en plein écran. Et encore, ça te posera problème pour les personnes avec plusieurs écrans, ou si la fenêtre ne prend pas toute la surface de l'écran, ou si l'utilisateur affiche une barre verticale du style historique, favoris, ...
 
 
Ceci étant dit, je ne connais pas suffisamment le javascript pour t'aider sur la syntaxe... (j'me sens un peu inutile du coup)

Reply

Marsh Posté le 17-10-2008 à 19:15:59    

Pour l'instant, j'ai ce script dans ma page pour voir quel CSS associer :
 

Code :
  1. function res()
  2. {
  3. var x = screen.width;
  4. var heads = document.getElementsByTagName ( 'head' );
  5. var head = heads [ 0 ];
  6. var link = document.createElement('link');
  7. link.setAttribute ( 'type', 'text/css' );
  8. link.setAttribute ( 'rel', 'stylesheet' );
  9. link.setAttribute ( 'media', 'screen' );
  10. if( x > '1279') {
  11.  link.setAttribute ( 'title', 'CSS1' );
  12.  link.setAttribute ( 'href', 'lesite.css' );
  13. }
  14. else {
  15.  link.setAttribute ( 'title', 'CSS2' );
  16.  link.setAttribute ( 'href', 'lesite2.css' );
  17. }
  18. head.appendChild ( link );
  19. }


Là aussi, ça parle de fenêtre ? Parce que "screen", c'est bien écran ? Ce n'est pas moi qui l'ai rédigé, on m'a donné un... énorme coup de main pour ça. :D
 
*Se sent perdu* ^^'
 
Merci pour tes réponses. :jap:


Message édité par Ryuzaki7 le 17-10-2008 à 19:16:11
Reply

Marsh Posté le 24-10-2008 à 04:31:12    

Ryuzaki7 a écrit :

Je suis graphiste à la base, donc faire une ou six images et les dimensionner comme il faut pour donner un effet que je souhaite, ce n'est pas un problème, c'est juste amusant.
 
Si, c'est justement mon problème la résolution de l'utilisateur, c'est un site personnel et non professionnel, donc c'est bien à moi de m'occuper de ce genre de choses.
 
Le header du forum, certes, une portion se répète, mais c'est moche. :spamafote:
 
Enfin bref, je vais réfléchir à d'autres solutions...


désolé de pas avoir répondu plus tôt mais t es lourd
des pros comme moi ou tholdan te donnent des conseils et ta reponse c est "je vous emmerde"
je suis moi meme entre code et graphisme, et je connais des gens juste graphistes, et personne n aime "faire une ou six images et les dimensionner comme il faut"
ca c est juste la reflexion d un amateur et ta disctinction site pro/site "perso" le prouve bien: si t es pas pro dès le début tu ne le sera jamais. un artiste produit une oeuvre, point barre.
 
il n y a rien d amusant a faire ctrl+alt+shift+s et changer la resolution du "sauver pour le web"
rien
et encore moins quand ca se rapporte a un projet d il y a deux ans
parce que c est ce qui arrivera: si ton site est mal pensé aujourd hui il sera chiant demain


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 24-10-2008 à 08:02:09    

Là, c'est toi qui généralise pour rien. Je n'ai jamais dit "Je vous emmerde" ou autre qui s'y apparente.
 
Tu as dit que ça serait chiant de redimensionner 5 ou 6 images. Je dis que ce n'est pas mon cas, puisque le graphisme est ma passion, pour les personnes que tu cites, ça n'est rien moins qu'un boulot il semblerait... :(
 
Rien pigé à ton truc de site pro / perso. Si un site est personnel, ça veut dire que je le fais pas dans un cadre professionnel huh... Faisant référence au fait que je dois me démmerder tout seul, là où tu disais que s'occuper de ma résolution, c'était "pas mon job".
 
Je le répète encore une fois, TU trouves pas amusant ou quoi que ce soit. Le fait n'est pas de seulement modifier la taille, puisque les images sont pas proportionnelles, raison PRINCIPALE pour laquelle j'utilise pas de %... Et ne parle pas au nom de gens que tu connais pas. C'est comme le coup des musiques. Si t'aime pas, tu dis "J'aime pas", pas "C'est de la merde". 0//
 
Dans 2 ans, ne t'inquiète pas pour moi, j'aurais trouvé une solution viable.
 
Toi ou tholdan, ce que vous m'avez proposé ne correspond pas à ce que je recherche. Je vais pas l'utiliser pour vous faire plaisir. Si on m'aide pas en me proposant de solution pour ce qui a été demandé explicitement, je garde mon option de CSS présélectionné en fonction de la réso, je fous un cookie qui garde le CSS en question, et j'ai plus le "mini temps de chargement" à part pour la première page et puis basta.
 
Juste une dernière remarque, pour un "Pro" de l'informatique, et donc "Pro" du clavier, apprend un peu mieux à l'utiliser, tu es difficilement déchiffrable parfois, même si j'ai eu des leçons de crypto par le passé. :)
 
Edit: mIRROR, Merci de ne pas répondre à ce message, le suivant serait dénué de sens.  :jap:


Message édité par Ryuzaki7 le 24-10-2008 à 08:20:11
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed