Jump to content

Jeff Miller

Members
  • Posts

    1
  • Joined

  • Last visited

Everything posted by Jeff Miller

  1. Jeff Miller

    Jeff Miller

    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}
×
×
  • Create New...