Wow, this is all good stuff.

However, question for all of you; what do you do in the case that you
need dynamically wide buttons based on the text within them? Craig, I
noticed in your example that you have to set the width of every button.
But let's say you had a custom tag to write these out, and you could
pass it random button text and wanted the button to have the appropriate
width, what would you do in that case?

Put simply, is there a way to get rid of this in the example page?
        #btn1 .middle {width:4.4em;}

- Daryl.


-----Original Message-----
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of tedd
Sent: Friday, December 09, 2005 12:41 PM
To: Fred D Yocum
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] True scalable, rounded buttons with CSS and images.
(Craig Morris)

>You are not setting the height and width in the html?  This is the mark
up
>copied off your page
>           <img class="leftcap" src="images/leftcap.gif" alt="">
>
>I saw a presentation Eric Meyer did at the EventApart in Philadelphia
were
>he created a fully scaleable page using only ems. Unfortunately my
notes
>are pretty rudimentary and when I just tried to access the presentation
>online in seems to have disappeared.
>The gist is you begin with a base font-size set in pixels and then work
>from the base. If your base font size is 12pixels and you have an image
>that is supposed to display at 36pixels X 36pixels  (at its default
size)
>you would set it to 3em x 3em. When the font size is increased or
>decreased the image size changes.

I'm no Eric Meyers, but I've done that without setting a base font 
size -- I may be wrong, but I don't think it's needed.

The technique is pretty simple, just use em's instead of pixels and 
provide a rule for every graphic.

I explain it here:

http://www.sperling.com/examples/zoom1/

And show an example of it here:

http://earthstones.com/

tedd

-- 
------------------------------------------------------------------------
--------
http://sperling.com/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to