PHP created buttons

[amitzala]

Hi There

I am very new to CSS – and I’m trying to put a site together for my Barbershop Chorus.

Here is the test site – http://dac.youbambuu.com

On the homepage you can see the two buttons – Join Us and Book Us.

I’d like to move the Join Us button to the right just next to the Book Us button and also ideally fill the button’s so they are white with black text. Been trying everything and really struggling.

This is the code I’m using at the moment – (tried using Codepen got lost)

[button label=”Join Us” url=”http://dac.youbambuu.com/?page_id=158″%5D

<

div>[button label=”Book Us” url=”http://dac.youbambuu.com/?page_id=160″%5D

Please any help would be appreciated ! Thanks!

[Paulie_D]

The first think you need to do, realistically is put both of those “buttons” in the same containing div.

I’d take the first button out of the div that has float:left applied inline (and what’s up with that…inline styles…really?).

Remove the relative positioning from the second div (not sure why that is there,,,,

Then you can make the “button” div class

.tt_sc {
    margin-bottom: 1em;
    display: inline-block;
}

..and boom they line up in the middle of the page.

If you need a little separation add a touch of margin…say

.tt_sc {
    /* margin-bottom: 1em; */
    display: inline-block;
    margin: 1em;
}

Ok…now we have them in the right place, let’s get the style right.

At the moment it’s

.home #slideshow .slide a.button {
    background: none; /* look a background */
    font-weight: normal;
    font-size: 1em;
    border: 1px solid #fff;
    color: #fff !important; /* the color */
    font-family: 'Open Sans', sans-serif;
}

So..

.home #slideshow .slide a.button {
    background: white;
    font-weight: normal;
    font-size: 1em;
    border: 1px solid #fff;
    color: black ;
    font-family: 'Open Sans', sans-serif;
}

[amitzala]

Hi Paulie

Firstly thanks for chiming in here. I’m so totally new to css that unfortunately your answer doesn’t make much sense to me at all !

So also noticed the original code I pasted here doesn’t look correct – so maybe that’s why I’m getting lost in your answer.

Here is what I have so far where the Join Us button is on the left.

[button label=”Join Us” url=”http://dac.youbambuu.com/?page_id=158″%5D

[button label=”Book Us” url=”http://dac.youbambuu.com/?page_id=160″%5D

The button label short codes are something I got sent from the theme maker – I’m using wordpress and the text editor on a page.

Your code looks so different and I’m lost as to where to actually put it !!! Please help !

Thanks for your time so far.

[Paulie_D]

OK…let’s dig into your HTML

Right after the paragraph

<p style="text-align: center;">Close Harmony singing that makes you smile.</p>

You have div which contains the first “button” div.

<div style="float: left;"> /* this is the parent div */

<div class="tt_sc"> /* this is the button div */
<a href="http://dac.youbambuu.com/?page_id=158" target="_parent" style="" class="button ">Join Us</a></div><!--tt_sc -->

</div>

Right after that div you have another ‘parent` div containing the second button

<div style="position:relative; left:10px;"> /* second parent /*

<div class="tt_sc"> /* second button */
<a href="http://dac.youbambuu.com/?page_id=160" target="_parent" style="" class="button ">Book Us</a></div><!--tt_sc -->

</div>

Do you get that?

[amitzala]

Ok yeah I think I get that – although I’m not seeing that I guess you’re looking at the source code – all I can see is the text editor in the wordpress cms.

So where you’ve put

/* this is the button div */
Join Us

<!–tt_sc –>

I’m guessing that is HTML for

[button label=”Join Us” url=”http://dac.youbambuu.com/?page_id=158″%5D

Is that right ? If that is then yes I’m following you ….

[Paulie_D]

I suspect that your button label is a link…not the div surrounding it….but who knows. I’m not expert on WP.

Easy way to test though.

If you have found the second parent div

Put a copy of your Join Us button inside that…next to the Book Us button

[button label=”Join Us” url=”http://dac.youbambuu.com/?page_id=158″]
[button label=”Book Us” url=”http://dac.youbambuu.com/?page_id=160″]

[amitzala]

Ok so now we have this

http://dac.youbambuu.com

The buttons are centred but above each other rather than on the same line (which is what I’m trying to achieve).

I’m seeing this now

[button label=”Join Us” url=”http://dac.youbambuu.com/?page_id=158″%5D
[button label=”Book Us” url=”http://dac.youbambuu.com/?page_id=160″%5D

[Paulie_D]

No…that’s actually created a second wrapping div as well.

Clearly you need a WP expert to look over how these buttons are created in PHP.

I feel this isn’t a CSS issue as such…its a WP /PHP one.

I can move this over there if you want?

[amitzala]

Yes please do thanks so much for your time already !

[amitzala]

Hi There I guess no one can help on this ? Shall I repost it ?

[Paulie_D]

Probably a good idea.

Try and focus on why the PHP is not creating what you want rather than deal with the actual positioning.

Link in this old question if you need to so people have some backstory.

[amitzala]

Ok will do thanks Paulie

[Author]

Posts