# PLs help... Html and CSS problem...

**URL:** <https://forum.kirupa.com/t/pls-help-html-and-css-problem/638189>\
**Category:** web dev\
**Created:** [May 8, 2018, 4:59am UTC](https://forum.kirupa.com/t/pls-help-html-and-css-problem/638189 "2018-05-08T04:59:04Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![hao](https://avatars.discourse-cdn.com/v4/letter/h/ea5d25/32.png) [@hao](https://forum.kirupa.com/u/hao)\
**Post date:** [May 8, 2018, 4:59am UTC](https://forum.kirupa.com/t/pls-help-html-and-css-problem/638189/1 "2018-05-08T04:59:04Z")

</div>

i create a dashboard and i opacity it… I don’t wan my word have opacity effect how to do it… pls help

#### Dashboard

---

<div class="post-metadata">

**Author:** ![JohnHansenArtist](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/johnhansenartist/32/8958_2.png) [@JohnHansenArtist](https://forum.kirupa.com/u/JohnHansenArtist)\
**Post date:** [May 8, 2018, 4:27pm UTC](https://forum.kirupa.com/t/pls-help-html-and-css-problem/638189/2 "2018-05-08T16:27:18Z")

</div>

Dashboard **position: relative** , overlay with text content **position: absolute**. Do not nest the overlay within the Dashboard element. You can also do the opposite and use **z-index** to lower the Dashboard. If using positioning is not working with your layout then try out **display: grid** to build your containing areas.

---

<div class="post-metadata">

**Author:** ![hao](https://avatars.discourse-cdn.com/v4/letter/h/ea5d25/32.png) [@hao](https://forum.kirupa.com/u/hao)\
**Post date:** [May 14, 2018, 2:22am UTC](https://forum.kirupa.com/t/pls-help-html-and-css-problem/638189/3 "2018-05-14T02:22:09Z")

</div>

got example or code to show? because i’m still a newbies … pls

---

<div class="post-metadata">

**Author:** ![JohnHansenArtist](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/johnhansenartist/32/8958_2.png) [@JohnHansenArtist](https://forum.kirupa.com/u/JohnHansenArtist)\
**Post date:** [May 14, 2018, 2:45pm UTC](https://forum.kirupa.com/t/pls-help-html-and-css-problem/638189/4 "2018-05-14T14:45:36Z")

</div>

Paste the following code into an html file you create. With the developer inspector tools in your browser you can see that all three ‘dashboard’ areas have all their content set by css opacity. The first one is what you may have experienced as you set up your html. All children of a parent element will be affected by the parent’s opacity. The 2nd uses css position properties, and the 3rd uses css grid layout. The text is not a child of the transparent div though with css the position can be controlled. Hope this helps 🙂

```
  * {box-sizing: border-box;}
  body {
    padding: 24px;
    text-align: center;
    color: black;
    font-family: sans-serif;
    font-size: 30px;
    font-weight: bold;
  }
  h4, p {
    margin-top: 0
  }
  .box {
    background-color: green;
    height: 165px;
    width: 165px;
    margin: 0 auto;}
  p {
    width: 165px;
  }
  .dashboard {
    border: 2px solid;
    opacity: 0.25;
    height: 250px;
    width:100%;
    padding: 24px;
    background-color: orange;
  }
  .position-rel {
    position: relative;
  }
  .position-absol {
    position: absolute;
    margin: 0 auto;
    top: 24px;
    left: calc(50% - 82.5px);
  }
  .the-grid {
    display: grid;
    grid-template-columns: 1fr 165px 1fr;
    grid-template-rows: 30px 250px;
  }
  .grid-dash {
    grid-column: 1 / -1;
    grid-row: 1 / 2
  }
  .grid-p {
    grid-column: 2;
    grid-row: 2;
  }

<body>
  <h4>Opacity and position</h4>
  <div class="dashboard">
    <div class="box">
      <p>
        Dashboard One
      </p>
    </div>
  </div>
  <div class="position-rel">
    <div class="dashboard">
      <div class="box">
      </div>
    </div>
    <p class="position-absol">
      Dashboard Two
    </p>
  </div>
  <div class=" the-grid">
    <div class="dashboard grid-dash">
      <div class="box">
      </div>
    </div>
    <p class="grid-p">
      Dashboard Three
    </p>
  </div>
</body>
```

---

<div class="post-metadata">

**Author:** ![hao](https://avatars.discourse-cdn.com/v4/letter/h/ea5d25/32.png) [@hao](https://forum.kirupa.com/u/hao)\
**Post date:** [May 15, 2018, 2:27am UTC](https://forum.kirupa.com/t/pls-help-html-and-css-problem/638189/5 "2018-05-15T02:27:32Z")

</div>

thx you:star\_struck: really help me a lot