Text inside a visual box

HTML-CSS
1

Hi guys,

If I want to place text inside a visual box (like the photo below - I’m asking as a general question for the future) is the text independent of the box? What’s the best way to do something like this?

The reason I ask is because I feel like I’m just guessing the (top right bottom left) of the text distances, especially if the box is off center.

So is this where relative/absolute come in?

I’m trying to wrap my head around it but ideally I’d want to have a block of text that can be centered inside of a visual box that may be off-center i.e imagine if the box in the photo was in the bottom right, would I use (bottom 20px, right 20px) for text or by having the text connected to the box I could use (merge: auto) to center the text in the box and not the body.

Thank you for reading my confusing question!

webstyle-textboxes-in-powerpoint

2

Hey @oocopperpot,

This is possible and in fact is basically what HTML is meant to do. It’s just as simple as nesting texts inside a container. Here’s an example:

<div class="container"> 
  I am a text inside a container
</div>

To make the layout like that, it would probably take 2 container nested inside a main container, and each container will use flexbox to align the items inside.

2 Likes
3

Also, if you make that image a background-image of the container in your CSS, you don’t need absolute positioning.

<div class="container">
  <div class="text-left>
    <ul>
      <li>Text</li>
      <li>Text</li> 
      <li>Text</li>
    </ul>
  </div>
  <div class="text-right">
    <ul>
      <li>Text</li>
      <li>Text</li> 
      <li>Text</li>
    </ul>
  </div>
</div>

.container {
  background-image: url('your-img-url.jpg');
}
2 Likes
4

Thank you! regarding ‘container’ is it just a name of a value or does this have attributes built into it?

I was reading Jon Duckett’s HTML/CSS and there was an example where he uses a div.box but I couldn’t see ‘box’ in the html. So is ‘box’ another one of these attributes like ‘container’?

Screenshot 2020-11-02 at 14.05.22
Screenshot 2020-11-02 at 14.05.221621×1693 225 KB

1 Like
5

Brilliant, thank you. Will practice this. Certainly beats trying to guess.

1 Like
6

The text shouldn’t be independent of the box. Its a simple design that can be achieved by a simple markup and some css.

1 Like
7

You can call it anything you like. If you’d like to call it “box”:

<div class="box"> ... </div>

Styling that particular div with class=“box” in CSS:

.box { 
   ...
}

/* alternatively: */

div.box { 
   ...
}

That example image you posted doesn’t make sense to me. The colours don’t match what read I in the CSS, and the div in the HTML has no class=“box” (which it needs to have, if you want to style it using the div.box selector).

1 Like
8

Thank you, doing some practice with it now.

9

That’s cleared it up, was hoping so as I thought I was missing something by not using “container” as if it had some inherit attribute.

The image is what confused when I was reading it, as above I thought ‘.box’ combined with a div magically gives an attribute even without the HTML class. But no, guessing just a mistake!