Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Buttons with links and images

Reply
Thread Tools

Buttons with links and images

 
 
Jim S
Guest
Posts: n/a
 
      07-16-2008
On Wed, 16 Jul 2008 19:03:15 +0000, Chris F.A. Johnson wrote:

> On 2008-07-16, Jim S wrote:
>> On Wed, 16 Jul 2008 18:31:20 +0000, Chris F.A. Johnson wrote:
>>
>>> On 2008-07-16, Jim S wrote:
>>>> On Wed, 16 Jul 2008 19:20:55 +0100, Jim S wrote:
>>>>
>>>>> On Wed, 16 Jul 2008 18:15:50 +0000, Chris F.A. Johnson wrote:
>>>>>
>>>>>> On 2008-07-16, Jim S wrote:
>>>>>>> On Wed, 16 Jul 2008 17:26:25 +0000, Chris F.A. Johnson wrote:
>>>>>>>
>>>>>>>> On 2008-07-16, Jim S wrote:
>>>>>>>>> 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>
>>>>>>>
>>>>>>> When does that happen?
>>>>>>
>>>>>> 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/
>>>>
>>>> Oops the first one should be
>>>> http://www.jimscot.pwp.blueyonder.co...lls/index.html
>>>
>>> Same comment as the second one, but it's not as bad.

>>
>> 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.)


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.
--
Jim S
Tyneside UK
www.jimscott.co.uk
 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      07-16-2008
Jim S wrote:
> On Wed, 16 Jul 2008 18:31:20 +0000, Chris F.A. Johnson wrote:
>
>> On 2008-07-16, Jim S wrote:
>>> On Wed, 16 Jul 2008 19:20:55 +0100, Jim S wrote:


>>> http://www.jimscot.pwp.blueyonder.co...lls/index.html

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

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
 
 
 
Jim S
Guest
Posts: n/a
 
      07-16-2008
On Wed, 16 Jul 2008 15:33:48 -0400, Jonathan N. Little wrote:

> Jim S wrote:
>> On Wed, 16 Jul 2008 18:31:20 +0000, Chris F.A. Johnson wrote:
>>
>>> On 2008-07-16, Jim S wrote:
>>>> On Wed, 16 Jul 2008 19:20:55 +0100, Jim S wrote:

>
>>>> http://www.jimscot.pwp.blueyonder.co...lls/index.html
>>> 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/
--
Jim S
Tyneside UK
www.jimscott.co.uk
 
Reply With Quote
 
Chris F.A. Johnson
Guest
Posts: n/a
 
      07-16-2008
On 2008-07-16, Jim S wrote:
> On Wed, 16 Jul 2008 15:33:48 -0400, Jonathan N. Little wrote:
>
>> Jim S wrote:
>>> On Wed, 16 Jul 2008 18:31:20 +0000, Chris F.A. Johnson wrote:
>>>
>>>> On 2008-07-16, Jim S wrote:
>>>>> On Wed, 16 Jul 2008 19:20:55 +0100, Jim S wrote:

>>
>>>>> http://www.jimscot.pwp.blueyonder.co...lls/index.html
>>>> 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/


They both look good.

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

--
Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      07-16-2008
Chris F.A. Johnson wrote:

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

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Chris F.A. Johnson
Guest
Posts: n/a
 
      07-16-2008
On 2008-07-16, Jim S wrote:
>
>>> 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.

>
> 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;

--
Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
 
Reply With Quote
 
Jim S
Guest
Posts: n/a
 
      07-16-2008
On Wed, 16 Jul 2008 20:26:42 +0000, Chris F.A. Johnson wrote:

> On 2008-07-16, Jim S wrote:
>> On Wed, 16 Jul 2008 15:33:48 -0400, Jonathan N. Little wrote:
>>
>>> Jim S wrote:
>>>> On Wed, 16 Jul 2008 18:31:20 +0000, Chris F.A. Johnson wrote:
>>>>
>>>>> On 2008-07-16, Jim S wrote:
>>>>>> On Wed, 16 Jul 2008 19:20:55 +0100, Jim S wrote:
>>>
>>>>>> http://www.jimscot.pwp.blueyonder.co...lls/index.html
>>>>> 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/

>
> 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.
--
Jim S
Tyneside UK
www.jimscott.co.uk
 
Reply With Quote
 
Bergamot
Guest
Posts: n/a
 
      07-16-2008

Jim S wrote:
> On Wed, 16 Jul 2008 20:26:42 +0000, Chris F.A. Johnson wrote:
>> On 2008-07-16, Jim S wrote:
>>>
>>> http://www.jimscot.myby.co.uk/bells/index.html

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


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

--
Berg
 
Reply With Quote
 
Jim S
Guest
Posts: n/a
 
      07-16-2008
On Wed, 16 Jul 2008 23:21:53 +0200 (CEST), Neredbojias wrote:

> On 16 Jul 2008, Jim S <(E-Mail Removed)> wrote:
>
>> On Wed, 16 Jul 2008 19:03:15 +0000, Chris F.A. Johnson wrote:
>>
>>> On 2008-07-16, Jim S wrote:
>>>> On Wed, 16 Jul 2008 18:31:20 +0000, Chris F.A. Johnson wrote:
>>>>
>>>>> On 2008-07-16, Jim S wrote:
>>>>>> On Wed, 16 Jul 2008 19:20:55 +0100, Jim S wrote:
>>>>>>
>>>>>>> On Wed, 16 Jul 2008 18:15:50 +0000, Chris F.A. Johnson wrote:
>>>>>>>
>>>>>>>> On 2008-07-16, Jim S wrote:
>>>>>>>>> On Wed, 16 Jul 2008 17:26:25 +0000, Chris F.A. Johnson wrote:
>>>>>>>>>
>>>>>>>>>> On 2008-07-16, Jim S wrote:
>>>>>>>>>>> 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>
>>>>>>>>>
>>>>>>>>> When does that happen?
>>>>>>>>
>>>>>>>> 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/
>>>>>>
>>>>>> Oops the first one should be
>>>>>> http://www.jimscot.pwp.blueyonder.co...lls/index.html
>>>>>
>>>>> Same comment as the second one, but it's not as bad.
>>>>
>>>> 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.)

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

>
> 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
Tyneside UK
www.jimscott.co.uk
 
Reply With Quote
 
Jim S
Guest
Posts: n/a
 
      07-16-2008
On Wed, 16 Jul 2008 21:10:05 +0000, Chris F.A. Johnson wrote:

> On 2008-07-16, Jim S wrote:
>>
>>>> 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.

>>
>> 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;


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.
--
Jim S
Tyneside UK
www.jimscott.co.uk
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Created Radio Buttons displaying as if they were conventional buttons Dr. Leff Javascript 3 10-15-2007 09:47 PM
The Z axis and simple menu buttons/image buttons Jonathan N. Little HTML 3 04-02-2007 09:57 AM
Datagrid Nav buttons and numeric buttons Jeremy Jones ASP .Net 1 03-22-2007 08:00 AM
Image Buttons/Buttons not responding =?Utf-8?B?QmVu?= ASP .Net 1 07-06-2005 07:34 AM
2 buttons but want enter key in textbox to execute one buttons' click event? Roger ASP .Net 1 05-20-2005 09:47 PM



Advertisments