Having trouble implementing the center edge effect in this CSS design

Looking for help with CSS to center the edges of a family tree design. Has anyone experience in working on styling family trees?

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.tree {
  margin-left: 100px;
  padding: 50px;
  font: 16px Verdana, sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

...

For more details and the original code setup, you can check out the JSFiddle link here: https://jsfiddle.net/fuj5bdyh/2/

Answer №1

There is potential for improvement, but what you have already done makes it easier to change the margin-top to half of the height in a negative direction:

For level 1 and level 2, use margin-top: -25px;

For level 3, use margin-top: -15px;

I chose not to use the snippet because it doesn't look identical: https://jsfiddle.net/blonfu/fuj5bdyh/4/

Answer №2

Take a look at this JSFiddle. Adjusted a few margin-top settings in the CSS.

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

Utilizing the code plugin in conjunction with Popcorn.js

I am currently exploring the world of Popcornjs and attempting to utilize the code plugin. However, I am facing some challenges in implementing it successfully. After following this example and managing to get the video to play, I found myself unable to e ...

"Enhancing JqGrid functionality with inline editing and custom formatters

I'm currently working with a column model that looks like this: { name: 'CostShare', index: 'CostShare', width: 50, formatter: 'number', formatoptions: { decimalPlaces: 2, suffix: "%" }, resizeable: true, align: 'ce ...

Is there a way to showcase individual components on a single surface one at a time?

Let me try to explain my issue as clearly as possible! I am currently working on a website using React and Material-UI. On one of my pages, I have a Paper component where I want to display different components that I have created, but only one at a time. ...

Mapbox struggling with performance because of an abundance of markers

I have successfully implemented a feature where interactive markers are added to the map and respond to clicks. However, I have noticed that the performance of the map is sluggish when dragging, resulting in a low frame rate. My setup involves using NextJ ...

"Exploring the world of digital art with JavaScript through canvas and canvas

How can I adjust the value of a canvas arc? The input accepts larger values, but not smaller ones. var btn = document.querySelector(".btn"); btn.addEventListener("click", () => { var inputVal = document.querySelector(&q ...

Error on the main thread in NativeScript Angular for Android has not been caught

As a beginner in the field of mobile development, I am currently exploring NativeScript and encountering an error in my Android application. https://i.stack.imgur.com/BxLqb.png You can view my package.json here ...

After refreshing the page, vuex is encountering null values when using firebase.auth().onAuthStateChanged

Encountering an issue with Vuex and Firebase Authentication integration. When reloading the page, there is a delay in response from firebase.auth().onAuthStateChanged. I require an immediate response upon page reload without using router guards as seen in ...

Using useEffect in React with an empty dependency array is a

The issue: I'm facing a challenge with managing the timer in my code. If I remove the dependency array from the useEffect, the timer keeps running endlessly. On the other hand, when I include a dependency array in the useEffect, the timer gets stuck a ...

Utilizing property validation in your codebase

How can I set up my code to display a warning in the console if the value of the Prop is not a string? The player-name prop should always be a string. If this: <greet :player-name="5"></greet> contains a number, I want my code below to generat ...

You have exceeded the maximum number of Facebook application requests allowed (#4)

My goal is to create a dynamic "social wall" on a website by pulling posts from a specific Facebook page using the Facebook API. Instead of utilizing any Facebook SDK, I am making cURL calls with the URLs directly. To fetch the posts, I rely on Javascript ...

Is it possible to preserve the query parameters from the previous page using Vue Router's Navigation guard feature?

Hey there! So, I'm looking to pass a query from the current page to the next one without manually coding it into all of my push functions. I was wondering if there's a way to do this through Navigation guard or some hooks? I did some research an ...

When attempting to load a page in Mozilla, the initial DIV code fails to load

When trying to load a page in Mozilla, the first DIV code is not loading. I attempted to load HTML inside using: <div id="mainContent"></div> with the following call: if (destinationURL != null) { $.get(destinationURL, function(data) { ...

jQuery AJAX Triggered Only Once in Callback Function

I am facing an issue with the jQuery get function within my updateMyApps. The function works fine when called directly after it is declared. It successfully loops through the data and appends elements to the DOM. However, when I submit the form #addapplic ...

Can you provide an example and explain the functions `getOptionSelected` and `getOptionLabel` in Material UI?

While going through the Mui Documentation, I came across the Autocomplete component section and found two interesting props: getOptionLabel and getOptionSelected. Although I read their definitions, I'm still struggling to grasp them fully. Can someone ...

Are there any negatives to turning off create-react-app's SKIP_PREFLIGHT_CHECK option?

After setting up my create-react-app project, I added eslint as a dev dependency. My reasons for doing this include: 1) Running eslint as a pre-commit check using husky and lint-staged 2) Extending CRA's eslint with airbnb and prettier lint configs ...

What is the best way to insert events into your Google Calendar directly from a website?

Looking for some help with integrating Google Calendar and adding event features to my HTML page. I've successfully embedded the calendar onto my website, but I'm struggling to add events directly from the webpage. Is there a way to make this fea ...

Generating a default template for an Angular ag-Grid cell with a custom field name - how to do it?

I am currently working with ag-grid and have specific templates for many columns. However, some of the data I am inputting into the table are just plain text. I want to enhance the default case: <ng-template #defaultRecord let-record> ADDITIONAL E ...

Switch the URL to render the view using Express 4

I am facing an issue with a post request where the views are rendering to /link/123 instead of /anotherlink. Although I could use res.redirect('/anotherlink'), I need to render different data. app.post('/link/:id',function (req, res, n ...

When it comes to using brackets and HTML, I keep receiving an error message indicating that there is no index file

I'm having trouble with this code - it works fine in Code Academy, but I am new to HTML and trying to practice outside of the platform. Every time I try to live preview in Brackets, I get an error message saying "make sure there is an html file or tha ...

There is zero gutter in Bootstrap

Is it possible to use the bootstrap grid system without any gutters? I want to have 3 columns in one row like this: http://prntscr.com/6gpmhm. I have shared the markup for the CSS I am using, which is the default CSS of the framework. <section class ...