Thomas Hutton Thomas Hutton - 2 months ago 4
CSS Question

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.

Answer

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>