Newbie - CCS help?

Phil Evans <newsgroups (AT) philHADDOCKevans (DOT) removethefish.com> wrote:

I'd definitely agree that there's no really good tutorial for CSS layout
- learning by example is the only way you get to see many techniques
built up. However, the Floatutorial at Max Design
(<http://css.maxdesign.com.au/floatutorial/>) gives a nicely structured
introduction to floats, starting with images and moving onto their use
for multi-column layouts - I think it's a good starting place.

Floating is the most widely abused method of creating a css layout, the
float rules in the css spec are ridiculously difficult to understand, UA
implementation is buggy (probably as a consequence of the former), and
lastly their use for layout purposes causes side effects that many
people don't understand (e.g. floats being removed from the flow).

When advocating their use for layout purposes it should always be
pointed out that they are fundamentally unsuited for this, and that the
only reason we sometimes have to resort to using them is because of that
stinking pile of excrement called IE and it's non support for css
tables.

Avoid using floats for layout purposes if you can.

--
Spartanicus

in comp.infosystems.www.authoring.stylesheets, Spartanicus wrote:

Phil Evans <newsgroups (AT) philHADDOCKevans (DOT) removethefish.com> wrote:

I'd definitely agree that there's no really good tutorial for CSS layout
- learning by example is the only way you get to see many techniques
built up. However, the Floatutorial at Max Design
(<http://css.maxdesign.com.au/floatutorial/>) gives a nicely structured
introduction to floats, starting with images and moving onto their use
for multi-column layouts - I think it's a good starting place.

Floating is the most widely abused method of creating a css layout,

I agree (though would use word "abused"), but only because it is most
used. In percentages, absolute position is missused much more. Maybe 90%
of absolutely positioned stuff in net is done badly. Easy check with text
zoom, make text bigger and it will fall apart.

and
lastly their use for layout purposes causes side effects that many
people don't understand (e.g. floats being removed from the flow).

Yes, but it is of course OK to do float layouts, that don't abuse float.

only reason we sometimes have to resort to using them is because of that
stinking pile of excrement called IE and it's non support for css
tables.

Unfortunately, display:table and friends wont allow everything that
"Abuse of floats do". Like:
http://www.student.oulu.fi/~laurirai...img_after.html
(Still bit unfinished, as I have not had time to make antialias of text
wider and partly transparent.)

Best part in floats is that you can make very wide thing, and it will
collapse nicely to small space.

Avoid using floats for layout purposes if you can.

OTOH, same is true for absolute positioning using some other values but
0. (And do not use position fixed)

Absolute position and floats are very nice tools for layout. If you don't
want to do stuff exactly same way as with HTML tables. Too bad only Opera
supports CSS tables in usable way. (Gecko don't get anonymous table
elements)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

*vatore* <vatore (AT) wp (DOT) pl>:

I prefere
h1><span>header text</span><h1> +
span {display: none;} h1 { background: ... }
Instead of
img alt="header text" src="header.gif" /

That's just plain stupid (in my usual browsing environment I'd see no
heading at all), although there are quite some people advocating such
"image replacement techniques" (and there are some with less negative side
effects).

<h1>Foo</h1>
h1 {content: url("foo.img")}

could be justifyable (CSS*3, working in Opera*7 already), but on the
current Web nothing beats

<h1><img href="foo.img" alt="foo"></h1>

in terms of usability, accessibility and reliability.

If you want to be able to use different images depending on stylesheet,
you could try this
(<http://webdesign.crissov.de/temp/ciwas/image-replacement>):

<h1><img href="src.img" alt="foo"></h1>
h1 {
height: 100px/*¹*/; line-height: 100px/*¹*/; overflow: hidden;
color: black; background: white no-repeat/*²*/;
}
/*special style*/
h1 {
background-image: url("styleX/bgi.img");
}

¹ src.img has to be specially designed: a transparent area at the top at
least as high as 'height' and bgi.img.
² 'scroll' and 'top left' (or an equivalent thereof) are initials already,
to which the shorthand 'background' resets.

I tried this first by setting 'background' for "h1 img", until I realized,
that IE doesn't apply 'background-image' to 'img'.


___ Public backup of random thoughts leading to that solution ___

CSS on, images on:
+-------------------------+

h1->background-color |
+-------------------------+
+-| h1->background-image |
+-------------------------+
+-| img->background-color |
+-------------------------+
+-| img->background-image |
+-------------------------+
+-| img->src |

+-------------------------+
CSS on, images off:
+-------------------------+

h1->background-color |
+-------------------------+
+-| +-------------------------+

+-| img->background-color |

+-------------------------+
+-| +-------------------------+

+-| img[alt]->color |
+-------------------------+
CSS off, images on:
+-------------------------+

+-------------------------+
+-| +-------------------------+

+-| +-------------------------+
+-| +-------------------------+
+-| img->src |
+-------------------------+
CSS off, images off:
+-------------------------+

+-------------------------+
+-| +-------------------------+

+-| +-------------------------+
+-| +-------------------------+
+-| img[alt] |
+-------------------------+

We don't have to and can't deal with the latter two cases. The default
internal stylesheets of the browsers handle that cases reasonable well.
This leaves us with two cases, where we have to match color values and
image content appropiately:

1. h1->background-color, h1->background-image, img->background-color,
img->background-image, img->src.
2. h1->background-color, img->background-color, img[alt]->color.

In the first case there are several relevant combinations, because colors
can be transparent in CSS and images. If there's no transparency in
img->src, you'll only see that picture by default, due to shrink-wrapping
applied with 'float' or "display: table-cell", and could now add an
adapted image replacement technique of your choice, that didn't break case
two---there is none to my knowledge
(<http://www.mezzoblue.com/tests/revised-image-replacement/>), that worked
in IE, didn't require extra mark-up nor CSS*3! But we have up to three
images and two colors to work with.

We can't make img->src fully transparent, because this would break the CSS
off, images on case, but we could try to make a negative or positive mark,
i.e. an image with text where either the text or the background is a solid
color and set to transparent to be shine through from an ancestor.

In the second case h1->background-color only matters, if
img->background-color is not 'transparent', which is the initial.
img[alt]->color can probably inherit from h1->color and must result in a
different value than the background color.

IE doesn't support 'background-image' on 'img'.

Note that with clever use of 'background-position' you can perhaps reduce
the number of required images:
<http://www.alistapart.com/articles/sprites/>

--
If you make people think they're thinking, they'll love you.
If you really make them think, they'll hate you.

.oO(Christoph Paeper)

h1>Foo</h1
h1 {content: url("foo.img")}

could be justifyable (CSS*3, working in Opera*7 already), [...]

In Opera 7.53 with images off/CSS on all I get is

[Image]

Micha