CODEWITHSUNDEEP
htmlcsslayout
Andrew Burgess
Andrew Burgess

Reputation: 5298

Converting Table Layout To Div

I'm implementing a comment control that uses an ASP.Repeater to display each comment. The comment itself is currently displayed using a table to divide up some images to display the comment in a bubble.

I know that tables are supposed to be the epitome of evil for design layout, and really expensive to display for the browser, but I'm not exactly sure how to put my rounded corners in the correct location and make sure everything lines up.

Does anyone have any suggestions, examples, hacks for the HTML/CSS required, or should I just stick with tables and hope for the best?

Upvotes: 1

Views: 2187

Answers (4)

Tab Atkins-Bittner
Tab Atkins-Bittner

Reputation: 18373

If you are willing to present IE users with sharp corners, rounded corners are trivially solvable with the border-radius CSS property. No browser currently implements it as a base property but several do as a prefixed property. For example, to use it in firefox, you would use the property -moz-border-radius, for Safari, use -webkit-border-radius, etc.

Upvotes: 0

Steve Moyer
Steve Moyer

Reputation: 5733

The best resource I've seen for creating rounded corners using DIV elements was an article on "A List Apart" - see http://alistapart.com/articles/customcorners/. If you're looking to use DIV elements to layout your entire site, there are several other relevant articles on that site. See:

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

Upvotes: 4

Doug Moore
Doug Moore

Reputation: 1193

In short you would want something like this:

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

That should get you started. I did not try the code specifically and can make a complete example if necessary.

Upvotes: 0

Wayne
Wayne

Reputation: 39918

There are a few different ways to do rounded corners in CSS

I prefer using CSS to tables whenever possible, just because I find the code to be a lot easier to maintain, and this sounds like a project with the perfect scope to get your feet wet.

Upvotes: 1

Related Questions