lining up photo's in css columns

#21

In article <1j397lv.xza8o11v2oz3eN%j1 (AT) macunlimited (DOT) net>,
j1 (AT) macunlimited (DOT) net (j) wrote:

Quote:

dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <1j37acf.g5jfvh18y7lw2N%j1 (AT) macunlimited (DOT) net>,
j1 (AT) macunlimited (DOT) net (j) wrote:

Original fixed-height floated divs here:
http://tinyurl.com/nwj6er

Adapted to inline block method here:
http://tinyurl.com/ngpkw5

Yes, clearly the inline method is far superior in that it does not
impose the height of the largest pic/caption box on all of them.

btw, in your float example, there is another very important factor that
you failed to take sufficient account for and that is use text size. You
eyesight is probably very good! See what happens on text enlargement.
Probably best to specify height in ems if you are going to go the float
way.

I've tried another float method with width and height specified in ems.
Also, I've specified the photo dimensions as a percentage of the
container div.

http://tinyurl.com/nzvr2k

Getting the right proportions of width and height for the photo was done
by trial and error. It creates a zoom effect in Safari. However, I don't
know if specifying image dimensions like this is bad practice.

It is not that it is bad practice in itself. It is that it is not very
portable. If you know your specific content,there is no harm...

--
dorayme

#22

In article <doraymeRidThis-AD73D9.09351123072009 (AT) news (DOT) albasani.net>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

Quote:

In article <1j397lv.xza8o11v2oz3eN%j1 (AT) macunlimited (DOT) net>,
j1 (AT) macunlimited (DOT) net (j) wrote:

....
http://tinyurl.com/nzvr2k

Getting the right proportions of width and height for the photo was done
by trial and error. It creates a zoom effect in Safari. However, I don't
know if specifying image dimensions like this is bad practice.

It is not that it is bad practice in itself. It is that it is not very
portable. If you know your specific content,there is no harm...

Correction, I was thinking (I did not look at your URL) you were just
trying to pick heights and widths for *containers* to the pictures. The
issue of sizing images is quite different and I won't address that here
- there have been many threads and some recent on his.

--
dorayme

#23

On Jul 15, 5:19*pm, drum118 <drum... (AT) hotmail (DOT) com> wrote:

Quote:

Using a 4 col css page, I cannot get the photo's to line up with text
added. I have use float and get different results.

I have try it a number of ways with no luck.

If there next to no text, it works. The text will vary from row to row
and on over 3,000 pages and trying to get the same script for each
page.

I want the text to start at the top of photo's and if it has to wrap
around it, I want the next row to be even.

I have try also without col's <photo> <photo> <photo> <photo> where float is in the
class and work if no text. If I add text, it push the photo below it
out of line. If I move float to the photo, it kills the page.

http://transit.davidfisher.biz/ttc/construction/stclairrow/2009/2009p...

Float is with the photohttp://transit.davidfisher.biz/ttc/construction/stclairrow/2009/2009p...

http://transit.davidfisher.biz/testphoto.html

any help is welcome
thanks

I have try a few different layout and get mix results from various
suggestion.

The way the page is layout with 4 columns where the photo's are to go,
I have ended with more than 4 columns of photo's.

The other issue, is the amount of text as it is unknown until that
photo is place.

What I have done is use 2 codes with one for the photo's and the other
with the text. I almost get what I want, with the text just below the
top of the photo's.

What I'm in trying to do is let the page fix the screen ranging from
17" to 53", not the centre of the screen. If it works on the 19 and 24
I have find, it will work on others.

Using a fix width in place of %, increase the blank space between the
columns.

http://transit.davidfisher.biz/ttc/construction/stclairrow/2009/2009phaseII-10.html
is the new layout using thumb for text and has no issue.

..

#24

In article
<b4ae5504-5747-4a60-a383-08bd20961b08 (AT) g19g2000vbi (DOT) googlegroups.com>,
drum118 <drum118 (AT) hotmail (DOT) com> wrote:

Quote:

http://transit.davidfisher.biz/ttc/construction/stclairrow/2009/2009phaseII-10
.html is the new layout using thumb for text and has no issue.

Apart from the 128 errors in HTML validation I get?

--
dorayme

#25

drum118 wrote:

Quote:

On Jul 15, 5:19 pm, drum118 <drum... (AT) hotmail (DOT) com> wrote:
Using a 4 col css page, I cannot get the photo's to line up with text
added. I have use float and get different results.

I have try it a number of ways with no luck.

If there next to no text, it works. The text will vary from row to
row
and on over 3,000 pages and trying to get the same script for each
page.

I want the text to start at the top of photo's and if it has to wrap
around it, I want the next row to be even.

I have try also without col's <photo> <photo> <photo
/
span> <photo> where float is in the
class and work if no text. If I add text, it push the photo below it
out of line. If I move float to the photo, it kills the page.

http://transit.davidfisher.biz/ttc/construction/stclairrow/2009/2009p...

Float is with the
photohttp://transit.davidfisher.biz/ttc/construction/stclairrow/2009/2009p...

http://transit.davidfisher.biz/testphoto.html

any help is welcome
thanks

I have try a few different layout and get mix results from various
suggestion.

The way the page is layout with 4 columns where the photo's are to go,
I have ended with more than 4 columns of photo's.

The other issue, is the amount of text as it is unknown until that
photo is place.

What I have done is use 2 codes with one for the photo's and the other
with the text. I almost get what I want, with the text just below the
top of the photo's.

What I'm in trying to do is let the page fix the screen ranging from
17" to 53", not the centre of the screen. If it works on the 19 and 24
I have find, it will work on others.

Using a fix width in place of %, increase the blank space between the
columns.

http://transit.davidfisher.biz/ttc/construction/stclairrow/2009/2009phaseII-10.html
is the new layout using thumb for text and has no issue.

You have a serious case of content escaping its box and being disappeared.
To admire this narrow your browser window to less than 1000 pixels or so.

Your black menu at the top also wraps out of its black background, causing
my pink background to show through. And why is the last updated text set to
8 pixels? I need a microsope to see that!.

#26

dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

Quote:

In article <doraymeRidThis-AD73D9.09351123072009 (AT) news (DOT) albasani.net>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <1j397lv.xza8o11v2oz3eN%j1 (AT) macunlimited (DOT) net>,
j1 (AT) macunlimited (DOT) net (j) wrote:

...
http://tinyurl.com/nzvr2k

Getting the right proportions of width and height for the photo was done
by trial and error. It creates a zoom effect in Safari. However, I don't
know if specifying image dimensions like this is bad practice.

It is not that it is bad practice in itself. It is that it is not very
portable. If you know your specific content,there is no harm...

Correction, I was thinking (I did not look at your URL) you were just
trying to pick heights and widths for *containers* to the pictures. The
issue of sizing images is quite different and I won't address that here
- there have been many threads and some recent on his.

Continuing my experiments, I've removed the dimensions from the img tag
and specified the width of the img to be 98% of the container div in the
stylesheet. No height is specified. Image degradation aside, is this a
better way to do it?

http://tinyurl.com/nzvr2k

#27

In article <1j3gpoo.1n8envioqcmewN%j1 (AT) macunlimited (DOT) net>,
j1 (AT) macunlimited (DOT) net (j) wrote:

Quote:

dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <doraymeRidThis-AD73D9.09351123072009 (AT) news (DOT) albasani.net>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <1j397lv.xza8o11v2oz3eN%j1 (AT) macunlimited (DOT) net>,
j1 (AT) macunlimited (DOT) net (j) wrote:

...
http://tinyurl.com/nzvr2k

Getting the right proportions of width and height for the photo was done
by trial and error. It creates a zoom effect in Safari. However, I don't
know if specifying image dimensions like this is bad practice.

It is not that it is bad practice in itself. It is that it is not very
portable. If you know your specific content,there is no harm...

Correction, I was thinking (I did not look at your URL) you were just
trying to pick heights and widths for *containers* to the pictures. The
issue of sizing images is quite different and I won't address that here
- there have been many threads and some recent on his.

Continuing my experiments, I've removed the dimensions from the img tag
and specified the width of the img to be 98% of the container div in the
stylesheet. No height is specified. Image degradation aside, is this a
better way to do it?

http://tinyurl.com/nzvr2k

Well, you did mention the drawback yourself. I would not be happy on a
page of thumbnails to put image degradation aside.

--
dorayme

#28

dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

Quote:

In article <1j3gpoo.1n8envioqcmewN%j1 (AT) macunlimited (DOT) net>,
j1 (AT) macunlimited (DOT) net (j) wrote:

dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <doraymeRidThis-AD73D9.09351123072009 (AT) news (DOT) albasani.net>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <1j397lv.xza8o11v2oz3eN%j1 (AT) macunlimited (DOT) net>,
j1 (AT) macunlimited (DOT) net (j) wrote: > ... > > http://tinyurl.com/nzvr2k
Getting the right proportions of width and height for the photo
was done > > by trial and error. It creates a zoom effect in Safari.
However, I don't > > know if specifying image dimensions like this is
bad practice. > > It is not that it is bad practice in itself. It is
that it is not very > portable. If you know your specific
content,there is no harm...

Correction, I was thinking (I did not look at your URL) you were just
trying to pick heights and widths for *containers* to the pictures.
The issue of sizing images is quite different and I won't address that
here - there have been many threads and some recent on his.

Continuing my experiments, I've removed the dimensions from the img tag
and specified the width of the img to be 98% of the container div in the
stylesheet. No height is specified. Image degradation aside, is this a
better way to do it?

http://tinyurl.com/nzvr2k

Well, you did mention the drawback yourself. I would not be happy on a
page of thumbnails to put image degradation aside.

Except some browsers such as Firefox give you no choice and will enlarge
both image and text. My question was more about the reliability of the
code.

#29

j wrote:

Quote:

Except some browsers such as Firefox give you no choice and will
enlarge both image and text.

...unless you choose otherwise.

View > Zoom > [Check] Zoom Text Only

--
-bts
-Friends don't let friends drive Windows

#30

Beauregard T. Shagnasty <a.nony.mous (AT) example (DOT) invalid> wrote:

Quote:

j wrote:

Except some browsers such as Firefox give you no choice and will
enlarge both image and text.

..unless you choose otherwise.

View > Zoom > [Check] Zoom Text Only

Aha! Thanks.

Sometimes it feels like spinning plates, trying to keep the code
flexible for viewing in all the possible combinations.