How do I get the floated elements to be centred?

[Alan Silver]

Hello,

If you look at http://www.kidsinaction.org.uk/Thumbs.html you will see a
simplified version of a page that could be used to display thumbnail
images of various products.

Now, due to the floating, the thumbnails go across the page until the
line is full, then spill over on to the next line. This is exactly what
I want, as it allows the display to use up the full available width,
depending on the user's browser window, etc.

What I would like though is to have the thumbnails centred within the
containing element. Now maybe I'm asking something stupid, after all, I
did float them to the left!! Is it possible to have them centred? What I
mean is that there would be the same amount of white space on the left
side of the leftmost image as there is on the right side of the
rightmost image. I would also like the images on the last line (which
will usually be fewer in number than on preceding lines) to be centred,
rather than being over to the left. Is this possible?

TIA

--
Alan Silver
(anything added below this line is nothing to do with me)

[Stan McCann]

Alan Silver <al*********@nospam.thanx.invalid> wrote in
news:PK**************@nospamthankyou.spam:

What I would like though is to have the thumbnails centred within
the containing element. Now maybe I'm asking something stupid, after

..container {text-align:center}

--
Stan McCann, "Uncle Pirate" http://stanmccann.us/
Webmaster, NMSU Alamogordo http://alamo.nmsu.edu/
Implementing http://blinkynet.net/comp/uip5.html

[Alan Silver]

In article <Xn************************@216.234.192.142>, Stan McCann
<[e-mail]> writes

Alan Silver <al*********@nospam.thanx.invalid> wrote in
news:PK**************@nospamthankyou.spam:

What I would like though is to have the thumbnails centred within
the containing element. Now maybe I'm asking something stupid, after

.container {text-align:center}

Thanks, but if you look at the sample I posted, you will see that the
div with ID "main" already has this property set, and the thumbnails
still go from the left edge of the container. I tried adding the
property to the <ul> itself (ID of "thumblinks") but that didn't make
any difference.

Any other ideas? Thanks again.

--
Alan Silver
(anything added below this line is nothing to do with me)

[Els]

Alan Silver wrote:

Hello,

If you look at http://www.kidsinaction.org.uk/Thumbs.html you will see a
simplified version of a page that could be used to display thumbnail
images of various products.

Now, due to the floating, the thumbnails go across the page until the
line is full, then spill over on to the next line. This is exactly what
I want, as it allows the display to use up the full available width,
depending on the user's browser window, etc.

What I would like though is to have the thumbnails centred within the
containing element. Now maybe I'm asking something stupid, after all, I
did float them to the left!! Is it possible to have them centred? What I
mean is that there would be the same amount of white space on the left
side of the leftmost image as there is on the right side of the
rightmost image. I would also like the images on the last line (which
will usually be fewer in number than on preceding lines) to be centred,
rather than being over to the left. Is this possible?

Not while floating them.
In order to have them centered with text-align:center, they need to be
inline elements. But inline elements don't have widths. Have a look at
this page and see if it's an option for you:
http://locusmeus.com/test/thumbswith...scentered.html

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

[Alan Silver]

In article <1p*****************************@40tude.net>, Els
<el*********@tiscali.nl> writes
<snip>

I would also like the images on the last line (which
will usually be fewer in number than on preceding lines) to be centred,
rather than being over to the left. Is this possible?
Not while floating them.

Thought not!! Thanks for the clarification.
In order to have them centered with text-align:center, they need to be
inline elements. But inline elements don't have widths. Have a look at
this page and see if it's an option for you:
http://locusmeus.com/test/thumbswith...scentered.html

Well, apart from making me feel old (it's a long time since I looked at
pictures like those - heavy metal means deuterium to me nowadays!!), it
is exactly the layout idea I want.

I tried to do this with my HTML, but failed miserably. I guess this is
because I am using <ul> and <li> for the thumbnails as this seemed more
like structured markup. The page you showed used tables for each
thumbnail, which I don't want to do. Any idea how I achieve the same
effect with <ul> and <li> instead?

Thanks for the reply.

--
Alan Silver
(anything added below this line is nothing to do with me)

[Stephen Poley]

On Thu, 6 Apr 2006 14:59:54 +0100, Alan Silver
<al*********@nospam.thanx.invalid> wrote:

If you look at http://www.kidsinaction.org.uk/Thumbs.html you will see a
simplified version of a page that could be used to display thumbnail
images of various products.

Now, due to the floating, the thumbnails go across the page until the
line is full, then spill over on to the next line. This is exactly what
I want, as it allows the display to use up the full available width,
depending on the user's browser window, etc.

What I would like though is to have the thumbnails centred within the
containing element.

Does this help?

http://www.spartanicus.utvinternet.i...h_captions.htm

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Els]

Alan Silver wrote:

In article <1p*****************************@40tude.net>, Els
<el*********@tiscali.nl> writes
<snip>

I would also like the images on the last line (which
will usually be fewer in number than on preceding lines) to be centred,
rather than being over to the left. Is this possible?
Not while floating them.

Thought not!! Thanks for the clarification.

In order to have them centered with text-align:center, they need to be
inline elements. But inline elements don't have widths. Have a look at
this page and see if it's an option for you:
http://locusmeus.com/test/thumbswith...scentered.html

Well, apart from making me feel old (it's a long time since I looked at
pictures like those - heavy metal means deuterium to me nowadays!!), it
is exactly the layout idea I want.

Okay, next example has no heavy metal ;-)
I tried to do this with my HTML, but failed miserably. I guess this is
because I am using <ul> and <li> for the thumbnails as this seemed more
like structured markup. The page you showed used tables for each
thumbnail, which I don't want to do. Any idea how I achieve the same
effect with <ul> and <li> instead?
http://locusmeus.com/test/thumbswith...tcentered.html

Tested in Opera 8.52, 9, IE 5.01, 5.5, 6.0, 7b2, FF 1.5. (IE<7 are
hacked versions, sometimes acting differently, so better test it in an
original version as well)

Drawback compared to using tables: you can't vertically center images
of different heights without setting explicit top margins on them.
Thanks for the reply.

You're welcome :-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

[Neredbojias]

To further the education of mankind, Els <el*********@tiscali.nl>
declaimed:

I tried to do this with my HTML, but failed miserably. I guess this is
because I am using <ul> and <li> for the thumbnails as this seemed more
like structured markup. The page you showed used tables for each
thumbnail, which I don't want to do. Any idea how I achieve the same
effect with <ul> and <li> instead?

http://locusmeus.com/test/thumbswith...tcentered.html

Tested in Opera 8.52, 9, IE 5.01, 5.5, 6.0, 7b2, FF 1.5. (IE<7 are
hacked versions, sometimes acting differently, so better test it in an
original version as well)

Anemone?

Clever, but what I don't understand is how you got away with putting block
elements (span.thumb{display:block;....) inside inline elements (li
{display:inline;}). The validator doesn't complain; it only harps about
inline-block (-which is probably a css2/css2.1 thing) and "lightgreen".

--
Neredbojias
Infinity can have limits.

[Neredbojias]

To further the education of mankind, Stephen Poley
<sb******************@xs4all.nl> declaimed:

What I would like though is to have the thumbnails centred within the
containing element.

Does this help?

http://www.spartanicus.utvinternet.i...ery_with_capti
ons.htm

That is probably the most erudite page on css I've ever seen. But how many
people could do that (-from scratch)? I doubt I could have.

--
Neredbojias
Infinity can have limits.

[Els]

Neredbojias wrote:

To further the education of mankind, Els <el*********@tiscali.nl>
declaimed:

I tried to do this with my HTML, but failed miserably. I guess this is
because I am using <ul> and <li> for the thumbnails as this seemed more
like structured markup. The page you showed used tables for each
thumbnail, which I don't want to do. Any idea how I achieve the same
effect with <ul> and <li> instead?
http://locusmeus.com/test/thumbswith...tcentered.html

Tested in Opera 8.52, 9, IE 5.01, 5.5, 6.0, 7b2, FF 1.5. (IE<7 are
hacked versions, sometimes acting differently, so better test it in an
original version as well)

Anemone?

No idea - here's the full picture:
http://locusmeus.com/bp/camping2005-047.html
Clever, but what I don't understand is how you got away with putting block
elements (span.thumb{display:block;....) inside inline elements (li
{display:inline;}).
That's never been a problem. You can't put block elements (div, p)
inside inline elements (span), but you can put inline elements (span)
inside block elements (li) and reverse the properties. The problem is
to make the browser do what you want with it though ;-)
The validator doesn't complain; it only harps about
inline-block (-which is probably a css2/css2.1 thing) and "lightgreen".

Yup - I should have used a colour number, but it was late and I was
lazy. I didn't actually check the validator...

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Camel - Freefall

[Neredbojias]

To further the education of mankind, Els <el*********@tiscali.nl>
declaimed:

Anemone?

No idea - here's the full picture:
http://locusmeus.com/bp/camping2005-047.html

-Er, no, I doubt it. Actually, I was thinking of a _sea_ anemone...

Clever, but what I don't understand is how you got away with putting
block elements (span.thumb{display:block;....) inside inline elements
(li {display:inline;}).

That's never been a problem. You can't put block elements (div, p)
inside inline elements (span), but you can put inline elements (span)
inside block elements (li) and reverse the properties. The problem is
to make the browser do what you want with it though ;-)

I see. Missed that on my browse-through. Thanks for the clarification.

The validator doesn't complain; it only harps about
inline-block (-which is probably a css2/css2.1 thing) and
"lightgreen".

Yup - I should have used a colour number, but it was late and I was
lazy. I didn't actually check the validator...

Figured. Had a page up myself for a long time which used "gold" which I
stubbornly refused to change because I'm stubborn.

And, if I forgot to mention it before, nice job.

--
Neredbojias
Infinity can have limits.

[Els]

Neredbojias wrote:

Anemone?
No idea - here's the full picture:
http://locusmeus.com/bp/camping2005-047.html

-Er, no, I doubt it. Actually, I was thinking of a _sea_ anemone...

Like this one? :-)
http://locusmeus.com/dimage-z1/whatsit.html

The validator doesn't complain; it only harps about
inline-block (-which is probably a css2/css2.1 thing) and
"lightgreen".

Yup - I should have used a colour number, but it was late and I was
lazy. I didn't actually check the validator...

Figured. Had a page up myself for a long time which used "gold" which I
stubbornly refused to change because I'm stubborn.

Gold, silver, orange .. they should just be part of legal CSS imo.
And, if I forgot to mention it before, nice job.

Thanks :-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Camel - Lady Fantasy (Bonus track)

[Neredbojias]

To further the education of mankind, Els <el*********@tiscali.nl>
declaimed:

Neredbojias wrote:
-Er, no, I doubt it. Actually, I was thinking of a _sea_ anemone...
Like this one? :-)
http://locusmeus.com/dimage-z1/whatsit.html

Yep, that's it, although I'm more familiar with the white ones. Maybe that
individual had a stomach ache.

Yup - I should have used a colour number, but it was late and I was
lazy. I didn't actually check the validator...

Figured. Had a page up myself for a long time which used "gold"
which I stubbornly refused to change because I'm stubborn.

Gold, silver, orange .. they should just be part of legal CSS imo.

Of course. They added one (1) awhile back (-might be 'orange' but forgot)
but almost any even fairly common name should be defined.

And, if I forgot to mention it before, nice job.

Thanks :-)

--
Neredbojias
Infinity can have limits.

[Yukky Korpulent]

>> http://www.spartanicus.utvinternet.i...h_captions.htm

Pretty impressive.

[kchayka]

Els wrote:

you can't vertically center images
of different heights without setting explicit top margins on them.

Sure you can, if you ignore IE. Set line-height to at least the height
of the tallest img, and vertical-align:middle

IE has a bug concerning line-height and replaced elements, so it will
align the images at top instead, but other browsers should center them
nicely.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Els]

kchayka wrote:

Els wrote:

you can't vertically center images
of different heights without setting explicit top margins on them.
Sure you can, if you ignore IE. Set line-height to at least the height
of the tallest img, and vertical-align:middle

Yes, I know that trick, but for some reason it doesn't work in my
example. I've even tried it setting the line-height on all the
elements, setting explicit display:inline on the image, but alas - not
working. Maybe you can find what I'm missing?
IE has a bug concerning line-height and replaced elements, so it will
align the images at top instead, but other browsers should center them
nicely.

That would be good enough for me - but I can't get it to work in this
particular construct :-(

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

[Alan Silver]

In article <x9****************************@40tude.net>, Els
<el*********@tiscali.nl> writes
<snip>

http://locusmeus.com/test/thumbswith...tcentered.html

Tested in Opera 8.52, 9, IE 5.01, 5.5, 6.0, 7b2, FF 1.5. (IE<7 are
hacked versions, sometimes acting differently, so better test it in an
original version as well)

<snip>

Sorry for the delay in replying, I've been off for just over a week
(holidays, new baby, etc) so have only just had chance to look at this.

That example was exactly what I wanted, thanks. I converted it to work
with <ul> instead of <p> without much problem. As my thumbnails are
inside links to other pages, I was able to remove the <span> elements
and use <a> instead, which resulted in neater code. You can see my
version at www.kidsinaction.org.uk/thumbs3.html

This now looks fine in IE5, IE6 and Opera 8.54, but has a couple of
small problems in FF 1.5.0.2, namely:-

1) The links appear to be vertically aligned at the bottom, not at the
top like in the other browsers. This is most noticeable on the one with
the longest caption text, where the image is higher than the others. Any
idea how to make them aligned to the top of the images, like IE and
Opera?

2) The vertical space between one caption and the top of the image below
it (when they use more than one line) is zero in FF, whereas it is as
expected in IE and Opera. I have set a top margin of 0.5em and a bottom
margin of 1em on the li element, so there should be something there, no?

Any ideas about these two?

My only other problem is that the validator complains about...

display: inline-block;

saying that "inline-block" isn't a valid value. According to the page
you linked, this is CSS2.1, and not CSS2. I don't know if this is the
problem though. Any idea how to get the CSS to validate?

Thanks for the reply.

--
Alan Silver
(anything added below this line is nothing to do with me)

[Alan Silver]

Anyone any ideas about this?

In article <O0**************@nospamthankyou.spam>, Alan Silver
<al*********@nospam.thanx.invalid> writes

In article <x9****************************@40tude.net>, Els
<el*********@tiscali.nl> writes
<snip>

http://locusmeus.com/test/thumbswith...tcentered.html

Tested in Opera 8.52, 9, IE 5.01, 5.5, 6.0, 7b2, FF 1.5. (IE<7 are
hacked versions, sometimes acting differently, so better test it in an
original version as well)

<snip>

Sorry for the delay in replying, I've been off for just over a week
(holidays, new baby, etc) so have only just had chance to look at this.

That example was exactly what I wanted, thanks. I converted it to work
with <ul> instead of <p> without much problem. As my thumbnails are
inside links to other pages, I was able to remove the <span> elements
and use <a> instead, which resulted in neater code. You can see my
version at www.kidsinaction.org.uk/thumbs3.html

This now looks fine in IE5, IE6 and Opera 8.54, but has a couple of
small problems in FF 1.5.0.2, namely:-

1) The links appear to be vertically aligned at the bottom, not at the
top like in the other browsers. This is most noticeable on the one with
the longest caption text, where the image is higher than the others.
Any idea how to make them aligned to the top of the images, like IE and
Opera?

2) The vertical space between one caption and the top of the image
below it (when they use more than one line) is zero in FF, whereas it
is as expected in IE and Opera. I have set a top margin of 0.5em and a
bottom margin of 1em on the li element, so there should be something
there, no?

Any ideas about these two?

My only other problem is that the validator complains about...

display: inline-block;

saying that "inline-block" isn't a valid value. According to the page
you linked, this is CSS2.1, and not CSS2. I don't know if this is the
problem though. Any idea how to get the CSS to validate?

Thanks for the reply.

--
Alan Silver
(anything added below this line is nothing to do with me)