Skip to main content

Learning DIVs

Recently, I’ve been experimenting with using DIVs instead of TABLEs for creating Region Templates in Oracle Application Express.

DIVs seem to have a lot less “moving parts” – or places where the code can become corrupted. Troubleshooting a missing <TD> tag is never a fun exercise, and by using DIVs, you can largely avoid that.

However, DIVs tend to have issues with cross-browser development. What looks great on Firefox doesn’t even render on MSIE. That alone can be a challenge to troubleshoot,

Having said all of this, I was able to take this Region Template:


<table width="100%" cellpadding="0" cellspacing="0" id="#REGION_ID#">
<tr>
<td>
<table border="0" cellpadding="1" cellspacing="0" width="100%">
<tr>
<td bgcolor="#666666">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF">
<tr>
<td>
<table border="0" cellpadding="5" cellspacing="0" width="100%">
<tr>
<td height="25"><span class="projectInfoRegion">#TITLE#</span><br />
<span class="content_text">#BODY#</span></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><img src="/i/st/st_region_bottom_shadow.gif" width="100%" height="3"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />


And reduce it to just this:

<div class="regionContainer">
<div class="regionOuterContainer" id="#REGION_ID#">
<div class="regionInnerContainer">
<div class="regionButtons">#CLOSE#</div>
<div class="regionTitle">#TITLE#</div>
<div class="regionBody">#BODY#</div>
</div>
</div>


Now keep in mind, pages built with DIVs aren’t much to look at without an associated CSS file. I used the following entries for my new Region Template:


.regionContainer
{
padding-bottom:10px; font-family:Arial; font-size:12px; margin-top:5px;
}
.regionOuterContainer
{
border-bottom:1px solid #aaa; border-right:1px solid #aaa;
}
.regionInnerContainer
{
padding:5px; border:1px solid #000;
}
.regionTitle
{
font-size:18px; font-weight:bold; border-bottom: 1px solid #ddd;
}
.regionButtons
{
float:right;
}


CSS Zen Garden offers some pretty compelling examples of how powerful CSS-based design can truly be. Each example on the site uses the exact same HMTL. All attributes, from images to spacing, are defined in the CSS.

Adding the number of lines in the CSS (20) to the actual DIV-based HTML (8) is almost the same as the TABLE-based HMTL (32). However, the DIVs allow you to do more “cool” things, such as hiding and showing a region.

I am also finding that by using DIVs and a CSS, you have an easier way to make more site-wide changes. I can easily change the Font of that template by altering one line in the CSS file. I can also fine-tune any of the attributes of each of the DIVs by adding the appropriate directives to the respective class.

Despite their cross-browser issues, I’m finding that designing UIs using DIVs and a CSS is much more elegant than the traditional TABLE-based approach.

Comments

Chris Spiering said…
DIV's Arghhhh ....
I suppose Carl will laugh but trying to implement them nearly sent me to an early grave. I'd get them working nice for firefox but ie would look like garbage.

I've admitted defeat for the moment but one thing I learnt was that if you were good with css you could make some pretty slick looking sites.

Maybe I need to go back and have another go.
Scott said…
I've got a way to go - had to resort to TABLEs in a project just last night, as the DIVs were making me mad, as well...

Anyone know a good 30 min tutorial on them?

- Scott -
Andy Todd said…
You need to read Designing With Web Standards by Jeffrey Zeldman and/or Web Standards Solutions by Dan Cederholm for simple, concise and to the point help with designing web sites *properly*
Vikas said…
http://del.icio.us/vikasa/css+tutorial

Popular posts from this blog

Whose Deck is it Anyways?

This year at KScope, we're going to try something new.  And fun.  And funny to watch - we hope.  It's called "Whose Deck is it Anyways?", and will occur on Sunday at 8:30pm.  It's only 30 minutes, but it will likely be the best 30 minutes of the conference.  Or at least the most embarrassing.

Here's what we're going to do: the will be four 5-minute presentations - one on each of the following: BI, EPM, Database & APEX.

Sound interesting?  Probably not.  We get that, too.  So here's what we did.

Each 5-minute session will be presented by a non-expert.  For example, it's highly likely that I'll be presenting on BI or EPM.

To make it even better, each slide deck will be prepared by the corresponding expert.  So again, it's highly likely that my slide deck's creator will be either Stewart Bryson or Edward Roske.  If nothing else, this session will be a crash course in how not to make cohesive, easy to read slides.

Interested now?  Ya,…

Spaced Out

A while back, I wrote about how to give the Universal Theme a face lift.  If you follow the steps in that post, the base font for an APEX application with the Universal Theme can easily be changed.

While that's all well and good, sometimes you only want to change the font for a report, not the entire page.  One of the applications that I'm building contains a number of IRs based mostly on log data.  Thus, having that data in a monospaced font would make it a whole lot easier to read.

You can search Google Fonts for monospaced fonts by selecting only that option on the right-side menubar.  You can also opt for the standard yet kinda boring Courier and achieve the same thing.

To implement this in your application, follow the steps in my other post, but stop shy of the final step.  Instead of pasting in the text that I specify, paste in the following to the Custom CSS field in Theme Roller, using the name of the font you selected for the font-family:

.a-IRR-table tr td { font-fam…

#fakecode

Unless you've managed to somehow filter out everything about US politics over the last few months (and if you have, please let me know your secret), then you've likely heard about "fake news".  From a high level, my basic understanding of "fake news" is that it refers to stories or websites that are fabricated to advance the political beliefs and/or ideologies of one site or the other.  Your definition may differ.

So what is fake code?  That, I can at least try to explain in a bit more detail.

The other day, I saw this image posted on Kris Rice's twitter feed:



I thought it was a joke, but it's actually a real book. That made me laugh.  Then cry.  Then I read the book, mainly since it's only 4 pages.  Believe it or not,  there's actually some really good content packed in there.  Let me summarize:

If you choose to copy code from Stack Overflow, the OTN forum, or anywhere, really, there's a few things to keep in mind:


Who owns the code.  It…