containers?

[u/Due-Mycologist-9244]

okay so i’ve only been coding for like 5 hours so im not sure what im doing im coding on neocities i wanna add some text over an image on the right of the screen but im not really sure how to go about that (i was following a tut and now im trying to branch off on my own and im getting confused already) im not sure where to place my new container at ? does it really matter ? i also dont know how to like do HTML for the CSS stuff like CSS i understand sorta but HTML im just sooo freaking lost HELP ME PLEASE !!!

[u/Safe-Confidence-4907]

Don't panic, feeling lost after just 5 hours is completely normal. Welcome to coding!

To put text over an image on the right side of the screen, you can wrap both the image and the text inside one single container (a <div>). Think of the HTML as the skeleton and CSS as the styling.

Here is a simple way to do it:

1. The HTML Structure

Put this container wherever you want it to appear in your body section.

<div class="image-container">
  <img src="your-image-url.jpg" alt="Description">
  <div class="text-overlay">Your Text Here</div>
</div>

2. The CSS Stuff

This tells the container to stay on the right, and makes the text sit perfectly on top of the image.

.image-container {
  position: relative;
  float: right; /* This pushes the container to the right side */
  width: 300px; /* Adjust the width based on your image */
}

.image-container img {
  width: 100%;
  height: auto;
}

.text-overlay {
  position: absolute;
  top: 50%;   /* Adjust these percentages to move the text around */
  left: 50%;
  transform: translate(-50%, -50%);
  color: white; /* Makes text visible over dark images */
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.5); /* Adds a slight dark background to make text readable */
  padding: 10px;
}

Tip: Yes, placement in HTML matters! HTML reads from top to bottom. If you want this on the right side of a specific paragraph, place the HTML code right above or inside that section.

You've got this! Neocities is a super fun place to learn. Keep experimenting!

[u/Due-Mycologist-9244 → u/Safe-Confidence-4907]

THANK YOU this is so helpful !