Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Matthew Root
Matthew Root
5,392 Points
Posted by Matthew Root
Matthew Root
5,392 Points

Collapsing banner in CSS

Hi everyone. I am in the process of building my church website. I am attempting to build a collapsing banner on my frontpage. The problem that I am running into is I can't seem to change the color to white on the margins on my .primary-content and .secondary-content in order to make the collapsing effect overlap my banner on my front page. I found a solution of commenting out the max-width in the .primary-content, secondary-content (under layout-styles) and replacing it with padding, but it proved not to be a good solution because when shrinking the page the small padding throws all of my content out of place. I also trying putting another <div> before my .primary-content and .secondary-content and changing the background-color to white in css but that also threw off my formatting with the other <div>'s any help would be asome

<!DOCTYPE html> <html> <head> <title>Holy Cross Anglican Chruch</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header id="top" class="main-header"> <div class="container"> <ul class="main-nav"> <li><a href="#">Home</a></li> <li><a href="#">Statement of Faith</a></li> <li><a href="leadership.html">Leadership</a></li> <li><a href="#">Ministries</a></li> <li><a href="#">Events</a></li> <li><a href="#">Blogs</a></li>

 </ul>

</div> <h1><img src="logo.png"></h1>

</header>

<div class="content"> <div class="primary-content t-border group">

        <p class="intro">
            Holy Cross is a community whose life-changing faith in Jesus Christ is alive in worship and service. We are part of the Gulf Atlantic Diocese of the Anglican Church in North America
        </p>

        <a class="callout" href="#more">Find out more</a>


  <div class="intro-border"></div>
    <h2>We'd love for you to join us this Sunday</h2>

  <div class="poster">
  </div> 

      <div class="service-times">
      <h3><center>Sunday Services:</center></h3>  
        <p><b>8:15am</b><br/>Our Traditional Quiet Service<br/><br/><b>9:15am</b><br/>Adult Christian Education and Children's Activities<br/><br/><b>10:30am</b><br/>Family Service &amp; Children's Christian Education<br/><br/></p>


            </div> <!---end sunday-services--->

<!-- <h3><center>Location: 2915 Kerry Forest Parkway, Suite 401.</center></h3>-->

 </div>
</div>


    <div class="secondary-content t-border group"> 
  <div class="resorts">
    <img src="img/churchfront.jpg" class="church-pics" alt="Resort">
    <h3>Church Staff and Vestry</h3>
    <p>
      Holy Cross Anglican Church is excited to serving and assist you in your walk with Christ.  The Staff and Vestry are committed to being grounded in the Word of God and passionately following the Holy Spirit. 
    </p>
    <ul>
      <li>Daniel Holloway- Pastor</li>
      <li>Irma Daleen- Deacon</li>
      <li>Julia Anne King- Parish Administrator</li>
      <li>Jonathan Nicholson- Worship Director</li>
    </ul>
   <a class="callout-2" href="#more">Meet the team</a> 
  </div>

  <div class="tips">
    <img src="img/podium.jpg" class="church-pics" alt="Mountain Landscape">
    <h3>Sermon Podcast</h3>
    <p>
      Please listen to our weekly messages form our Sunday morning sermons.  We hope it encourages and equips you to live our your faith. 
    </p>
    <ol>
      <li>Sermon #1</li>
      <li>Sermon #2</li>
      <li>Sermon #3</li>
      <li>Sermon #4</li>
    </ol>
    <a class="callout-2" href="#more">More Podcasts</a>
  </div>
    </div><!-- End .secondary-content -->
    <footer class="main-footer">
        <p>All rights reserved to Holy Cross Anglican Church.</p>
        <a href="#top">Back to top &raquo;</a>
    </footer>

</body> </html>

/* Base Styles -------------------- */

  • { box-sizing: border-box; margin: 0; }

body { color: #878787; margin: 0; font: 1.15em/1.5 "Times New Roman", Helvetica, Arial, sans-serif; }

h1 {
font-size: 5.625rem; /* 90px/16px */ color: rgba(255, 255, 255, 1); text-transform: uppercase; font-weight: normal; line-height: 1.3; clear: both; padding-top: 75px; }

h2 { font-size: 2.3125em; /* 53px/16px / font-weight: normal; color: #48525c; line-height: 1.1; margin: 1.5em 0 1em; / 0 0 26px */ }

h3 { font-size: 1.25em; /* 20px/16px / color: #48525c; line-height: 1.2; margin-bottom: .5em; / 34px */ }

img { max-width: 100%; margin-bottom: 20px; border-radius: 10px; }

.church-pics { box-shadow: inset 0 0 70px 10px rgba(0,0,0, 1); box-shadow: 15px 15px 10px -5px rgba(0,0,0, .8); } ul, ol { margin-left:30px o; }

li { margin-bottom; 10px; }

/* Pseudo-classes ------------------ */

a:link { color: red; text-decoration: none; }

a:visited { color: red; }

a:hover { color: firebrick; }

a:active { color: lightcoral; }

/* Main Styles --------------------- */

.main-header { padding-top: 0; height: 600px; width: 100%; background: linear-gradient(red, transparent 90%), /linear-gradient(0deg, #fff, transparent),/ url('../img/sun.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; position: fixed;

}

.container { width: 100%; padding-right: 1em; margin: 0 auto; }

.main-nav { float:right;

}

.main-nav li { float: left; display: inline; padding: 25px 10px; }

.main-nav a { color: white; font-size 1em; }

.main-nav a:hover{ color: firebrick; } .title { color: white; font-size: 1.625rem; /* 26px/16px */ }

.intro { font-size: 1.25em; /* 20px/16px */ line-height: 1.6;
}

.content { background-color: grey; }

.service-times { padding-top: 0px; padding-left: 0px; padding-bottom: 20px; text-align: left; background-color:#ebeef2; border: 5px solid #dfe2e6; }

.primary-content, .main-header, .main-footer { text-align: center; }

.primary-content { top: 600px; padding-top: 25px; padding-bottom: 5px; }

.secondary-content { top: 600px; padding-top: 80px; padding-bottom: 70px; border-bottom: 2px solid #dfe2e6;

}

.callout { font-size: 1.25em; border-bottom: 3px solid; padding: 0 9px 3px; margin-top: 10px; margin-bottom: 30px; display: inline-block; }

.callout-2{ font-size: 1.25em; border-bottom: 3px solid; padding: 0 9px 3px; margin-top: 10px; margin-bottom: 30px; display: inline-block; } .main-footer { top: 600px; padding-top: 60px; padding-bottom: 60px; /*border-bottom: 50px solid red; */ background: linear-gradient(0deg, red, transparent 90%), }

.t-border { border-top: 2px solid #dfe2e6; }

.intro-border { border-top: 2px solid #dfe2e6; }

/* Layout Styles ------------------ */ .content { background-color: white; }

.primary-content, .secondary-content { width: 100%; /padding-left: 350px; padding-right: 350px;/ margin: auto; max-width: 960px; background-color: white;

}

.primary-content, .secondary-content, .main-footer { position: relative; }

.poster { color: white; background-color: #434a52; width: 50%; background-image: url('../img/holy_cross_church_front.jpg'); background-size: cover; background-repeat: no-repeat; padding: 18% 24%; margin: 0 0 60px; /* box-shadow: 15px 15px 10px -5px rgba(0,0,0, .8);/ box-shadow: inset 0 0 50px 10px rgba(0,0,0, 1); / border-radius: 10px; */ }

/---------------Leadership Page--------------------/ .leadership-pics { max-width: 100%; margin-top: 20px; margin-bottom: 20px; border-radius: 10px;

}

.leadership-profiles { margin: 0; padding: 0; list-style: none; }

.leadership-profiles .pic { float: left; width: 20%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

.leadership-header { padding-top: 0; height: 400px; padding-bottom: 1px; /background: linear-gradient(red, transparent 90%), linear-gradient(0deg, #fff, transparent),/ background-image: url('../img/sun.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center;

}

/* Floated Columns ------------------ */

.resorts, .tips { width: 46.5%; }

.tips { float: right; }

.resorts { float: left; }

.poster { float: left; width: 50%; } .service-times { float: right; width: 50%; }

/----- Float Clearfix----/

.group:after { content:""; display: table; clear: both;

}

1 Answer

Matthew Root
Matthew Root
5,392 Points
Matthew Root
Matthew Root
5,392 Points

Thanks Mike! Your advice sparked something that I hadn't done to help me figure it out! I appreciate it!