CODEWITHSUNDEEP
htmlcss
user153923
user153923

Reputation:

CSS to place picture box in my dialog box

I'm trying to create a message box with a square image on the left of the dialog box. I'll get close by trying different examples online, then try something else and my efforts start to fall apart because I just can't get a good feel for this.

The only way I can think to do this is with a table, but it seems like nobody uses tables anymore for things like this. Are <DIV> tags the best choice? <SPAN>?

<div class="alert" id="sfAlert">
  <div class="picturebox"></div>
  <div class="messagebox">
    <span class="button" id="sfClose">&times;</span>
    <h2><div class="messagetext" id="sfMsg1">Intro Text 1</div></h2>
    <div class="messagetext" id="sfMsg2">Intro Text 2</div><hr/>
    <small><div class="messagetext" id="sfMsg3">Intro Text 2</div></small>
  </div>

It would also be nice to find a way to specify that whatever is the container for the top message sfMsg1 should be in Large, Bold characters. I've done this by wrapping the <div> tag with the <h2> element, but I don't know if that is the recommended technique.

https://jsfiddle.net/jp2code/sjvmkf9n/23/

Upvotes: 0

Views: 519

Answers (1)

Raul Sauco
Raul Sauco

Reputation: 2705

You can place an image multiple ways, if you do not care about its relation with its siblings, one way would be to use position: absolute.

When you use position: absolute the element will be positioned in relation with its closest positioned ancestor MDN ref, it seems like you want the image to be near the top-left corner of the alert, so I gave that element a position: relative attribute.

To have bigger, bold, font on the header, you can use font-size and font-weight.

#sfAlert {
  position: relative;
  background: #ccc;
  margin: 30px;
}

.picturebox {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  background-color: red;
  background-image: url('https://www.w3schools.com/images/colorpicker.gif');
  background-size: contain;
}

#sfMsg1 {
  font-size: 2em;
  font-weight: bold;
  padding-left: 2em;
}

#small-message-text {
  font-size: 0.85em;
}
<div class="alert" id="sfAlert">
  <div class="picturebox"></div>
  <div class="messagebox">
    <span class="button" id="sfClose">&times;</span>
    <div class="messagetext" id="sfMsg1">Intro Text 1</div>
    <div class="messagetext" id="sfMsg2">Intro Text 2</div>
    <hr/>
    <small><div class="messagetext" id="sfMsg3">Intro Text 2</div></small>
    <div id="small-message-text">Intro Text 2</div>
  </div>
</div>

Upvotes: 1

Related Questions