Sent by francky on 23 October 2006 22:10
Jon Hughes wrote:
>http://www.phazm.net/stamps/products.html
>
>[...]
>
Francky wrote: [...] to be continued.
= = =
Ending with "7 Golden Rules of Webdesign" and Testpage-3
<http://home.tiscali.nl/developerscorner/css-discuss/test-stampdepot-3.htm>,
here is a supplement.
For the left column I think a fixed width can be used. A liquid left
column (in % of the screen width) would eat too much space of the
content part, if the page is viewed in smaller resolutions. - The fixed
width must be not too small either, to enable font scaling at 800x600. I
came on about 200px, but that can be changed of course if desired. Then
some adaptations of the nav-list have to be made, to use the available
column width. Result is:
* Testpage-4
<http://home.tiscali.nl/developerscorner/css-discuss/test-stampdepot-4.htm>
Html-validator and css-validator still congratulate. [1] - Fine tuning
(of fonts and so) can be done later. First the wilderness of white in
the content column! ;-)
With a floating left column, a straight right column will fill the
remaining space. A left margin is prohibiting the content to stream
under the bottom line of the left column, in case the content column is
longer than the left column. Result can be:
* Testpage-5
<http://home.tiscali.nl/developerscorner/css-discuss/test-stampdepot-5.htm>
Html-validator and css-validator still congratulate. [1] - So far with
the testpages....
Addendum to the Golden Rules:
8. Write your css not in 1 line for each element, but
ONE LINE FOR EACH PROPERTY/VALUE ITEM.
Then it is easier to read and to change: quick cut/copy/paste
of a line, moving to another element, and so on.
9. Also in html: don't be soft for your hard disk,
DON'T "COMPACT CODE". Give indents for all div's, ul's, li's
and other elements. Then it is easy to see what is what, and
especially where are the ends of the elements, and where a new
element is starting.
10. The quick X-OUT METHOD can be used instead of commenting out
some line with /* ... */ (in css) or <!-- ... --> (in html).
Like this:
#content {
margin: 5px;
xpadding: 10px;
}
or this:
<div xid="content">...</div>
If you forget to remove one later on, no problem: the css-
validator or html-validator will help to remember.
11. The A-B-C METHOD can be used to find out where on screen a
floating <div> is ending, and where a "clear" has to be given.
Just type a plain letter "a" before the first </div>, a letter
"b" before the second </div>, and so on.
Then the position of the letters is not influenced by properties
of a <p> or other containg element, which can be distracting or
moving the position.
For better viewing, a
<span style="background: yellow; color: red;">a</span>
can be used, if needed.
To be continued!
francky
[1] Only alarming about the "xborders", as described in Golden Rule #10.
:-)
If css-validating with the button on the FF-DevelopersToolBar, then an
alarm about "invalid" use of "inline-block" is given. But that is valid
css2.1! Howcome? Because the default testing of the validator is in the
older (unusual) css2. - If tested in css2.1, the "inline-block" is
permitted (no more error). See:
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fhome.tiscali.nl%2Fdeveloperscorner%2Fcss-discuss%2Ftest-stampdepot-4.htm&warning=no&profile=css21&usermedium=all
<http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fhome.tiscali.nl%2Fdeveloperscorner%2Fcss-discuss%2Ftest-stampdepot-4.htm&warning=no&profile=css21&usermedium=all>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
