Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Help needed with css button

Reply
Thread Tools

Help needed with css button

 
 
Jim S
Guest
Posts: n/a
 
      09-24-2007
On this site www.jimscott.co.uk I use CSS to make my buttons. The trouble
is that the number of characters determines the size of the button.
I would like to make 'active' buttons on this site www.priorysingers.org.uk
in the grey button section moving me from page to page. That is; I would
like the button to be the same size whatever the text (of course assuming
the text is not to big)
OR am I confined to using graphics?
Maybe javascript would do it, but I've never ventured there ?
--
Jim S
Tyneside UK
www.jimscott.co.uk
 
Reply With Quote
 
 
 
 
John Hosking
Guest
Posts: n/a
 
      09-24-2007
Jim S wrote:
> On this site www.jimscott.co.uk I use CSS to make my buttons. The trouble
> is that the number of characters determines the size of the button.
> I would like to make 'active' buttons on this site www.priorysingers.org.uk
> in the grey button section moving me from page to page. That is; I would
> like the button to be the same size whatever the text (of course assuming
> the text is not to big)


Try adding display:block; width:24em; margin:.6em auto; to your
buttonise rulesets for http://www.jimscot.pwp.blueyonder.co.uk/ .

Similar approach for the http://www.priorysingers.org.uk/ site (although
the <a>-within-a-<p>-within-a-<table>-within-a-<td> of a table inside
another table is already overkill in my book). Starting over wouldn't be
bad.

And I don't know what you mean by "active" buttons; aren't they all?

GL

--
John
Pondering the value of the UIP: http://improve-usenet.org/
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      09-24-2007
In article <(E-Mail Removed)>,
Jim S <(E-Mail Removed)> wrote:

> On this site www.jimscott.co.uk I use CSS to make my buttons. The trouble
> is that the number of characters determines the size of the button.
> I would like to make 'active' buttons on this site www.priorysingers.org.uk
> in the grey button section moving me from page to page. That is; I would
> like the button to be the same size whatever the text (of course assuming
> the text is not to big)
> OR am I confined to using graphics?
> Maybe javascript would do it, but I've never ventured there ?


Hi Jim again,

If you were keen to do the minimum, you could try these changes:


div.buttons {

border: 2px outset #E8E8E8;
background: #E8E8E8;
color: black;
width: 400px;
margin: auto;
text-align: center;
}


a.button_links:link {

background: #E8E8E8;
color: black;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: normal;
}


(I leave the visited etc to you)

and in the relevant html:

<div class="buttons">
<a class="button_links" href="bells/index.html">CHRIST
CHURCH BELLRINGERS' WEBSITE</a></div>


<div class="buttons">
<a
class="button_links"href="Other_picture_sites/morephotos.html">OTH
ER LOCAL AREA PHOTO SITES</a></div>

(There is trouble with your design and mark up, but I know from
before that you seek very practical help. BTW, Jim, I have a very
good friend who rings bells in Sydney and wherever she goes in
the world it is quite a community.)

--
dorayme
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      09-24-2007
In article <(E-Mail Removed)>,
John Hosking <(E-Mail Removed)> wrote:

> Jim S wrote:
> > On this site www.jimscott.co.uk I use CSS to make my buttons. The trouble
> > is that the number of characters determines the size of the button.
> > I would like to make 'active' buttons on this site www.priorysingers.org.uk
> > in the grey button section moving me from page to page. That is; I would
> > like the button to be the same size whatever the text (of course assuming
> > the text is not to big)

>
> Try adding display:block; width:24em; margin:.6em auto; to your
> buttonise rulesets for http://www.jimscot.pwp.blueyonder.co.uk/ .


O, that's clever John. Less messing about than my suggestion...
Well done.

--
dorayme
 
Reply With Quote
 
Jim S
Guest
Posts: n/a
 
      09-24-2007
On Tue, 25 Sep 2007 00:44:37 +0200, John Hosking wrote:

> Jim S wrote:
>> On this site www.jimscott.co.uk I use CSS to make my buttons. The trouble
>> is that the number of characters determines the size of the button.
>> I would like to make 'active' buttons on this site www.priorysingers.org.uk
>> in the grey button section moving me from page to page. That is; I would
>> like the button to be the same size whatever the text (of course assuming
>> the text is not to big)

>
> Try adding display:block; width:24em; margin:.6em auto; to your
> buttonise rulesets for http://www.jimscot.pwp.blueyonder.co.uk/ .
>
> Similar approach for the http://www.priorysingers.org.uk/ site (although
> the <a>-within-a-<p>-within-a-<table>-within-a-<td> of a table inside
> another table is already overkill in my book). Starting over wouldn't be
> bad.
>
> And I don't know what you mean by "active" buttons; aren't they all?
>
> GL


Thanks John.
They weren't really buttons in the 'priory' site so they weren't active
like mine.
Is there any way of centralising the text in the box you suggested?
--
Jim S
Tyneside UK
www.jimscott.co.uk
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      09-25-2007
Jim S wrote:
> On Tue, 25 Sep 2007 00:44:37 +0200, John Hosking wrote:
>

<snip>

>> Try adding display:block; width:24em; margin:.6em auto; to your
>> buttonise rulesets for http://www.jimscot.pwp.blueyonder.co.uk/ .
>>
>> Similar approach for the http://www.priorysingers.org.uk/ site (although
>> the <a>-within-a-<p>-within-a-<table>-within-a-<td> of a table inside
>> another table is already overkill in my book). Starting over wouldn't be
>> bad.
>>
>> And I don't know what you mean by "active" buttons; aren't they all?
>>
>> GL

>
> Thanks John.
> They weren't really buttons in the 'priory' site so they weren't active
> like mine.
> Is there any way of centralising the text in the box you suggested?


add text-align: center;

This might help you in your further exploration:
http://www.w3.org/TR/CSS21/propidx.html

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Jim S
Guest
Posts: n/a
 
      09-25-2007
On Mon, 24 Sep 2007 22:23:27 -0400, Jonathan N. Little wrote:

> Jim S wrote:
>> On Tue, 25 Sep 2007 00:44:37 +0200, John Hosking wrote:
>>

> <snip>
>
>>> Try adding display:block; width:24em; margin:.6em auto; to your
>>> buttonise rulesets for http://www.jimscot.pwp.blueyonder.co.uk/ .
>>>
>>> Similar approach for the http://www.priorysingers.org.uk/ site (although
>>> the <a>-within-a-<p>-within-a-<table>-within-a-<td> of a table inside
>>> another table is already overkill in my book). Starting over wouldn't be
>>> bad.
>>>
>>> And I don't know what you mean by "active" buttons; aren't they all?
>>>
>>> GL

>>
>> Thanks John.
>> They weren't really buttons in the 'priory' site so they weren't active
>> like mine.
>> Is there any way of centralising the text in the box you suggested?

>
> add text-align: center;
>
> This might help you in your further exploration:
> http://www.w3.org/TR/CSS21/propidx.html


Thanks AND vertical-align: middle; too.
BUT although the horizontal one works in IE, the vertical one does not (
--
Jim S
Tyneside UK
www.jimscott.co.uk
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      09-25-2007
Jim S wrote:
> On Mon, 24 Sep 2007 22:23:27 -0400, Jonathan N. Little wrote:


>>
>> This might help you in your further exploration:
>> http://www.w3.org/TR/CSS21/propidx.html

>
> Thanks AND vertical-align: middle; too.
> BUT although the horizontal one works in IE, the vertical one does not (


If you look at the link I provided your will see that vertical-align:
applies to inline-level and 'table-cell' elements

http://www.w3.org/TR/CSS21/visudet.h...vertical-align

of which DIV are not a member. Now you could apply display: table-cell;
to the DIV or A, *but* (did you guess correctly?) don't expect MSIE to
accommodate. If your texts it only only line then setting the block's
height=line-height will do what you wish...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>vertical center</title>

<style type="text/css">

a.fauxbutton {

/* convert the inline element */
display: block;

/* color and style it like a button */
color: #000; background-color: #aaa;
border: 3px outset #aaa;
font-family: sans-serif; text-decoration: none;

/* make the width in relative em's to hold your text */
width: 15em;

/* center your text horizonatally */
text-align: center;

/* now to center vertically make height=line-height */
height: 2em; line-height: 2em;
}

a:hover { background-color: #ccc; }

</style>

</head>
<body>

<p>Let's try to make a button for you:
<a href="http://www.example.com" class="fauxbutton">A fake Button</a>
</p>
</body>
</html>



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Jim S
Guest
Posts: n/a
 
      09-25-2007
On Tue, 25 Sep 2007 11:02:17 -0400, Jonathan N. Little wrote:

> Jim S wrote:
>> On Mon, 24 Sep 2007 22:23:27 -0400, Jonathan N. Little wrote:

>
>>>
>>> This might help you in your further exploration:
>>> http://www.w3.org/TR/CSS21/propidx.html

>>
>> Thanks AND vertical-align: middle; too.
>> BUT although the horizontal one works in IE, the vertical one does not (

>
> If you look at the link I provided your will see that vertical-align:
> applies to inline-level and 'table-cell' elements
>
> http://www.w3.org/TR/CSS21/visudet.h...vertical-align
>
> of which DIV are not a member. Now you could apply display: table-cell;
> to the DIV or A, *but* (did you guess correctly?) don't expect MSIE to
> accommodate. If your texts it only only line then setting the block's
> height=line-height will do what you wish...
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
> <meta http-equiv="content-language" content="en-us">
>
> <title>vertical center</title>
>
> <style type="text/css">
>
> a.fauxbutton {
>
> /* convert the inline element */
> display: block;
>
> /* color and style it like a button */
> color: #000; background-color: #aaa;
> border: 3px outset #aaa;
> font-family: sans-serif; text-decoration: none;
>
> /* make the width in relative em's to hold your text */
> width: 15em;
>
> /* center your text horizonatally */
> text-align: center;
>
> /* now to center vertically make height=line-height */
> height: 2em; line-height: 2em;
> }
>
> a:hover { background-color: #ccc; }
>
> </style>
>
> </head>
> <body>
>
> <p>Let's try to make a button for you:
> <a href="http://www.example.com" class="fauxbutton">A fake Button</a>
> </p>
> </body>
> </html>


Thanks Jonathan
I can do all that, but of course when I do, the one word buttons are only
the height of the word and two longer words are twice as high.
If I make the button 48px high then the single word stays at the top in IE
regardless of the vertical-align: middle; command.
To make matters even worse Firefox totally disregards the dimensions
altogether and displays the button in a single line or varying length.
What I am after is a button version of the grey boxes in
www.priorysingers.org.uk
--
Jim S
Tyneside UK
www.jimscott.co.uk
 
Reply With Quote
 
Jim S
Guest
Posts: n/a
 
      09-25-2007
OK I'm nearly there.
Using a different stylesheets for one-line and two-line buttons I have
got to this http://priorysingers.org.uk/testingIndex_1.html
It works fine in IE, but not in Firefox or Opera.
--
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
Help Help Help Pentax S5i Help needed (Please) The Martian Digital Photography 14 06-20-2008 07:56 AM
CSS 11503 basic setup, help needed. Josh Ozura Cisco 9 03-04-2008 10:54 PM
Help needed on this 857W config. Repost to be clearer what the problemsare and the help needed sparticle Cisco 3 08-30-2007 07:47 PM
Is this the newsgroup for CSS help? CSS Question Included AF HTML 17 08-09-2006 06:57 PM
masterpages vs. CSS or Masterpages with CSS??? help me out please! Nick Wouters ASP .Net 5 05-08-2006 10:19 AM



Advertisments