Conversion de disposition de table en div

Question

J'implémente un contrôle de commentaire qui utilise un ASP.Repeater pour afficher chaque commentaire. Le commentaire lui-même est actuellement affiché en utilisant une table pour diviser certaines images pour afficher le commentaire dans une bulle. Je sais que les tables sont censées être la quintessence du mal pour la mise en page de conception, et très cher à afficher pour le navigateur, mais je ne sais pas exactement comment mettre mes coins arrondis au bon endroit et m'assurer que tout s'aligne.

Est-ce que quelqu'un a des suggestions, des exemples, des hacks pour le HTML/CSS requis, ou devrais-je simplement coller avec les tables et espérer le meilleur?

Answer 1

La meilleure ressource que j'ai vue pour créer des coins arrondis en utilisant les éléments DIV était un article sur "A List Apart" - voir http://alistapart.com/articles/customcorners/. Si vous cherchez à utiliser des éléments DIV pour mettre en page l'ensemble de votre site, il existe plusieurs autres articles pertinents sur ce site. Voir:

http://alistapart.com/articles/slidingdoors/
http://www.alistapart.com/articles/slidingdoors2/
http://www.alistapart.com/articles/negativemargins/

Answer 2

Il y a quelques différentes façons de le faire rounded corners in CSS

Je préfère utiliser CSS aux tables autant que possible, parce que je trouve le code pour être beaucoup plus facile à entretenir, et cela ressemble à un projet avec le cadre parfait pour vous mouiller les pieds.

Answer 3

En bref, vous voulez quelque chose comme ceci:

<style> 
    .start { background-image: url("topofbubble.png"); height: <heightofimage>; } 
    .end { background-image: url("bottomofbubble.png"); height: <heightofimage>; } 
    .body {background-image: url("sliceofbubblemiddle.png"); } 
</style> 

... 

<div class="comment"> 
    <span class="start"></span> 
    <span class="body">I would like to say that div layouts are far better than table layouts.</span> 
    <span class="end"></style> 
</div> 

Cela devrait vous aider à démarrer. Je n'ai pas essayé le code spécifiquement et peut faire un exemple complet si nécessaire.

Answer 4

Si vous êtes prêt à présenter aux utilisateurs IE avec des coins pointus, coins arrondis sont trivialement résoluble avec la propriété border-radius CSS. Aucun navigateur ne l'implémente actuellement en tant que propriété de base, mais plusieurs le font en tant que propriété préfixée. Par exemple, pour l'utiliser dans Firefox, vous utiliserez la propriété -moz-border-radius, pour Safari, utilisez -webkit-border-radius, etc.