Need CSS help: displaying items inline (like a Java FlowLayout)

[jacob.miles]

Hello. I'm writing a web application that needs to display image
thumbnails on a page in order from left to right, wrapping around when
it reaches the end of the row. If it were just the images, there'd be
no problem, but I need to display text beneath each one. When I try to
do this, they display one underneath the other, not left to right.
What am I doing wrong?

The html snippet looks roughly like this:

<div class="image">
<img src=..../>
<div class="image-name">...</div>
</div>

the CSS:

..image {
display: inline;
}

They display one underneath the next instead of left to right. What am
I doing wrong?

- Jake

 

[jacob.miles]

I found a solution, but please tell me if there's a more standard
solution than this. My solution is this:

..image {
float: left;
}

This makes all the thumbnails stack left to right, all trying to float
to the left. Is this the way it's done?

 

[Els]

I found a solution, but please tell me if there's a more standard
solution than this. My solution is this:

.image {
float: left;
}

This makes all the thumbnails stack left to right, all trying to float
to the left. Is this the way it's done?

Please quote the relevant bits of the message you are replying to, so
everybody can see what you're talking about. (even if you're replying
to your own message )

Floating the images and captions is one way to do the trick, yes.
Another way is to use "inline tables", which enables you to center
them.

Here's an example I made 2 years ago:
http://locusmeus.com/test/thumbswithcaptionscentered.html
The reason I used tables, is that I wanted the thumbnails vertically
centered regardless of their height.

One thing that is important in each method, is the height of the table
or div. If one gets higher than the others because of a longer caption
for instance, the thumbnails won't stack quite so nicely.

 

[David Graham]

Please quote the relevant bits of the message you are replying to, so
everybody can see what you're talking about. (even if you're replying
to your own message )

Floating the images and captions is one way to do the trick, yes.
Another way is to use "inline tables", which enables you to center
them.

Here's an example I made 2 years ago:
http://locusmeus.com/test/thumbswithcaptionscentered.html

Hi
I thought I would put a line of code into the page above to outline the
tables in white as below:

table{
width:115px;
margin-top:0px;
margin-bottom:0px;
padding:0px;
text-align:center;
display:inline;
border: 2px solid rgb(255,255,255);
}

This works as expected in IE6 and Opera 8.51 but in Mozilla 1.7.12 and
Firefox 1.5 the white outline of the tables is a rectangular box under each
caption. Rarely does Opera agree with IE6 and disagree with gecko browsers -
why is Mozilla and Firefox having a hard time with this extra line of code.
Also, why do you have two inline instructions as the line below
html>body table { display:inline-table; }
does the same thing as the next to last line in the table block rule doesn't
it? Is this child selector thingy only recognised by certain browsers?
thanks in advance for any help you might offer
just on a learning exercise
David

 

[Els]

I thought I would put a line of code into the page above to outline the
tables in white as below:

table{
width:115px;
margin-top:0px;
margin-bottom:0px;
padding:0px;
text-align:center;
display:inline;
border: 2px solid rgb(255,255,255);
}

This works as expected in IE6 and Opera 8.51 but in Mozilla 1.7.12 and
Firefox 1.5 the white outline of the tables is a rectangular box under each
caption. Rarely does Opera agree with IE6 and disagree with gecko browsers -
why is Mozilla and Firefox having a hard time with this extra line of code.

IE and Opera each have their own reason: IE because it extends boxes
to encompass their content, and Opera because of "inline-table" (which
is hidden from IE).

Also, why do you have two inline instructions as the line below
html>body table { display:inline-table; }
does the same thing as the next to last line in the table block rule doesn't
it? Is this child selector thingy only recognised by certain browsers?

The child selector isn't recognized by IE, but the inline-table itself
doesn't do anything in Mozilla. I only added it for Opera.

thanks in advance for any help you might offer
just on a learning exercise

Now you know why I didn't make a nice border on the tables ;-)

On a new site I'm working on, I'm having the border I want though, as
the <td> does show a border in the right place in all 3 browsers. I
just tried that technique on the thumbnails page, and found you could
fake a table border by setting the cellspacing to 0, and set borders
on every td, make the border bottom of top td and top border of bottom
td 0. Also added a 1px margin to the tables, to make IE separate them
visually.

Result:
http://locusmeus.com/test/thumbswithcaptionscentered-borders.html

 

[David Graham]

----- Original Message -----
From: "Els" <[email protected]>
Newsgroups: alt.html
Sent: Thursday, January 12, 2006 12:49 PM
Subject: Re: Need CSS help: displaying items inline (like a Java FlowLayout)

IE and Opera each have their own reason: IE because it extends boxes
to encompass their content, and Opera because of "inline-table" (which
is hidden from IE).

So inline-table is a value for the display property that changes the
behaviour of Opera in that a table with a fixed height and width on it's
td's behaves more like the broken behaviour of IE and enlarges to accomodate
the content- have I summarised what you are saying correctly?

On a new site I'm working on, I'm having the border I want though, as
the <td> does show a border in the right place in all 3 browsers. I
just tried that technique on the thumbnails page, and found you could
fake a table border by setting the cellspacing to 0, and set borders
on every td, make the border bottom of top td and top border of bottom
td 0. Also added a 1px margin to the tables, to make IE separate them
visually.

Result:
http://locusmeus.com/test/thumbswithcaptionscentered-borders.html

Very clever idea.

Oh, one last thing, you said you used tables because the images would be
vertically centered, is that the default behaviour for tables and image
position inside the td's? I suppose a div would place the image top left
inside the div if there was no positioning css - is that true?

BTW - sort of started a new thread yesterday on this thread - please ignor
it
thanks
David

 

[Els]

So inline-table is a value for the display property that changes the
behaviour of Opera in that a table with a fixed height and width on it's
td's behaves more like the broken behaviour of IE and enlarges to accomodate
the content- have I summarised what you are saying correctly?

Not entirely sure, but it sounds like it, yes. Only I would not say
that inline-table behaves like the broken behaviour of IE, but rather
that in Opera, a table with display:inline-table behaves as it should,
and that IE coincidentally, due to its broken behaviour, *seems* to do
the same thing with display:inline on a table.

Very clever idea.

Oh, one last thing, you said you used tables because the images would be
vertically centered, is that the default behaviour for tables and image
position inside the td's? I suppose a div would place the image top left
inside the div if there was no positioning css - is that true?

Yup. Default for td's content (whether image or text) is left and
middle aligned, while you can't vertically center content in a div
other than by setting explicit top and bottom margins or using
position:absolute with explicit negative margins.

BTW - sort of started a new thread yesterday on this thread - please ignor
it

Didn't even see it

 

[David Graham]

http://locusmeus.com/test/thumbswithcaptionscentered-borders.html
One last comment - the images in the tables show really good fluid behaviour
in every browser I have, never seen anything behave as well as this. As I
narrow the window, the columns of images reduces until it's down to a single
column, no horizontal scrolls - really good.

 

[Els]

http://locusmeus.com/test/thumbswithcaptionscentered-borders.html
One last comment - the images in the tables show really good fluid behaviour
in every browser I have, never seen anything behave as well as this. As I
narrow the window, the columns of images reduces until it's down to a single
column, no horizontal scrolls - really good.

That was the purpose of the page - they used to be in a large table, 7
images per row. But I wanted it fluid, so came up with this

 

[David Graham]

Not entirely sure, but it sounds like it, yes. Only I would not say
that inline-table behaves like the broken behaviour of IE, but rather
that in Opera, a table with display:inline-table behaves as it should,
and that IE coincidentally, due to its broken behaviour, *seems* to do
the same thing with display:inline on a table.

Well put - see what you mean

Yup. Default for td's content (whether image or text) is left and
middle aligned, while you can't vertically center content in a div
other than by setting explicit top and bottom margins or using
position:absolute with explicit negative margins.

Understood you until you mentioned a need for 'explicit negative margins' -
not sure what that is for - could you put it into simple terms for a
learner - thanks again.
David

 

[Els]

Understood you until you mentioned a need for 'explicit negative margins' -
not sure what that is for - could you put it into simple terms for a
learner - thanks again.

By explicit I meant stipulated in pixels.
You could give the containing div a fixed height, then position the
image absolute on left:50% and top:50%, but that would be the position
of the top left corner of the image, so then you set a negative top
margin of height/2, and a negative left margin of width/2.

Say your div is 200px high and 200px wide, and your image 150px high
and 80px wide, you would use CSS like this:

div{
position:relative;
height:200px;
width:200px;
}
div img{
position:absolute;
top:50%;
left:50%;
margin-top:-75px;
margin-left:-40px;
}

Meaning you still need to know the measures of the image, while with
TDs, you don't.

 

[Beauregard T. Shagnasty]

That was the purpose of the page - they used to be in a large table, 7
images per row. But I wanted it fluid, so came up with this

Lotsa code in that page. Why not use a list?
http://www.fingerlakesbmw.org/visual/flmgshow.php
http://www.fingerlakesbmw.org/style/flthumb.css

 

[Els]

Lotsa code in that page. Why not use a list?
http://www.fingerlakesbmw.org/visual/flmgshow.php
http://www.fingerlakesbmw.org/style/flthumb.css

I have a list version too ;-)
http://locusmeus.com/test/thumbswithcaptionslist.html

But it doesn't do any extra, other than being semantically better
perhaps. I use those tables for a purpose: vertically centering images
of different heights. I also want the entire selection horizontally
centered

 

[David Graham]

By explicit I meant stipulated in pixels.
You could give the containing div a fixed height, then position the
image absolute on left:50% and top:50%, but that would be the position
of the top left corner of the image, so then you set a negative top
margin of height/2, and a negative left margin of width/2.

Say your div is 200px high and 200px wide, and your image 150px high
and 80px wide, you would use CSS like this:

div{
position:relative;
height:200px;
width:200px;
}
div img{
position:absolute;
top:50%;
left:50%;
margin-top:-75px;
margin-left:-40px;
}

Meaning you still need to know the measures of the image, while with
TDs, you don't.

Thanks, I see now that a negative margin just shifts the element in the
opposite direction to that which a positive margin normally does.