Wrox Programmer Forums
|
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old May 17th, 2004, 12:05 PM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 1,110
Thanks: 0
Thanked 3 Times in 3 Posts
Default CSS

Is there anything in CSS to mimic the text of a button dropping slightly when it's being pressed.

Some submit buttons:
http://www.webreference.com/programming/css_stylish/


 
Old May 17th, 2004, 02:13 PM
richard.york's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

Where there's a will there's a way.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title></title>
        <style type='text/css' media='screen'>
            a#button {
                border: 1px solid black;
                padding: 5px;
                width: 50px;
                height: 20px;
            }
            a#button:active {
                margin: 10px 0 0 10px;
                background: orange;
            }
            div {
                margin: 10px;
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <div>
            <a href='Javascript:void(0);' id='button'>
                Submit
            </a>
        </div>

        Test
    </body>
</html>
This does the effect with no javascript. It works better if you aren't using an <a> (anchor) element, such as with a <div> but IE doesn't recognize the :active pseudo-class on anything but the <a> element, Mozilla, Opera etc do. IE also has a nasty habit of clipping top and bottom borders on inline elements like <a>, that's why I've enclosed it with a <div> and put some text underneath of it.

hth!


Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::
 
Old May 17th, 2004, 03:33 PM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 1,110
Thanks: 0
Thanked 3 Times in 3 Posts
Default

Thanks for your help.

Here is what I have thus far:
http://www.westga.edu/~stu9820/cssbuttons.htm

My next question is, is there a way to only move the text?

 
Old May 17th, 2004, 03:48 PM
richard.york's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
Default

Sure its possible, all you have to do is use padding instead of margins and have the padding balance itself when the :active event is applied.

Padding: <top> <right> <bottom> <left>

Initially it will be:
padding: 0 10px 0 10px;

Which will have the text centered, then when :active is applied you'll shift pixels from the right side to the left to result in the text moving to the right.
padding: 0 5px 0 15px;




Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::
 
Old May 18th, 2004, 08:05 AM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 1,110
Thanks: 0
Thanked 3 Times in 3 Posts
Default

Thanks that did the trick.






Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS HELP:! CSS EXPANDIBLE BACKGROUND FOR TITLE phpuser2000 CSS Cascading Style Sheets 2 December 19th, 2007 12:36 AM
Rich's new CSS book: Beginning CSS 2nd Edition jminatel BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 0 June 15th, 2007 11:55 AM
how to use CSS ngocntm CSS Cascading Style Sheets 3 September 30th, 2004 04:21 AM
css anshul HTML Code Clinic 2 July 12th, 2004 02:29 PM
CSS surf Javascript 2 March 25th, 2004 11:36 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.