28221 sujets

CSS et mise en forme, CSS3

Site centré et petites configurations

Bonjour,

Je viens de me rendre compte que ce type de mise en page (http://www.yodatech.com/) possède une grosse limite : redimensionnez la page en moins de 800*600, une partie du site disparait purement et simplement...

C'est tout de même assez embêtant.
Une solution ?
Modifié le 06 Dec 2004 - 19:15
Administrateur
Effectivement c'est comprehensible puisque :
- le site est conçu pour une largeur de 800x600
- le site est centré en position absolue.

Cela fait que les extrémités ne sont pas visibles si l'écran est plus petit que cette configuration.
Même si ces configurations sont extrêmement rares, cela peut être gênant pour les Palm ou autres supports en effet.

Dans ce cas, je te conseille tout simplement d'utiliser l'autre méthode pour centrer les éléments tout en restant dans le flux (margin latérales auto + position relative) :
http://www.alsacreations.com/articles/centrer/
Bonjour,
Le concepteur de ce site a choisi une largeur fixe pour afficher son contenu. La valeur choisie 764px étant jugée suffisante pour les visiteurs, la majorité des visiteurs étant probablement en 800x600 et supérieur, c'est un choix. Pour les résolutions inférieures, pour d'autres types d' agents utilisateurs il faudrait utiliser une largeur fluide, pourquoi pas un conteneur dont la largeur soit exprimée en %. Des exemple fluides divers sont présents dans les Tutoriels d'Alsacréations: http://www.alsacreations.com/articles/

édit:grillé Smiley biggrin
Modifié le 06 Dec 2004 - 20:06
Igor, c'est un de mes sites Smiley cligne

D'après nos stats, moins de 10% de nos visiteurs ont des config égales ou inférieures à 800*600.
J'aurai donc pu prévoir plus grand encore !

C'est d'ailleurs en travaillant sur un nouveau projet, où cette fois la largeur fixe sera de 920px, que je me suis rendue compte des problèmes de resize pour les plus petites configs.

Quand à la largeur variable, elle a ses pours et ses contres !
Pour et contre avec la largeur fluide, mais QUE du contre pour la largeur 920px (enfin largeur supérieure à 770px).

Même si tu as peut de visiteurs en 800*600 il faut en tenir compte, et en faisant un site de 920px de large tu les prives d'une bonne partie de la page (150px quand même)
Toujours les mêmes interrogations...

Quand je faisais mes premiers sites il y a 4 ans, je ne me rappelle pas avoir tenue compte des 640*480, alors que j'étais très pointilleuse pour les 800*600, même si je travaillais en 1024*768.

Combien de pourcent représentaient les 640 à l'époque ? Je n'en ai pas idée, mais on ne devait pas être loin des 10%

Combien de temps faudra-t-il que je me restreigne aux 800*600 ?

A un moment donné, et pour des sites donnés (j'insiste sur ce point), je pense qu'il faut savoir prendre le risque.
Et les visiteurs ne seront pas privés d'une partie du site (enfin, quand j'aurai modifié mon code, parce que pour le moment c'est clair que ce n'est pas exploitable tel quel), ils utiliseront juste un scroll horizontal...
Bonsoir Smiley smile

Je me suis longtemps posée la question moi aussi. 800x600 ou 1024x768 ?
Mon site traite d'un jeu vidéo qui ne sera disponible que pour des résolutions supérieures à 1024x768 ...
Est ce que ça me donne pour autant le droit de squizzer les 800x600 ? Non ... car peut-être que pour des raisons x ou y, les personnes n'utilisent pas le même ordinateur pour jouer ou pour surfer, peut-être que quelques une des pages que propose le site intéresseront des utilisateurs qui ne souhaitent pas jouer mais qui veulent simplement se renseigner sur des batailles napoléoniennes.

C'est pour cette dernière raison que j'ai aussi essayé de faire un site accessible afin que, même si la plupart des handicapés ne pourront pas jouer, ils puissent au moins consulter les récits historiques, entre autres...

C'est pour ça que le site s'affiche par défaut en 1024 et une CSS en 800x600 est disponible si besoin. C'est pour l'instant la seule solution que j'ai trouvée Smiley cligne
D'expérience il ne faut jamais présumer des utilisateurs.

Pour l'anecdote, il y a quelques semaines une collègue vient me voir:
a écrit :

Igor, je comprend pas depuis quelques mois mon écran il est tout petit.


Je suis interloqué, car son poste est correct, muni d'un 17' et d'une carte graphique, certes pas très performante, mais d'une carte tout de même.
Résultat elle venait de passer 6 mois en 640x480, et pas qu'à naviguer sur internet, mais aussi sur l'application professionnelle. Depuis c'est une spécialiste du scroll Smiley lol

Moralité: ne jamais présumer de l'utilisateur et l'utilisation qu'il fait de ses outils. Smiley cligne
Bien vu. Une petite citation de ce billet dont la conclusion pourrait fort bien s'appliquer au sujet de ce post:
Laurent Denis in Accessibilité: ne jamais présumer du comportement de l'utilisateur a écrit :
Ne préjugez jamais de ce que fait ou ne fait pas l'utilisateur, et encore moins d'un hypthétique utilisateur-type, tout particulièrement lorsque l'accessibilité à votre site en dépend. L'utilisateur a gagné la possibilité sans cesse croissante de personnaliser son expérience Web... L'un des enjeux des Standards bien appliqués est justement de ne pas en faire un obstacle à l'interopérabilité et à l'accessibilité. En d'autres termes... Il y aura toujours un original pour casser votre savant hack.

La référence du billet est dans le post de Stephan.
piloue a écrit :
Igor, c'est un de mes sites Smiley cligne

D'après nos stats, moins de 10% de nos visiteurs ont des config égales ou inférieures à 800*600.
J'aurai donc pu prévoir plus grand encore !

Autant pour moi, mais réfléchi que probablement 10% de tes visiteurs ne naviguent pas avec IE, un pourcentage négligeable ou pas à des problèmes de vue, un autre pourcentage des utilsateurs ne sais pas redimentionner la fenêtre de son navigateur, un autre encore se sait pas saisi pas d'emblée le compartement d'un menu etc.
Il est fort probable qu'il y en ait même qui cumulent. À méditer. Smiley cligne
Hello,

Juste pour info, sachant qu'effectivement il ne faut pas concevoir uniquement pour la majorité (sinon on se limiterait vite à IE6/WinXP en 1024x768 Smiley cligne ) :

http://www.thecounter.com/stats/2004/November/res.php

La source vaut ce qu'elle vaut évidemment, mais c'est amusant de comparer sur toute une année voire plus (NB:en jouant sur l'URL c'est plus simple).

Allez, bonne nuit sur ce Smiley biggrin
Si je ne me trompe pas non plus, dans certains navigateur, il est possible de rajouter des barres de navigations verticales sur le coté du butineur (dans le style Opéra) réduisant donc aussi la largeur de navigation ...
Bon maintenant si tout le monde voulait bien se donner la peine d'utiliser Opera qui:
Laurent Denis in Opera 7.60 preview 4 a écrit :
intègre le nouveau système de rendu ERA qui adapte le rendu d'un document Web à la largeur d'affichage ou d'impression disponible
Smiley cligne

Source
Raphael a écrit :
Dans ce cas, je te conseille tout simplement d'utiliser l'autre méthode pour centrer les éléments tout en restant dans le flux (margin latérales auto + position relative) :
http://www.alsacreations.com/articles/centrer/

Arf, j'ai un problème... Chuis pas encore au point pour le positionnement des blocs Smiley biggol

J'utilisais ceci pour centrer verticalement et horizontalement le site :
#conteneur {
	position:absolute;
	left: 50%;
	top: 50%;
	width: 920px;
	height: 522px;
	margin-top: -260px;
	margin-left: -460px;
	background-color: #FFFFFF;
}


Après avoir pris connaissance du tutorial sus-mentionné, j'ai fais cela
#conteneur {
 position: relative; /* on positionne le conteneur */
     margin-left: auto;
     margin-right: auto;
     width: 920px;
     height: 522px;	 
     text-align: left;
	 }

Très bien, cela centre horizontalement le tout et j'ai bien un ascenceur horizontal, rien ne disparait.

Mais comment centrer le site verticalement ?
Administrateur
piloue a écrit :
Mais comment centrer le site verticalement ?

Dans ce cas, il n'y a pas de solution miracle :
- centrer verticalement un élément inline : "display table-cell + vertical align" (ne marche pas sur IE) ou "line-height" (ne marche que s'il n'y a qu'une ligne)
- centrer verticalement un élément bloc : "display table-cell + vertical align" (ne marche pas sur IE) ou "position absolute + marges négatives"

Dans ton cas, je ne vois que la dernière solution Smiley decu
Sujet clos
Aller à