28220 sujets

CSS et mise en forme, CSS3

Bonsoir

Habituellement je travaille avec une résolution de 1024.
Un ami vient de me faire remarquer que mon boulot ne passait pas
sur une résolution supérieure, quelqu'un peut-il me donner une piste.
Voici le lien de mon dernier boulot, si ça peut éclairer.

http://www.grid.fr/crea.php

Merci pour votre lecture et votre concours. Smiley smile

@+
bonsoir,

voila ce que ça donne sur un 17"

upload/1258-test.JPG

donc, effectivement il y a un leger ecart dans les cellules de gauches ( du blanc)

Je n'ai pas encore regardé le code

bon j'ai regardé

cela doit venir du background : no-repeat

	width:100%;
	height:160px;
	background-color:#FFF;
	border:1px solid #000;
	background-image: url(../images/fondGH.gif);
	[b]background-repeat:no-repeat;[/b]
	font-size:180%;
}

.col1b{
	width:100%;
	height:300px;
	background-color:#FFF;
	margin:3px 0 0 0;
	border:1px solid #000;
	background-image: url(../images/fondGB.gif);
	[b]background-repeat: no-repeat[/b];	
}

Modifié par Philippe (27 Dec 2005 - 00:16)
Bonsoir Philippe

Merci

J'ai ajouté background-repeat:no-repeat; afin que les images ne
se démultiplient pas à l'infini.

Avant que je n'applique no-repeat c'était le cas.


Maintenant je ne sais plus, je cale un tout petit peu. Smiley ohwell

@+
Salut Michel,

Sous IE, ton site s'affiche super sur un 19" en 1280x1024.

Affiché, il mesure 825x467 centré en largeur :

upload/1376-grid.jpg
Modifié par papyjo (27 Dec 2005 - 03:55)
Grâce à l'image de Papyjo, j'ai compris ce que tu voulais faire alors que j'obtiens ça sous IE en 1280 x 1024

upload/2487-grid.jpg

Le mieux - le moins pire ?- à faire à mon avis

mettre en norepeat

le fond des images de gauche doit être de la couleur de l'image (le bleu très foncé - là, on voit que l'image qui se répète est plus claire à droite)

Créer les trois colonnes de droite de taille fixe (à la taille des bitmaps)

maintenant, je ne sais pas faire pour que ça marche aussi en changeant la taille des caractères...

Si ça peux te metre sur la voie Smiley cligne
Bonjour à tous

Merci pour vos pistes.

Pas de no-repeat j'ai une démultiplication d'images.
Avec no-repeat c'est réglé mais j'ai un espace vide.
La solution d'appliquer une couleur de fond similaire est bien, mais ça manque d'hestétisme.

Je reviens au point de départ.

Je me rend compte tout bonnement que quand on met des images en background il faut leur donner une certaine dimension en prévision de l'affichage dans des résolutions élevés.

Les résolutions élevés vont être légion dans les mois à venir avec la démocratisation des prix sur les grands écrans.

Quelle formule vais-je devoir appliquer pour être compatible sur toutes les grandes résolutions ?

Appliquer une couleur de fond c'est pratique ça s'étend.
Donc je bannis le graphisme au détriment des hautes résolutions.

J'ai pas envie de bannir le graphisme.
Quelle résolution dois-je donc me fixer ?

J'espère ne pas vous aggacer avec cette reflexion.

@+ Smiley smile
Modifié par Michel (27 Dec 2005 - 12:03)
Bonjour,

La solution consiste simplement à n'utiliser que des images jouant sur les effets de transparence et/ou de dégradé permettant d'avoir une partie de l'image en couleur unie, qui est alors utilisée comme couleur d'arrière-plan, sans solution de continuité.

Cela étant dit, ne pas oublier qu'en très grande largeur, l'utilisateur peut aisément réduire la taille de la fenêtre du navigateur. Ce qui améliore généralement de toutes façons la lisibilité des textes (affichés sinon sur des lignes trop larges). A l'inverse, l'utilisateur en petite résolution sera pénalisé par un design qui ne tient pas compte de ses contraintes, sans pouvoir y remédier.
Modifié par Laurent Denis (27 Dec 2005 - 12:20)
Michel a écrit :
J'ai pas envie de bannir le graphisme.
Quelle résolution dois-je donc me fixer ?

J'espère ne pas vous aggacer avec cette reflexion.


Regarde le site vainqueur cet été du concours... Il était très beau puisqu'il a gagné, très design mais était très petit sur un grand écran...

Sinon, faire des images jointives pour qu'elles se répettent correctement dans leurs enchaînement...

Ca, je ne sais pas faire, la preuve, j'ai retiré mon image de fond de mon site du concours suite à une remarque Smiley biggol
Bonjour

J'ai bien pensé comme celà dans d'autres cas de figures.

Mais dans cette situation il s'agit de 3 images découpées qui, côte à côtes
représente une seule image.

Si on ajoute des effets de transparence ou de dégradé les jointures n'existent plus, donc le résultat souhaité disparait.

l'idéale serait d'avoir des blocs qui épousent les backgrounds quelque soit la résolution, un genre de système qui contraint le tout à rester homogène.

Là je rêve !!!

Dans cette conception je pourrais appliquer des largeurs fixe, c'est vrai,
je n'y tiens pas.

Merci pour ces approches.


@+ Smiley smile


ps:allez voir cette page en 1280 http://www.webrankinfo.com/concours-design/julien-jerome/contenu.html
y'a un truc qui bug en haut à gauche, non !
Modifié par Michel (27 Dec 2005 - 12:59)
Michel a écrit :
Mais dans cette situation il s'agit de 3 images découpées qui, côte à côtes
représente une seule image.


D'où l'idée dans mon premier message de faire cette partie là en fixe et celle à gauche en fluide dans la place qui reste. Ainsi ton effet de jointure reste (bon, en réduisant trop l'écran ça peut poser problème je suppose) mais il faut voir ce que cela donne en changeant la taille des caractères...

a écrit :
ps:allez voir cette page en 1280 http://www.webrankinfo.com/concours-design/julien-jerome/contenu.html
y'a un truc qui bug en haut à gauche, non !


les puces qui sont trop à gauche en dehors de la partie centrale et visible à moitié, la pub qui descend sous le logo ?
Pour garder la continuité entre les touches de clavier, je ne vois vraiment pas d'autre solution que les largeurs fixes !
Bonsoir

Bon, ben, je me suis donc résigné à fixer les largeurs,
malheureusement ce n'est pas le résultat que j'attendais.

Le site en haute résolution est tout rikiki tant pis...

La page est compatible pour les résolution 800 mais en desous ça passe pas re tant pis...

merci à tous pour ce coup de main, à charge de revanche. Smiley cligne

@+
Modifié par Michel (27 Dec 2005 - 18:33)
Bonjour Michel,

un petit test en utilisant l'image à 100% de son conteneur.

Test

Par manque de temps cela fait un peu bidouille pas finie mais il y as peut être une piste à suivre avec plus de temps (taille image, taille et positionnement des blocs, bordures..) qui t'offrirais un compromis permettant l'adaptation à différentes résolutions.

Tout en sachant que tu perdras obligatoirement en qualité sur l'image du clavier dans les grandes résolutions et que le site ne sera pas centré verticalement.
Modifié par knarf (28 Dec 2005 - 10:37)
Bonsoir

Merci Knarf, effectivement c'était dans cet objectif.
Je range ton boulot précieusement dans un dossier Smiley cligne

@+
Je ne savais même pas qu'on pouvais faire des trucs comme cela Smiley cligne

Ca ne vous fait rien si moi aussi je me met ça sous le coude dans un coin ?
Tiens, pendant que je te tiens Smiley cligne

Les premiers messages que j'ai lu de toi aujourd'hui, sans ce contenu extrèmement riche qui se remarque du premier coup d'oeil, avec ton avatar sans brocollis, j'ai cru qu' ils étaient écrit par un nouveau Smiley smile

Sinon il reste encore à voir ce que cela donne en changeant la taille du texte (je sais je me répète, ce n'est pas parce que j'ai rajeuni d'un mois que je ne peux pas radoter Smiley biggol )
Modifié par Bob (MC Melun) (29 Dec 2005 - 14:15)
Bonjour,

@Laurent-Denis

Si c'est de mon test que tu parle c'est tout à fait vrai ça fait pas fini mais j'ai prévenu c'était plus pour donner une eventuelle piste supplémentaire Smiley cligne .

@Bob

J'ai pas testé le résultat de Michel pour la police, mais pour le mien dans l'état, le redimensionnement s'envoie en l'air.

Par contre la soluce de Michel avec les marges négatives il y as peut être des risques que sous Opéra en cas de Zoom on perde une partie du site à moins que l'on ajuste à la fenêtre avant mais je n'ai pas testé donc c'est une supputation Smiley lol par rapport à certains tests quand j'utilisais cette méthode de centrage.
knarf a écrit :
Bonjour,

@Laurent-Denis

Si c'est de mon test que tu parle


Argh Smiley eek

Mille excuses à tous et en particulier à Knarf : je me suis emmêlé les crayons entre deux fils de discussions, et j'ai posté ici une réponse qui concernait une technique sans aucun rapport, destinée à gérer une sorte de pseudo-transparence sous IE avec des mosaïques pixelisées... je ne suis même plus sûr de ne pas m'être carrément esgourdé de forum.

Devrais reprendre une tite semaine de wavances, moi.
Modifié par Laurent Denis (29 Dec 2005 - 19:16)