CSS Thumbnail rows not one single line

JavaScript and client side scripting.

Moderator: General Moderators

KofRad
Forum Newbie
Posts: 3
Joined: Wed Jan 07, 2004 12:01 am
Location: South Florida, USA
Contact:

CSS Thumbnail rows not one single line

Post 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.
User avatar
Pyrite
Forum Regular
Posts: 769
Joined: Tue Sep 23, 2003 11:07 pm
Location: The Republic of Texas
Contact:

Post by Pyrite »

What exactly is your problem or what r u trying to do?
basdog22
Forum Contributor
Posts: 158
Joined: Sun Nov 30, 2003 3:03 pm
Location: Greece

Post 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.
microthick
Forum Regular
Posts: 543
Joined: Wed Sep 24, 2003 2:15 pm
Location: Vancouver, BC

Post by microthick »

Either make all the divs appear as inline elements.

display: inline;

Or, you can float them all.

float: left;
Last edited by microthick on Tue Jan 13, 2004 8:36 pm, edited 1 time in total.
Gen-ik
DevNet Resident
Posts: 1059
Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.

Post by Gen-ik »

...or you can just use a <table>
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post 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
Gen-ik
DevNet Resident
Posts: 1059
Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.

Post 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.
Nay
Forum Regular
Posts: 951
Joined: Fri Jun 20, 2003 11:03 am
Location: Brisbane, Australia

Post 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
User avatar
Pyrite
Forum Regular
Posts: 769
Joined: Tue Sep 23, 2003 11:07 pm
Location: The Republic of Texas
Contact:

Post 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.
Gen-ik
DevNet Resident
Posts: 1059
Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.

Post 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 ;)
basdog22
Forum Contributor
Posts: 158
Joined: Sun Nov 30, 2003 3:03 pm
Location: Greece

Post 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:
KofRad
Forum Newbie
Posts: 3
Joined: Wed Jan 07, 2004 12:01 am
Location: South Florida, USA
Contact:

Post by KofRad »

I've just decided to use tables, seem the easiest. Thanks for your help.
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post 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]
Gen-ik
DevNet Resident
Posts: 1059
Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.

Post 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.
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post 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.
Post Reply