CSS Thumbnail rows not one single line

JavaScript and client side scripting.

Moderator: General Moderators

McGruff
DevNet Master
Posts: 2893
Joined: Thu Jan 30, 2003 8:26 pm
Location: Glasgow, Scotland

Post by McGruff »

We're here to learn from each other not insult each other. If the discussion continues by all means argue your case but please respect each other's views.
Gen-ik
DevNet Resident
Posts: 1059
Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.

Post by Gen-ik »

Unipus wrote: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.
That depends. If a PDA can't display a website properly then that would make accessing the site slightly difficult wouldn't it?

This is all slightly off-topic anyway and no I don't want to start a petty argument, I was simply making the point (maybe it was a bit too harsh) that I probably know a bit more about websites and PDA/PPC display/access than yourself, but please correct me if I'm wrong.

You shouldn't come steaming into a topic with such a 'forceful' (if that's the right word) attitude though... if your reply wasn't so in-your-face and i-know-it-all then I wouldn't have responded the way I did, and I appologize if I offended you.
Unipus wrote: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.
BAFTA also covers a whole range of things (not just Film & Television) including Interactive Entertainment.
Image
Gen-ik
DevNet Resident
Posts: 1059
Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.

Post by Gen-ik »

McGruff wrote:We're here to learn from each other not insult each other. If the discussion continues by all means argue your case but please respect each other's views.
Noted. I should've learnt my leason by now eh ;)
McGruff
DevNet Master
Posts: 2893
Joined: Thu Jan 30, 2003 8:26 pm
Location: Glasgow, Scotland

Post by McGruff »

Sigh.

I never get any chance to employ my weapons of mass moderation these days. :(
Gen-ik
DevNet Resident
Posts: 1059
Joined: Mon Aug 12, 2002 7:08 pm
Location: London. UK.

Post by Gen-ik »

I'm sure I'll get one of your moderation missiles hitting me straight in the face sooner or later :)
Unipus
Forum Contributor
Posts: 409
Joined: Tue Aug 26, 2003 2:06 pm
Location: Los Angeles, CA

Post by Unipus »

Okay. So we had some miscommunication here. I didn't mean to seem like a know-it-all (because I'm certainly not), but I did intend to correct what I see as a misconception. It seems like I still haven't done that, so I'll try to clarify it one more time:

If the page is not displaying correctly on a PDA, that's unfortunate and should be fixed. But, at the most basic level, the information is still there. Going to tables to display non-tabular data is, in any case, a hack, even if it's an effective one. And while it will increase the accessibility of your users on the PDA platform, it will simultaneously greatly decrease the accesibility of your users using screen readers, cell phones, text-only devices, and so on. Of course it's a tradeoff, and if you have a lot of PDA users, I guess you know where to cast your lot. Your statement sounded like a blanket statement to me, though, and I disagree with that.

I didn't know that BAFTA had an interactive branch. Interesting. Moving on, otherwise, I will say that statements like "I probably know a bit more about websites and PDA/PPC display/access than yourself" aren't helpful. That may very well be true in this case or in others, but it may not. I mean, I *did* have a Flashkit Site of the Week once. :wink:
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post by no_memories »

This can be done.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Inline Thumbs</title>

<style>

#thumbs &#123;
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 50px;
&#125;

#thumbs span &#123;
padding: 10px
&#125;

#thumb1 &#123;
width: 50px;
height: 50px;
background: #333;
&#125;

#thumb2 &#123;
width: 50px;
height: 50px;
background: #333;
&#125;

#thumb3 &#123;
width: 50px;
height: 50px;
background: #333;
&#125;

</style>

</head>
<body>

<div id="thumbs">

<span id="thumb1">&nbsp;</span>
<span id="thumb2">&nbsp;</span>
<span id="thumb3">&nbsp;</span>

</div>

</body>
</html>
Just make your thumb pictures background images.

background: url ( http:www.your.domain.com/images/thumb1.gif ) no-repeat;

If you need help with linking this in a <div> just let me know :)
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post by no_memories »

When using html elements, remember that (especially in xhtml) the dtd defines how each particular element is to behave. Each element has a default setting as in: Block or Inline.

Images are normally seen by a browser as a block, so hence they stack.

However, you can specify in the CSS document to display the images as inline, but that is not a good idea because of the unpredictable nature in various browsers.

Code: Select all

Expressing images as inline with CSS:

img &#123;
display: inline;
&#125;
Try to go with the flow the dtd sets.

Block elements ( <div> <ul> <pre>, etc ) are used primarily for structure.

Inline elements ( <span> <b> <a>, ect ) are used primarily for text flow.

The problem you encountered was that you were trying to make blocks flow inline.

Hope this helps :)
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post by no_memories »

One last thing.. lol

In order for the backgrounds to show properly you must have at least an encoded space within the <span>&nbsp;</span>. As in: &nbsp;

This space makes the spans open up. Don't ask me why.. lol

proper character encoding helps alot with the stability with fonts, spaces, breaks, and of course encoded character. , I think.. lol
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post by Roja »

no_memories wrote: In order for the backgrounds to show properly you must have at least an encoded space within the <span>&nbsp;</span>. As in: &nbsp;

This space makes the spans open up. Don't ask me why.. lol
Spans are containers - if they dont contain anything, they arent always presented visually. :)

(thats a browser/implementation choice/option).
User avatar
no_memories
Forum Contributor
Posts: 145
Joined: Sun Feb 01, 2004 7:12 pm
Location: New York City

Post by no_memories »

I knew there was a reason! :) but thanks for pointing that out, cause it's a valid point to not to leave out. Especially in CSS XHTML standards layout. My bad.

I'm on on a stone age 56k connection with a 200P/ WinME machine as the modem share. It's definatly not dsl. Short and sweet this week.

This forum rocks.
Post Reply