Two Columns; Should be Simple

[Alan Little]

Viewed in IE, this page is exactly what I'm trying to do:

http://www.holotech.net/links/

Header, two fixed-width columns, and a footer. However, in NS and Opera,
the second column slides to the left, on top of the first column. I've read
all the tutorials and examples I could find, but everything else ends up
with the second column all the way over on the right side of the window. I
just want it butted up against the first column. I know this should be
simple, but I just can't get it.

I'm really, really trying not to use tables, but if I don't stop banging my
head on the desk soon I'm going to require medical attention.

--
Alan Little
Phorm PHP Form Processor

http://www.phorm.com/

[Spartanicus]

Re: Two Columns; Should be Simple

Alan Little <alan@n-o-s-p-a-m-phorm.com> wrote:
[color=blue]
>http://www.holotech.net/links/
>
>I'm really, really trying not to use tables[/color]

You've go far more important things to fix first:

1) Use semantic markup
2) Code to strict standard
3) Use CSS to replace junk like <br><br>
4) Not mix XHTML with HTML
5) Fix the micro fonts

--
Spartanicus

[Alan Little]

Re: Two Columns; Should be Simple

Carved in mystic runes upon the very living rock, the last words of
Spartanicus <invalid@invali d.invalid> of
comp.infosystem s.www.authoring.stylesheets make plain:
[color=blue]
> Alan Little <alan@n-o-s-p-a-m-phorm.com> wrote:
>[color=green]
>>http://www.holotech.net/links/
>>
>>I'm really, really trying not to use tables[/color]
>
> You've go far more important things to fix first:
>
> 1) Use semantic markup
> 2) Code to strict standard
> 3) Use CSS to replace junk like <br><br>
> 4) Not mix XHTML with HTML
> 5) Fix the micro fonts[/color]

Thank you for your response. I'm afraid I don't understand most of it. I
am a programmer, not a designer. I know basic HTML, and I've learned some
basic CSS, but that's it. I know I can get the layout I want using
tables, but I'm trying to be more enlightened. I just want to put
together a simple template or two to go out with this application.

--
Alan Little
Phorm PHP Form Processor

http://www.phorm.com/

[Spartanicus]

Re: Two Columns; Should be Simple

Alan Little <alan@n-o-s-p-a-m-phorm.com> wrote:
[color=blue][color=green][color=darkred]
>>>http://www.holotech.net/links/
>>>
>>>I'm really, really trying not to use tables[/color]
>>
>> You've go far more important things to fix first:[/color][/color]
[color=blue]
>Thank you for your response. I'm afraid I don't understand most of it.[/color]
[color=blue]
>1) Use semantic markup[/color]
Use headers, lists, paragraphs. Divs and spans should only be used to
encapsulate code for styling purposes.[color=blue]
>2) Code to strict standard[/color]
Use a Strict doctype and code in that spirit.[color=blue]
>3) Use CSS to replace junk like <br><br>[/color]
Self evident.[color=blue]
>4) Not mix XHTML with HTML[/color]
<... /> does not belong in a HTML document.[color=blue]
>5) Fix the micro fonts[/color]
I can't read the microscopic font. Don't specify Verdana as the body
font, leave the body font size alone, and don't use the px unit for font
sizing. All these issues have been discussed to death on this group.
[color=blue]
>am a programmer, not a designer. I know basic HTML, and I've learned some
>basic CSS, but that's it. I know I can get the layout I want using
>tables, but I'm trying to be more enlightened.[/color]

Then first fix the above issues, they are far more detrimental to the
quality of the code than using tables for layout could be.

--
Spartanicus

[Beauregard T. Shagnasty]

Re: Two Columns; Should be Simple

Alan Little wrote:[color=blue]
> Thank you for your response. I'm afraid I don't understand most of
> it. I am a programmer, not a designer. I know basic HTML, and I've
> learned some basic CSS, but that's it. I know I can get the layout
> I want using tables, but I'm trying to be more enlightened. I just
> want to put together a simple template or two to go out with this
> application.[/color]

Perhaps a short study of this rather nice two-column template will help.

http://www.benmeadowcroft.com/webdev/csstemplates/left-column.html

--
-bts
-This space intentionally left blank.

[Alan Little]

Re: Two Columns; Should be Simple

Carved in mystic runes upon the very living rock, the last words of
Spartanicus of comp.infosystem s.www.authoring.stylesheets make plain:
[color=blue]
> Alan Little <alan@n-o-s-p-a-m-phorm.com> wrote:
>[color=green][color=darkred]
>>>>http://www.holotech.net/links/
>>>>
>>>>I'm really, really trying not to use tables
>>>
>>> You've go far more important things to fix first:[/color][/color]
>[color=green]
>>Thank you for your response. I'm afraid I don't understand most of it.[/color]
>[color=green]
>>1) Use semantic markup[/color]
> Use headers, lists, paragraphs. Divs and spans should only be used to
> encapsulate code for styling purposes.[color=green]
>>2) Code to strict standard[/color]
> Use a Strict doctype and code in that spirit.[color=green]
>>3) Use CSS to replace junk like <br><br>[/color]
> Self evident.[color=green]
>>4) Not mix XHTML with HTML[/color]
> <... /> does not belong in a HTML document.[color=green]
>>5) Fix the micro fonts[/color]
> I can't read the microscopic font. Don't specify Verdana as the body
> font, leave the body font size alone, and don't use the px unit for
> font sizing. All these issues have been discussed to death on this
> group.
>[color=green]
>>am a programmer, not a designer. I know basic HTML, and I've learned
>>some basic CSS, but that's it. I know I can get the layout I want
>>using tables, but I'm trying to be more enlightened.[/color]
>
> Then first fix the above issues, they are far more detrimental to the
> quality of the code than using tables for layout could be.[/color]

OK, I took out the body font size specification and got rid of the
verdana. I got rid of all the double <BR>s and most of the single ones.
Hopefully the font size is readable now; it was always OK on my screen,
so I can't tell.

I'm afraid the rest is beyond my scope at the moment. I really do
understand your frustration with my less-than-perfect code. I've seen
programming code that made my skin crawl. But at the same time, I've
helped many a novice programmer get that klunky, awkward code just to
work, because I know everyone has to start somewhere.

I'm self-employed as a freelance programmer. I'm interested in learning
design and layout, but I can only afford to do it as time permits. I go
to csszengarden.co m sometimes and just look through all the amazing
designs. But that's not the focus of my business at the moment, so all I
can do is get it by bits and pieces.

For now, if I can just get a simple template that I can ship with this
application, I'll be happy. The template is not going to be used in most
cases anyway, beyond initial setup. The application is designed to be
integrated into other site designs.

Do you have any insight into my layout problem?

--
Alan Little
Phorm PHP Form Processor

http://www.phorm.com/

[Alan Little]

Re: Two Columns; Should be Simple

Carved in mystic runes upon the very living rock, the last words of
Beauregard T. Shagnasty of comp.infosystem s.www.authoring.stylesheets
make plain:
[color=blue]
> Alan Little wrote:[color=green]
>> Thank you for your response. I'm afraid I don't understand most of
>> it. I am a programmer, not a designer. I know basic HTML, and I've
>> learned some basic CSS, but that's it. I know I can get the layout
>> I want using tables, but I'm trying to be more enlightened. I just
>> want to put together a simple template or two to go out with this
>> application.[/color]
>
> Perhaps a short study of this rather nice two-column template will
> help.
> http://www.benmeadowcroft.com/webdev...ft-column.html[/color]

Thanks. I forgot to mention that that's the other thing I tried, absolute
positioning. But with that I couldn't figure out how to have my footer.

I once saw a layout like what I'm trying to do, but now I can't find it
again.

--
Alan Little
Phorm PHP Form Processor

http://www.phorm.com/

[Spartanicus]

Re: Two Columns; Should be Simple

Alan Little <alan@n-o-s-p-a-m-phorm.com> wrote:
[color=blue][color=green]
>> Then first fix the above issues, they are far more detrimental to the
>> quality of the code than using tables for layout could be.[/color]
>
>OK, I took out the body font size specification and got rid of the
>verdana. I got rid of all the double <BR>s and most of the single ones.
>Hopefully the font size is readable now; it was always OK on my screen,
>so I can't tell.
>
>I'm afraid the rest is beyond my scope at the moment. I really do
>understand your frustration with my less-than-perfect code. I've seen
>programming code that made my skin crawl. But at the same time, I've
>helped many a novice programmer get that klunky, awkward code just to
>work, because I know everyone has to start somewhere.
>
>I'm self-employed as a freelance programmer. I'm interested in learning
>design and layout, but I can only afford to do it as time permits. I go
>to csszengarden.co m sometimes and just look through all the amazing
>designs. But that's not the focus of my business at the moment, so all I
>can do is get it by bits and pieces.[/color]

The points I raised have nothing to do with "design", they relate to
more important and fundamental issues such as lack of structure, poor
usability and accessibility.

Your admiration for csszengarden may be related to your current poor
coding, the code used by csszengarden is an text book example of how
*not* to code normal webpages.
[color=blue]
>For now, if I can just get a simple template that I can ship with this
>application, I'll be happy. The template is not going to be used in most
>cases anyway, beyond initial setup. The application is designed to be
>integrated into other site designs.
>
>Do you have any insight into my layout problem?[/color]

The problem lies with your aim of not using tables for layout,. Your CSS
skills are not yet sufficient to tackle this thorny task. Not using HTML
tables for layout can be compared to the proverbial cherry on top of the
cake, it adds little to the overall quality of the product. If not
handled by someone who has a good understanding of web layouts combined
with advanced CSS skills the end result is often worse compared to when
the design had used an HTML table for layout.

--
Spartanicus

[Johannes Koch]

Re: Two Columns; Should be Simple

Spartanicus wrote:
[color=blue]
> Use headers, lists, paragraphs.[/color]

Yes.
[color=blue]
> Divs and spans should only be used to
> encapsulate code for styling purposes.[/color]

No, not only. They are for grouping content.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

[Spartanicus]

Re: Two Columns; Should be Simple

Johannes Koch <koch@w3develop ment.de> wrote:
[color=blue][color=green]
>> Divs and spans should only be used to
>> encapsulate code for styling purposes.[/color]
>
>No, not only. They are for grouping content.[/color]

Nope. No UA should do anything non stylistic with divs and spans, if it
does it's badly broken.

--
Spartanicus

[Chris Morris]

Re: Two Columns; Should be Simple

Spartanicus <invalid@invali d.invalid> writes:[color=blue]
> Johannes Koch <koch@w3develop ment.de> wrote:[color=green][color=darkred]
> >> Divs and spans should only be used to
> >> encapsulate code for styling purposes.[/color]
> >
> >No, not only. They are for grouping content.[/color]
>
> Nope. No UA should do anything non stylistic with divs and spans, if it
> does it's badly broken.[/color]

No _browser_, perhaps. UAs in general could do this in certain
situations with pre-agreed classes of div and span (or any other
element, of course).

--
Chris

[Spartanicus]

Re: Two Columns; Should be Simple

Chris Morris <c.i.morris@dur ham.ac.uk> wrote:
[color=blue][color=green][color=darkred]
>> >> Divs and spans should only be used to
>> >> encapsulate code for styling purposes.
>> >
>> >No, not only. They are for grouping content.[/color]
>>
>> Nope. No UA should do anything non stylistic with divs and spans, if it
>> does it's badly broken.[/color]
>
>No _browser_, perhaps.[/color]

<hands on hips>UA!</>
[color=blue]
>UAs in general could do this in certain
>situations with pre-agreed classes of div and span (or any other
>element, of course).[/color]

Again: styling only.

The only "grouping" elements in HTML4 are headers. Anything below a
header level x is "grouped" with that header until the next header level
x or higher in the source.

IIRC there is a blurb in one of the specs (HTML4?) that blabs about divs
being for "grouping content". This is badly phrased, they are for
grouping *code*. Divs and spans provide neither structure or semantics.

--
Spartanicus

[Alan Little]

Re: Two Columns; Should be Simple

Carved in mystic runes upon the very living rock, the last words of
Spartanicus of comp.infosystem s.www.authoring.stylesheets make plain:
[color=blue]
> The points I raised have nothing to do with "design", they relate to
> more important and fundamental issues such as lack of structure, poor
> usability and accessibility.[/color]

OK, whatever. These are look and feel issues, right? To me that's design.
Pardon me for not using the correct terminology. If you ever decide to take
up programming (or any other subject you're not familiar with) hopefully
you'll find someone less pedantic and more helpful.

--
Alan Little
Phorm PHP Form Processor

http://www.phorm.com/

[Chris Morris]

Re: Two Columns; Should be Simple

Spartanicus <invalid@invali d.invalid> writes:[color=blue]
> Chris Morris <c.i.morris@dur ham.ac.uk> wrote:[color=green][color=darkred]
> >> >> Divs and spans should only be used to
> >> >> encapsulate code for styling purposes.
> >> >
> >> >No, not only. They are for grouping content.
> >>
> >> Nope. No UA should do anything non stylistic with divs and spans, if it
> >> does it's badly broken.[/color]
> >
> >UAs in general could do this in certain
> >situations with pre-agreed classes of div and span (or any other
> >element, of course).[/color]
>
> Again: styling only.[/color]

<h1>Publication s</h1>
<h2>Professor Smith's Publications</h2>
<h3 class='ab'>Auth ored Books</h3>
<ul>
<li><span class='author'> Smith. J</span>
<span class='year'>20 05</span>.
<span class='title'>T he impact of serif fonts on Aztec pyramids.</span>
<!-- etc, etc, etc -->

A typical browser displays this according to the stylesheet.
h3.ab + ul span.title { font-style: italic; }
Or not, as the case may be.

The hypothetical UA reads it in, picks up the field boundaries and
field names from the <span>s, and enters it into a database / produces
a report / etc.

Alternatively, you could do it with XHTML+something but that would
have its own problems.
[color=blue]
> The only "grouping" elements in HTML4 are headers.[/color]

(What about nested <ul>s?)

To use headers to do the grouping above would mean:
....
<li><h4>Autho r</h4> Smith. J
<h4>Year</h4> 2005.
<h4>Title</h4> The impact of ...

This would rely on styling to make it look like a citation, and also
doesn't make it clear that the '.' after 2005 *isn't* part of the Year
field.
[color=blue]
> Anything below a header level x is "grouped" with that header until
> the next header level x or higher in the source.[/color]

A case where headers for grouping falls down a bit is where:
<h3>4.3.1 Regulations on AXX</h3>
<p>4.3.1.1 General regulation on AXX</p>
<h4>4.3.1.2 Regulations on AXX1</h4>
<p>4.3.1.2.1 Specific regulation on AXX1</p>
<!-- and some more at this level -->
<h4>4.3.1.3 Regulations on AXX2</h4>
<p>4.3.1.3.1 Specific regulation on AXX2</p>
<!-- and some more at this level -->
<!-- these next two should be at the level of h3 in the original document -->
<p>4.3.1.4 Another general regulation on AXX</p>
<p>...</p>
<h3>...</h3>
....

Sometimes you can reword to put those last two paragraphs below the
<h4>s, sometimes you can put a new <h3> or a new <h4> (as appropriate)
in before them. Occasionally neither approach works [1] and using
something else to explicitly group around the <h4> is the best way to
keep the document structure.

That sort of grouping would work fine if <ol>/<li> was used, of course.

[1] The example above is a hierarchy, where the ordering of siblings
is significant, where leaf nodes get paragraphs and non-leaf nodes get
headings.

--
Chris

[Johannes Koch]

Re: Two Columns; Should be Simple

Spartanicus wrote:[color=blue][color=green][color=darkred]
>>>Divs and spans should only be used to
>>>encapsulat e code for styling purposes.[/color][/color][/color]

Johannes Koch <koch@w3develop ment.de> wrote:[color=blue][color=green]
>>No, not only. They are for grouping content.[/color][/color]

Spartanicus wrote:[color=blue]
> Nope. No UA should do anything non stylistic with divs and spans, if it
> does it's badly broken.[/color]

<http://www.w3.org/TR/html4/struct/global.html#ede f-DIV>:
The DIV and SPAN elements, in conjunction with the id and class
attributes, offer a generic mechanism for adding structure to documents.
These elements define content to be inline (SPAN) or block-level (DIV)
but impose no other presentational idioms on the content. Thus, authors
may use these elements in conjunction with style sheets, the lang
attribute, etc., to tailor HTML to their own needs and tastes.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)