Html Question posted in
Some basic documentation can be found here.

Html – How do I put an image next to a scrollbox, as well as put text on the top of the scrollbox like a title?

Apologies if I explained poorly, but to put it visually, this is what I’m trying to go for.

example

I’m not too skilled at html and css but I do have very basic knowledge of the sort, but I have run into complications trying to do this (starting over progress as of now)

This isn’t really a problem, more of just a general question as someone who’s not very experienced with coding from complete scratch.. I’m not really keen on spending another hour or two trying to do this on my own, especially adjusting it to be mobile friendly.

I don’t have much else to say other than I tried to do it on my own and gave up. Lol. Not really looking to fix this one, I really just want to start from scratch again.

sad attempt

Tags:

2

Answers


  1. 0

    Is it what you want
    enter image description here

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.center {
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.section {
  display: flex;
  align-items: center;
}

.image {
  width: 500px;
  height: auto;
}

.content {
  position: relative;
  left: -128px;
}

.title {
  text-align: end;
  font-weight: 600;
  font-size: 32px;
  margin-bottom: 4px;
}

.text-box__container {
  background-color: rgba(123, 16, 27, 0.937);
  border-radius: 8px;
  overflow: hidden;
}

.text-box {
  width: 500px;
  height: 250px;
  overflow-y: auto;
  padding: 16px;
  color: white;
  scrollbar-color: azure transparent;
}
    <div class="center">
  <div class="section">
    <img
      src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/1a54ce51-fcc2-4139-9b86-22af94daa4fd/dfl0hek-35b0ecd4-00e6-4858-aa3e-21ae2f8f9c80.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzFhNTRjZTUxLWZjYzItNDEzOS05Yjg2LTIyYWY5NGRhYTRmZFwvZGZsMGhlay0zNWIwZWNkNC0wMGU2LTQ4NTgtYWEzZS0yMWFlMmY4ZjljODAucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.4skjTUD9K-jf8NBnDGefHB52D4yRc8MnzkA-r4397aY"
      alt=""
      class="image"
    />
    <div class="content">
      <div class="title">big text here</div>
      <div class="text-box__container">
        <p class="text-box">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem illo labore et quisquam, sequi earum
          mollitia quod a tempora perferendis error similique quos quae necessitatibus saepe magni? A dolor culpa
          dolorem placeat incidunt sequi dolore fugiat voluptatum quaerat assumenda in nisi nihil natus odio
          dolorum, unde ipsa asperiores suscipit fuga? Eaque cumque dolore nisi repellat consequatur rem sapiente
          harum error odio, recusandae ipsam at hic, accusantium delectus sed. Vel consectetur debitis qui? Dolore
          tempora accusamus ipsum dignissimos quibusdam iure sit laborum laudantium aperiam excepturi ipsam cumque
          voluptate quidem praesentium, eaque natus cum reprehenderit velit numquam officiis sapiente dolor.
          Doloremque eaque quos quaerat nobis ab illo esse exercitationem officiis qui vero rem dolor est illum,
          libero vel expedita incidunt. Officia maiores dolore obcaecati modi, deleniti incidunt dicta ex, corrupti
          iste non qui fuga sit perspiciatis similique eum nemo aut accusantium culpa nesciunt cupiditate et.
          Fugiat, odit eligendi nostrum possimus nam tempora eum dolor similique repudiandae illo! Accusantium harum
          maxime sed laboriosam esse error sunt molestiae, repellendus ullam temporibus alias sint sapiente. Nemo
          voluptatem at suscipit labore.
        </p>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    In order to put elements behind other elements use z-index, to put elements on some specific position use top and left with position relative and for mobile responsive we use min-width.If you have any questions, please ask.

    .main {
        display: flex;
        justify-content: center;
        margin: auto;
        min-width: 700px;
      }
      .wrapper {
        display: flex;
        justify-content: flex-start;
        width: 750px;
        height: 700px;
        background-color: aliceblue;
        align-items: center;
        flex-direction: row;
        min-width: 750px;
      }
      .imgWrapper {
        display: block;
        position: relative;
        margin-left: 50px;
        left: 50px;
        z-index: 1;
        min-width: 350px;
      }
      .textBoxWrapper {
        display: block;
        position: relative;
        width: 350px;
        height: 300px;
        z-index: 5;
        top: 10px;
        left: -50px;
        overflow: hidden;
        min-width: 350px;

      }
      .imgWrapper img{
        width: 300px;
        height: 300px;
        overflow: hidden;
        border-radius: 5px;
      }
      .textBox {
        display: block;
        position: relative;
        width: fit-content;
        height: 240px;
        overflow-x: auto;
        background-color: bisque;
        border-radius: 5px;
      }
      .textBox p{
        padding: 20px;
        overflow-y: auto;
      }
      .bigText {
        display: block;
        position: relative;
        background-color: aqua;
        padding: 20px 40px;
        text-align: center;
        font-size: large;
        font-weight: bold;
        width: 120px;
        z-index: 10;
        top: 10px;
        left: 120px;
        border-radius: 5px;
      }
     <div class="main">
      <div class="wrapper">
        <div class="imgWrapper"><img src="https://picsum.photos/300" alt="" /></div>
        <div class="textBoxWrapper">
          <div class="bigText">big text here</div>
          <div class="textBox">
            <p>text box that scrolls here</p>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus perspiciatis doloribus ducimus repellat nulla, nostrum alias voluptatem amet quod iusto at exercitationem magni
              recusandae earum ab enim possimus libero veniam. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos cum incidunt voluptatibus temporibus asperiores. Odit consequatur
              pariatur ducimus mollitia, nihil incidunt eveniet doloribus. Qui officiis explicabo pariatur sapiente quasi voluptate. Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
              officiis veniam magnam facere est consectetur vero blanditiis vitae id odio reiciendis cumque, quibusdam officia nostrum at ratione deleniti odit assumenda?
            </p>
          </div>
        </div>
      </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search