Conversione del layout della tabella in div

Question

Sto implementando un controllo dei commenti che utilizza un ASP.Repeater per visualizzare ogni commento.Il commento stesso viene attualmente visualizzato utilizzando una tabella per dividere alcune immagini per visualizzare il commento in una bolla.

So che le tabelle dovrebbero essere l'epitome del male per il layout del design e molto costose da visualizzare per il browser, ma non sono esattamente sicuro di come posizionare gli angoli arrotondati nella posizione corretta e assicurarmi che tutto sia allineato.

Qualcuno ha suggerimenti, esempi, hack per l'HTML/CSS richiesto o dovrei semplicemente limitarmi alle tabelle e sperare per il meglio?

Answer 1

La migliore risorsa che ho visto per creare angoli arrotondati utilizzando elementi DIV è stato un articolo su "A List Apart" - vedi http://alistapart.com/articles/customcorners/.Se stai cercando di utilizzare gli elementi DIV per impaginare l'intero sito, ci sono molti altri articoli pertinenti su quel sito.Vedere:

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

Answer 2

Esistono diversi modi per farlo angoli arrotondati nei CSS

Preferisco usare i CSS per le tabelle quando possibile, solo perché trovo che il codice sia molto più facile da mantenere, e questo sembra un progetto con l'ambito perfetto per bagnarti i piedi.

Answer 3

In breve vorresti qualcosa del genere:

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

Questo dovrebbe aiutarti a iniziare.Non ho provato il codice in modo specifico e posso fare un esempio completo se necessario.

Answer 4

Se sei disposto a presentare agli utenti IE angoli acuti, gli angoli arrotondati sono banalmente risolvibili con il file border-radius Proprietà CSS.Nessun browser attualmente lo implementa come proprietà di base, ma molti lo fanno come proprietà con prefisso.Ad esempio, per usarlo in Firefox, dovresti usare la proprietà -moz-border-radius, per Safari, utilizzare -webkit-border-radius, eccetera.