Buttons with links and images

[Jim S]

I am toying with the notion of changing this:
http://www.jimscot.myby.co.uk/
to this
http://www.jimscot.myby.co.uk/index_new.html
Without going into long arguments as to whether I should be using tables,
is there a way of producing the big button with picture AND text other than
using the 'list' as I have done?
The reason is that with the original page, it 'squashes-up' nicely if
viewed in 800 x 600 where the second method doesn't.

 

[Chris F.A. Johnson]

I am toying with the notion of changing this:
http://www.jimscot.myby.co.uk/
to this
http://www.jimscot.myby.co.uk/index_new.html

Don't: <http://cfaj.freeshell.org/testing/newjim.jpg>

 

[Jim S]

Don't: <http://cfaj.freeshell.org/testing/newjim.jpg>

When does that happen?

 

[Chris F.A. Johnson]

When does that happen?

When I view the page with my default settings in Firefox.

 

[Jim S]

When I view the page with my default settings in Firefox.

Damn
so you will have problems with
C:\Documents and Settings\Jim\My Documents\My Webs\Jim's
Web\bells\index.html
and this
http://priorysingers.org.uk/

 

[Chris F.A. Johnson]

Damn
so you will have problems with
C:\Documents and Settings\Jim\My Documents\My Webs\Jim's
Web\bells\index.html

Naturally; my computer doesn't have a C: drive.

and this
http://priorysingers.org.uk/

That's not bad apart from the menu on the left:
<http://cfaj.freeshell.org/testing/priory.jpg>

 

[Jim S]

Damn
so you will have problems with
C:\Documents and Settings\Jim\My Documents\My Webs\Jim's
Web\bells\index.html
and this
http://priorysingers.org.uk/

Oops the first one should be
http://www.jimscot.pwp.blueyonder.co.uk/bells/index.html

 

[Chris F.A. Johnson]

Oops the first one should be
http://www.jimscot.pwp.blueyonder.co.uk/bells/index.html

Same comment as the second one, but it's not as bad.

 

[Jim S]

Same comment as the second one, but it's not as bad.

Can you tell me your settings before I set about changing things?

 

[Chris F.A. Johnson]

Can you tell me your settings before I set about changing things?

That is irrelevant. A page should work in all but the most extreme
settings.

(My window is 1268px wide, default font-size is 22px.)

 

[Jim S]

That is irrelevant. A page should work in all but the most extreme
settings.

(My window is 1268px wide, default font-size is 22px.)

Apart from the buttons with images, which I was experimenting with, the
buttonbar on the left of the pages in question were recommended to me in
this group and you were the first person who has commented about the
problem. I now have to find a way to do something similar that renders
correctly so I asked. There was no call to be so dismissive of someone
asking for advice.

 

[Jonathan N. Little]

//www.jimscot.pwp.blueyonder.co.uk/bells/index.html[/URL]

Same comment as the second one, but it's not as bad.

Can you tell me your settings before I set about changing things?

The error is dimensioning a box, (your styled button), in pixels that
contain text where the size can change. If you use "em" to size the
width and height of your "buttons" then it would not matter what Chris's
setting are.

 

[Jim S]

On 2008-07-16, Jim S wrote:
//www.jimscot.pwp.blueyonder.co.uk/bells/index.html[/URL]
Same comment as the second one, but it's not as bad.

Can you tell me your settings before I set about changing things?

The error is dimensioning a box, (your styled button), in pixels that
contain text where the size can change. If you use "em" to size the
width and height of your "buttons" then it would not matter what Chris's
setting are.

Thanks for that. I have changed the *width* to em
Have a look at these two again please and tell me whether you think I need
to alter the height.
http://www.jimscot.myby.co.uk/bells/index.html
http://priorysingers.org.uk/

 

[Chris F.A. Johnson]

Thanks for that. I have changed the *width* to em
Have a look at these two again please and tell me whether you think I need
to alter the height.
http://www.jimscot.myby.co.uk/bells/index.html
http://priorysingers.org.uk/

They both look good.

I'd recommend that you don't specify a height; just add some
padding top and bottom.

 

[Jonathan N. Little]

They both look good.

I'd recommend that you don't specify a height; just add some
padding top and bottom.

I second that motion.

 

[Chris F.A. Johnson]

Sorry, you're talking to someone who is fumbling round in the dark ?
Can you expand a bit on that please.

Bascially, don't specify height or width unless it is really
necessary; usually, they are not.

Instead of "height: 3em;" use:

padding-top: .5em;
padding-right: .33em;
padding-bottom: .6em;
padding-left: .33em;

All of which can be abbreviated as:

padding: .5em .33em .6em .33em;

 

[Jim S]

They both look good.

I'd recommend that you don't specify a height; just add some
padding top and bottom.

Sorry, you're talking to someone who is fumbling round in the dark ?
Can you expand a bit on that please.

 

[Bergamot]

Sorry, you're talking to someone who is fumbling round in the dark ?
Can you expand a bit on that please.

ul.buttonbar li {
height: 3em; <-- drop this
}
ul.buttonbar a {
padding: .5em 0; <-- add this, or however much space suits you
}

 

[Jim S]

What you really should do is make a fluid design. There _are_ ways to
associate text with images. Get rid of the multi-cell table and experiment
with display:inline-block; (-display:inline for the redoubtable ie.) I
don't think I have a non-adult example available to put-up right now, but
if you want I could probably jury-rig something.

Thanks, but that would probably take me out of my comfort zone.
My main site suits me and seems to look more or less ok in most browsers in
most resolutions. For the casual visitor, it does the job I want it to do.
I have irritated several folks here with my determination to keep the table
skeleton. Apart from that I think there are 400+ pages so I change things
when I need to plus the fact that I am a curmudgeonly old fart who doesn't
take change easily.
However I was pleased to find a way to clean up a minor problem that I
hadn't allowed for when I casually replaced ems with pxs. I still don't
understand the difference, but Chris gave me a solution which worked.
I gave up on the pretty buttons and put some outset borders round instead.
I just got bored with my title page and look what happened.

 

[Jim S]

Bascially, don't specify height or width unless it is really
necessary; usually, they are not.

Instead of "height: 3em;" use:

padding-top: .5em;
padding-right: .33em;
padding-bottom: .6em;
padding-left: .33em;

All of which can be abbreviated as:

padding: .5em .33em .6em .33em;

I'm not sure which stylesheet you are referring to, but if I do this to the
priorysingers one then it makes the button with a single line uneven.