تحويل تخطيط الجدول إلى Div

Question

أقوم بتنفيذ عنصر تحكم تعليق يستخدم ASP.Repeater لعرض كل تعليق.يتم عرض التعليق نفسه حاليًا باستخدام جدول لتقسيم بعض الصور لعرض التعليق في فقاعة.

أعلم أنه من المفترض أن تكون الجداول مثالاً للشر في تخطيط التصميم، كما أن عرضها للمتصفح مكلف للغاية، لكنني لست متأكدًا تمامًا من كيفية وضع الزوايا الدائرية في الموقع الصحيح والتأكد من أن كل شيء مرتب.

هل لدى أي شخص أي اقتراحات أو أمثلة أو اختراقات لـ HTML/CSS المطلوبة، أم يجب أن ألتزم بالجداول وأتمنى الأفضل؟

Answer 1

أفضل مورد رأيته لإنشاء زوايا مستديرة باستخدام عناصر DIV كان مقالًا عن "A List Apart" - راجع http://alistapart.com/articles/customcorners/.إذا كنت تتطلع إلى استخدام عناصر DIV لتخطيط موقعك بالكامل، فهناك العديد من المقالات الأخرى ذات الصلة على هذا الموقع.يرى:

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

Answer 2

هناك عدة طرق مختلفة للقيام بذلك زوايا مدورة في CSS

أفضل استخدام CSS للجداول كلما أمكن ذلك، فقط لأنني أجد أن الحفاظ على الكود أسهل بكثير، وهذا يبدو وكأنه مشروع ذو نطاق مثالي لترطيب قدميك.

Answer 3

باختصار كنت تريد شيئا من هذا القبيل:

<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>

ذلك الذي يجب ان تبدأ به.لم أجرب الكود على وجه التحديد ويمكنني تقديم مثال كامل إذا لزم الأمر.

Answer 4

إذا كنت على استعداد لتقديم زوايا حادة لمستخدمي IE، فإن الزوايا الدائرية قابلة للحل بشكل تافه باستخدام ملف border-radius خاصية CSS.لا يوجد متصفح يطبقها حاليًا كخاصية أساسية ولكن العديد منها يقوم بها كخاصية مسبوقة.على سبيل المثال، لاستخدامه في فايرفوكس، يمكنك استخدام الخاصية -moz-border-radius, ، بالنسبة لسفاري، استخدم -webkit-border-radius, ، إلخ.