28173 sujets

CSS et mise en forme, CSS3

avec un tableau de 3 lignes 3 colonnes, c'est aisé de réaliser un joli cadre avec des coins avec images.
j'ai beau essayer avec des CSS, en 3 jours je n'y suis pas arrivé

sans parler de compatibilité avec IE et Firefox

le but est d'avoir un cadre avec 4 coins images taille fixe et
2 barres horizontales et 2 verticales de longueur fixe avec image
la barre du haut doit contenir un libelé de taille variable et ne pas passer à la ligne
le centre du tableau doit contenir du texte de taille variable

la taille de ce cadre, doit être contenue dans une div de longueur variable et donc le cadre doit
s'adapter à celle-ci lors d'un redimensionnement

Le tout bien sûr en redimensionnant la fenêtre du navigateur le cadre doit s'adapter et il ne doit pas y avoir
de partie qui sautent à la ligne;

En fait, voici une démo de ce que j'aimerai réaliser.
sur le site www.netvibes.com
les flux sont dans des cadres ...

Si quelqu'un l'a déjà fait, merci de ses conseils
Modifié par danou9 (11 Jul 2007 - 11:03)
merci Benjamin
ce que tu propose est pas mal du tout

un petit détail, en redimensionnant, le cadre continue à diminuer et le texte contenu dépasse du cadre!

c'est disgratieux et c'est pour moi, un manque de profesionnalisme.

Sur www.netvibes.com, c'est vraimant parfait
mais comment font-ils?
danou9 a écrit :
un petit détail, en redimensionnant, le cadre continue à diminuer et le texte contenu dépasse du cadre!

Faut vraiment redimensionner comme un taré pour obtenir ça, non?
Sur cette page, le bloc est prévu pour avoir une largeur relativement importante (page complète), donc si on réduit à 80px de large forcément ça ne va plus trop.

danou9 a écrit :
c'est disgratieux et c'est pour moi, un manque de profesionnalisme.

Tout de suite les grands mots... Smiley rolleyes

danou9 a écrit :
Sur www.netvibes.com, c'est vraimant parfait
mais comment font-ils?

Avec quinze mille blocs imbriqués et des images de fond. Bref le même principe mais en pire.

On peut avoir un aperçu (image) du cadre que tu veux réaliser? Suivant ce que tu veux faire exactement, il faudra faire quelque chose de relativement simple, ou d'affreusement compliqué à la Netvibes.

Pour l'affreusement compliqué, à la rigueur mieux vaut l'éviter, et utiliser un tableau. Ou attendre les images de fond multiples de CSS3 (mais là, faut être patient...).
pour précision,
en redimensionnant le cadre au minimum (et oui, cher ami on ne peut pas empecher les internautes de le faire et de critiquer), le cadre du bas devient plus petit que le cadre de haut.

Excusez-moi, ce n'est pas que je suis enmerdant pour soulever ce probleme, mais je me met à la place des internautes qui eux critiques facilement, et donc je cherche le meilleur cadre qui soit

je le répete, allez voir sur www.netvibes.com et vous verrez que c'est possible et éléguant, ils ne peuvent pas se permettre une fausse note sur leur site.

c'est pas parce qu'on a pas un site connu, qu'on doit présenter un site avec des défauts.

Et, oui, il faut se remettre en question si tu veux progresser au lieu de dire pourquoi si, pourquoi ca;
c'est au contraire un chalenge à relever interressant

merci
danou9 a écrit :
pour précision,
en redimensionnant le cadre au minimum

Pour la problématique du redimensionnement à des largeurs très faibles:
1. je ne connais aucun utilisateur non technicien qui s'amuse à redimensionner la fenêtre de son navigateur à 300px de large, et n'ai jamais eu d'écho en ce sens;
2. les médias mobiles se gèrent avec le média CSS handheld, ou bien gèrent leur propre système d'aperçu+zoom (voir l'iPhone);
3. il est tout à fait pertinent dans le cadre d'une visualisation sur écran (média CSS screen) d'utiliser des largeurs minimales, par exemple un min-width: 700px sur le conteneur global d'une page.

danou9 a écrit :
(et oui, cher ami on ne peut pas empecher les internautes de le faire et de critiquer)

L'internaute qui fait quelque chose d'inique et qui se retrouve avec un résultat problématique se rendra sans doute compte qu'il s'est éloigné du mode de consultation prévu pour le site. Et, sauf erreur de ma part, la visualisation d'un site en largeur 300px n'est pas un impératif d'accessibilité (un internaute ayant des besoins de ce type utilisera une loupe d'écran).

danou9 a écrit :
le cadre du bas devient plus petit que le cadre de haut

C'est effectivement un bug d'Internet Explorer 6, corrigé dans la version 7.

danou9 a écrit :
donc je cherche le meilleur cadre qui soit

Un scoop: il n'existe pas. Smiley cligne
Ceci dit, l'exemple pointé est effectivement améliorable (par l'utilisation d'une largeur minimale, par exemple).

danou9 a écrit :
je le répete, allez voir sur www.netvibes.com et vous verrez que c'est possible et éléguant, ils ne peuvent pas se permettre une fausse note sur leur site.

Je connais bien Netvibes, que j'utilise, mais je te rassure: ils ont leur propres fausses notes, en termes de mise en page (rarement mais tout de même), d'ergonomie, d'accessibilité (houlà...), etc.

danou9 a écrit :
c'est pas parce qu'on a pas un site connu, qu'on doit présenter un site avec des défauts.

Scoop numéro deux: on présente toujours un site avec des défauts. Smiley cligne

danou9 a écrit :
Et, oui, il faut se remettre en question si tu veux progresser au lieu de dire pourquoi si, pourquoi ca;
c'est au contraire un chalenge à relever interressant

Pour le problème précis que tu pointes du doigt, non, ça n'est pas un challenge particulier. L'enjeu est très faible, et je préfère travailler d'autres aspects plus importants dans une démarche de qualité web.

Ceci dit, je n'ai rien contre les remises en question pertinentes, mais là il me semble qu'on n'y est pas vraiment.
danou9 a écrit :
pour précision,
en redimensionnant le cadre au minimum (et oui, cher ami on ne peut pas empecher les internautes de le faire et de critiquer), le cadre du bas devient plus petit que le cadre de haut.

Excusez-moi, ce n'est pas que je suis enmerdant pour soulever ce probleme, mais je me met à la place des internautes qui eux critiques facilement, et donc je cherche le meilleur cadre qui soit

je le répete, allez voir sur www.netvibes.com et vous verrez que c'est possible et éléguant, ils ne peuvent pas se permettre une fausse note sur leur site.

c'est pas parce qu'on a pas un site connu, qu'on doit présenter un site avec des défauts.

Et, oui, il faut se remettre en question si tu veux progresser au lieu de dire pourquoi si, pourquoi ca;
c'est au contraire un chalenge à relever interressant

merci


Merci d'avoir un ton plus respectueux vis à vis des membres du forum qui viennent te répondre. Tu viens demander conseils, accepte de les écouter, que tu en tiennes compte ou non te regardes !
Cela est nécessaire d'appliquer cela pour garder une ambiance agréable et conviviale sur ce forum
Modifié par Mikachu (11 Jul 2007 - 15:15)
danou9 a écrit :
pour précision,
en redimensionnant le cadre au minimum (et oui, cher ami on ne peut pas empecher les internautes de le faire et de critiquer), le cadre du bas devient plus petit que le cadre de haut.


Non c'est faux, alors précise s'il te plait.


a écrit :

un petit détail, en redimensionnant, le cadre continue à diminuer et le texte contenu dépasse du cadre!


Normal à partir du moment où le cadre est moins large qu'une unique chaine de caractère. Je ne connais que la fonctionnalité "fit to width" d'Opera qui arrive à outrepasser cela en coupant un même mot en deux.

Et j'ai vraiment les plus grand doute sur le fait que netvibes y arrive (en fait je n'ai aucun doute, il n'y arrive pas, point barre).


Bon
a écrit :

Impossible de remplacer un tableau avec des CSS!


Pour ne pas être complètement faux dans tous les détails cela reste quand même en général une question de débutant ou à tout le moins de personne manquant de maitrise des techniques possibles (En fait cet air est très, très connu)

a écrit :

Et, oui, il faut se remettre en question si tu veux progresser au lieu de dire pourquoi si, pourquoi ca;


Un débutant n'a pas spécialement à remettre en cause, ni lui même ni les autres. D'abord apprendre, ensuite on verra. Et il y a de quoi faire, certes, sauf que toi tu ne le sais sans doute pas, ni ce sur quoi cela porte.

a écrit :

un manque de profesionnalisme.


+1 sur le "tout suite les grands mots" de Florent, en rajoutant que les débutant ça s'abstient de parler de professionalisme;
Modifié par Christian Le Bouler (11 Jul 2007 - 15:20)
Modérateur
Hello,

danou9 a écrit :
je le répete, allez voir sur www.netvibes.com et vous verrez que c'est possible et éléguant, ils ne peuvent pas se permettre une fausse note sur leur site.

upload/1486-bug-netvibe.JPG
Ah ? Smiley rolleyes
je crois que ce forum tourne au vinaigre car des gens n'acceptent pas les remarques
de plus certain comme florent sont grossier, il dit : Faut vraiment redimensionner comme un taré pour obtenir ça, non?

et, un autre me demande de rester correct, et respectueux???

En conclusion des reactions de certains (pas de tous), : un site doit avoir des erreurs, les internautes sont idiots si ils redimensionnent et qu'il y a des problèmes d'affichage ...

Je suis programmeur depuis 30 ans, et moi quand je programme, je teste tous les cas de figures et je demande aux utilisateurs de tester à fond pour voir si il y a des bogues.

Je me dis pas : oui mais pourquoi, il y cliqué ici, ou pourquou celà;
je solutionne tous les problèmes et je n'accepte aucun défaut, je suis perfectionniste, pas comme certains qui devrait plus faire autre chose que du web; ils seraient virés de mon équipe de programmeurs

Certains sont des bricoleurs et des petits joueurs