Konvertieren von Tabellenlayout zu Div

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

  •  01-07-2019
  •  | 
  •  

Frage

Ich bin die Umsetzung einen Kommentar Kontrolle, die einen ASP.Repeater nutzt jeden Kommentar angezeigt werden soll. Der Kommentar selbst wird zur Zeit eine Tabelle angezeigt unter Verwendung einiger Bilder aufzuteilen in einer Blase den Kommentar angezeigt werden soll.

Ich weiß, dass Tabellen sollen der Inbegriff des Bösen für Design-Layout sein, und sehr teuer für den Browser angezeigt werden, aber ich bin mir nicht ganz sicher, wie meine abgerundeten Ecken an der richtigen Stelle zu setzen und sicherzustellen, dass alles Linie machen up.

Hat jemand irgendwelche Vorschläge, Beispiele, Hacks für die HTML / CSS erforderlich, oder soll ich nur Stick mit Tischen und auf das Beste hoffen?

War es hilfreich?

Lösung

Die beste Ressource, die ich für die Erstellung von abgerundeten Ecken gesehen habe mit DIV-Elementen war ein Artikel über „A List Apart“ - siehe http://alistapart.com/articles/customcorners/ . Wenn Sie schauen, DIV-Elemente zu verwenden, die gesamte Website Layout, gibt es mehrere andere relevante Artikel auf dieser Website. Siehe auch:

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

Andere Tipps

Es gibt ein paar verschiedene Möglichkeiten abgerundete Ecken in CSS

ziehe ich CSS Tabellen, wann immer möglich, nur weil ich den Code finde viel leichter zu pflegen, und das klingt wie ein Projekt mit dem perfekten Rahmen nassen Füße zu bekommen.

Kurz gesagt würden Sie so etwas wie dies wollen: 

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

Das sollte Ihnen den Start. Ich habe nicht versucht, den Code spezifisch und kann ein vollständiges Beispiel, wenn erforderlich macht.

Wenn Sie bereit sind, IE-Benutzer mit scharfen Ecken zu präsentieren, abgerundeten Ecken mit der border-radius CSS-Eigenschaft trivialen auflösbar sind. Kein Browser zur Zeit implementiert es als Basis Eigenschaft einige jedoch als Präfix Eigenschaft. Zum Beispiel ist es in Firefox zu verwenden, würden Sie die Eigenschaft -moz-border-radius verwenden, für Safari, Verwendung -webkit-border-radius, etc.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top