CODEWITHSUNDEEP
csshtmltwitter-bootstrap
user2806570
user2806570

Reputation: 859

Section heading overlap on div - CSS Styling

Can anyone help me out on how to achieve the following shown below in red?

From what I understand it is a div overlap but I can't seem to figure out how to get it like this.

enter image description here

Upvotes: 0

Views: 118

Answers (3)

kmg
kmg

Reputation: 519

Add the below mentioned style to .about-lower

position: relative;
padding-top: 15px;

Remove margin-top: 20px and add the following style to .lower-title-container

position: absolute;
top: -26px;
left: 73px;

Updated JSFiddle link is here.

Upvotes: 1

wazz
wazz

Reputation: 5078

html:

<!-- i put the button above the first div -->
<input id="btn" type="button" value="the button"/>
<div class="about-middle">

css:

add

body {
    position: relative;
}
#btn {
    left: 75px;
    margin: -25px 0 0 20px;
    position: absolute;
    top: 15px;
}
.about-middle{
    border: solid 1px black; /* so it's visible. */
}

Upvotes: 0

sol
sol

Reputation: 22959

One method using position: absolute

I've adding padding to the container below to ensure it doesn't overlap with the button

body {
  font-family: "Helvetica", sans-serif;
  margin: 0px 0px 0px 0px;
}

.header-img-container {
  background-image: url(../Images/about-header-img.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  height: 330px;
  width: 100%;
}

.header-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.about-middle {
  text-align: left;
  margin: auto;
  width: 80%;
}

.about-middle-text {
  line-height: 1.3;
  margin-bottom: 50px;
  margin-top: 40px;
}

.about-middle-text h2 {
  margin-top: 60px;
  margin-bottom: 40px;
}

.about-middle-text p {
  margin-bottom: 14px;
  font-size: 14px;
}

.about-lower {
  background-color: #FAF8F8;
  text-align: left;
  padding-bottom: 30px;
}

.lower-title-container {
  width: 80%;
  text-align: center;
  vertical-align: middle;
  margin: auto;
  margin-top: 20px;
  z-index: 10;
  position: relative;
}

.lower-title {
  width: 150px;
  height: 50px;
  background-color: #b2b0c5;
  color: white;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -25px;
}

.lower-title p {
  font-weight: 100;
  font-size: 20px;
  vertical-align: middle;
}

.about-eagles-container {
  margin-top: 40px;
}

.about-eagles {
  border-bottom: 1px solid lightgray;
  padding-bottom: 20px;
  display: flex;
  width: 80%;
  align-items: center;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-top: 50px;
}

.eagle-img-container {
  margin-right: 30px;
  height: 150px;
  width: 150px;
}

.eagle-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 2px;
}

.eagle-img-container:hover {
  background-color: rgba(225, 231, 242, 0.8);
}

.eagle-name {
  margin-bottom: 30px;
  font-weight: bold;
}
<div class="about-middle">
  <div class="about-middle-text">
    <h3>Rising Eagles</h3>
    <p>Lorem ipsum dolor sit amet, populo vocent perfecto has in, phaedrum aliquando omittantur mei in, evertitur intellegebat eum ut. Vel ea nulla mentitum. Id aeterno minimum sea, at est albucius scaevola consequat. Duo facer platonem expetendis eu, eu
      quando aliquip constituam sed. Ne invenire suavitate vulputate mei. Vestibulum mi sapien ac nunc vel. Pellentesque nec elit sit ac orci. Ut lectus venenatis eros diam, pellentesque natoque amet lectus felis, cursus laoreet blandit ut nulla vel libero.
      Venenatis tristique cras, ut vitae, lectus ornare enim, sapien luctus lacinia, aliquam nibh libero tincidunt ut. Commodo risus amet vivamus, molestie mattis at. Mauris massa, vitae dolor etiam sed. Sit mi dignissim elementum, sit nulla nec arcu
      in arcu, reprehenderit sem donec magna, nisl urna non, venenatis turpis risus duis ultrices. </p>


    <p> Vitae consul quodsi ea sea, ex graeci accusam copiosae sit. Ei error accumsan mel. Quo id populo melius ceteros. Ex per magna aliquam, eos scripta integre ex. Praesent in eu tincidunt. Commodo magni porta nonummy aliquam enim neque, dapibus phasellus
      sed volutpat, dui quam, parturient molestie ante massa bibendum. Pharetra in ut, aliquam pretium rutrum pretium luctus phasellus. Enim sem cras interdum, at dolor in.</p>
  </div>
</div>

<div class="about-lower">
  <div class="lower-title-container">
    <div class="lower-title">
      <p>The Eagles</p>
    </div>
  </div>
  <!-- Iterate over accounts and build div for each -->
  <div class="about-eagles-container">
    <div class="about-eagles">
      <div class="eagle-img-container">
        <!-- Change url to link to their personal page -->
        <a href="#"><img src="../Images/profile-img1.jpg" class="eagle-img"></a>
      </div>
      <div class="eagle-text">
        <p class="eagle-name">Charlie</p>
        <p>Lorem ipsum dolor sit amet, nec no errem euismod ponderum. Pro no populo putant audire.</p>
      </div>
    </div>
    <div class="about-eagles">
      <div class="eagle-img-container">
        <img src="../Images/profile-img2.jpg" class="eagle-img">
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions