28220 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai souvent été énervé par les limitations des CSS2 pour la gestion des coins ronds ou pour l'utilisation d'images pour les bordures.
Il y a bien sûr pas mal de solutions différentes Smiley cligne développées, mais elles ont chacune leurs limitations : le plus souvent, les coins arrondis ne marchent que sur un fond uni et les bordures avec images ne sont fonctionnent qu'avec une largeur fixe.

J'essaie de travailler à créer un système qui permette de s'affranchir de ces limitations.

Voici la solution que j'ai développée, avec une version brute, ainsi qu'une version texturée (ses graphismes ont été repiqués sur bide et musique pour l'exercice).

En fait, c'est un mix de différentes techniques que j'avais déjà rencontrées, auxquelles j'ai ajouté une petite technique persos pour gérer la taille des bordures élastiques.
Bon, je sais que les puristes hardcore vont crier au scandale face aux DIVs supplémentaires que ça nécessite, et que ça se destine plutôt aux gouroux. Mais en attendant, ça respecte totalement l'esprit des standards, on peut modifier "conteneur_externe" comme n'importe qulle boîte sans que ça casse rien. Et ça marche sous Firefox et IE5.5+.

Par contre, il y a un bug sous Opéra (la version 7 sur mon poste) et je n'ai pas de Mac sous la main.

Vous pouvez m'aider à m'aider à débugger pour Opéra, je connais pas du tout ses bugs spécifiques. Et sous Safari, ça donne quoi ? Sinon, des remarques, des suggestions ?
Salut El Ricooo
Je crois qu'avec 8 div superposées, tu te compliques vraiment la vie. On peut donner le même résultat avec 1 div, 3 paragraphes, 2 spans. Et ce, en restant élastique.
Je te met des fichiers images : 6 captures d'écran Macintosh.zip ( 1.5mo )
IE 5,2 : la catastrophe, ya rien et même pas le background !
Sur Camino ça affiche très lentement mais complètement.
Opéra 7.54 lentement mais partiellement
Safari, Mozilla, FireFox, OK c'est bon.
A+
Auréance, c'est "El Riiico", avec trois "i" et un seul "o", j'y tiens Smiley fache

Utiliser 1 div, 3 paragraphes et 2 spans, ça ne me parrait pas forcément beaucoup plus simple que mes 8 divs ^_^ (qui sont logiques : une pour chaque coin, et une pour chaque bordure). Et surtout, les divs sont syntaxiquement neutres, contrairement à tes 3 paragraphes qui faussent la sémantique.

Pour le IE5.2 du Mac, il n'est plus utilisé : même Microsoft ne s'embête plus avec lui, leur nouveau portail MSN ne marche pas avec. On peut rigoler doucement qu'ils aient osé créer un site qui ne passe pas sous le dernier navigateur de la marque pour le Mac, mais ça montre bien sa complète désaffection ; laissons-le mourir en paix.
De toutes façons, là le contenu reste lisible, je verrai éventuellement à la fin si je peux régler le problème sans trop me capillotracter.

C'est bien plus le bug avec Opéra qui m'embête, je vais faire quelque recherches. Mais merci en tous cas pour tes photos d'écran.