div-based layouts..

hi,

I'm converting some table-based code to div-based.. I really don't like
this, I find tables much simpler for some situations, but well...

the hardest time I have is with content that has to appear side-to-side,
like this page, http://www.francesdelrio.com/resume/skills.html

I had no problem doing the top three links..

but for the main content (bulleted list and the rest) I can't get the
divs to appear side-by-side in XHTML... (if I use non-XHMTL doctype the
divs appear side-to-side fine, but not with XHTML..)

I assume display:inline is for displaying divs side-by-side, but it
doesn't work in all situations..

test page:
http://www.francesdelrio.com/resume/test.html
(I put some comments/questions in the code itself..)
(except for 'target' attr in <a..> tags (???) this code validates
fine as XHTML strict..)

this is SO MUCH SIMPLER with tables, what a pain.. oh well....

would appreciate some help..

thank you very much..

maya wrote:

hi,

I'm converting some table-based code to div-based.. I really don't like
this, I find tables much simpler for some situations, but well...

the hardest time I have is with content that has to appear side-to-side,
like this page, http://www.francesdelrio.com/resume/skills.html

I had no problem doing the top three links..

but for the main content (bulleted list and the rest) I can't get the
divs to appear side-by-side in XHTML... (if I use non-XHMTL doctype the
divs appear side-to-side fine, but not with XHTML..)

I assume display:inline is for displaying divs side-by-side, but it
doesn't work in all situations..

test page:
http://www.francesdelrio.com/resume/test.html
(I put some comments/questions in the code itself..)
(except for 'target' attr in <a..> tags (???) this code validates
fine as XHTML strict..)

this is SO MUCH SIMPLER with tables, what a pain.. oh well....

would appreciate some help..

thank you very much..

one more thing: I know I could do this very easily w/absolute
positioning, but I'm trying to learn to do it w/o that; I know many
people don't approve of absolute-positioning (for reasons of "liquid"
design and the rest..)

thank you..

On 16 Feb, 16:54, maya <maya778... (AT) yahoo (DOT) com> wrote:

I'm converting some table-based code to div-based..

Congratulations! Take a look at a decent example three-column layout
and use that. Glish.com used to be the benchmark for a good one, but
it's quite old now and has hacks in it for obsolete browsers that make
it a bit more complicated than strictly necessary these days.

http://glish.com/css/7.asp

The basis for "three columns" in CSS is to _float_ the <div>s, not to
inline them. Read the tutorial at
http://brainjar.com/css/positioning/
for the nuts and bolts of doing this

Andy Dingley wrote:

On 16 Feb, 16:54, maya <maya778... (AT) yahoo (DOT) com> wrote:

I'm converting some table-based code to div-based..

Congratulations! Take a look at a decent example three-column layout
and use that. Glish.com used to be the benchmark for a good one, but
it's quite old now and has hacks in it for obsolete browsers that make
it a bit more complicated than strictly necessary these days.

http://glish.com/css/7.asp

The basis for "three columns" in CSS is to _float_ the <div>s, not to
inline them. Read the tutorial at
http://brainjar.com/css/positioning/
for the nuts and bolts of doing this

thank you very much.. to you and other responder.. I used float:left and
float:right, that seemed to work, but still having some issues..
http://www.francesdelrio.com/resume/test2.html (looks diff in IE, FF..)

question: float:left and float:right works, I suppose, when you have
just TWO divs that need to appear side-by-side.. BUT: what about when
you have much more, say, SIX little paragraphs that need to appear side
by side???

I have to go out, back this evening.. will study your responses in
detail tonight..

thank you very much..

maya wrote:

I'm converting some table-based code to div-based.. I really don't like
this, I find tables much simpler for some situations, but well...

And for tabular data, tables are not only easier than CSS-based divs,
they're more appropriate, too. (Free conclusion for you to jump to: if
you don't like it, don't do it. ;-) )

the hardest time I have is with content that has to appear side-to-side,
like this page, http://www.francesdelrio.com/resume/skills.html

Surely this is tabular data, and cries out for a <table>. Disregarding
the rest of your post, it seems to me that the unordered list of
programming languages in the second row of the left column is nicely
labeled in the first row with "Markup/Programming Languages", while the
unordered list of tools in the right column (bottom row) is nicely
labeled as "IDEs/Tools" in the top row. It's a table! Mark it up that way.

Always excepting, of course, you want the fun and excitement of using it
as a learning exercise on *how* to do it.


--
John
Or have I misunderstood the basic problem again?

On 16 Feb, 18:31, maya <maya778... (AT) yahoo (DOT) com> wrote:

question: *float:left and float:right works, I suppose, when you have
just TWO divs that need to appear side-by-side.. BUT: what about when
you have much more, say, SIX little paragraphs that need to appear side
by side??? *

Float them all leftwards - they'll work it out for themselves.

Floating is usually pretty easy, it's clearing correctly afterwards
that's more awkward. Read brainjar. Accept that you probably will have
to add a HTML element to set the clearing behaviour on - if there
aren't enough HTML elements there you can't invent a few more with
CSS. You maybe can with
:after { content ... } but that's contrived and not really the best
approach. Just accept that adding a simple HTML element (no text
content needed) _is_ acceptable.

In article <4999fd4e$1_4 (AT) news (DOT) bluewin.ch>,
John Hosking <John (AT) DELETE (DOT) Hosking.name.INVALID> wrote:

maya wrote:

I'm converting some table-based code to div-based.. I really don't like
this, I find tables much simpler for some situations, but well...

And for tabular data, tables are not only easier than CSS-based divs,
they're more appropriate, too. (Free conclusion for you to jump to: if
you don't like it, don't do it. ;-) )


the hardest time I have is with content that has to appear side-to-side,
like this page, http://www.francesdelrio.com/resume/skills.html

Surely this is tabular data, and cries out for a <table>.

Not quite sure it cries out for it. Not that some data does not
sometimes do just this, namely, cry out for one big table

Certainly, in the ordinary concept of the idea of a table, OP can lay
out these lists under col headings, "Markup/Programming Languages",
"IDEs/Tools", "Education" and "Languages" and either one TD row with
lists inside or simply many rows with TDs that contain the items
relevant to the col headings. That there is no particular meaningful
relationship between the items across *all* the rows does not prove that
a table is being used for page layout.

However, as we know, a big table is not very flexible width wise. It is
very much open to the OP to present the information in a way that is
more flexible. For example, by floating less wide elements (lists,
thinner tables, whatever), the space in a webpage can be more
effectively used up and communication can be enhanced rather than
detracted from. Especially in this case where it is so clear that we are
looking at a list of a man's qualifications.

If horizontal space is needing to be conserved and vertical scrolling
not minded, there is a yet another way, to list and list within list
down the page. I rather fancy this! Closer to no style, as far away as
can be from Travis and his need for stimulation. Yes, I like this idea a
lot. More HTML and less CSS.

Cats and ways to skin them!

--
dorayme

dorayme wrote:

[snip, snip]

More HTML and less CSS.

[and more snip]

Just a gentle reminder that the whole idea is to separate content (html)
from presentation (css).

--
Gus

In article <gndebn$qdf$1 (AT) news (DOT) motzarella.org>,
Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

dorayme wrote:

[snip, snip]

More HTML and less CSS.

[and more snip]

Just a gentle reminder that the whole idea is to separate content (html)
from presentation (css).

And I need this reminder because?

Because the phrase "More HTML and less CSS" sounds like I meant more
HTML *at the expense* of CSS?

Having this online alzeimic reader - which I know you have been trying
to pry out of my clutches for years Gus <g> - means I have not got the
context of the remark before me.

So, I will simply have to remember what I said, and ... here it is:

"If horizontal space is needing to be conserved and vertical scrolling
not minded, there is a yet another way, to list and list within list
down the page. I rather fancy this! Closer to plain godly honest default
styles supplied by browser, as far away as can be from Travis and his
need for stimulation. Yes, I like this idea a lot. More reliance on what
the natural HTML delivers and less need for fancy footwork with CSS.

"Cats, Travis and ways to skin them!"

What is wrong with that? <g>

--
dorayme

dorayme wrote:

In article <4999fd4e$1_4 (AT) news (DOT) bluewin.ch>,
John Hosking <John (AT) DELETE (DOT) Hosking.name.INVALID> wrote:

maya wrote:
I'm converting some table-based code to div-based.. I really don't like
this, I find tables much simpler for some situations, but well...
And for tabular data, tables are not only easier than CSS-based divs,
they're more appropriate, too. (Free conclusion for you to jump to: if
you don't like it, don't do it. ;-) )

the hardest time I have is with content that has to appear side-to-side,
like this page, http://www.francesdelrio.com/resume/skills.html
Surely this is tabular data, and cries out for a <table>.

Look again. At present, it looks to me like headings and lists. It's
not marked up that way though, what looks like headings are spans.

Not quite sure it cries out for it. Not that some data does not
sometimes do just this, namely, cry out for one big table

Certainly, in the ordinary concept of the idea of a table, OP can lay
out these lists under col headings, "Markup/Programming Languages",
"IDEs/Tools", "Education" and "Languages" and either one TD row with
lists inside or simply many rows with TDs that contain the items
relevant to the col headings. That there is no particular meaningful
relationship between the items across *all* the rows does not prove that
a table is being used for page layout.

However, as we know, a big table is not very flexible width wise.

Well, it can't wrap under, if that is what you mean.


It is

very much open to the OP to present the information in a way that is
more flexible. For example, by floating less wide elements (lists,
thinner tables, whatever), the space in a webpage can be more
effectively used up and communication can be enhanced rather than
detracted from. Especially in this case where it is so clear that we are
looking at a list of a man's qualifications.

If horizontal space is needing to be conserved and vertical scrolling
not minded, there is a yet another way, to list and list within list
down the page. I rather fancy this! Closer to no style, as far away as
can be from Travis and his need for stimulation. Yes, I like this idea a
lot. More HTML and less CSS.

I just don't get the lists of lists here. Lists have a real
definition and I can't seem them being used for presentation. That to
me, is the reason for the syntactically empty div.

I do agree that less CSS is good, particularly in this page where CSS
is being used to make headings out of spans.

This page could be done with exactly the same look, with half the
html and probably half the CSS. And it would make syntactic sense and
easier to maintain.

Jeff

Cats and ways to skin them!