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

Thanks, ODC (Oracle Developer Community)!

I owe a lot of thanks to the ODC - which stands for Oracle Developer Community.  What is ODC?  You may remember it as OTN, or the Oracle Technology Network.  Same people, different name.  Why they changed it I can't say.  People just liked it better that way... (love that song)

In any case, what am I thankful for?  A lot.  To start, the tools that I use day in and day out: SQL Developer, ORDS, Oracle Data Modeler, SQLcl and - of course - APEX.  Without these tools, I'm likely on a completely different career path, perhaps even one that aligns more closely with my degree in television management.

While the tools are great, it's really the people that make up the community that make ODC stand out. From the folks who run ODC and the Oracle ACE program to the developers and product managers who are behind the awesome tools, the ODC community is one of, if not the greatest asset of being involved with Oracle's products.

If you have yet to get more involved with this communi…

Logging APEX Report Downloads

A customer recently asked how APEX could track who clicked “download” from an Interactive Grid.  After some quick searching of the logs, I realized that APEX simply does not record this type of activity, aside from a simple page view type of “AJAX” entry.  This was not specific enough, and of course, led to the next question - can we prevent users from downloading data from a grid entirely?

I knew that any Javascript-based solution would fall short of their security requirements, since it is trivial to reconstruct the URL pattern required to initiate a download, even if the Javascript had removed the option from the menu.  Thus, I had to consider a PL/SQL-based approach - one that could not be bypassed by a malicious end user.

To solve this problem, I turned to APEX’s Initialization PL/SQL Code parameter.  Any PL/SQL code entered in this region will be executed before any other APEX-related process.  Thus, it is literally the first place that a developer can interact with an APEX page…

Custom Export to CSV

It's been a while since I've updated my blog. I've been quite busy lately, and just have not had the time that I used to. We're expecting our 1st child in just a few short weeks now, so most of my free time has been spent learning Lamaze breathing, making the weekly run to Babies R Us, and relocating my office from the larger room upstairs to the smaller one downstairs - which I do happen to like MUCH more than I had anticipated. I have everything I need within a short walk - a bathroom, beer fridge, and 52" HD TV. I only need to go upstairs to eat and sleep now, but alas, this will all change soon...

Recently, I was asked if you could change the way Export to CSV in ApEx works. The short answer is, of course, no. But it's not too difficult to "roll your own" CSV export procedure.

Why would you want to do this? Well, the customer's requirement was to manipulate some data when the Export link was clicked, and then export it to CSV in a format…