SASS - centering timeline content vertically

I am a beginner in frontend development and I am currently using sass. I have created a custom timeline, but I need assistance in properly aligning the location with the year and timeline marker. Additionally, I would like to position the image description to the right side of the image.

Here is the link to my jsfiddle:

https://jsfiddle.net/g99Lmsaz/

Below is my sass code:

$purple: #AF80ED;
        $gray: #f2f2f2;
        $white: #ffffff;
        $timeline-gray: #dddddd;

        .event {
            background: $purple;
            display: table;
            width: 100%;
            margin: 0 auto;
        }

        .event-2 {
            background: $gray;
            display: table;
            width: 100%;
        }

        time {
            /*float: left;
            position: absolute;
            top: 40%;*/
            display: table-cell;
            width: auto;
            text-align: center;
            vertical-align: middle;
            width: 25%;
        }

        .timeline ul li {
          list-style-type: none;
          position: relative;
          width: 6px;
          /*left: 10%;
          margin: 0 auto;*/
          padding: 10px 0 10px 0;
          background: $timeline-gray;

          .content {
            position: relative;
            left: 20px;
            max-width: 700px;
            top: calc(100% / 2 - 10px);

            img{
                border-radius: 50%;
                height: 20px;
                width: 20px;    
            }

          }
        }

        .timeline ul li::after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          width: 15px;
          height: 15px;
          border: 4px solid $timeline-gray;
          border-radius: 50%;
          background: $white;
          top: calc(100% / 2 - 10px);
        }

The HTML code:

<section class="timeline">
                  <ul>
                    <div class='event'>
                        <time>1934</time>
                        <li>
                          <div class='content'>
                                <p>
                                Paris
                                </p>

                                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Tour_Eiffel_Wikimedia_Commons_%28cropped%29.jpg/240px-Tour_Eiffel_Wikimedia_Commons_%28cropped%29.jpg" >

                                <p> 
                                    Eiffel Tower
                                </p>

                          </div>
                        </li>
                    </div>
                    <div class='event-2'>
                        <time>1934</time>
                        <li>
                          <div class='content'>
                            <p>
                                asdsadsadsadsad
                            </p>
                          </div>
                        </li>
                    </div>
                  </ul>
                </section>

Answer №1

The structure of your HTML needs some adjustments. Avoid placing a div directly within a ul tag.

Remember that the ul tag should contain li elements inside, and then you can add any content within those li elements.

I made a few modifications to your code. It's recommended to use pseudo-elements on the time tag instead of the li tag.

Check out the updated jsfiddle here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The toLowerCase method seems to be malfunctioning along with several other functions

JS var score = 0 var yes = "yes" var pokemonName = []; var bg = []; var index = 0; document.getElementById('repete').style.visibility = 'hidden'; (function asyncLoop() { background = bg[num = Math.floor(Math.random() ...

Tips for creating a dropdown that autocompletes similar to the one found in Google Chrome

Looking to create a unique custom drop-down autocomplete suggestion list using HTML and CSS, similar to Chrome's design (shown below). https://i.sstatic.net/Kia2N.png In my attempts to achieve this, I utilized an absolutely positioned table beneath ...

Use JQuery to reverse the most recent button click

Here is the code snippet I am working with: <button class="btn">New York</button> <button class="btn">Amsterdam</button> <button class="btn">New Jersey</button> <button class="btn&qu ...

Organizing information in local storage using an array and converting it to a string

After storing user inputs (Worker's name, Car Vin, Start time and End time) in the local storage, you want to sort the employees' names in alphabetical order. The question is where should the code be placed and how should it be written? // Car C ...

Customizing your Sharepoint Web part with unique text properties

When a user inputs custom text in a web part property, it will be shown on a form. Here is the code for the web part property located in the testTextWebPart.ascx.cs file: public partial class testTextWebPart: WebPart { private string _customtxt; [We ...

What is the most effective way to retrieve the count of users who have logged in within the past three months by utilizing Jquery

I am seeking to retrieve the count of users who have logged in the last three months utilizing a JSON API and Jquery. This is my current progress: $.getJSON('users.json', function(data) { var numberOfUserLogged = 0; var d1 = ...

Is it possible to generate a triangular attachment below a div element?

My designer sent me a unique design and I'm wondering if it's possible to replicate using HTML, CSS, or JavaScript? https://i.stack.imgur.com/spB71.png I believe it can be done with CSS by creating a separate div positioned absolutely under the ...

Interactive jQuery Dropdown Menu with Multiple Divs

I have been working on this and I'm almost there, but the jQuery part is driving me crazy (I'm not very proficient in it yet, but I am learning). Here's the link to the fiddle: http://jsfiddle.net/5CRA5/4/ Since I can't demonstrate th ...

Can a CSS hover effect transition modify the color scheme?

I have multiple buttons on a single page, and I want the hover effect to be applied to all of them with just one code using jQuery. Please review my code below. $(document).ready(function(){ $('.button').hover(function(){ var bc=$(this ...

Is it possible to include numbers and commas in JQuery Validation?

I have implemented a jQuery validation plugin to validate the fields of a form. One specific requirement is to validate a field to only allow commas and numbers. Below is the HTML code snippet: <input type="text" placeholder="Number of Employees" requ ...

I am struggling to make my Bootstrap 5 Navbar transparent. Can anyone help me figure this out?

I've been struggling with my Bootstrap Navbar, which appears as white no matter what I do. I've tried numerous solutions from Stack Overflow to make it transparent without any luck. Even after setting the background to transparent and ensuring t ...

How can I automatically direct my NodeJS application to the login screen?

Here is the setup of my project structure: There is a simple folder called static, within which I have: index.html (the homepage for user registration) login.html (the login page) In the parent folder, there is a file named server.js: // NodeJS code for ...

Verify role declarations and display components if valid

I am currently developing an application using Angular on the front-end and ASP.NET on the back-end. Within this application, there are two roles: user and admin. I have implemented a navigation bar with several buttons that I need to hide based on the use ...

How to incorporate text into the white circle object using three.js

View the current state of my project on this JS Fiddle. I am looking to incorporate rotating text, whether in 3D or 2D. The text should rotate in sync with the white circle. I am open to any method that achieves the desired outcome. Below is the provided c ...

Ensure two CSS components occupy the entirety of their container, positioned next to each other, with margin spaces between

I am looking to make two elements take up a precise percentage of the parent's width, while also including margins between them. Here is my current setup: <div class='wrap'> <div class='element'>HELLO</div>< ...

The front end button stubbornly refuses to comply and redirect to another page

I am having trouble getting my button element to redirect my page to another page. I have tried using an onclick function inside the button tag with window.location.href, as well as creating a separate function for the redirect, but nothing seems to be wor ...

Unable to transition slides in AngularJS on Safari iOS 9 due to malfunctions

Having some CSS classes that smoothly slide my ng-view left and right during route change, everything was working well on most browsers and phones until now. Under ios 9, the animation is not functioning properly. Instead of sliding left to right, the view ...

What is the best way to transfer information from JavaScript to a JSON database using the fetch API?

Within the userDB.json file, it appears as follows; [{ "username": "john", "xp": 5 }, { "username": "jane", "xp": 0 } ] Inside the app.js file ; async function getUsers() { le ...

Creating a Dynamic Canvas Rendered to Fit Image Dimensions

I'm struggling with a piece of code that creates an SVG and then displays it on a canvas. Here is the Jsbin Link for reference: https://jsbin.com/lehajubihu/1/edit?html,output <!DOCTYPE html> <html> <head> <meta charset=&qu ...

What is the best way to achieve this particular grid layout using html and css?

I have a CSS grid of icons and I am trying to create a divider between each cell that fades in opacity towards the edges, similar to an airbrush effect. However, I want the cells themselves to remain transparent so that the background pattern is still visi ...