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]

Alan Little <al**@n-o-s-p-a-m-phorm.com> wrote:

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

I'm really, really trying not to use tables

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]

Carved in mystic runes upon the very living rock, the last words of
Spartanicus <in*****@invalid.invalid> of
comp.infosystems.www.authoring.stylesheets make plain:

Alan Little <al**@n-o-s-p-a-m-phorm.com> wrote:

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

I'm really, really trying not to use tables

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

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]

Alan Little <al**@n-o-s-p-a-m-phorm.com> wrote:

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

I'm really, really trying not to use tables
You've go far more important things to fix first:

Thank you for your response. I'm afraid I don't understand most of it. 1) Use semantic markup Use headers, lists, paragraphs. Divs and spans should only be used to
encapsulate code for styling purposes.2) Code to strict standard Use a Strict doctype and code in that spirit.3) Use CSS to replace junk like <br><br> Self evident.4) Not mix XHTML with HTML <... /> does not belong in a HTML document.5) Fix the micro fonts 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.
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.

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]

Alan Little wrote:

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.

Perhaps a short study of this rather nice two-column template will help.
http://www.benmeadowcroft.com/webdev...ft-column.html

--
-bts
-This space intentionally left blank.

[Alan Little]

Carved in mystic runes upon the very living rock, the last words of
Spartanicus of comp.infosystems.www.authoring.stylesheets make plain:

Alan Little <al**@n-o-s-p-a-m-phorm.com> wrote:

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

I'm really, really trying not to use tables

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

Thank you for your response. I'm afraid I don't understand most of it.

1) Use semantic markup

Use headers, lists, paragraphs. Divs and spans should only be used to
encapsulate code for styling purposes.

2) Code to strict standard

Use a Strict doctype and code in that spirit.

3) Use CSS to replace junk like <br><br>

Self evident.

4) Not mix XHTML with HTML

<... /> does not belong in a HTML document.

5) Fix the micro fonts

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.

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.

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

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.com 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]

Carved in mystic runes upon the very living rock, the last words of
Beauregard T. Shagnasty of comp.infosystems.www.authoring.stylesheets
make plain:

Alan Little wrote:

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.

Perhaps a short study of this rather nice two-column template will
help.
http://www.benmeadowcroft.com/webdev...ft-column.html

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]

Alan Little <al**@n-o-s-p-a-m-phorm.com> wrote:

Then first fix the above issues, they are far more detrimental to the
quality of the code than using tables for layout could be.
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.com 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.

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.
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?

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]

Spartanicus wrote:

Use headers, lists, paragraphs.
Yes.
Divs and spans should only be used to
encapsulate code for styling purposes.

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

[Spartanicus]

Johannes Koch <ko**@w3development.de> wrote:

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.

--
Spartanicus

[Chris Morris]

Spartanicus <in*****@invalid.invalid> writes:

Johannes Koch <ko**@w3development.de> wrote:

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.

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]

Chris Morris <c.********@durham.ac.uk> wrote:

>> 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.

No _browser_, perhaps.

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

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]

Carved in mystic runes upon the very living rock, the last words of
Spartanicus of comp.infosystems.www.authoring.stylesheets make plain:

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.

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]

Spartanicus <in*****@invalid.invalid> writes:

Chris Morris <c.********@durham.ac.uk> wrote:

>> 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.
UAs in general could do this in certain
situations with pre-agreed classes of div and span (or any other
element, of course).

Again: styling only.

<h1>Publications</h1>
<h2>Professor Smith's Publications</h2>
<h3 class='ab'>Authored Books</h3>
<ul>
<li><span class='author'>Smith. J</span>
<span class='year'>2005</span>.
<span class='title'>The 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.
The only "grouping" elements in HTML4 are headers.
(What about nested <ul>s?)

To use headers to do the grouping above would mean:
....
<li><h4>Author</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.
Anything below a header level x is "grouped" with that header until
the next header level x or higher in the source.

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]

Spartanicus wrote:

Divs and spans should only be used to
encapsulate code for styling purposes.

Johannes Koch <ko**@w3development.de> wrote:No, not only. They are for grouping content.

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

<http://www.w3.org/TR/html4/struct/global.html#edef-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.)

[Spartanicus]

Chris Morris <c.********@durham.ac.uk> wrote:

crossposted and f-up set to c.i.w.a.html for going off topic

>> >> 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.
>
>UAs in general could do this in certain
>situations with pre-agreed classes of div and span (or any other
>element, of course).
Again: styling only.

<h1>Publications</h1>
<h2>Professor Smith's Publications</h2>
<h3 class='ab'>Authored Books</h3>
<ul>
<li><span class='author'>Smith. J</span>
<span class='year'>2005</span>.
<span class='title'>The impact of serif fonts on Aztec pyramids.</span>
<!-- etc, etc, etc -->

A good example of how not to use divs and/or spans. That's incorrectly
marked up tabular data. It uses spans and classes to fake data
structure.

Sure you can program a UA to interpret <br> to represent a weekend in
Honolulu, but this is not correct use of HTML.

The only "grouping" elements in HTML4 are headers.

(What about nested <ul>s?)

Nested lists are just that, lists within lists.

However my "The only "grouping" elements in HTML4 are headers."
expression is a flawed based on the wrong assumption that by "They are
for grouping content" Johannes meant that divs could be used to
structurally subdivide a document into sections.
To use headers to do the grouping above would mean:
...
<li><h4>Author</h4> Smith. J
<h4>Year</h4> 2005.
<h4>Title</h4> The impact of ...

I question the correctness of this being part of a list. The header
hierarchy is flawed, the headers for the above content should be
descending and consecutive:

<h4>Author</h4> Smith. J
<h5>Year</h5> 2005.
<h6>Title</h6> The impact of ...

(notwithstanding that there are reasons to avoid the use of h5 and h6)

Anything below a header level x is "grouped" with that header until
the next header level x or higher in the source.

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>

That's incorrect content order, <p>4.3.1.4 ...</p> should renumbered and
moved up so that it follows the <h3>.

--
Spartanicus

[Spartanicus]

Johannes Koch <ko**@w3development.de> wrote:

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.

<http://www.w3.org/TR/html4/struct/global.html#edef-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.

I concede that when used with the lang attribute to provide meta data
can be an exception. If used to assist speech synthesizers then I'd say
it's styling information. In other cases I suppose it can be classified
as providing structure.

--
Spartanicus

[kchayka]

Alan Little wrote:

Spartanicus of comp.infosystems.www.authoring.stylesheets make plain:

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.
OK, whatever. These are look and feel issues, right?

Not really. They relate more to code quality--using correct syntax, and
appropriate HTML elements (or CSS) in a logical manner. Structure the
document so makes sense sans CSS, and avoid any attempt at a
pixel-perfect layout. Usability and accessibility will almost always
improve by default.
To me that's design.

Look and feel are design issues, the code itself is not, though the
quality of the code can certainly affect the design.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Phil Thompson]

"Alan Little" <al**@n-o-s-p-a-m-phorm.com> wrote in message
news:Xn**************************@216.196.97.131.. .
<snip />

Perhaps a short study of this rather nice two-column template will
help.
http://www.benmeadowcroft.com/webdev...ft-column.html
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

Try this it uses floats which should push up the two columns next to each
other,
***Disclaimer for the pedants: fixed pixel dimensions can be exchanged for
%s or ems***;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>test</title>
<style type="text/css" media="all">
div#content{
float: left;
width: 300px;
border: 1px solid red;
}
div#nav{
float: left;
width: 300px;
border: 1px solid red;
}

div#footer{
clear: both;
}
</style>
</head>

<body>
<div id="header">
<h1>Document header</h1>
</div>
<div id="content">
<h2>Hello world</h2>
<p>How's it going?</p>
</div>
<div id="nav">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<div id="footer>
<p>&copy; 2005</p>
</div>
</body>
</html>
Hope that helps a little

Phil
--
Alan Little
Phorm PHP Form Processor
http://www.phorm.com/