Request for comments: CSS layout tutorial; a start

[Spartanicus]

I've started work on a css layout tutorial. I expect that it will take a
minimum of several weeks to get to a complete draft stage.

I hope to get better feedback by publishing individual pages. I've
uploaded 2 draft pages, an index and a list of definitions:
http://www.spartanicus.utvinternet.i...dex.htm.remove
http://www.spartanicus.utvinternet.i...ons.htm.remove

The urls are not valid because of the added suffix to prevent indexing
(some SE's don't respect robots.txt directives), but the server has name
guessing enabled (I forgot how it's called officially), clicking them
will produce the real link, alternatively delete the ".remove" suffixes
from the urls. The location is temporary.

Feedback requested on:
Language used, being a tutorial I don't want it to be to formal.
Correctness of terminology definitions.

Note:
The limited scope of the tutorial as set out on the index page.
External links have not been checked

--
Spartanicus

[Spartanicus]

Spartanicus <[e-mail] > wrote:

The urls are not valid because of the added suffix to prevent indexing
(some SE's don't respect robots.txt directives), but the server has name
guessing enabled (I forgot how it's called officially), clicking them
will produce the real link

Bollocks, I just realised that this will also disclose the valid urls to
spiders :(

I'll delete the documents after a week. (I've no control over the server
config)

--
Spartanicus

[vatore]

Uzytkownik "Spartanicu s" <[e-mail] > napisal w wiadomosci
news:06******** *************** *********@news. spartanicus.utv internet.ie...

I've started work on a css layout tutorial. I expect that it will take a
minimum of several weeks to get to a complete draft stage.

I hope to get better feedback by publishing individual pages. I've
uploaded 2 draft pages, an index and a list of definitions:
http://www.spartanicus.utvinternet.i...dex.htm.remove
http://www.spartanicus.utvinternet.i...ons.htm.remove

1. Why use CSS for layout?
2. Layouts that Work on the Web
3. CSS tables
4. Inline blocks
5. The flow
6. Absolute positioning
7. MS Internet Explorer
8.Floats

Looking at the above list I suspect that you're going to write that
css-based layout would be good when display: table-* property is used, and
you will advice to keep the floated-boxes layout for IE only using some
hacks. Am I right?

I ask, because I've suggested on one webdesign-related forum that it can be
the best way to build layout and I'm the only person who thinks this way.
People arguing that <div style="display: table-cell;"></div> requires extra
markup (elements with display: table-row; and display:table; to contain that
table-cell) but I think the idea of css-tables is that browsers' rendering
engines should generate anonymus boxes that are required to render that
table-cell. (it is written in CSS2.1 spec: 17.2.1 - Anonymus table objects)
And ofcourse the other argument is that IE doesn't support it, so people ask
"why should I write my css twice, when I can write one using floats and make
it work in all modern browsers?"

I hope that your tutorial will give me support in such discussions :) I
haven't found any document on the internet that says "display: table is
better than floats to make page layout", nor "it is good to use display:
table for browsers and floats for IE only" so the only argument I have now
is "beacuse I think so, I've tried few times, and it works good for me".

I made an example - http://www.csslayouts.net/dev/display-table/ and asked
people to rework it using floats, to look and behave in IE the same way it
does in Opera / Firefox. I think it's almost impossible :)
--
pawel[dot]knapik[at]gmail[dot]com
www.csslayouts.net //version beta

[David Dorward]

vatore wrote:

I haven't found any document on the internet that says "display: table is
better than floats to make page layout",
If all browsers implemented it well, then for some layouts it would be.
nor "it is good to use display: table for browsers and floats for IE only"

I did this for a while, but eventually got fed up with a Gecko bug (pages
would randomly display with the right column below the left column -
refresh and it would be fine, come back and it would be broken again) and
was changing the layout to one better suited to abs positioning anyway - so
it got ditched.

--
David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Jan Roland Eriksson]

On Mon, 29 Nov 2004 16:08:46 +0000, Spartanicus <[e-mail] > wrote:

I've started work on a css layout tutorial. I expect that it will take a
minimum of several weeks to get to a complete draft stage.

I hope to get better feedback by publishing individual pages. I've
uploaded 2 draft pages, an index... [...]Note:
The limited scope of the tutorial...

That's Ok for a start, but how about putting in a challenge for a full
size CSS example at the end?

How's this for an idea?

A "CSS Master Diploma" to be given to any one who is capable to create a
"liquid" CSS suggestion for the more complex side of the "WAFFLE HOUSE"
food menu [1].

Net result should be that when a user has a viewing window with the same
height and width proportions as the original food menu, and 100% BODY
font size, that original food menu is what should be seen.

Any other proportions, and it's allowed to re-flow into a different
layout but the menu should still be usable to order any and all of its
individual items from.

[side note: a working example like this could become a usable tool to
/convince/ possible clients about the usability of CSS even in a
commercial environment]

[1] The idea is not mine originally. It just so happened, about four
years ago, that Sue and I had reason to meet with Eric Meyer, his wife
and a few of their friends, in Atlanta, and we all ended up at a local
Waffle House to get something to eat.
Eric was looking at the menu and said words to the effect...

"I wonder if any one could do this in CSS?"

Any one out there to pick up that "glove" if "Spartanicu s" puts up the
competition rules for it in his layout tutorial? ;-)

--
Rex