AP Div vs tables

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
HTML Experts,

Tables are not good, right?
My Dreamweaver book says I should  useAP Div=94 instead

So I did, I made aStaff=94 page and spent some time getting pictures
and text mostly lined up.
Using AP Div.

Now, the Executive Director says she wants the people in a different
order. So I need to move my content (pictures and text)
This is going to be a lot of work.

My questions are:
How would you recommend, that I set up images and descriptions? Which
Is AP Div better than tables?
Is there an easier way to move text and pictures around, when using AP

Here is my staff page, done using AP DIv:

Here is a Photos page, done with tables. Notice all the white space
between the photo and captions, which I don=92t like.

Thank you,

Re: AP Div vs tables

In article

Quoted text here. Click to load it

I had a look at the page source to figure out what an "AP Div"
might be...

I would not have used absolute positioning at all under the same
circumstances, which would make re-ordering the divs much easier.

Quoted text here. Click to load it

I'd go with a standard two-column layout, with the "Find Services"
stuff in a div floated left, and the main content in a div with a
large enough left margin to accommodate it. For each staff person,
then, a single div (no positioning) containing a floated image,
perhaps and h2 for their name, and everything else in paragraphs.

Then if I needed to move someone on the page, it would be a simple
matter of cutting/pasting the entire div and contents...

Re: AP Div vs tables

On Mon, 9 Apr 2012 11:34:59 -0700 (PDT), Bill wrote:

Quoted text here. Click to load it

So say some. Others disagree, at least occasionally :-) .

Quoted text here. Click to load it

When you request a cell of height 240 px

: <td width="50%" height="240">

to hold an image of height 184 px

: <img src="images/DrNehring.jpg" width="269" height="184" align="top" />

you've got to expect about 56 px worth (240 minus 184)  of white space, top
and/or bottom, combined :-) . So: try removing the invocations of the
'height="240" ' sort from the TD tags of the cells containing pictures, and
see if that helps.

Quoted text here. Click to load it

*If* that helps, you're welcome :-) . If not, forgive my inept "solution".

Cheers, -- tlvp
Avant de repondre, jeter la poubelle, SVP.

Re: AP Div vs tables

Am 2012-04-09 20:34, Bill meinte:
Quoted text here. Click to load it

What are "AP Div"s? Looking up your page source - must be "absolute
Quoted text here. Click to load it

Since you don't have tabular data (and some bog-standard layout) you can
easily go with table-less markup.

Quoted text here. Click to load it

Just avoid the "AP". Float your images and you are done. The whole page
doesn't need a single position setting.

Quoted text here. Click to load it

Gruesome. While you do away with the "AP Divs", correct your markup
(validator says 118 something errors) and dump the layout tables that
are still there - together with all those "transparent.gif"s. Reminds me
of webpages from the last millenium.

Quoted text here. Click to load it

That's because the paragraph containing the caption has a top (and
bottom) margin.



Re: AP Div vs tables

In article

Quoted text here. Click to load it

Not particularly good for what you are likely wanting, no. They agree
particularly good for lots of purposes though.


Quoted text here. Click to load it

Consider something like:

<div class="picCaption">
<a href="..."><img src="..."...></a>
<span class="caption">The Rev. Dr. Arlene K. Nehring welcomes...</span>

Unless you really want to style each particular picture/caption block,  
consider styling "picCaption" as simply as choosing the px width of
the largest of your pics. If you are happy with the caption simply
being right underneath, you don't even need the class of "caption" or
even the span at all, you can just have a <br> after the img element.

If you want to control the space between the picture and the caption,
you can do it with styles like this:

.picCaption {display: inline-block; width: 269px;}
.caption {display: block; margin-top: 0.3em;}


Site Timeline