28173 sujets

CSS et mise en forme, CSS3

Pages :
Bonjour,

J'ai réalisé un site pour un client. Celui-ci m'a bien précisé, après avoir eu une première version, qu'il ne souhaitait pas de scrollbar sur la page d'accueil. Vu que celle-ci contient plusieurs photos, j'ai du le redimensionner pour que cela tienne en 1024*768. Sur mon poste, je travaille avec une résolutionn de 1680*1050. Autant dire que les photos sur la page d'accueil me semblent petites.

Voici le site :
http://www.atac-design.ch

Qu'en pensez-vous ? J'ai vu qu'il était possible de donner une taille relative aux images pour que celles-ci s'adaptent à la taille du conteneur. Malheureusement, après avoir testé, j'ai remarqué que parfois, le redimensionnement n'est vraiment pas beau (effets d'escalier).

Ma solution est-elle viable ? Sur une résolution jusqu'à 1680*1050 la page d'accueil est limite ok mais sur une résolution supérieure j'imagine que ce n'est vraiment pas terrible. J'avais prévu le site pour des résolutions supérieures mais quand j'ai vu le pourcentage d'utilisateurs qui sont encore en 1024*768 je me suis très vite ravisé...

Merci de votre avis.
Modifié par Delivereath (04 Oct 2006 - 12:24)
Administrateur
Hello Delivereath,

Pourrais-tu donner un titre un peu plus explicite que "votre opinion svp ?".
Pour être utile, le titre doit au-moins évoquer ton problème.
alors là je dois dire que c'est bien la première fois que j'entends ça!
désolé de te décevoir la majorité des internautes ont une résolution inférieur à 1024*768. Moi meme je suis sur du 800*600, et je dois dire que j'en suis plutot content.

Avant passer à une résolution supérieur était intéressant. Mais faudrait il déjà que tout le monde est acheter un écran tft de 19". Bon on en est loin, et mon portefeuille ne l'accepetrais pas encore Smiley smile .
bon sinon après 30 secondes de réflexion je constate malheuresement que le site est en <table> et non en <div> un petit lien pour comprendre

l'utilisation de certaine balise tel que <center> est déprécié
et tu as un <td width="50"> en plus milieu de ta page.

Apparemment tu n'as pas encore compris à quoi servait l'attribut alt dans une image parceque tu as mis dans chacun la valeur "technique"? explique en quoi cela va renseigner quelqu'un qui ne peut pas voir les images correctement? surtout quand tes images sont des liens.

Je me suis preté au jeu de réduire de 2 ou 3 pixel mon navigateur et là surprise tout le site tombe par terre!!! Donc utilise des tableaux si tu veux mais utilise ça bien au moin.

et puis pas d'attribut lang sur la balise html non plus pour précisé la langue de ton site.

sinon ça va Smiley langue
euh... oups désolé ! je viens de relire mon post... Smiley sweatdrop

ça fait un peu trop méchant. c'était pas le but au contraire. bon oups désolé encore... oups... le troll est en moi STOP
masseuro a écrit :
bon sinon après 30 secondes de réflexion je constate malheuresement que le site est en <table> et non en <div> un petit lien pour comprendre

l'utilisation de certaine balise tel que <center> est déprécié
et tu as un <td width="50"> en plus milieu de ta page.

Apparemment tu n'as pas encore compris à quoi servait l'attribut alt dans une image parceque tu as mis dans chacun la valeur "technique"? explique en quoi cela va renseigner quelqu'un qui ne peut pas voir les images correctement? surtout quand tes images sont des liens.

Je me suis preté au jeu de réduire de 2 ou 3 pixel mon navigateur et là surprise tout le site tombe par terre!!! Donc utilise des tableaux si tu veux mais utilise ça bien au moin.

et puis pas d'attribut lang sur la balise html non plus pour précisé la langue de ton site.

sinon ça va Smiley langue


Merci pour tes commentaires. Alors en ce qui concerne table, j'ai effectivement utilisé un tableau pour les images au milieu mais je comptais le remplacer par des bloc div.

Pour l'attribut alt, j'ai effectivement oublié de les compléter après avoir fait copier/coller. Par contre je n'ai pas compris ce que tu entends par "réduire de 2 ou 3 pixel mon navigateur et là surprise tout le site tombe par terre" ?

Et finalement concernant la résolution voici un article d'il y a une année :
http://www.ergologique.com/actualites/actus.php?id_actu=743
75% des utilisateurs ont une résolution égale ou supérieure à 1024*768 et aujourd'hui ce chiffre a du encore augmenter grâce à la vente des écrans lcd.

Merci
Bonjour,

a écrit :
Et finalement concernant la résolution voici un article d'il y a une année :
http://www.ergologique.com/actualites/actus.php?id_actu=743
75% des utilisateurs ont une résolution égale ou supérieure à 1024*768 et aujourd'hui ce chiffre a du encore augmenter grâce à la vente des écrans lcd.

Plus d'infos sur les stats sur ce site : http://www.w3schools.com/browsers/browsers_stats.asp
(plus bas dans la page tu as les statistiques de résolutions d'écran)

Si c'était 100%, peut être que ca vaudrait le coup. Seulement, selon tes dires, ce n'est pas encore le cas. Il y'a donc "25"%" d'internaute dont tu ne te préoccupe pas et qui n'auront pas la même chance d'accéder à l'information de ton site aussi confortablement que ceux qui ont des résolutions supérieures. Je trouve ca vraiment dommage...
J'aimerai bien que le site d'adapte chez tout le monde.

Mais comment faire pour que les images d'adaptent pour ne pas créer de scrollbar verticale ?
Dans le cas où je peux pas le faire, je préfère favoriser les 75% des utilisateurs qu'une minorité. Surtout que le 800*600 est destiné à disparaître.
Delivereath a écrit :
J'aimerai bien que le site d'adapte chez tout le monde.

Mais comment faire pour que les images d'adaptent pour ne pas créer de scrollbar verticale ?
Dans le cas où je peux pas le faire, je préfère favoriser les 75% des utilisateurs qu'une minorité. Surtout que le 800*600 est destiné à disparaître.


Salut,

comme le dit Laurent Denis : "think why, not how..."

Non comment mais pourquoi faire en sorte que les images ne déclenchent pas de scrollbar verticale.

Donc finalement pourquoi ne pas déclencher de scrollbar verticale concernant un document présenté dans le cadre d'un media non paginé.

C'est là dessus que devrait porter ta réflexion et ton argumentation auprès de ton client.
Modifié par clb56 (04 Oct 2006 - 13:13)
Bonjour Delivereath Smiley smile

Il existe un tutoriel faire un site pour toutes les résolutions

Sauf si vraiment indispensable, la balise image associée à une class n'a pas besoin d'une div pour la contenir Smiley cligne

Le fait de favoriser un groupe d'internautes, c'est forcemment en exclure d'autres... Moi ce qui me gêne c'est plutôt d'exclure... Le standard, pour l'instant, c'est 800x600 Smiley cligne ... Mais essai de faire un truc fluide, au moins tu n'exclus plus personne Smiley smile
Modifié par dominique (04 Oct 2006 - 13:15)
Salut,

Les images sont là comme un menu. Et mon client veut que ce menu soit entièrement visible dès le premier coup d'oeil et qu'il ne soit pas nécessaire de défiler la page verticalement. Ce que je comprends parfaitement.
dominique a écrit :
Bonjour Delivereath Smiley smile

Il existe un tutoriel faire un site pour toutes les résolutions

Sauf si vraiment indispensable, la balise image associée à une class n'a pas besoin d'une div pour la contenir Smiley cligne

Le fait de favoriser un groupe d'internautes, c'est forcemment en exclure d'autres... Moi ce qui me gêne c'est plutôt d'exclure... Le standard, pour l'instant, c'est 800x600 Smiley cligne ... Mais essai de faire un truc fluide, au moins tu n'exclus plus personne Smiley smile


Je vais essayer mais le standard n'est plus 800*600, c'est bel et bien 1024*768 et ca commence à aller sur le 1280*960.
Delivereath a écrit :


Je vais essayer mais le standard n'est plus 800*600, c'est bel et bien 1024*768 et ca commence à aller sur le 1280*960.



Heuuuuuuuu ! Peux-tu me donner le lien vers la page du site du W3C sur laquelle c'est écrit, stp ? On parle bien ici des standards du Web Smiley eek
il est clair que c'est 800*600 pour les sites comme les blogs ..
pour ton site d'art je te conseille 1024*768 ..
dominique a écrit :



Heuuuuuuuu ! Peux-tu me donner le lien vers la page du site du W3C sur laquelle c'est écrit, stp ? On parle bien ici des standards du Web Smiley eek


Ah ok j'avais mal compris. Mais dans ce cas, il n'est plus très à jour...
dominique a écrit :
Bonjour Delivereath Smiley smile

Mais essai de faire un truc fluide, au moins tu n'exclus plus personne Smiley smile


Pour en revenir à ça : Mon site est déjà presque totalement fluide, il ne manque que le menu à adapter et à remplacer le tableau que j'utilise au centre. Non ?
J'essaie de rendre le site complètement fluide mais je suis bloqué sur un problème. J'ai un conteneur, nommé conteneur3, avec une largeur définie en %. Dans ce conteneur, j'aimerai mettre deux blocs div défini par conteneur4. Le problème est que je n'arrive pas à la centrer l'un à côté de l'autre.

J'imagine que le problème vient de l'utilisation de l'attribut float: left. Mais si je le supprime alors les blocs se placent l'un au dessus de l'autre. Une solution ?

Merci

Exemple sur : http://www.atac-design.ch
Modifié par Delivereath (04 Oct 2006 - 13:51)
Pour les centrer l'un à côté de l'autre, je ne vois qu'une solution, les inclure en float, dans une div, qui elle sera centrée Smiley cligne
dominique a écrit :
Pour les centrer l'un à côté de l'autre, je ne vois qu'une solution, les inclure en float, dans une div, qui elle sera centrée Smiley cligne


Oui c'est possible avec deux blocs. Mais dans mon menu j'en possède 6. Ce qui fait une largeur de 16.666666% pour chaque bloc. Et comme les navigateurs ne fonctionnent pas de la même manière, ça ne marche pas. Soit c'est arrondi au dessus et mon bloc se trouvant à droite et envoyé à la ligne suivante, soit c'est arrondi au dessous et alors il y a un espace blanc entre le bloc tout à droite et le bord droit du conteneur ce qui fait que le menu n'est plus centré.

Une idée ?
Ben ! j'ai un peu de mal à suivre... Si tu fais du fluide, il est normal que le contenu s'adapte à la largeur de la fenêtre du navigateur, non ? Donc à un moment ou un autre, il y aura obligatoirement ce que tu décris.

Maintenant, tu peux peut être atténuer cet effet en indiquant une largeur fixe à chacun de tes 6 blocs et pour l'ensemble des marges en pourcentages, elles serviraient alors en quelque sorte de tampon pour ta mise en page...
Pages :