how to do rows of images without tables?

[Roberto]

Hallo,
I'm building a page that wants to respect XHTML 1.0 strict and CSS2
specifics. In this page I have to present thumbnails arranged to cover the
entire width of the window, but there are problems that are easier to see
than to explain...
http://www.wildzone.it/stage/thumbs/...lleria=samburu
the CCS code is readable in a click. The document is correct in his xhtml
and css sintax, and the code has been completely cleared from other
contents.

This is my first attempt to do the layout of a site without making use of
tables, and I know that you are all expert in constructing pages using an
advanced CSS.
Since I'm trying to adjust the code for days, I wonder that that you are so
kind to take a look at it and suggest me something.
Thanks for any help

Roberto

[Evertjan.]

Roberto wrote on 09 mei 2005 in
comp.infosystem s.www.authoring.stylesheets:

I'm building a page that wants to respect XHTML 1.0 strict and CSS2
specifics. In this page I have to present thumbnails arranged to cover
the entire width of the window, but there are problems that are easier
to see than to explain...
http://www.wildzone.it/stage/thumbs/...lleria=samburu
the CCS code is readable in a click. The document is correct in his
xhtml and css sintax, and the code has been completely cleared from
other contents.

This is my first attempt to do the layout of a site without making use
of tables, and I know that you are all expert in constructing pages
using an advanced CSS.
Since I'm trying to adjust the code for days, I wonder that that you
are so kind to take a look at it and suggest me something.
Thanks for any help

div.thumbBox {
width: 115px;
float: left;
margin: 15px;

height:80px;
overflow: hidden;
border:#ddd dotted 1px;
text-align:center;
}

[The border is just temporary to show the effect]

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

[Lauri Raittila]

in comp.infosystem s.www.authoring.stylesheets, Roberto wrote:

Hallo,
I'm building a page that wants to respect XHTML 1.0 strict
Then why are you using xhtml1.1 doctype?
http://www.wildzone.it/stage/thumbs/...lleria=samburu
[floated divs with width, variable height -> normal effect]
The document is correct in his xhtml and css s[y]ntax,

But it is not very good xhtml (empty title, wrongly used p element, empty
alt attributes)

KISS.
First, have the content.
Then, mark it up
Look.
Style.
If more markup is needed, add it.

Here, you have already overmarkupped your content, wrapping those images
to divs that has no other purpose. That is not needed for what you ask.

The problem is that when floating images that are different size, there
will be gaps, which are not too fun. I don't get why you are using
different height images, why not make them all same height?

I would use this CSS
img {margin:20px;}

and get rid of div elements (except the one containing them all)

If you do want columns (or captions) as well as rows (which you didn't
specify...), then you can
a) use different margins for different sized images
b) use those divs, and you need to make them same width and height
(add height:70px or whatever is height of biggest image to your css)
c) or use display:inline-block (not supported by FF, partially supported
by IE and Opera 7-8) and display:inline-table (Opera 5+)

IMHO, columns make no sence, so I never (again) use columns in image
gallery, unless they come naturally.

And forget XHTML, you are using it wrong way:
1) xhtml1.1 shouldn't be served with text/html
2) you put IE to quirks mode
3) just valid is not enough

Use HMTL4 strict. Especially if you did not understand the reasons.
(google for them, if you want to understand them.)

Also, you should send some cache information.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Support me, buy Opera:
https://secure.bmtmicro.com/opera/bu...tml?AID=882173

[Jan Roland Eriksson]

On Mon, 9 May 2005 23:33:29 +0200, "Roberto" <de*********@de spammed.com>
wrote:

I'm building a page that wants to respect XHTML 1.0 strict...
Why? serves no purpose over HTML4.01
...and CSS2 specifics.
Well, except for the fact that CSS2.1 has not yet been formally approved
by the knight, it seems that good browsers in general are more in
adherence to that specification; that is if not CSS1 is fully sufficient
for what you want to suggest in the first place.
In this page I have to present thumbnails arranged to cover
the entire width of the window, but there are problems that
are easier to see than to explain...
Nah; the KISS principle will always work, have a look...

<http://www.fantasywoma n.nu/terra/terra01.html>

[...]
This is my first attempt to do the layout of a site without
making use of tables...

Yes, lets say that you have definitely started on the right track but
you are "overdoing" things a bit :-)

Other posters in this thread have given more specific info on that part
so I don't need to repeat it.

--
Rex

[Roberto]

Thanks a lot, Evertian. It's ok now!

[Roberto]

Hi Lauri,

I'm building a page that wants to respect XHTML 1.0 strict
Then why are you using xhtml1.1 doctype?

I correct myself. A PHP script checks if the client supports XTHML 1.1 or
1.0 and sends a correct header and doctype.

$xml = stristr($_SERVE R["HTTP_ACCEP T"],"applicatio n/xhtml+xml");
if($xml){
header("Content-Type: application/xhtml+xml; charset=ISO-8859-1");
print "<?xml version=\"1.0\" ?>\n";
print "<?xml-stylesheet href=\"common/style.css\"
type=\"text/css\"?>\n";
print '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">';
}
else {
header("Content-Type: text/html; charset=ISO-8859-1");
print '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">';
}

[...]

The document is correct in his xhtml and css s[y]ntax,

But it is not very good xhtml (empty title, wrongly used p element, empty
alt attributes)

The document is intended to be just an example of what happens in the
original page. So the title is not important here. The alt text is not
shown because I'm going to insert captions under the thumbs instead.
Can you say why the p element is wrongly used?
KISS.
First, have the content.
Then, mark it up
Look.
Style.
If more markup is needed, add it.
ok I'll remember in the future :-)
By the way, I have already prepared the contents and the layout. I have
written this
page just to test if the cause of the problem was the thumbs or something
else in
the original page, and also to show it to you without all the unnecessary
code and
contents.
Here, you have already overmarkupped your content, wrapping those images
to divs that has no other purpose. That is not needed for what you ask.
you are right, but I used the divs because they have to embed images and
captions together, that are not shown in the example.
The problem is that when floating images that are different size, there
will be gaps, which are not too fun. I don't get why you are using
different height images, why not make them all same height?
yes, you're right. I'll do that

[...]
And forget XHTML,
I'm using XHTML because I want to make practice with it (first time for me),
and becasue w3c recommends it. It's seems to me that only very old browsers
doesn't support it, so why not?
you are using it wrong way:
1) xhtml1.1 shouldn't be served with text/html
the document is served as text application/xhtml+xml if the client support
it, otherwise as text/html.
2) you put IE to quirks mode
Lauri, what is quirks mode?
3) just valid is not enough
that's true
Use HMTL4 strict. Especially if you did not understand the reasons.
(google for them, if you want to understand them.)

Also, you should send some cache information.

which cache information is needed?

thanks for answering me
Roberto

[Roberto]

Hi Jan,

I'm building a page that wants to respect XHTML 1.0 strict...

Why? serves no purpose over HTML4.01

I already replyed to Lauri about this point. Do you mean that it's still
better to use HTML 4.01 for compatibility reasons with all browsers?

...and CSS2 specifics.

Well, except for the fact that CSS2.1 has not yet been formally approved
by the knight, it seems that good browsers in general are more in
adherence to that specification; that is if not CSS1 is fully sufficient
for what you want to suggest in the first place.

Yes, CSS1 is not sufficient. My purpose is to use CSS 2.0 version. This is
approved, right?

thanks for answering, Jan

Roberto

[Roberto]

Hi Jan,

I'm building a page that wants to respect XHTML 1.0 strict...

Why? serves no purpose over HTML4.01

I already replyed to Lauri about this point. Do you mean that it's still
better to use HTML 4.01 for compatibility reasons with all browsers?

...and CSS2 specifics.

Well, except for the fact that CSS2.1 has not yet been formally approved
by the knight, it seems that good browsers in general are more in
adherence to that specification; that is if not CSS1 is fully sufficient
for what you want to suggest in the first place.

Yes, CSS1 is not sufficient. My purpose is to use CSS 2.0 version. This is
approved, right?

thanks for answering, Jan

Roberto

[Alan J. Flavell]

On Tue, 10 May 2005, Roberto wrote:

I already replyed to Lauri about this point. Do you mean that it's still
better to use HTML 4.01 for compatibility reasons with all browsers?

This isn't a write-only group, you know. You'd do better to read it
and get an idea of what's gone before, rather than asking to be
spoonfed the same answers that have been posted countless times.

[Christoph Päper]

*Roberto*:

$xml = stristr($_SERVE R["HTTP_ACCEP T"],"applicatio n/xhtml+xml");
if($xml){

That's way too narrow-minded and violates the RFC (the number of which I
don't remember right now). What if the 'Accept' header gives a/x+x a
lesser priority than 'text/html'?
I've seen content negotiation done correctly in PHP, but it's more than
two lines---I suppose a little Web research will find you a good, free
script.