Prev: How to get text input box to fill remaining space?
Next: Opera 9.5 bug, nested absolute positioning broken
From: Stan The Man on 29 Jun 2008 23:10
I'm a CSS novice trying unsuccessfully to make three thumbnail images
display horizontally instead of vertically. I suspect I'm missing
something really stupid but I'll take the flak if someone could kindly
point me in the right direction (using words that the vicar's wife
would understand). The vertical thumbnails can be seen at the bottom of
this page: http://www.zen86793.zen.co.uk/gmga2008/index.html ... the
first image is in the right position and I want to move the other two
to the right of it.

Thank you for any help.

Stan

From: dorayme on 29 Jun 2008 23:30
In article <48684ebb$0$26091$db0fefd9(a)news.zen.co.uk>,
Stan The Man <man(a)pr100.com> wrote:

> I'm a CSS novice trying unsuccessfully to make three thumbnail images
> display horizontally instead of vertically. I suspect I'm missing
> something really stupid but I'll take the flak if someone could kindly
> point me in the right direction (using words that the vicar's wife
> would understand). The vertical thumbnails can be seen at the bottom of
> this page: http://www.zen86793.zen.co.uk/gmga2008/index.html ... the
> first image is in the right position and I want to move the other two
> to the right of it.
>

First - always - the HTML, see

<http://tinyurl.com/4papws>

--
dorayme
From: John Hosking on 30 Jun 2008 03:33
Stan The Man wrote:

> The vertical thumbnails can be seen at the bottom of this
> page: http://www.zen86793.zen.co.uk/gmga2008/index.html ... the first
> image is in the right position and I want to move the other two to the
> right of it.

Yes, do validate as dorayme suggested.

After you've done that, the immediate answer to your question involves
the width you've set for #pic.

You do not need HTML comment delimiters <-- --> for your CSS.

Why not use display:none to hide your large pop-up images rather than
height:1px; width:1px?

Please, please don't use the clagnut method of screwing up Web sites.
Replace 62.5% in your body ruleset with 100%, and delete the 1.3em
et.al. you've added to compensate for it. I.e., in #container, replace:

font-size: 1.3em;
line-height: 1.3em;

with:

line-height: 1.2;

or just delete the line-height altogether. You can probably downgrade or
revise or delete the font sizing you've added to the h1 - h3 rules, too.

HTH

--
John
Wondering how slow-witted the vicar's wife is, since I haven't met her.
Pondering the value of the UIP: http://improve-usenet.org/
From: Stan The Man on 30 Jun 2008 06:25
On 2008-06-30 08:33:12 +0100, John Hosking
<John(a)DELETE.Hosking.name.INVALID> said:

> Stan The Man wrote:
>
>> The vertical thumbnails can be seen at the bottom of this page:
>> http://www.zen86793.zen.co.uk/gmga2008/index.html ... the first image
>> is in the right position and I want to move the other two to the right
>> of it.
>
> Yes, do validate as dorayme suggested.
>
> After you've done that, the immediate answer to your question involves
> the width you've set for #pic.
>
> You do not need HTML comment delimiters <-- --> for your CSS.
>
> Why not use display:none to hide your large pop-up images rather than
> height:1px; width:1px?
>
> Please, please don't use the clagnut method of screwing up Web sites.
> Replace 62.5% in your body ruleset with 100%, and delete the 1.3em
> et.al. you've added to compensate for it. I.e., in #container, replace:
>
> font-size: 1.3em;
> line-height: 1.3em;
>
> with:
>
> line-height: 1.2;
>
> or just delete the line-height altogether. You can probably downgrade
> or revise or delete the font sizing you've added to the h1 - h3 rules,
> too.

It does help: thank you very much. I will look at those basic errors.
Will also try display:none (the code for the pop-ups was borrowed as it
is much too technical for me; I used it because it was the only hover
popup I could find which is entirely CSS rather than JS). The #pic
width is the native width of each thumbnail, ie 110px and I did try it
with only two images in case width was the problem but even then they
both displayed vertically. All three thumbnails display nicely in a
horizontal line if I use a table row to position them instead of the
CSS... so I even tried using the CSS inside the table cells but that
caused mayhem, unsurprisingly. My next step was going to be to try
using different #img relative positions for each image, or maybe
absolute positions instead... It's all trial and error for me.

Stan


From: Beauregard T. Shagnasty on 30 Jun 2008 07:02
Stan The Man wrote:

> John Hosking said:
>> Stan The Man wrote:
>>> I'm a CSS novice trying unsuccessfully ...
>>
>> Please, please don't use the clagnut method of screwing up Web sites.
>
> It does help: thank you very much. I will look at those basic errors.

Stan, you didn't specifically mention anything about John's comment on
the seriously-wrong "clagnut" method of font-sizing. Using a base body
font of anything less than 100% causes problems. Using Opera, I have to
zoom your page to about 120% in order to read the text at my preferred
size.

I see where you got your template.
http://templates.arcsin.se/

Why, oh why, is this practice proliferating so widely?

http://tekrider.net/html/fontsize.php

--
-bts
-Friends don't let friends drive Windows
 |  Next  |  Last
Pages: 1 2 3 4
Prev: How to get text input box to fill remaining space?
Next: Opera 9.5 bug, nested absolute positioning broken