[Résolu] Comme faire une boite sans tableau ?

La solution est là :

.boite {
  padding: 10px;
  border-radius: 5px;
}

Compatible IE9/IE10+

Nikolian a écrit :
Mon image est simplifiée, ces boites ont en réalité des effets d'ombre, de transparence et de relief obtenus dans photoshop et que je ne pourrais pas reproduire en CSS, surtout qu'une grande partie de mes clients sont en IE8 où des styles comme border-radius sont inopérants.

Bonjour,

Les tableaux de mise en page, ce n'est pas forcément mal Mais je te l'accorde, ce n'est pas du tout adapté à ton besoin ici.

CSS3 permet de réaliser tout ce que tu souhaites : coins arrondis, mais aussi ombrages de boîtes, dégradés, transparence et relief.

Mais comme tu t'en doutes, des navigateurs obsolètes tels que IE8 ne sont pas capables de reconnaître nativement une technologie récente.

Toute la question est de savoir si tu peux accepter des compromis sur des éléments de pur confort : tes clients souhaitent que ce soit joli mais surtout que ça fonctionne et que ce soit ergonomique.

Des grands sites comme Twitter, Yahoo! et bien d'autres ont choisi : leurs sites s'affichent et sont fonctionnels sur les vieux navigateurs comme IE8... et pour les autres il y a du bonus (coins arrondis, ombrages, ...).
Je crois très sincèrement que c'est la meilleure manière de procéder.

... Et sinon, au pire (vraiment au pire), il y a des outils "polyfills" tels que www.CSS3pie.com

Bonne journée

Effectivement, j’arrive à faire une créa assez correcte avec CSS3, ce qui allège considérablement mes CSS et ma structure.
Sous IE8, je me retrouve des années en arrière avec de simple rectangle unis qui ne correspondent pas du tout à la demande de mes clients.

J’ai donc testé PIE, il a fallu que j’abandonne quelques effets de transparence sous IE8, mais bon tanpis, le résultat est assez proche de celui recherché. Ce petit outil est vraiment très ingénieux et simple d’utilisation et apparemment la seule parade viable si je veux conserver une créa correcte sans utiliser de tableaux.

Note à ceux qui voudrait utiliser PIE ne pas placer le fichier « PIE.HTC » dans le répertoire des CSS, son chemin est exprimée par rapport à la page exécutée et non par rapport à la feuille de style, il faut donc préférer la racine du site « /PIE.HTC » (je me suis fait avoir)

Ma page s’affiche maintenant donc parfaitement sous IE8 (comme avant).
Par contre sous Chrome c’est une autre histoire, mes boites semblent ne plus comprendre que veut dire que width :100% et débordent de leur conteneur (TD).

Eh oui, la structure de mon site est encore en tableau je suppose que c’est la prochaine étape à franchir. Je file tester les gabarits dispo sur le site pour voir si ça peut faire mon bonheur…

Merci Raphaël pour ton aide précieuse.
Modifié par Nikolian (16 Oct 2012 - 17:47)

Nikolian a écrit :

Note à ceux qui voudrait utiliser PIE ne pas placer le fichier « PIE.HTC » dans le répertoire des CSS, son chemin est exprimée par rapport à la page exécutée et non par rapport à la feuille de style, il faut donc préférer la racine du site « /PIE.HTC » (je me suis fait avoir)

Oui c'est noté dans la documentation CSS3pie, et sinon on a un tuto complet dessus
http://www.alsacreations.com/tuto/lire/1300-css3pie-styles-css3-pour-internet-explorer.html

Oui, j’ai tendance à croire que les choses fonctionnent de façon logique, un coup d’œil sur la doc m’aurait évité de perdre un bon quart d’heure.

J’ai lu hier soir ce fameux tutoriel, qui pose bien les limites de son utilisation.
Je m’attaque maintenant à la structure de mon site est je m’arrache bien les cheveux, je m’aperçois que mes connaissances en CSS suffisantes jusqu’à lors sont bien légères pour arriver à structurer correctement ma page.

Je viens de commander ton livre « CSS2 Pratique du Design Web », pour combler mes lacunes.
J’espère toutefois arriver à réaliser mon gabarit avant de le recevoir.

Aller à table, « je prendrais un steak avec 3 aspirines s’il vous plait »

Sujet résolu.