SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Location
    England
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Alignment of 'more info' buttons - I can't see to fix this.

    Hello,

    I am having trouble getting the alignment of a couple of buttons set properly. The site was handed over to me and I just can't see where to make these two 'more info' buttons go lower.

    http://wiseglobaltraining.com/traini...l-certificate/

    Do you have any ideas on what to change?

    Many thanks,

    Dave

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    I would personally do this:

    Add - position: relative; to .greybox

    Code:
    .greybox {
    width: 312px;
    height: 415px;
    margin: 9px 12px;
    padding: 0 0 10px;
    border: 1px solid #CDCDCD;
    moz-box-shadow: 0 3px 11px #ccc;
    -webkit-box-shadow: 0 3px 11px #CCC;
    box-shadow: 0 3px 11px #CCC;
    background: #FEFDFA;
    float: left;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FEFDFA), to(#EFEFEF));
    background: -moz-linear-gradient(#FEFDFA, #EFEFEF);
    background: linear-gradient(#FEFDFA, #EFEFEF);
    -pie-background: linear-gradient(#fefdfa, #efefef);
    behavior: url(/hres/pie.htc);
    font-family: Arial,Helvetica,sans-serif;
    position: relative;
    }
    Then add some positioning to the More Info buttons .stbtn

    Code:
    .stbtn {
    padding: 7px 15px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: white;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border-radius: 13px;
    -webkit-box-shadow: #00376B 0px 2px 3px;
    -moz-box-shadow: #00376b 0px 2px 3px;
    box-shadow: #00376B 0px 2px 3px;
    border: 1px solid white;
    background: #00376B;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#00376B), to(#00376B));
    background: -moz-linear-gradient(#00376B, #00376B);
    background: linear-gradient(#00376B, #00376B);
    behavior: url(/hres/pie.htc);
    cursor: pointer;
    font-family: Arial,Helvetica,sans-serif;
    position: absolute;
    bottom: 60px;
    left: 30px;
    }
    Adjust the "bottom: 60px;" and "left: 30px;" accordingly... I put them where I think they should go though

    Hope that helps!

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Location
    England
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks mate! You're stud....

    With this being a Wordpress site, where would I enter this code? Can I just copy/paste that code in?

    Cheers,

    Dave

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, that won't be a problem.

    Got in to the Appearance tab in the backend and find the "Editor" tab and you will see a list of the themes files. Find the css file, usually style.css.

    Do a find and replace (cntrl apple cmd + f) and look for firstly:

    .greybox

    Add the "position: relative;"

    then search for the button itself;

    .stbtn

    and finally add the positioning to that class:

    position: absolute;
    bottom: 60px;
    left: 30px;

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Location
    England
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the assist.....

    Will that only change for that page or is that a site wide change?

    Cheers,

    Dave

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Depends if the other pages are using the same css classes. If you want it to only change on that page you could assign another css class to those buttons.

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Location
    England
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks...I will have a muck around and see what happens. At least I can roll back changes if I need to!

    Cheers,

    Dave

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Location
    England
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    I had a muck around and have now introduced a similar concern with this page (as well as not being quite right with the original page...)

    http://wiseglobaltraining.com/elearn...course-prices/

    Did I miss a step?

    Thanks for the help! I'm in unchartered waters...

    Cheers,

    Dave

  9. #9
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    England
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Dave,

    Looks like your site is using the same class for those kind of "Buy Now" "Info" buttons, which comes as a concern for global placement. If they were fine before the proposed changes I made, I would;

    Find the buttons for the page we initially had a problem with and go through the code change the CSS class for them. This way we can place these where we want without the css mucking it up throughout the site and conflicting with other buttons.

    You could just duplicate:

    Code:
    .stbtn {
    padding: 7px 15px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: white;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border-radius: 13px;
    -webkit-box-shadow: #00376B 0px 2px 3px;
    -moz-box-shadow: #00376b 0px 2px 3px;
    box-shadow: #00376B 0px 2px 3px;
    border: 1px solid white;
    background: #00376B;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#00376B), to(#00376B));
    background: -moz-linear-gradient(#00376B, #00376B);
    background: linear-gradient(#00376B, #00376B);
    behavior: url(/hres/pie.htc);
    cursor: pointer;
    font-family: Arial,Helvetica,sans-serif;
    position: absolute;
    bottom: 60px;
    left: 30px;
    }
    and make a new name for it eg - .stbtn2

    then change it accordingly.

    Cheers,
    Nick

  10. #10
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Location
    England
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help with this one Nick.

    Having a bit of a muck around I fixed my immediate concern. Without your input, I would have been lost!

    As for your other suggestion....I would like to try that too but am not too sure how to properly implement, step by step, what you describe.

    For now, I am ok but I may drag this post back up in the near future unless you can take the time to exlpain a bit more....if not, your help was/is appreciated!

    Cheers,


    Dave


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •