Page 1 of 2

CSS Thumbnail rows not one single line

Posted: Wed Jan 07, 2004 10:34 am
by KofRad
I am working on the layout for an online art community that I am coding, I have gotten most of the layout done, I just ran into a problem when making the thumbnail rows. The HTML I am using for the thumbnail rows is this:

Code: Select all

....
<DIV CLASS="THUMBROW">
  <DIV CLASS="THUMBODD">
    <IMG SRC="SUBMISSIONS/THUMBS/001.GIF" /><BR />
    Image name<BR />
    Image description<BR />
  </DIV>
  <DIV CLASS="THUMBEVEN">
    <IMG SRC="SUBMISSIONS/THUMBS/001.GIF" /><BR />
    Image name<BR />
    Image description<BR />
  </DIV>
  <DIV CLASS="THUMBODD">
    <IMG SRC="SUBMISSIONS/THUMBS/001.GIF" /><BR />
    Image name<BR />
    Image description<BR />
  </DIV>
  <DIV CLASS="THUMBEVEN">
    <IMG SRC="SUBMISSIONS/THUMBS/001.GIF" /><BR />
    Image name<BR />
    Image description<BR />
  </DIV>
</DIV>
...
I do not have the CSS code readily available, but I have tried every possible way to do this on one line, I would not like to use tables in this project and have the layout full XHTML and CSS compatable. I know that this is possible because I see it on deviantArt.com and they do not have any tables. So could someone please point me in the right direction on this? Thanks for your help.

Posted: Wed Jan 07, 2004 10:36 am
by Pyrite
What exactly is your problem or what r u trying to do?

Posted: Wed Jan 07, 2004 2:23 pm
by basdog22
i think he wants to have the images like this:

image1 image2 image3

and not like this:

image1
image2
image3

Well it can be done only through css. You must though give each div a different class name.

Posted: Wed Jan 07, 2004 4:44 pm
by microthick
Either make all the divs appear as inline elements.

display: inline;

Or, you can float them all.

float: left;

Posted: Wed Jan 07, 2004 5:41 pm
by Gen-ik
...or you can just use a <table>

Posted: Thu Jan 08, 2004 2:07 am
by Roja
Gen-ik wrote:...or you can just use a <table>
Read original post..
KofRad wrote: I would not like to use tables in this project and have the layout full XHTML and CSS compatable

Posted: Thu Jan 08, 2004 4:34 am
by Gen-ik
Roja wrote:
Gen-ik wrote:...or you can just use a <table>
Read original post..
KofRad wrote: I would not like to use tables in this project and have the layout full XHTML and CSS compatable
The page can be XHTML and CSS compatable with the odd <table> here and there. Adding a couple of tables for the main structures of the site also makes it more accessible for other devices such as PDAs and PPCs.

Using XHTML and CSS is good... having a very structured site using only divs is not good.

Posted: Thu Jan 08, 2004 5:05 am
by Nay
Yeah, I have to agree with Gen-ik, an XHTML layout does not have to mean everything DIV's. I'm posivitive I saw in W3C that DIV should be used for laying the site out while tables to represent data. I'm sure you won't go around making a forum with all DIV's?

:)

-Nay

Posted: Thu Jan 08, 2004 5:26 am
by Pyrite
I made by photo album this way .. but I used tables. And I think photo albums are more of a way of representing data (images) than a site layout.

Posted: Thu Jan 08, 2004 12:47 pm
by Gen-ik
I wouldn't say that using an all <div> layout is all bad, but I wouldn't say it's all good either.

There's no real problem using an all <div> layout but it does generally lead to a headaches due to the problems mentioned above and also how different browsers will handle the divs.

If it's something you want to do then go for it, personally I've given up on the whole idea of the all-div-layout... it was a nice idea while it lasted though ;)

Posted: Thu Jan 08, 2004 2:33 pm
by basdog22
If it's something you want to do then go for it, personally I've given up on the whole idea of the all-div-layout...

well for different browsers all you have to do is make a css switcher and load whatever css fits your need.

I did a all divs site which supports 4 different layouts that look exactly the same on 99% of browsers out there: Netscape, Opera, IE

:idea: :idea: :idea:

i may even make a css switcher for resolutions too :wink:

Posted: Sat Jan 10, 2004 3:18 pm
by KofRad
I've just decided to use tables, seem the easiest. Thanks for your help.

Posted: Tue Jan 13, 2004 8:08 pm
by Unipus
First of all, stop capitalizing your tags. You should get used to all lower case now before it becomes a habit. Upper case won't validate and is bad form.

Secondly, something like this would do the trick:

Code: Select all

.thumbrow &#123;
     display: inline;
&#125;
You might also want to define a fixed width or an overflow to be sure it displays correctly. As microthick sort of mentioned, divs are by default block elements and not inline elements, meaning there is an implied line break after each div. You could also try using spans instead of divs.

Now,
Adding a couple of tables for the main structures of the site also makes it more accessible for other devices such as PDAs and PPCs.
That's a very interesting statement to make. Why would you say that? I can't think of any example where tables add to the "accessibility" of a page. I agree that they should be used for the display of strict data, and I agree that sometimes there's simply no need for a no-table layout, but the idea that tables increase accessibility is pretty ludicrous to me.[/quote]

Posted: Tue Jan 13, 2004 8:26 pm
by Gen-ik
Unipus wrote:
Gen-ik wrote:Adding a couple of tables for the main structures of the site also makes it more accessible for other devices such as PDAs and PPCs.
That's a very interesting statement to make. Why would you say that? I can't think of any example where tables add to the "accessibility" of a page. I agree that they should be used for the display of strict data, and I agree that sometimes there's simply no need for a no-table layout, but the idea that tables increase accessibility is pretty ludicrous to me.

Well let's all praise the God of knowledge, the one they call Unipus. Behold his mighty wisdom and experience in all things that are internet.

If you stopped licking your own dick for 10 minutes and read my comment again you might just notice that in context to the rest of the replies I was saying that having some tables would enable PDAs and PPCs to display the info better rather than using an all div layout on a website.

While PDAs and PPCs are advancing quite quickly now a lot of their software is still a bit behind the times and older models/software will have trouble displaying an all-div website page.

How on earth would a mere mortal like myself know this? I worked on PDA and PPC software for 3 years... with a company that won a BAFTA for their work.

Posted: Tue Jan 13, 2004 9:01 pm
by Unipus
Great. So who sounds self-indulgent now? Take it down a notch, yeah?

Anyway, display and accessibility are two entirely different things, and while you might be right about display issues, that's not what your words said, and your words were wrong. Semantics, maybe, but try a little tact next time.

But if instead of having a constructive discussion, you'd rather polish your BAFTA (the British Academy of Film & Television Arts, if I'm not mistaken? PDAs? I guess they're doing interesting things with cinema across the pond.), go right ahead. I'm not interested in petty arguments.