Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #3334

    Hello,

    I’ve had no success in simply resizing the button from the button.psd file and replacing the original image with the smaller one. It doesn’t render at all like the original and my attempts at manipulating the css (with firebug) have not worked. Obviously I’m missing something. I would like to make the button smaller and position it more centered on the page under the slider. Any suggestions would be appreciated.

    Thank you,

    John

    #41732

    Hey,

    Can you point us to the site URL or provide a screenshot of the new button area.

    Even with a resized button, the modification shouldn’t be too complex so I’ll take a look.

    James

    #41733

    Hi James,

    Here’s a link to the screengrab, https://picasaweb.google.com/lh/photo/pz1hUOlWJSOMqbgeRo1QAw.

    We would like the new button (35px x 170px) to be centered vertically in the container and approximately 20px to the right of the “Healing is your birthright” text.

    Thank you,

    John

    #41734

    little bump…..

    #41735

    Hey,

    In your screenshot, the button looks the same as the original (at least size wise) – can you point me to the URL with the new smaller button?

    The code which controls the button placement and size is in style.css (line 613):

    #top .big_button {
    float: none;
    left: auto;
    position: absolute;
    right: 3px;
    top: 22px;
    }

    and the text positioning is on line 633:

    .big_button strong {
    font-size: 20px;
    margin: 0 0 0 33px !important;
    padding: 0 113px 0 18px;
    position: relative;
    z-index: 2;
    }

    James

    #41736

    Thanks for the response, James.

    I’m good with repositioning the container and changing the text size, the problem I’m having is with aligning the background and hover background of the button after adjusting its size. I’ve change the button.png from its original size of 500x240px to 300x144px. I’ve attempted to manipulate the alignment values of the following (style2.css):

    .big_button strong{

    background: transparent url(‘../images/skin2/button.png’) no-repeat right -60px !important;

    background: transparent url(‘../images/skin2/button.png’) no-repeat right -59px; /*ie6 bugfix*/

    color: #fff;

    }

    .big_button:hover{

    background: transparent url(‘../images/skin2/button.png’) no-repeat left -120px !important;

    background: transparent url(‘../images/skin2/button.png’) no-repeat left 0px; /*ie6 bugfix*/

    }

    .big_button:hover strong{

    background: transparent url(‘../images/skin2/button.png’) no-repeat right -180px !important;

    background: transparent url(‘../images/skin2/button.png’) no-repeat right -60px; /*ie6 bugfix*/

    }

    but, I also see that by changing these above values, the following also needs changing:

    style.css lines 352-362

    I cannot get the background and hover background images to align properly with the smaller sized button (even with keeping it in its original position). Been pulling my hairs out with this one and really this is where I need the assistance.

    The site is maintenance mode right now, so I can’t point you to a live URL.

    Thanks again,

    John

    #41737

    Bump. Dude, would you be willing to take a look at this as it has been almost a week since my response to James and you seem to be more actively involved with clean cut?

    Thank you,

    John

    #41738

    I think some calculation is needed here: http://en.wikipedia.org/wiki/Percentage

    144 = 240 x z > 144/240 = z > z = 0,6

    -60 * 0,6 = -36px


    > result should be:

    .big_button strong{
    background: transparent url('../images/skin2/button.png') no-repeat right -36px !important;
    background: transparent url('../images/skin2/button.png') no-repeat right -35px; /*ie6 bugfix*/
    color: #fff;
    }

    .big_button:hover{
    background: transparent url('../images/skin2/button.png') no-repeat left -72px !important;
    background: transparent url('../images/skin2/button.png') no-repeat left 0px; /*ie6 bugfix*/
    }
    .big_button:hover strong{
    background: transparent url('../images/skin2/button.png') no-repeat right -108px !important;
    background: transparent url('../images/skin2/button.png') no-repeat right -36px; /*ie6 bugfix*/
    }

    #41739

    Thank you, Dude.

    I appreciate your help.

    John

    #41740

    Glad that I could help you :)

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘resize and repostion "our work" button’ is closed to new replies.