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

Html – Is there a way to set the options of an item according to its parent?

I need the red marker to be identical to the green marker in its width and height.

Note that the red marker displays on a blank space.

I want the RED MARKER to mark the paragraph which is on the right panel (panel-two).

I tried to make them width: 100% height: 100% so that it’ll get the attributes of its container – but that doesn’t help.

Thank you very much!

body {
  overflow-x: hidden;
}

.drag-container {
  display: flex;
  min-height: 100vh;
  overflow-x: hidden;
}

.panel-one {
  position: relative;
  width: 50%;
}

.panel-two {
  position: relative;
  flex: 1;
  width: 50%;
}

.m-aquamarine {
  background-color: aquamarine;
}

.m-red {
  display: inline-block;
  position: absolute;
  left: 50px;
  width: 100%;
  height: 100%;
  background-color: red;
  opacity: 0.3;
}
<body>
  <div class="drag-container">
    <div class="panel-one">
      <img src="https://i.sstatic.net/x80pyPiI.png" width="100%">
      <p>
        <span class="m-aquamarine">
          Hey Gustaf! Azng sjczv zncsn djfandz czns!!
        </span>
        <span class="m-red"></span>
        <span class="m-red"></span> Dzns kds fdskcznc eandz ncz!?!</p>
    </div>
    <div class="panel-two">
      <div class="container">
        <img src="https://i.sstatic.net/x80pyPiI.png" ; style="display: block; width: 100%;">
        <p>Hello there! Erkdfs dms djc zc dnacjzz csjdasc!!</p>
</body>
Tags:

3

Answers


  1. 0

    I can’t think of a way which will exactly replicate the shape and work well when the text is split over several lines.

    Here is an imperfect method which at least follows the shape of the text when it is over more than one line given here in the hope that it suggests a method which can be refined.

    * {
  margin: 0;
}
body{
  overflow-x:hidden ;
}
.drag-container {
  display: flex;
  min-height: 100vh;
  overflow-x:hidden ;
}

.panel-one {
  position: relative;
  width: 50%;
}

.panel-two {
  position: relative;
  flex: 1;
  width: 50%;
}

.m-aquamarine {
  background-color: aquamarine;
  text-shadow: 50vw 0 1em red, 50vw 0 1em red, 50vw 0 1em red;
}
.m-red {
  display: inline-block;
  position: absolute;
  left: 50px;
  display: none;

  width: 100%;
  height: 100%;

  background-color:red;
  opacity: 0.3;
}
    <body>
  <div class="drag-container">
    <div class="panel-one">
      <img src="https://i.sstatic.net/x80pyPiI.png" width="100%">

      <p>
        <span class="m-aquamarine">

          Hey Gustaf! Azng sjczv zncsn djfandz czns!!

        </span>
        <span class="m-red"></span>
      
      <span class="m-red"></span>
        Dzns kds fdskcznc eandz ncz!?!</p>
    </div>

    <div class="panel-two">
      <div class="container">

        <img src="https://i.sstatic.net/x80pyPiI.png" ; style="display: block; width: 100%;">

        <p>Hello there! Erkdfs dms djc zc dnacjzz csjdasc!!</p>
</body>
    Login or Signup to reply.
  2. 0

    Just change the HTML so the text you want to highlight is in the <span> element and remove everything except background-color from .m-red CSS styles:

    body{
  overflow-x:hidden ;
}
.drag-container {
  display: flex;
  min-height: 100vh;
  overflow-x:hidden ;
}

.panel-one {
  position: relative;
  width: 50%;
}

.panel-two {
  position: relative;
  flex: 1;
  width: 50%;
}

.m-aquamarine {
  background-color: aquamarine;
}

.m-red {
  background-color:red;
}
    <body>
  <div class="drag-container">
    <div class="panel-one">
      <img src="https://i.sstatic.net/x80pyPiI.png" width="100%">

      <p>
        <span class="m-aquamarine">

          Hey Gustaf! Azng sjczv zncsn djfandz czns!!

        </span>
      
        <span class="m-red">
        Dzns kds fdskcznc eandz ncz!?!
       </span>
      </p>
    </div>

    <div class="panel-two">
      <div class="container">

        <img src="https://i.sstatic.net/x80pyPiI.png" ; style="display: block; width: 100%;">

        <p>Hello there! Erkdfs dms djc zc dnacjzz csjdasc!!</p>
</body>
    Login or Signup to reply.
  3. 0

    I dont know if this is what you are looking for: i added a grid and displayed the pictures in the first row and the colored texts in row 3.

    I am not sure if you want the hello text in between both elements so i added an additional row to the grid. if that is not desired just delete that row from the grid and adjust the aside grid-area to be placed in row 2

    .container {
  display: grid;
  grid-template-rows: 350px auto end;
  grid-template-columns: 680px 600px;
}


/* placing the pictures in specific columns */

#picture_one {
  grid-area: 1 / 1 / 3 / 2;
  width: 100%;
  max-width: 680px;
}

#picture_two {
  grid-area: 1 / 2 / 3 / 3;
  width: 100%;
  max-width: 680px;
}

main {
  grid-area: 1 / 1 / 3 / 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}


/* If you get rid of the section change all the following first 3's to 2's 
and the 4's to 3's*/

aside {
  grid-area: 3 / 1 / 4 / 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.m-aquamarine {
  grid-area: 3 / 2 / 4 / 3;
  background-color: aquamarine;
  padding: 10px;
  max-width: 670px;
}

.m-red {
  grid-area: 3 / 1 / 4 / 2;
  background-color: red;
  padding: 10px;
  max-width: 670px;
}


/* Section to add your hello text in between the rows */

section {
  grid-area: 2/1/3/-1;
}
    <html>

<body>
  <div class="container">
    <main>
      <div id="picture_one">
        <img src="https://i.sstatic.net/x80pyPiI.png">
      </div>
      <div id="picture_two">
        <img src="https://i.sstatic.net/x80pyPiI.png">
      </div>
    </main>
    <aside>
      <section>
        <p>Hello there! Erkdfs dms djc zc dnacjzz csjdasc!!</p>
      </section>
      <span class="m-aquamarine">
          Hey Gustaf! Azng sjczv zncsn djfandz czns!!
        </span>
      <span class="m-red">
          Dzns kds fdskcznc eandz ncz!?!
        </span>
    </aside>
</body>

</html>

    Important!!
    Please note that the size of the columns in the grid and later in the color parts is just guessed based on the look. Please adjust it to match the real size of the Images!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search