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

HTML & CSS
1

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/training-courses/nebosh-courses/nebosh-national-general-certificate/

Do you have any ideas on what to change?

Many thanks,

Dave

2

I would personally do this:

Add - position: relative; to .greybox

.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;
[B]position: relative;[/B]
}

Then add some positioning to the More Info buttons .stbtn

.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;
[B]position: absolute;
bottom: 60px;
left: 30px;[/B]
}

Adjust the “bottom: 60px;” and “left: 30px;” accordingly… I put them where I think they should go though :cool:

Hope that helps!

3

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

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

Thanks for the assist…

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

Cheers,

Dave

6

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

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

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/elearning/elearning-course-prices/

Did I miss a step?

Thanks for the help! I’m in unchartered waters…

Cheers,

Dave

9

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:

.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

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