Jump to content

Recommended Posts

Hi,  I'm trying to figure out how to place three buttons/boxes to the bottom center of another box.  I have a back-ground image sitting on top of a gray box that extends slightly below the background image and I want to place three buttons in each respective gray selection to the bottom of the image.  I've you-tubed and their suggestions aren't working.  I must have done something wrong that is counterproductive of me centering the box to the bottom center.

 

Below is the HTML and CSS code and if anyone can tell me what I'm doing wrong would be awesome....Thanks,

Jeff

v>

<!--        =======HTML==========   -->

<div id="boxcontainer">
        <div class="bankbox box">
            <h2>Bank and Credit Card Account Reconciliation</h2>
            <div class="button">
                <span><a href="#">Learn More</a></span>
            </div>    
        </div>
        
        <div class="apbox box">
            <h2>Accounts Payable and Accounts Receivable</h2>
                <div class="button">
                    <span><a href="#">Learn More</a></span>
                </div> 
        </div>
        
        <div class="financialbox box">   
            <h2>Financial and Operational Reporting</h2>
                <div class="button">
                    <span><a href="#">Learn More</a></span>
                </div> 
        </div>
    </div>

/*=================CSS=================*/

#boxcontainer{
    width:100%;
    height: auto;
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    flex-flow: wrap;
    position: center;}

.box{
    display: inline-block;
    float:inherit;
    width: 275px;
    height: 275px;
    margin: 2px;
    background-color: gray;}


/* Three buttons in the boxes*/
.button a{  
    box-sizing: border-box;
    color:white;
    background-color: #008CBA;
    border: .1em solid #008CBA;
    padding: 3% 10%;
    text-align: center;
    text-decoration:none;
    display: inline-flex;
    vertical-align:bottom;
    margin:200 200em  auto;
    position: 10% 50%;}


.button a:hover{
    transition-duration: 0.6s;
    background-color: white;
    color:#008CBA;}

/* Bank and Credit Card Recon Boxes w/ heading and buttons */
.bankbox{
    background-image:url(../Images/FinancialImage.jpg);
    background-size: 250px;
    background-repeat: no-repeat;
    background-size:contain;
    border: .5em solid white;
    color:#f4c900;
    padding:1em;}

.bankbox h2{
    color:#f4c900;
    text-align: center;
    margin:0 auto;}

/* AP & AR Boxes w/ heading and buttons */
.apbox{
    background-image: url(../Images/APImage.jpg);
    background-size: 250px;
    background-repeat: no-repeat;
    background-size:contain;
    border: .5em solid white;
    color:#f4c900;
    padding:1em;}

.apbox h2{
    color:#f4c900;
    text-align: center;
    margin:0 auto}


/* Financial and Operational Reporting Boxes w/ heading and buttons */
.financialbox{
    background-image: url(../Images/ReportingImage.jpg);
    background-repeat: no-repeat;
    background-size:130%; /* <= Adjust the picture to be the same as the others*/
    border: .5em solid white;
    color:#f4c900;
    padding:1em;}

.financialbox h2{
    color:#f4c900;
    text-align: center;
    margin:0 auto}
 

Share this post


Link to post
Share on other sites

Try adding:

	.btnBottom { position: relative; bottom: -175px; left: 75px; }
	

And modifying:

	                <div class="button btnBottom">
                    <span><a href="#">Learn More</a></span>
                </div>

for each of the buttons.

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...