CODEWITHSUNDEEP
htmlcssposition
Jonas
Jonas

Reputation: 111

Positioning with CSS Grid

The green line should be drawn threw until the bottom as a timeline. The length is calculated by each sections of unique cssgrid height in JavaScript. All entries look absolutely the same by codebase, but for any reason only the topmost is displayed. I've tried to play around with position: absolute and position: relative for both the content and the green line, but it didn't work.

Is there something hidden or above the other?

#cssgrid {
  display: grid;
  grid-template-columns: 50px auto;
  grid-template-rows: 60px 40xp auto;
  grid-template-areas: "b h" "b t" "b d";
}
<div>
  <div id="line" style="position: absolute;"></div>
  <div id="cssgrid">
    <div id="grid-bulletpoint">
      <div class="bulletpoint"></div>
    </div>
    <div id="grid-headline">
      <h2>...</h2>
    </div>
    <div id="grid-time">
      <p>...</p>
    </div>
    <div id="grid-description">
      <p>...</p>
    </div>
  </div>
</div>

Screenshot: false positioning

Upvotes: 1

Views: 44

Answers (2)

jlgarcia
jlgarcia

Reputation: 26

You may organize differently your grid. See the Timeline Grid here This is the beauty of CSS Grid in my opinion. Check this code: (At the end I added the code for the svg if you want to use it too)

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <title>Grid CSS Timelin</title>
    <style>
        #thetime {
            display: grid;
            grid-template-columns: 50px 1fr;
            grid-template-rows: 1fr 1fr 1fr;
        }

        #timeline {
            background-color: rgba(193, 240, 104, 0.36);
            border: 1px solid #0031ff;
            justify-self: center;
        }

        .timebar  {
            width: 10px;
            height: 100%;
            color: transparent;
            background-color: #00ff1d;
        }

        ul {
            list-style: none;

            justify-self: start;
            margin-left: 0;
            padding: 0;
        }
        li {
            background-color: rgba(141, 240, 240, 0.36);
            border: 1px solid #ff00ff;
            margin: 1.5 rem 0;
            position: relative;
        }

        li:before {
            content: " ";
            background-size: cover;
            background-image: url("/circle2.svg");
            width: 1.5rem;
            height: 1.5rem;
            position: absolute;
            left: -2.3rem;
            margin-top: 1.25rem;
        }

        h2 {

        }

        time {
        font-family: monospace;
        }

        p {

        }

    </style>
</head>

<body>
    <section id="thetime">
        <div id="timeline">
            <div class="timebar">X</div>
        </div>
           <ul>
            <li>
                <h2>
                    Entry #1
                </h2>
                <time>
                    01.01.1900 - 31.12.1900
                </time>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aperiam praesentium totam nihil, molestiae officiis reiciendis voluptatum numquam! Ab inventore quos repudiandae, accusamus quibusdam blanditiis facere optio asperiores aliquam consectetur.
                </p>

            </li>

            <li>
                <h2>
                    Entry #2
                </h2>
                <time>
                    01.01.1900 - 31.12.1900
                </time>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aperiam praesentium totam nihil, molestiae officiis reiciendis voluptatum numquam! Ab inventore quos repudiandae, accusamus quibusdam blanditiis facere optio asperiores aliquam consectetur.
                </p>

            </li>

            <li>
                <h2>
                    Entry #3
                </h2>
                <time>
                    01.01.1900 - 31.12.1900
                </time>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aperiam praesentium totam nihil, molestiae officiis reiciendis voluptatum numquam! Ab inventore quos repudiandae, accusamus quibusdam blanditiis facere optio asperiores aliquam consectetur.
                </p>

            </li>

            <li>
                <h2>
                    Entry #4
                </h2>
                <time>
                    01.01.1900 - 31.12.1900
                </time>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aperiam praesentium totam nihil, molestiae officiis reiciendis voluptatum numquam! Ab inventore quos repudiandae, accusamus quibusdam blanditiis facere optio asperiores aliquam consectetur.
                </p>

            </li>
        </ul>


    </section>

</body>

</html>


    <?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FFFF00;}
</style>
<circle class="st0" cx="10" cy="10" r="10"/>
</svg>

Upvotes: 0

MistaPrime
MistaPrime

Reputation: 1677

You can use the pseudo class :before to add the dot by making it position:absolute. 

#cssgrid {
  margin-left: 100px;
}

.boxContainer {
  border-left: 5px solid green;
  padding-left: 37px;
  margin-bottom: -20px;
  padding-top: 20px;
}

.grid-headline {
  position: relative;
}

.grid-headline:before {
  content: ' ';
  width: 20px;
  height: 20px;
  background: orange;
  position: absolute;
  left: -50px;
  top: 0;
  border-radius: 50%;
}

#grid-description p {
  margin-bottom: 0;
}
<div id="cssgrid">
  <div class="boxContainer">
    <div class="grid-headline">
      <h2>Entry</h2>
    </div>
    <div id="grid-time">
      <p>1989</p>
    </div>
    <div id="grid-description">
      <p>Lorem ipsum text...</p>
    </div>
  </div>
  <div class="boxContainer">
    <div class="grid-headline">
      <h2>Entry</h2>
    </div>
    <div id="grid-time">
      <p>1989</p>
    </div>
    <div id="grid-description">
      <p>Lorem ipsum text...</p>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions