I need help adding text to the Image CSS

asasass · February 11, 2017, 6:02pm



<div style="float: right; white-space: nowrap;font-family:'Times New Roman'; font-weight:700; font-size:36px; line-height:40px;">
  <span style="color:red;margin-right:80px;">In Stock</span><span style="color:green;">$24.99 USD*</span>
</div>



<div style="float: right; clear: right;line-height:44px;white-space: nowrap;font-family:'Times New Roman'; font-weight:700; font-size:20px; line-height:40px;">
  <span style="color:red;margin-right:80px;">Get one before they're gone!</span><span style="color:#b45f06;">+ Free Shipping!</span></div>

On the image:

<style type="text/css"> 

.outer {
  max-width:466px;  /*466 */
border:solid 5px #38761d;
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */


}

.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 50px;
  font-family: georgia;
  text-align: center;
  padding-bottom: 0px;
  margin-top:2px;
  margin-bottom: 0px;

}

.hr3 span {
  display: block;
  height: 5px;
  background-color: #15c;
  transform: rotate(-.9deg);
  margin-top: 2px;
  margin-left: 23px;
  margin-right: 24px;

}

img {
display: block;
margin-top:27px;
border-top: 5px solid #38761d;


}

</style>

</head>
<body>

<div class="outer">
    <p class="hr3">Text text text text<span></span></p>

<img src="https://i.imgur.com/BRJqTUw.png" width="466" height="363">

</div>


</body>
</html>

DarthGuido · February 11, 2017, 6:07pm

DarthGuido · February 11, 2017, 6:08pm

There is no question. Please clarify yourself and I will reinstate the post. As it is, it makes no sense.

asasass · February 11, 2017, 6:10pm

Reinlist please.

asasass · February 11, 2017, 6:11pm

This is what I got up to so far.


.hr4 {

font-family:'Times New Roman';
font-weight:700; 
font-size:36px; 
line-height:40px;
color:red;
margin-bottom:80px;
}
</style>

</head>
<body>

<div class="outer">
    <p class="hr3">Text text text text<span></span></p>

<img src="https://i.imgur.com/BRJqTUw.png" width="466" height="363">


    <div class="hr4">
        <p>In Stock <span></span></p>
        
    </div>

asasass · February 11, 2017, 6:12pm

It’s going underneath the image, not on it.

DarthGuido · February 11, 2017, 6:13pm

DarthGuido · February 11, 2017, 6:17pm

Then bring it to the top?

asasass · February 11, 2017, 6:18pm

<style type="text/css"> 

.outer {
  max-width:466px;  /*466 */
border:solid 5px #38761d;
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */


}

.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 50px;
  font-family: georgia;
  text-align: center;
  padding-bottom: 0px;
  margin-top:2px;
  margin-bottom: 0px;

}

.hr3 span {
  display: block;
  height: 5px;
  background-color: #15c;
  transform: rotate(-.9deg);
  margin-top: 2px;
  margin-left: 23px;
  margin-right: 24px;

}

img {
display: block;
margin-top:27px;
border-top: 5px solid #38761d;


}

.hr4 {

font-family:'Times New Roman';
font-weight:700; 
font-size:36px; 
line-height:40px;
color:red;
margin-bottom:80px;
}
</style>

</head>
<body>

<div class="outer">
    <p class="hr3">Text text text text<span></span></p>

<img src="https://i.imgur.com/BRJqTUw.png" width="466" height="363">


    <div class="hr4">
        <p>In Stock <span></span></p>
        
    </div>



</div>


</body>
</html>

asasass · February 11, 2017, 6:20pm

I want to do this?

asasass · February 11, 2017, 6:23pm

Can someone show me how to do that?

asasass · February 11, 2017, 6:25pm

I don’t want text blocks, just text.

asasass · February 11, 2017, 6:34pm

Is this right?


  .bottomleft {
    position: absolute;
    bottom: -300px;
    left: 0.5em;
    
    font-weight: bold;
    color: #fff;
  }

</style>

</head>
<body>

<div class="outer">
    <p class="hr3">Text text text text<span></span></p>

<img src="https://i.imgur.com/BRJqTUw.png">

<div class="bottomleft">
<p>(text to appear at the bottom left of the image)</p>
</div>
</div>

</body>

ronpat · February 11, 2017, 10:01pm

I’ll bet they teach that very thing in an HTML and CSS class.

asasass · February 12, 2017, 1:12am

I decided on this code. Please let me know if I did anything wrong.

<style type="text/css"> 

.outer {
  max-width:466px;  /*476*/
  border:solid 5px #38761d;
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */
position: relative;
}

.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 50px;
  font-family: georgia;
  text-align: center;
  padding-bottom: 0px;
  margin-top:6px;
  margin-bottom: -9px;

}

.hr3 span {
  display: block;
  height: 5px;
  background-color: #15c;
  transform: rotate(-.9deg);
  margin-top: 2px;
  margin-left: 23px;
  margin-right: 24px;
}

img {
display: block;
padding-top:18px;
border-top: 5px solid #38761d;

margin-top: 27px;
}

  .topleft{
    position: absolute;
    top: 63px;
    left: 5px;
    font-size:24px;
    font-family:'Times New Roman';
    font-weight: bold;
    color:red;


  }

  .bottom {
    position: absolute;
    bottom: -33px;
    left: 120px;
    font-size:60px;
    font-family:'AR DELANEY';
    font-weight: ;
    color: 004693;
   

  }

  .topmiddle{
    position: absolute;
    top:  63px;
    left: 165px;
    font-family:'Times New Roman';
    font-weight: bold;
   font-size:24px;
color:01FF70;


  }

  .topright{
    position: absolute;
    top:  63px;
    right: 3px;
    font-family:'Times New Roman';
    font-weight: bold;
   font-size:24px;
color:orange;


  }

</style>

</head>
<body>

<div class="outer">
    <p class="hr3">text text text text<span></span></p>

<img src="https://i.imgur.com/BRJqTUw.png">
<div class="topleft">
<p>In Stock</p>
</div>


<div class="bottom">
<p>Get one before they're gone!</p>
</div>

<div class="topmiddle">
<p>$24.99</p>
</div>


<div class="topright">
<p>+ Free Shipping</p>
</div>


</div>

</body>
</html>

ronpat · February 12, 2017, 7:53am

“It doesn’t work” or maybe it’s working as designed.

It works even less at smartphone width.

asasass · February 12, 2017, 8:18am

I forgot I deleted the image.

asasass · February 12, 2017, 8:21am

Try again…

<style type="text/css"> 

.outer {
  max-width:466px;  /*476*/
  border:solid 5px #38761d;
  background-color: #000;
  margin: 0 auto;  /* top+bottom  left+right */
position: relative;
}

.hr3 {
  color: #38761d;
  font-style: normal;
  font-size: 50px;
  font-family: georgia;
  text-align: center;
  padding-bottom: 0px;
  margin-top:6px;
  margin-bottom: -9px;

}

.hr3 span {
  display: block;
  height: 5px;
  background-color: #15c;
  transform: rotate(-.9deg);
  margin-top: 2px;
  margin-left: 23px;
  margin-right: 24px;
}

img {
display: block;
padding-top:18px;
border-top: 5px solid #38761d;

margin-top: 27px;
}

  .topleft{
    position: absolute;
    top: 63px;
    left: 5px;
    font-size:24px;
    font-family:'Times New Roman';
    font-weight: bold;
    color:red;


  }

  .bottom {
    position: absolute;
    bottom: -33px;
    left: 120px;
    font-size:60px;
    font-family:'AR DELANEY';
    font-weight: ;
    color: 004693;
   

  }

  .topmiddle{
    position: absolute;
    top:  63px;
    left: 165px;
    font-family:'Times New Roman';
    font-weight: bold;
   font-size:24px;
color:#01FF70;


  }

  .topright{
    position: absolute;
    top:  63px;
    right: 3px;
    font-family:'Times New Roman';
    font-weight: bold;
   font-size:24px;
color:orange;


  }

</style>

</head>
<body>

<div class="outer">
    <p class="hr3">text text text text<span></span></p>

<img src="https://i.imgur.com/QtTVFS5.png">
<div class="topleft">
<p>In Stock</p>
</div>


<div class="bottom">
<p>Get one before they're gone!</p>
</div>

<div class="topmiddle">
<p>$24.99</p>
</div>


<div class="topright">
<p>+ Free Shipping</p>
</div>


</div>

</body>
</html>

TechnoBear · February 12, 2017, 10:43am

If you had done as I advised in this post and added the image dimensions to the HTML, then the layout would not have been quite as badly broken when the image failed to load.

asasass · February 12, 2017, 10:47am

true