Conversion de la disposition de la table en Div

StackOverflow https://stackoverflow.com/questions/92842

  •  01-07-2019
  •  | 
  •  

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é à l'aide d'un tableau permettant de diviser certaines images pour afficher le commentaire dans une bulle.

Je sais que les tables sont censées être l'incarnation du mal en matière de conception, et coûtent très cher à afficher pour le navigateur, mais je ne sais pas exactement comment placer mes coins arrondis au bon endroit et m'assurer que tout est bien aligné. up.

Quelqu'un a-t-il des suggestions, des exemples, des astuces pour le code HTML / CSS requis ou dois-je simplement m'en tenir à des tableaux et espérer le meilleur?

Était-ce utile?

La solution

La meilleure ressource que j'ai vue pour créer des angles arrondis à l'aide d'éléments DIV était un article sur "A List Apart". - voir http://alistapart.com/articles/customcorners/ . Si vous souhaitez utiliser des éléments DIV pour mettre en page l'ensemble de votre site, vous trouverez 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/

Autres conseils

Il existe différentes façons de procéder coins arrondis en CSS

Je préfère utiliser CSS dans les tableaux chaque fois que cela est possible, simplement parce que je trouve le code beaucoup plus facile à gérer et que cela ressemble à un projet avec la portée idéale pour vous familiariser avec vos données.

En bref, vous voudriez 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 je peux faire un exemple complet si nécessaire.

Si vous souhaitez présenter aux utilisateurs Internet IE des coins pointus, les coins arrondis peuvent être résolus de manière triviale avec la propriété CSS border-radius . 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 utiliseriez la propriété -moz-border-radius , pour Safari, utilisez -webkit-border-radius , etc.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top