Trying to persuade CSS images to line up horizontally

**dorayme** · Jun 30 '08, 03:35 AM

Re: Trying to persuade CSS images to line up horizontally

In article <48684ebb$0$260 91$db0fefd9@new s.zen.co.uk>,
Stan The Man <man@pr100.comw rote:

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

**John Hosking** · Jun 30 '08, 07:45 AM

Re: Trying to persuade CSS images to line up horizontally

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/

**Stan The Man** · Jun 30 '08, 10:35 AM

Re: Trying to persuade CSS images to line up horizontally

On 2008-06-30 08:33:12 +0100, John Hosking
<John@DELETE.Ho sking.name.INVA LIDsaid:

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

**John Hosking** · Jun 30 '08, 12:35 PM

Re: Trying to persuade CSS images to line up horizontally

Stan The Man wrote:

On 2008-06-30 12:02:42 +0100, "Beauregard T. Shagnasty" said:
>

>>
>Why, oh why, is this [clagnut] practice proliferating so widely?
>>
>http://tekrider.net/html/fontsize.php

>
Thanks for the link. I was of course grouping font size with the other
'basic errors' which I said I would look into. I will report back when I
have done some fixing later today. Still struggling to my thumbnails
into a horizontal line though...

Well, from your earlier post, you must be done struggling now, right?
After you've changed your 110px in #pic to, say, 336px, your aunt's
spouse must be named Robert, and the thumbnails arrayed horizontally. Yes?

--
John

**Stan The Man** · Jun 30 '08, 06:35 PM

Re: Trying to persuade CSS images to line up horizontally

On 2008-06-30 13:21:18 +0100, John Hosking
<John@DELETE.Ho sking.name.INVA LIDsaid:

Stan The Man wrote:

>On 2008-06-30 12:02:42 +0100, "Beauregard T. Shagnasty" said:
>>

>>>
>>Why, oh why, is this [clagnut] practice proliferating so widely?
>>>
>>http://tekrider.net/html/fontsize.php

>>
>Thanks for the link. I was of course grouping font size with the other
>'basic errors' which I said I would look into. I will report back when
>I have done some fixing later today. Still struggling to my thumbnails
>into a horizontal line though...

>
Well, from your earlier post, you must be done struggling now, right?
After you've changed your 110px in #pic to, say, 336px, your aunt's
spouse must be named Robert, and the thumbnails arrayed horizontally.
Yes?

I have fixed some (hopefully most) of the basic errors and reuploaded
to http://www.gardenmediaguild.co.uk/awards/index.html

Still can't get those thumbnails to line up horizontally though.
Changing #pic to 336px only gave me the same vertical lineup of images
with a new white block to the right, to the full height of the images.
All possible combinations of #pic dimensions have been tried and the
fix must lie elsewhere.

I also tried creating three different #pic classes, giving each one a
relative left position 114px greater than the previous one -- but this
only moved the second and third images to the right without lifting
them up to line up with the first image. This also messed up with my
hover enlargements which displayed on load instead of on hover.
(Haven't tried the display:none thing yet.)

I have also tried various float options and putting the div inside a
table row at various sizes, percentages and auto, but nothing works.

Unless you have another brainwave, I may be reduced to combining the
three thumbnails into a single image and figuring out if I can use
image maps to reproduce the hover enlargement...

Thanks again for your help.

Stan

**Beauregard T. Shagnasty** · Jun 30 '08, 08:05 PM

Re: Trying to persuade CSS images to line up horizontally

Stan The Man wrote:

I have fixed some (hopefully most) of the basic errors and reuploaded
to http://www.gardenmediaguild.co.uk/awards/index.html
>
Still can't get those thumbnails to line up horizontally though.

Why don't you set a class on those images and make them

float: left;

--
-bts
-Friends don't let friends drive Windows

**Gus Richter** · Jun 30 '08, 11:35 PM

Re: Trying to persuade CSS images to line up horizontally

Stan The Man wrote:

>
I have fixed some (hopefully most) of the basic errors and reuploaded to
http://www.gardenmediaguild.co.uk/awards/index.html

get rid of:
<link href="css/agl-styles.css" rel="stylesheet " type="text/css"
media="all"/>
which contains markup and no rules.

Still can't get those thumbnails to line up horizontally though.
Changing #pic to 336px only gave me the same vertical lineup of images
with a new white block to the right, to the full height of the images.
All possible combinations of #pic dimensions have been tried and the fix
must lie elsewhere.

Two things to take care of your images:

#pic {width: 110px;} is the container for the images, which is too
small to take care of [3x110px + 3x1px + borders + offsets]. Change it to:
#pic {width: 344px;} /* 344px is the minimum here */

display:block will create a new line - stack images on top - remove it:
#pic a.p1, #pic a.p1:visited {/*display: block;*/}
In fact, you also use it in two other rules which are absolutely
positioned. They won't do anything there. This has nothing to do with
your problem in question.

--
Gus

**John Hosking** · Jul 1 '08, 01:15 AM

Re: Trying to persuade CSS images to line up horizontally

Stan The Man wrote:

>
I have fixed some (hopefully most) of the basic errors and reuploaded to

Garden Media Guild

http://www.gardenmediaguild.co.uk/awards/index.html

>
Still can't get those thumbnails to line up horizontally though.
Changing #pic to 336px only gave me the same vertical lineup of images
with a new white block to the right, to the full height of the images.

The whiteness comes from #pic { background-color: #ffffff; }.

The width is because the 336 is larger than 110 (but smaller than the
344 it needs to be, as Gus has pointed out).

The persistence of the vertical lineup even in a wider #pic is from the
#pic a.p1, #pic a.p1:visited { display:block; }.

Ditch the display:block, give #pic a larger width, and drop the white
background for #pic and #pic a.p1, #pic a.p1:visited (You might not need
the border on those links, either), and see how it looks. Be sure to
test it with images disabled or missing.

Do continue to work on validation the code, especially where you have
extraneous tags. Gus alluded to a problematic style sheet, which appears
to be referenced but missing.

I also tried creating three different #pic classes, giving each one a
relative left position 114px greater than the previous one -- but this
only moved the second and third images to the right without lifting them
up to line up with the first image. This also messed up with my hover
enlargements which displayed on load instead of on hover. (Haven't tried
the display:none thing yet.)

Try to avoid actually positioning anything, esp. absolutely. It's hard
to do right (and even harder to do right in all cases), for one thing,
but it's rarely necessary, IME.

>
I have also tried various float options and putting the div inside a
table row at various sizes, percentages and auto, but nothing works.
>
Unless you have another brainwave, I may be reduced to combining the
three thumbnails into a single image and figuring out if I can use image
maps to reproduce the hover enlargement...

No, no, don't do that. That's too much like work. :-)

>
Thanks again for your help.

YVW

--
John
Pondering the value of the UIP: http://improve-usenet.org/

**Stan The Man** · Jul 1 '08, 12:35 PM

Re: Trying to persuade CSS images to line up horizontally

On 2008-07-01 02:03:55 +0100, John Hosking
<John@DELETE.Ho sking.name.INVA LIDsaid:

Stan The Man wrote:

>>
>I have fixed some (hopefully most) of the basic errors and reuploaded
>to http://www.gardenmediaguild.co.uk/awards/index.html
>>
>Still can't get those thumbnails to line up horizontally though.
>Changing #pic to 336px only gave me the same vertical lineup of images
>with a new white block to the right, to the full height of the images.

>
The whiteness comes from #pic { background-color: #ffffff; }.
>
The width is because the 336 is larger than 110 (but smaller than the
344 it needs to be, as Gus has pointed out).
>
The persistence of the vertical lineup even in a wider #pic is from the
#pic a.p1, #pic a.p1:visited { display:block; }.
>
Ditch the display:block, give #pic a larger width, and drop the white
background for #pic and #pic a.p1, #pic a.p1:visited (You might not
need the border on those links, either), and see how it looks. Be sure
to test it with images disabled or missing.

Eureka! Can't thank you enough for picking this out for me. I have
reuploaded to

http://www.zen86793.zen.co.uk/gmga2008/index.html

and the images are now arrayed horizontally at last... even though the
fix seems to have exposed an extraneous white-filled border below and
behind each image. I can make the fill colour disappear but can't see
where the stroke lines are coming from.

I also seem to have managed to make the fonts in this section display
too small but I think I should be able to find out why. One thing
slowing me down is that my GoLive preview window is a long way from
wysiwyg (all text displays massively oversized thus pushing the right
hand column down to the bottom of the page, so I have to preview every
change in my browser/s window/s.

Do continue to work on validation the code, especially where you have
extraneous tags. Gus alluded to a problematic style sheet, which
appears to be referenced but missing.

Yes, that style sheet came with the template and I think I can dispense
with it. Once I'm sure, I will clean up all references to it. And I
will put it through the validator once I get the page more or less
looking like I want it to.

>I also tried creating three different #pic classes, giving each one a
>relative left position 114px greater than the previous one -- but this
>only moved the second and third images to the right without lifting
>them up to line up with the first image. This also messed up with my
>hover enlargements which displayed on load instead of on hover.
>(Haven't tried the display:none thing yet.)

>
Try to avoid actually positioning anything, esp. absolutely. It's hard
to do right (and even harder to do right in all cases), for one thing,
but it's rarely necessary, IME.

Thanks, I've abandoned that idea.

>I have also tried various float options and putting the div inside a
>table row at various sizes, percentages and auto, but nothing works.
>>
>Unless you have another brainwave, I may be reduced to combining the
>three thumbnails into a single image and figuring out if I can use
>image maps to reproduce the hover enlargement...

>
No, no, don't do that. That's too much like work. :-)

Also abandoned!

Stan

**Stan The Man** · Jul 1 '08, 01:35 PM

Re: Trying to persuade CSS images to line up horizontally

On 2008-07-01 13:34:24 +0100, Stan The Man <man@pr100.coms aid:

Eureka! Can't thank you enough for picking this out for me. I have
reuploaded to

http://www.zen86793.zen.co.uk/gmga2008/index.html

and the images are now arrayed horizontally at last... even though the
fix seems to have exposed an extraneous white-filled border below and
behind each image. I can make the fill colour disappear but can't see
where the stroke lines are coming from.

Further testing suggests that the extraneous border is
browser-specific. I can see it on MacOs Safari but not on WinXP IE.

Stan

**dorayme** · Jul 2 '08, 12:25 AM

Re: Trying to persuade CSS images to line up horizontally

In article <486a3040$0$260 80$db0fefd9@new s.zen.co.uk>,
Stan The Man <man@pr100.comw rote:

On 2008-07-01 13:34:24 +0100, Stan The Man <man@pr100.coms aid:
>

Eureka! Can't thank you enough for picking this out for me. I have
reuploaded to

http://www.zen86793.zen.co.uk/gmga2008/index.html

and the images are now arrayed horizontally at last... even though the
fix seems to have exposed an extraneous white-filled border below and
behind each image. I can make the fill colour disappear but can't see
where the stroke lines are coming from.

>
Further testing suggests that the extraneous border is
browser-specific. I can see it on MacOs Safari but not on WinXP IE.
>
Stan

This layout is a hire wire act. Like some cars I have had held together.
You could

#pic a img {
border: 0;
padding: 0;
margin-bottom: -4px;
}

to get over this "font-size related" particular problem.

but there is other trouble.

--
dorayme

**Stan The Man** · Jul 2 '08, 01:15 AM

Re: Trying to persuade CSS images to line up horizontally

On 2008-07-02 01:16:53 +0100, dorayme <doraymeRidThis @optusnet.com.a usaid:

In article <486a3040$0$260 80$db0fefd9@new s.zen.co.uk>,
Stan The Man <man@pr100.comw rote:
>

>On 2008-07-01 13:34:24 +0100, Stan The Man <man@pr100.coms aid:
>>

>>Eureka! Can't thank you enough for picking this out for me. I have
>>reuploaded to
>>http://www.zen86793.zen.co.uk/gmga2008/index.html
>>and the images are now arrayed horizontally at last... even though the
>>fix seems to have exposed an extraneous white-filled border below and
>>behind each image. I can make the fill colour disappear but can't see
>>where the stroke lines are coming from.

>>
>Further testing suggests that the extraneous border is
>browser-specific. I can see it on MacOs Safari but not on WinXP IE.
>>
>Stan

>
This layout is a hire wire act. Like some cars I have had held together.
You could
>
#pic a img {
border: 0;
padding: 0;
margin-bottom: -4px;
}
>
to get over this "font-size related" particular problem.

Thanks for the hint. In Safari/Mac, margin-bottom: -4px didn't seem to
do anything; but by also giving padding-bottom -4px, the white bar at
the bottom of each image has gone... albeit still leaving behind a
black stroke from somewhere, but I'll find it.

As you have alluded to, I'm finding this template very difficult to
work with, not least because I don't know what some of the CSS code
does (and there are also plenty of classes in there which aren't used
anywhere) -- plus no doubt I have added my own problems to it. Methinks
I will probably start again from scratch, maybe using just one
stylesheet, but much wiser thanks to the much-appreciated help I've had
here.

Stan

**dorayme** · Jul 2 '08, 02:55 AM

Re: Trying to persuade CSS images to line up horizontally

In article <486ad68e$0$293 0$fa0fcedb@news .zen.co.uk>,
Stan The Man <man@pr100.comw rote:

As you have alluded to, I'm finding this template very difficult to
work with, not least because I don't know what some of the CSS code
does (and there are also plenty of classes in there which aren't used
anywhere) -- plus no doubt I have added my own problems to it. Methinks
I will probably start again from scratch, maybe using just one
stylesheet, but much wiser thanks to the much-appreciated help I've had
here.
>

I agree it would be simpler in your case to have just one.

Any template this complicated and hard to troubleshoot and which uses
pixel dimensioned fonts and so on is not a good foundation for your
website page.

You can make this basic look you like (and it is fine by me too!) with
much simpler HTML/CSS.

--
dorayme

**Stan The Man** · Jul 2 '08, 09:25 AM

Re: Trying to persuade CSS images to line up horizontally

On 2008-07-02 03:48:39 +0100, dorayme <doraymeRidThis @optusnet.com.a usaid:

In article <486ad68e$0$293 0$fa0fcedb@news .zen.co.uk>,
Stan The Man <man@pr100.comw rote:
>

>As you have alluded to, I'm finding this template very difficult to
>work with, not least because I don't know what some of the CSS code
>does (and there are also plenty of classes in there which aren't used
>anywhere) -- plus no doubt I have added my own problems to it. Methinks
>I will probably start again from scratch, maybe using just one
>stylesheet, but much wiser thanks to the much-appreciated help I've had
>here.
>>

>
I agree it would be simpler in your case to have just one.
>
Any template this complicated and hard to troubleshoot and which uses
pixel dimensioned fonts and so on is not a good foundation for your
website page.
>
You can make this basic look you like (and it is fine by me too!) with
much simpler HTML/CSS.

Yes, I do like minimalist pages and no, the code is not in the least
minimalist... Could you enlighten me as to why anyone would need more
than one stylesheet unless targeting different media?

Stan

Trying to persuade CSS images to line up horizontally

Trying to persuade CSS images to line up horizontally

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment