CODEWITHSUNDEEP
htmlcss
Thomas Hutton
Thomas Hutton

Reputation: 803

Text Over Image Isn't Working

I'm trying to put some text over image and it isn't working. It just puts my text under my image and I can't bring it up.

My code:

.Happylady {
  position: relative; 
  width: 100%;
}
.Happylady p {
  float: left;
  position: absolute; 
  left: 0; 
  top: 80px;
  width: 100%; 
}
<div class="Bannerimage">
  <img src="content/severroom.png" class="centerimage" />
  <p>Check out speeds up to 60Mbps!</p>
  <a href="/cable/"><button >View Packages!</button></a>
</div>
<div class="Internet">
  <div class="Information">
    <h3>INTERNET</h3>
    <h7>CABLE, DSL & RURAL WIRELESS</h7>
  </div    
  <div class="HappyLady">
      <img src="content/happylaptoplady.png" alt="" />
      <div class="contents">
          <h4 class="Pricing">From <span class="Dollar">$29.99</span> per month!</h4>
          <div class="Benefits">
              <p>UNLIMITED PLANS AVAILABLE</p>
              <p>NOW WITH LOWER PRICES</p>
              <p>FASTER SPEEDS - UP TO 60 MBPS!</p>
          </div>
      </div>
  </div>
</div>
<div class="Phone">
  <h3>PHONE</h3>
  <h7>RESIDENTIAL & COMMERCIAL</h7>
</div>
<div class="Television">
  <h3>TELEVISION</h3>
  <h7>SHAW DIRECT / INTERNET TV</h7>
</div>

Edit: I've added my entire HTML code... that may show where I'm going wrong.

Upvotes: 2

Views: 369

Answers (2)

Robert Wade
Robert Wade

Reputation: 5003

Your class is misspelled in your CSS and you're positioning all your paragraphs over top of each other. You need to wrap your content in a container and position it. Also you won't need that float.

.HappyLady {
  position: relative; 
  width: 100%;
  }
.HappyLady div.contents {
  position: absolute; 
  left: 0; 
  top: 80px;
  width: 100%; 
  }
<div class="HappyLady">
    <img src="http://placehold.it/400x400" alt="" />
    <div class="contents">
        <h4 class="Pricing">From <span class="Dollar">$29.99</span> per month!</h4>
        <div class="Benefits">
            <p>UNLIMITED PLANS AVAILABLE</p>
            <p>NOW WITH LOWER PRICES</p>
            <p>FASTER SPEEDS - UP TO 60 MBPS!</p>
        </div>
    </div>
</div>

Upvotes: 1

The One and Only ChemistryBlob
The One and Only ChemistryBlob

Reputation: 7884

Try to refactor your code using the image as a background-image:

.HappyLady {
     position: relative; 
     width: 100%;
     background-image: url('http://truespeed.ca/wp-content/uploads/2016/06/happylaptoplady.png');
     background-size:100% 100%;
}

and remove the image tag from your code.

Upvotes: 0

Related Questions